忍者ブログ

[PR]

2017年10月20日
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

iPhoneアプリケーション用のアイコンファイルをHTML5で作ってみた

2010年02月04日
iPhoneアプリ開発中に早い段階でアイコンを作っておくと、ホーム画面が白いのっぺらぼうで埋め尽くされる…という心配がなくなります。アイコンを作る時に、同時にiTunes Connectでアップロードする時に必要なアートワークまで作れたら便利かと思い、アイコン製作用の簡易ツールをHTML5(+javascript)で作ってみました。ブラウザでファイルを表示すると、512×512のjpeg画像と57×57のpng画像が表示されます。以下はブラウザに表示させたときのスクリーンショットです。

sample.jpg







ブラウザ上から画像を保存することでファイルが得られます。得られた画像は以下のようになります。

bigicon.jpgsmallicon.png









ソースはこのような感じになります。

 

<!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>HTML5CanvasiPhoneアプリのアイコン作製</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, Operajpegの透明色部分が黒くなることなどへの対策

                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>HTML5CanvasiPhoneアプリのアイコン作製</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をInternet Explorer 8などで表示することができます。(現在の最新版はRelease 3。ライセンスはApache License 2.0なので、原文のまま使用するなら商用、非商用問わず利用可能です。)ただし、円形グラデーションなど一部の機能はサポートされていません。インターネット上のサイトにhtml形式で公開する場合はこのようなものを組み込んで対応すべきなのでしょうけれど、ローカルでは別のブラウザにドラッグ&ドロップするだけなので不要でしょう。ブラウザはInternet Explorer以外は死んでも使いたくないという人がiPhoneアプリケーションの開発をするとは思えませんからね。
PR
Comment
  Vodafone絵文字 i-mode絵文字 Ezweb絵文字
Trackback
トラックバックURL: