2012年03月16日

HTMLでiOSアプリ風なもの @ iPod touch

EPUBやiBooksだったり、Cordova(旧PhoneGap)の様なHTMLをベースにしたiPhoneやiPad上で見せる仕組みがありますが、もっと基本的な仕組みを忘れてない?ウェブクリップと組み合わせて、オフラインで動き、尚かつiOSアプリ風にホーム画面にアプリのアイコンが表示されれば、ネイティブなアプリと区別が付く人は少ないんじゃないかなと思います。ローカルストレージと組み合わせれば、データも保存出来、これだけで十分な用途も多いはず。

ただ、一つ問題なのは、ローカルなネットワークでも良いのですが、iPadやiPhoneでアクセス出来るウェブサーバーが必要な事。配布というか、最初にiOS端末にダウンロード(キャッシュ)させる為に、ウェブサーバーが必要になります。Macを使っている人だったら、必要な時に起動して、作業が終わったら停止しても良いかも。

まず、アイコン。以下の様な記述を追加する事で、パソコンのブラウザで言う所のfaviconの様なアイコンの設定が出来ます。これを指定する事で、ホーム画面に追加した時に任意のアイコンが使えます。指定しない場合、スクリーンキャプチャを使ったモノになり、ちょっと格好悪いので、普通のウェブページを作る場合も、設定しておくと良いです。

<link rel="apple-touch-icon" href="apple-touch-icon.png">

以下の様にサイズの指定も出来るので、それぞれに最適化したモノを用意しても良いと思います。

<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon.png">

もし、一つだけで済ませる場合は、ある程度大きめのモノを用意すると良いです。200pxも有れば十分かなと思いますが、第三世代のiPadは可成り高解像なので、等倍になってない画像を用意するくらいならば、やはりサイズ指定した画像を用意した方が良いです。

真面目にぞれぞれの状況で対応するならば、

iPhone 57 x 57
iPhone Retina 114 x 114
iPad 72 x 72
iPad Retina 144 x 144

これだけのアイコンが必要ですね。iPhoneとiPadで微妙に違うのでちょっと面倒です。ちなみにAppleのサイトでは、129pxが一つあるだけみたいです。ちょっと中途半端なので、一つだけ用意するならば、144px位の方が良いかも。

次は、フルスクリーン表示。

<meta name="apple-mobile-web-app-capable" content="yes">

これを書くだけ。

他には、apple-mobile-web-app-status-bar-style なんて設定もありますが、場合によっては書いた方が良いかも。

後は、メディアクエリを使って、画面サイズや向き(ランドスケープ|ポートレイト)に応じた表示方法をスタイルシートに書くなりして、HTMLとJavascriptで記述すれば、わざわざXcodeでビルドしたりしなくても、十分使えるモノが出来ると思います。スライドショー程度だったら、Adobe Edgeで作っても良いかも。

閲覧数: 2236 / はてなブックマークusers

blog comments powered by Disqus

関連日記

アマゾン広告

この日記ページは閲覧数などの条件に応じて、閲覧制限を行っています。他からリンクしていただいても、そのリンクから辿った閲覧者が当ページの内容をご覧頂けない場合があります。ご了承下さい。

▼日記検索

Mac

Shade

3D

Flash

ゲーム

ウェブ

音楽

映画

デジカメ

Windows

Linux

携帯電話

テレビ

広島

電子工作

iOS

▼ 最近のトラックバック

▼ランキング

▼関連サイト