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で作っても良いかも。
関連日記
- 2012年05月05日 iPhoneアプリのローカライズ (41854)@ iOS
- 2012年01月21日 iOSのPush Notification (10771)@ iPod touch
- 2012年02月17日 Unityでカメラを使ったiOSアプリ (10686)@ Mac
- 2013年11月24日 iBeaconを試す(1) 対応ビーコンとアプリ (7106)@ iOS
- 2013年12月08日 iBeaconを試す(3) Core BluetoothとMavericks (6596)@ Mac
- 2014年06月09日 3DなマーカーでAR (6522)@ 3D
- 2012年10月19日 Lightweight SWF (6306)@ Flash
- 2011年11月10日 ケータイ端末向けのFlash Player開発終了 (6303)@ Flash
- 2010年01月15日 VMware上のXP、ボリュームを拡張 (5899)@ Windows
- 2012年03月02日 QualcommのARライブラリー「Vuforia」 (5230)@ Mac
- 2010年10月03日 Settings.bundleのデフォルト値 (4455)@ 携帯電話
- 2014年06月01日 MyBeacon Fun(MB005)が届いた (4132)@ iOS
- 2014年10月10日 ASAHIネット LTEを暫く使ってみての感想 その3 (4092)@ iOS
- 2011年06月29日 FlashからHTML5へのコンバータ「Swiffy」 (4010)@ Flash
- 2005年03月06日 PHPObjectでマルチバイト (3914)@ Flash
- 2012年02月26日 GLKSkyboxEffectの画像作成 (3859)@ Shade
- 2014年08月09日 iOS7でGKVoiceChatServiceとGKSession (3689)@ iOS
- 2010年11月21日 WindowsでiOSアプリ開発 (3666)@ Flash
- 2006年08月01日 広島大学理学部数学教室公開講座 (3625)@ 雑
- 2012年10月18日 二次元バーコード読み取りライブラリー「ZXingObjC」 (3583)@ iOS
- 2011年05月13日 FlashかHTML5か (3528)@ Flash
- 2007年11月16日 レミーのおいしいレストラン (3473)@ 映画
- 2014年08月09日 iVOCALOIDで遊んでみた (3408)@ iOS
- 2014年09月28日 ASAHIネット LTEを暫く使ってみての感想 その2 (3371)@ iOS
- 2013年04月25日 [Unity] TouchScript (3352)@ 3D
- 2011年03月24日 Adobe AIR 2.6 (3317)@ Flash
- 2011年05月06日 iOSシミュレータのカメラロールに画像を保存 (3251)@ Mac
- 2010年11月30日 iPad Camera Connection Kit (3237)@ 音楽
- 2005年07月20日 世界の中心で、愛をさけぶ 完全予約限定生産DVD-BOX (3227)@ 映画
- 2008年09月17日 Papervision3Dとアナグリフ (3183)@ Flash
アマゾン広告
この日記ページは閲覧数などの条件に応じて、閲覧制限を行っています。他からリンクしていただいても、そのリンクから辿った閲覧者が当ページの内容をご覧頂けない場合があります。ご了承下さい。