HTML5で作るiPhoneアプリ

通常、iPhoneアプリの開発には「Objective-C」というプログラミング言語を使用しますが、プログラミング経験の無い方はなかなか手を出しにくいのではないでしょうか。
しかし、プログラミング言語は分からないけれどHTMLやJavaScriptなら分かる、という方は多いと思います。

エースホーム株式会社のアプリ「ワクワクぬりえタウン」は、APPLIYA株式会社のOEMサービスを利用し、HTML＋css＋JavaScriptで制作しました。

実際にHTML5で制作したアプリ「ワクワクぬりえタウン」。誰でも簡単にぬり絵が楽しめる。

このコラムでは、実際どんな作りになっているのかを紹介していきたいと思います。

「HTML5がやってきた！ Vol.2」でも紹介しましたが、HTML5にはcanvasという新しい要素が追加されており、線や円のような図形を描くことができます。

ぬりえアプリではこの線を引く機能を利用して、クレヨンで塗る機能を作成しました。開始地点と終了地点を設定し、2点の間に線を引きます。

iPhoneの画面上で指でなぞった通りに線を引くためには、タッチした場所を開始地点、フリックして指が移動した地点を終了地点として、その間に線を引く必要があります。

Javascriptに「onClick」というイベントがあるのはご存知の方も多いと思いますが、iPhoneにも「onTouchStart」や「onTouchMove」などのイベントがあり、それぞれタッチしたときやフリックしたときに処理を行うことができます。

また、タッチしている場所の座標を取得することができるので、
・タッチした場所の座標を取得して、開始地点に設定
・フリックして移動した場所の座標を取得して、終了地点に設定
・開始地点から終了地点に線を引く
という処理を繰り返すことで、指でなぞった通りに線を引くことができます。

ここまでで、ぬりえの基本的な機能は完成です。

HTMLで作った画面をよりアプリらしく見せるために、画面を固定したり、細かい部分にもアニメーション効果をつけています。

・画面の幅を固定し、スクロールを抑止する
画面幅を320pxに固定し、拡大／縮小できないように設定しています。また、フリックした時にスクロールしないよう、画面を固定しています。

・画面切り替え時の動き
各画面はそれぞれ別のHTMLでできているため、画面間の遷移は通常のサイトと同じようにリンクでできています。
画面を表示するときにフェードイン効果を入れることで、切り替えをなめらかに見せています。

・パレット表示／非表示のアニメーション
ぬりえが終わったらパレットを隠して画面を撮影します。このパレットを隠す動きと同時に、アイコンをフェードアウトさせています。

今回はアプリの対象ユーザが未就学児童だったため色を選んで塗るだけのシンプルなぬりえアプリにしましたが、以下のような機能をつけることもできます。

・クレヨンの太さを選択可能に
描画する線の太さは任意に変えられるので、クレヨンの太さを選択できるようにすれば、色々な太さの線を引くことができます。

HTML5で作るiPhoneアプリ、いかがでしたか？

エースホームの場合、iTunes Storeで配布するためにAPPLIYAのサービスを利用してネイティブアプリの形にしましたが、iPhoneのSafariから閲覧可能なWebアプリにすれば、そのままWeb上に公開することもできます。

Objective-Cで作るネイティブアプリに比べるとHTMLやJavaScriptでできることは限られていますが、iPhone用のJavaScriptライブラリも多数公開されていますし、何より開発・テストが容易なところが魅力だと思います。

実際に制作してみて、思ったよりも簡単に作れたというのが正直な感想です。通常のWebサイト制作ではブラウザ毎の違いやフォントサイズを変えた時の表示などを考慮する必要がありますが、iPhoneのSafariのみが対象となるため、確認作業も楽でした。

ネイティブアプリとWebアプリ、どちらが良いかは一概には言えないのですが、アプリの機能や目的に合わせて選択することが大事だと思います。