《HTMLページをブラウザからアプリにスイッチする》
![](https://img-proxy.blog-video.jp/images?url=http%3A%2F%2Fjp.smatoos.com%2Ffiles%2F2013%2F02%2Fhtml5deiOs_01.jpg)
iPad / iPhone で、複雑なゲーム・アプリなどを開発するためには、Objective-C や iOS SDK といったプログラミングに関する知識が必要ですが、シンプルなアプリであれば、HTML5を使って、作る事が可能です。
まずは、HTML+CSS3を使って、WEBページを応用したアプリ「WEBアプリ」を使って、絵本のような仕組みを作りたいと思います。
《WEBアプリ制作のための環境を整える》
「HTML5で簡単クリエイト」は、複数回に分けて進行していく予定です。各回ともに、できるだけ簡単な方法を紹介します。
今回は作業環境の設定を行なってみましょう。
HTML5+CSS3を記述するためには、一般のテキストエディタでも十分なのですが、完成したページやアプリを閲覧するためには工夫が必要です。
- パソコンをローカルサーバをインストール、iPad / iPhone からアクセスする
- レンタルサーバなどを借りて、ファイルをアップロード。その後で、インターネット経由でアクセスする
- iPad / iPhone の「ふり(モノマネ)」をするソフトを使って画面を確認する
【HTMLエディタ「WebMatrix 2」】
![](https://img-proxy.blog-video.jp/images?url=http%3A%2F%2Fjp.smatoos.com%2Ffiles%2F2013%2F02%2Fhtml5deiOs_02.jpg)
マイクロソフト社がフリーで配布しているHTMLエディタ(HTMLを書くソフト)です。
上記の図版のように、書いたページを iPad / iPhone を使った時と同じように表示してくれます。
[WebMatrix 2]
http://www.microsoft.com/web/webmatrix/
このソフトを導入すると、MySQLなども同時にインストールされ、CMS「Wordpress」などのテストをローカルPCで行うことができます。
つまりは、外部サーバをレンタルしなくても、「Wordpress」を自分のパソコンにインストールしてテストできるということです。
次に見るのは、 iPad / iPhone のエミュレートだけに絞りこんだソフトです。
【 [ iBBDemo3 ] (右) / [ Mobilizer ] (左) 】
![](https://img-proxy.blog-video.jp/images?url=http%3A%2F%2Fjp.smatoos.com%2Ffiles%2F2013%2F02%2Fhtml5deiOs_03.jpg)
両方とも、基本的な日本語の表示は問題ないですが、一部で表示がおかしくなるなどの報告もありました。
またメニューなども翻訳されていません。動作も少し重たい感じがします。
[iBBDemo3]
http://code.google.com/p/ibbdemo3/
[Mobilizer]
http://www.springbox.com/mobilizer/
「iBBDemo3」「Mobilizer」ともに、アドビ社の「Adobe AIR」という仕組みを使いますので、
そちらもインストールしておく必要があります。
http://get.adobe.com/jp/air/
【追記】ローカルサーバのインストールについて
「WebMatrix 2」では、MicrosoftのWebサーバ「IIS」が採用されています。
レンタルサーバを借りた場合は、借りているサーバ側と環境を合わせたい時もあるでしょう。その際にWebサーバで標準的に使われている「Apache」を利用する方が良いケースもあるかもしれません。
ローカルサーバには、以下のツールもあるのでチェックしてみてください。
Windowsなら「XAMPP」http://www.apachefriends.org/jp/xampp-windows.html
Macなら「MAMP」http://www.mamp.info/en/index.html
《HTML5の記述とアイコンの設定》
ツールを使って iOS をエミュレートすることができました。
シンプルなページを表示して、そのアイコンを [ ホーム ] 画面に登録してみましょう。
まずは、HTML5の標準的なテンプレートから ↓ 見ていきます。
以上のコードをテキストファイル(文字コード"utf-8")で保存して、ブラウザやiPhoneエミュレータで表示させてみてください。
「見出し」
「本文」
という文書が表示されたと思います。
ページにアイコンを登録してみます。
アイコンの画像ファイル名は "apple-touch-icon.png" / 画像サイズは129x129ぐらいが適当です。
![](https://img-proxy.blog-video.jp/images?url=http%3A%2F%2Fjp.smatoos.com%2Ffiles%2F2013%2F02%2Fapple-touch-icon.jpg)
以上のような単純な正方形の画像ですが、アイコンとして読み込ませるとiOS側が勝手にデザインしなおしてくれます。
[head]タグの中に、以下のコードを追加します。
iPhone / iPad の Safaiでページを表示させて、「ホーム画面に追加」アイコンをタップすると、先ほどの正方形の画像がURLとリンクされて、ホーム画面に登録されます。
【メニュー画面にページのアイコンが登録された】
![](https://img-proxy.blog-video.jp/images?url=http%3A%2F%2Fjp.smatoos.com%2Ffiles%2F2013%2F02%2Fhtml5deiOs_04.jpg)
実際にはURLのリンクボタンなのですが、ここから徐々にアプリっぽいことをしていきましょう。
《まとめ》
次回は
【何といっても「絵」が大事 [画像処理]】
と題して、画像処理を行なっていきます。
スマートフォンに合わせて、画像を最適化する方法や,ブラウザを意識させず、アプリのようにHTMLファイルを処理する方法を見ていきたいと思います。