この特集では、現在利用者が急増している2大スマートフォン、iPhoneおよびAndroid端末向けのアプリケーションを作ります。と言っても、それぞれのOSにネイティブなアプリケーションではなく、iPhone/Androidが搭載するWebブラウザの上で動くWebアプリケーションです。具体的には、HTMLおよびCSSの最新バージョンであるHTML5とCSS3を使ってiPhone/Androidアプリケーションを作成する方法、およびその際のポイントを説明します*1

iPhone/AndroidならHTML5とCSS3でアプリを作れる

 Webアプリケーションは、OSやプラットフォームに依存しないと言われています。確かに、Webアプリケーションの動作や見栄えは、OSやプラットフォームにはあまり依存しません。しかし、Webブラウザの種類やバージョンに強く依存します。異なるWebブラウザで同じように動作するWebアプリケーションを作ろうとすると、どうしても古いバージョンのレベルに合わせる必要があり、HTML5やCSS3といった新技術を利用できません。

 しかし、ターゲットをiPhone/Androidに限定すると、途端に光明が差してきます。Android端末ならGoogle ChromeベースのWebブラウザ、iPhoneならApple SafariベースのWebブラウザに動作環境を特定できます*2。Webブラウザ環境が決まれば、そのWebブラウザの機能をフルに活用したアプリケーションを作成できます。しかも、ChromeとSafariはいずれも、オープンソースのHTMLレンダリングエンジン*3であるWebKitを搭載し、HTML5やCSS3への対応が進んでいるWebブラウザです。HTML5の各種APIやCSS3を利用して、OSネイティブなアプリケーションに近い機能やデザインを備えたWebアプリケーションを作成できます。

 HTML5でWebアプリケーションを作成する場合の大きなメリットの一つは、ローカルストレージやキャッシュといった新機能を利用して、オフラインのローカル環境で動作するアプリケーションを作成できることです。従来のWebアプリケーションは基本的に、Webサーバーに接続したオンライン状態でしか動作しません。この違いは大きいです。

 良いこと尽くめのように思えるiPhone/Android向けWebアプリケーションですが、いくつか欠点があります。iPhone/Android向けのWebアプリケーションを作成する際には、これらの欠点をユーザーにできるだけ感じさせないようにすることが肝要です。

 筆者が考える欠点は三つあります。一つ目は動作が遅いこと。二つ目は画面が小さいこと。そして三つ目は、二つ目とも関係しますが、入力しづらいことです。

 まず、“遅い”から考えましょう。これは通信速度のほかに、CPUが非力であることが関係しています。Webページを読み込んだWebブラウザは、HTMLとCSSの指示に従ってWebページを作成します。頻繁にページ遷移が起こるようなWebアプリケーションはレスポンスが遅くなり、利用者にかなりのフラストレーションを感じさせます。

 二つ目、とにかく画面が“小さい”です。パソコンに比べると圧倒的に小さい画面に、Webページ全体を表示させた場合、そのままではまず字が読めません。もちろんiPhone/Androidの利用者なら、指先の操作で画面をズームインすることでこの問題を解消できることを知っています。しかし何かの作業をしようするときに、毎回ズームしてから…というのは、やはりストレスです。

 三つ目は“入力しづらい”です。本誌を読んでいる皆さんはプログラマでもあり、日常的にパソコンでキーボードを使っているはずですから、タッチパネル型のソフトウエアキーボードでの入力作業には閉口されると思います。リストからの選択もやりづらいと感じることがよくあります。

 これらのうち、速度に関してはプログラム側からの改善のアプローチは難しいですが、レイアウトを単純にしたり、ページ遷移を少なくすることで軽減できるでしょう。

 小さいという問題については、画面の解像度に応じて、テキストやフォーム部品をできるだけ大きく表示させることで改善できます。入力については、テキストによる入力を抑えて、候補の中から選択するフォーム部品を主に使うことで改善できるでしょう。例えば住所を入力する場合、「北海道」「東北」「関東」のようなブロックを選択すると都道府県のリストが該当地域に絞られ、都道府県を選択すると市区町村のリストが絞られるといったように、動的に選択肢を変えていくことで対応できそうです。

園田 誠(そのだ まこと)
ITだのプログラミングだのと言ってるのに、ムード歌謡と演歌の良さがわかる年になってしまった昨今。「天城越え」をぼそぼそと歌いながらAndroidの記事書くとか、20年前の自分からは絶対想像できなかったですよ。Twitterは@MacotoSo。