[PR]
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
iPhoneアプリケーション用のアイコンファイルをHTML5で作ってみた
ブラウザ上から画像を保存することでファイルが得られます。得られた画像は以下のようになります。
ソースはこのような感じになります。
<!doctype html>
<html>
<head>
<meta name="Author" content="Konton (http://kontonsoft.blog.shinobi.jp/)">
<meta http-equiv="Content-Language" content="ja">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML5のCanvasでiPhoneアプリのアイコン作製</title>
<script type="text/javascript">
function draw() {
var canvas = document.getElementById('canvas_for_jpeg');
var context = canvas.getContext('2d');
drawCanvas(1, context);
var img_jpg_src = canvas.toDataURL("image/jpeg");
document.getElementById("icon_jpeg").src = img_jpg_src;
var canvas2 = document.getElementById('canvas_for_png');
var context2 = canvas2.getContext('2d');
drawCanvas(2, context2);
var img_png_src = canvas2.toDataURL();
document.getElementById("icon_png").src = img_png_src;
}
function drawCanvas(mode, ctx) {
// 以下でキャンバスに描画
if (mode == 2) {
ctx.scale(57 / 512, 57 / 512); // 小さいアイコンの描画では縮小を行います
}
// Firefox, Operaでjpegの透明色部分が黒くなることなどへの対策
ctx.fillStyle = "white";
ctx.fillRect(0, 0, 512, 512); // canvas全体を白で塗りつぶします
// 実際の描画開始
ctx.lineWidth = 20; // 枠線の太さ設定を20ピクセルにします
// 枠線の色設定を赤色にします
ctx.strokeStyle = "red";
// (64,64)を始点として幅、高さとも256ピクセルの矩形を描画
ctx.strokeRect(64, 64, 256, 256);
// 枠線の色設定を緑色にします
ctx.strokeStyle = "green";
// (128,128)を始点として幅、高さとも256ピクセルの矩形を描画
ctx.strokeRect(128, 128, 256, 256);
// 枠線の色設定を青色にします
ctx.strokeStyle = "blue";
// (196,196)を始点として幅、高さとも256ピクセルの矩形を描画
ctx.strokeRect(196, 196, 256, 256);
// ここまでで描画終了
}
</script>
<style type="text/css">
canvas { border: 1px solid black; }
</style>
</head>
<body onload="draw();">
<h1>HTML5のCanvasでiPhoneアプリのアイコン作製</h1>
<h2>大きいアイコン(枠無しがjpeg画像)</h2>
<img id="icon_jpeg" src="" alt="アイコン用画像(大)" width="512" height="512">
<canvas id="canvas_for_jpeg" width="512" height="512"></canvas>
<h2>小さいアイコン(枠無しがpng画像)</h2>
<img id="icon_png" src="" alt="アイコン用画像(小)" width="57" height="57">
<canvas id="canvas_for_png" width="57" height="57"></canvas>
</body>
</html>
ソース内の「// 実際の描画開始」の行から「// ここまでで描画終了」の行の間にあるキャンバスへの描画コードをテキストエディタで入れ替えるだけで、大小2個の画像が得られるのでそこそこ有用なのではないでしょうか。描画用のスプリクトは大きいほうの512×512のサイズがあるものとして作ります。小さいほうにはそれが自動的に縮小されて表示されます。Internet Explorer以外の代表的なブラウザの最新版(Safari4.0.4、Firefox3.6、Google Chrome4.0、Opera10.10)で正常に動作することを確認しています。
2010.02.05追記：
Internet ExplorerではExplorerCanvasに含まれるexcanvas.jsを組み込めばcanvasをIｎternet Explorer 8などで表示することができます。(現在の最新版はRelease 3。ライセンスはApache License 2.0なので、原文のまま使用するなら商用、非商用問わず利用可能です。)ただし、円形グラデーションなど一部の機能はサポートされていません。インターネット上のサイトにhtml形式で公開する場合はこのようなものを組み込んで対応すべきなのでしょうけれど、ローカルでは別のブラウザにドラッグ＆ドロップするだけなので不要でしょう。ブラウザはInternet Explorer以外は死んでも使いたくないという人がiPhoneアプリケーションの開発をするとは思えませんからね。
