パソコン向けのWebページを、iPhone/Android向けに作り直すことによって、HTML5でiPhone/Androidアプリケーションを作る際のポイントを見ていきましょう。リスト1は入力フォームのあるパソコン向けWebページのHTMLです。HTML5で作成してあります＊4。入力したら文字コードUTF-8で保存してください。
Webブラウザでリスト1を実行すると図1のようになります。テキストボックスにテキストを入力してボタンを押すと、そのテキストがアラートウィンドウで表示されます。見出し（h1要素）の文字が折り返しているのは、Webブラウザの幅のせいで、改行（br要素）は入れていません。
このHTMLをAndroid端末のWebブラウザに読み込んで表示してみましょう。Android端末に読み込むには、ネットワーク経由でアクセスできる場所にHTMLファイルをアップロードしなくてはなりません。プロバイダーなどにホームページエリアを契約している人はそこを利用したり、あるいは、ローカル環境にWebサーバーをインストールしたりして試してみてください＊5。
図2(a)は、リスト1をAndroid端末のWebブラウザに読み込んだときの表示です＊6。一見してわかるように、Webページ全体が表示されているため、テキストや入力欄が非常に小さくなっています。
小さなテキストボックスを狙いすましてタッチすると、画面が自動的に拡大します（図2(b)）。拡大されたので入力したテキストは見やすくなりますが、見出しのテキストやボタン上のテキストが途中で切れてしまっています。このサンプルは単純ですから、テキストを読む必要はないでしょう。しかし通常のアプリケーションであれば、入力欄をタッチすると画面のテキストが読めなくなってしまうのでは困ります。
