Google+ もご覧ください
ユーザーアイコン

ピックアップ

Android版Chrome β31の新機能、フルスクリーンモード速攻レビュー

Android版Chrome β31の新機能、フルスクリーンモード速攻レビュー

Google Chrome for Androidのβ版が31.0になり、Webサイトのホーム画面追加機能が登場しました。これによりiOS風にWebアプリをホーム画面に追加してショートカットのように利用できるようになります。

今回はホーム画面追加機能について紹介します。

サーバ側の準備

Androidのホーム画面追加機能はiOSほど柔軟ではありません。サーバ側でも予め準備がいります。といっても大きな変更ではなくheadタグ内に3つほどタグを追加します。

<meta name="mobile-web-app-capable" content="yes" />
<link rel="shortcut icon" sizes="196x196" href="196x196の画像" />
<link rel="shortcut icon" sizes="128x128" href="128x128の画像" />

このタグを入れるのと196/128の四角い画像を用意することで準備は完了です。

なお現状はapple-mobile-web-app-capableをサポートしていますが、正式版ではサポートしないとのことなのでご注意ください。

インストール

Google Play
Google Play

まずGoogle Chrome β版をインストールしないといけません。Google Playからインストール可能です。なお筆者環境ではデスクトップからのインストールではダウンロードに失敗してしまったため、AndroidからGoogle Playにアクセスしてインストールを行いました。もちろん対象はAndroid 4.0以降になりますのでご注意ください。

Chrome 起動

Google Chromeを立ち上げました。そして任意のサイトを表示します。

Google Chrome立ち上げ
Google Chrome立ち上げ

メニューボタンを押すと、そこに新しくホーム画面に追加という項目が追加されています。

メニュー
メニュー

選択するとダイアログが表示されます。現在はtitleタグのテキストがそのまま使われるようです。metaタグのapple-mobile-web-app-titleを使ってくれるか、別なものを用意してくれると開発者的には楽ですね。

ダイアログ
ダイアログ

追加ボタンを押すとホーム画面に追加されます。ここからいつでもアクセスできるようになります。

フルスクリーンモードで起動

ホーム画面
ホーム画面

ホーム画面のショートカットをタップするとフルスクリーンモードで立ち上がります。

フルスクリーンモード
フルスクリーンモード

このモードの大きな特徴としては、Chromeのアドレスバーが出ないということです。そしてもう一つ、メニューボタンを押しても何も出ないというのがあります。つまりページ内検索やブックマークするといったような機能が使えないということです。Webアプリに対応するのであればその辺りも含めて実装しなければならないでしょう。

iOSとの細かな違い

Google Chrome for Androidが提供するホーム画面追加ではiOS版とは多少異なります。例えば以下のメソッド、タグはサポートされません。

  • window.navigator.standalone

また、Google Chrome for iOSでは同様の機能は提供されません。

window.navigator.standaloneが使えないこともあり、開発者からみた場合のフルスクリーンモードでのアクセスか、Google Chromeからのアクセスかの判別方法は提供されていないとのことです。

まとめ

まだβ版とあって、今後改変があると思われますが、WebアプリケーションにおいてもAndroidで便利に使われていくきっかけになると思われます。なおベストプラクティスとしてAppCacheを使ってオフライン時でも何らかの操作、案内が出せるようにしておくべきとのことです。この辺りも今後Webアプリケーションを作っていく上で大事な技術になりそうですね。

Google Chrome for Androidではその他、決済などの機能も追加されるようです。その辺りはまた別途ご紹介します。

Add to Homescreen - Google Chrome Mobile — Google Developers

Android web app
タグ:

記事をリクエストする

関連記事

コメント