SMATOOS JAPAN Blog

デジタル教育市場とあなたをつなげるSMATOOS(スマトゥース)は、世界中の読者のために、英語・日本語・韓国語で事業を運営しております。


テーマ:


《HTMLページをブラウザからアプリにスイッチする》





iPad / iPhone で、複雑なゲーム・アプリなどを開発するためには、Objective-C や iOS SDK といったプログラミングに関する知識が必要ですが、シンプルなアプリであれば、HTML5を使って、作る事が可能です。


まずは、HTML+CSS3を使って、WEBページを応用したアプリ「WEBアプリ」を使って、絵本のような仕組みを作りたいと思います。


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


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


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


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

  1. パソコンをローカルサーバをインストール、iPad / iPhone からアクセスする
  2. レンタルサーバなどを借りて、ファイルをアップロード。その後で、インターネット経由でアクセスする
  3. 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ぐらいが適当です。





以上のような単純な正方形の画像ですが、アイコンとして読み込ませるとiOS側が勝手にデザインしなおしてくれます。


[head]タグの中に、以下のコードを追加します。


iPhone / iPad の Safaiでページを表示させて、「ホーム画面に追加」アイコンをタップすると、先ほどの正方形の画像がURLとリンクされて、ホーム画面に登録されます。


【メニュー画面にページのアイコンが登録された】





実際にはURLのリンクボタンなのですが、ここから徐々にアプリっぽいことをしていきましょう。


《まとめ》


次回は
【何といっても「絵」が大事 [画像処理]】
と題して、画像処理を行なっていきます。


スマートフォンに合わせて、画像を最適化する方法や,ブラウザを意識させず、アプリのようにHTMLファイルを処理する方法を見ていきたいと思います。



kikuchi


AD
いいね!した人  |  コメント(16)  |  リブログ(0)

AD

ブログをはじめる

たくさんの芸能人・有名人が
書いているAmebaブログを
無料で簡単にはじめることができます。

公式トップブロガーへ応募

多くの方にご紹介したいブログを
執筆する方を「公式トップブロガー」
として認定しております。

芸能人・有名人ブログを開設

Amebaブログでは、芸能人・有名人ブログを
ご希望される著名人の方/事務所様を
随時募集しております。