HTML5で簡単クリエイト、iOSのためのWEBアプリ

《WEBアプリ制作のための環境を整える》

「HTML5で簡単クリエイト」は、複数回に分けて進行していく予定です。各回ともに、できるだけ簡単な方法を紹介します。

今回は作業環境の設定を行なってみましょう。

HTML5+CSS3を記述するためには、一般のテキストエディタでも十分なのですが、完成したページやアプリを閲覧するためには工夫が必要です。

パソコンをローカルサーバをインストール、iPad / iPhone からアクセスする
レンタルサーバなどを借りて、ファイルをアップロード。その後で、インターネット経由でアクセスする
iPad / iPhone の「ふり（モノマネ）」をするソフトを使って画面を確認する

ここでは、3番目のモノマネをするソフト「エミュレータ」を使ってみることにします。

【HTMLエディタ「WebMatrix 2」】

マイクロソフト社がフリーで配布しているHTMLエディタ（HTMLを書くソフト）です。

上記の図版のように、書いたページを iPad / iPhone を使った時と同じように表示してくれます。

[WebMatrix 2]
http://www.microsoft.com/web/webmatrix/

このソフトを導入すると、MySQLなども同時にインストールされ、CMS「Wordpress」などのテストをローカルPCで行うことができます。

つまりは、外部サーバをレンタルしなくても、「Wordpress」を自分のパソコンにインストールしてテストできるということです。

次に見るのは、 iPad / iPhone のエミュレートだけに絞りこんだソフトです。

【 [ iBBDemo3 ] (右) / [ Mobilizer ] (左) 】

両方とも、基本的な日本語の表示は問題ないですが、一部で表示がおかしくなるなどの報告もありました。
またメニューなども翻訳されていません。動作も少し重たい感じがします。

[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ぐらいが適当です。