iPad用HTMLのメタタグapple-mobile-web-app-capableを試してみる

Tweet

iPadには、Webページを開くボタンを、ホーム画面に配置することができるのですが、その配置するときに、HTML内で、<meta name="apple-mobile-web-app-capable" content="yes" >とかしておくと、ホーム画面から開いたとき、Safariがフルスクリーンモードになり、あたかも普通のアプリのように見える、と言うネタがあったので、ちょうど手持ちのサイトではAdobe Creative Suite対応店マップ

http://labo.dtpwiki.jp/printshop/

があったので、設定してみました。

次の画面は、それぞれ、上記メタタグなし、メタタグありの状態でホーム画面に登録したものです。登録した時点のメタタグの有無で、挙動が変わります。

▲アイコンが違うのは、デスクトップ登録時に表示がそれぞれ異なっていたから

実際、順番に起動してみますね。

まず、メタタグなし。

▲Safariですねどう見ても

つぎ、メタタグあり。

▲ネイティブアプリっぽい？

メタタグをありの状態にして、iPadのユーザインタフェースをまねると、ブラウザアプリなのに、あたかもネイティブアプリであるかのような振る舞いになるわけですね。

個人的にはこういう案件からますます縁遠くなってきたような気がしますけれども、こういうのやっていると面白いなーとか思います。

あと、iPadやiPhoneは、終了ボタンがハードボタンなので、ブラウザアプリ側で終了ボタン作る必要がないっていうのは、結構いけてる仕様だなあと思いました。

2011.02.14 22:26 投稿　大野 義貴 [Web] | 固定リンク |