iPad向けのウェブサイトづくり
iPadを入手してから、iPad向けのwebサイトを作ってみようと思い立って、ちょっと手を動かしてみた。
まず作ってみたのはもぐらたたき的なやつ。まるいのが次々出てくるのでひたすらタップしていきましょう。
http://hirashi.mydns.jp/ipadtest/
あまりゲーム性を考えていないんですが、表示範囲外に丸いのを逃がし続けてるとゲームオーバーになります。ので、なるべく逃がさないようにもくもくとタップしていきましょう。ずっとやってると画面が指紋だらけになります。ｗ
iPad実機のほか、Win/MacのSafariでのみ動きます。
iPad向けのソフトウェア開発というと、真っ先に思い浮かぶのはアプリなわけですが、開発するのにMac＋OSX最新版が必要だわ、AppStoreに入れるにはアップルの審査が必要だわで、参入障壁がそれなりに高いわけです。一方iPad向けウェブサイトであれば、通常のウェブとおなじように作って公開できるし、「ホーム画面に追加」をするとアプリと同じようにデスクトップにアイコン並べられて、ホーム起動時にはブラウザのアドレスバーを非表示にもできるので、一見アプリと似たようなモノがかんたんに作れます。本体ネイティブな機能の利用はもちろん限られますが、独自のJavaScriptでタップ関連のイベントとかディスプレイの回転とかは利用可能。
で、ちょっと触ってみた感想。
- onclickやhoverなどマウスに依存したイベントはサポートされていない。代わりにtouchstartやtouchmoveといったイベントがある。
- ブラウザはSafari限定なのでHTML5＋CSS3がいろいろ使える。一般PC向けサイトだとまだあまり踏み込めないが、ブラウザが限定されるとこういうのが使えますなあ。グラデーションとかシャドウとか楽ちん。
- イベントが独自なこと以外は、PC Safariが十分な開発環境になる。表示の調整程度ならiPad実機つかうよりPCで見たほうが手っ取り早い。
- iPad実機でキャッシュが効いて確認しづらい、なんてことはなかった。
- JSでいろいろ処理させようとするとすぐ描画が重くなった。さすがにこれはしょうがないか。
- iPadっぽい動きをするライブラリ、はまだいまいち見つけられず。JSでごりごり自作すれば慣性スクロールとかは実現できるでしょう。
- AppleのiPadヘルプページが、ウェブサイトでできててiPadっぽい動きをするのでソースを見てみたが、難読化されててちょっと萎えた。ちなみに見るにはPC SafariでUserAgent偽装する必要あり。
ほか以下、iPad向けサイト作りの参考にさせていただいた記事。
-
- iPadからのアクセス判定。UserAgentに「iPad」が含まれているかどうか。あるいはJavaScriptの「navigator.platform」属性で調べる。
- 縦置きか横置きかの判定など
-
- 関連情報へのリンクいろいろ
-
- iPadでよくある縦スクロールを実現するJavaScriptライブラリ
-
- CSS3についてはこのサイトのまとめが便利。
