「ほぼ準拠」と書いたのは、例えばローカルストレージの実装である Chrome Storage API がHTML5仕様と違って非同期だったりするからだ。これはHTML5完全準拠のWebAPIよりもローカルストレージの処理が高速だということである。
Chrome の Packaged Apps は今後もブラッシュアップされるだろう。MozillaのOWAよりももしかしたら進化のスピードは早いかもしれない。
スマホのアプリの主流はネイティブアプリからOWAへと移り変わろうとしているように感じる今日このごろ、ここらで一つ、Google主導のOWA、Packaged AppsをHelloworldしてみようと思う。
まず初めにやるべきことは、おなじみの manifest.json を作ることだ。
manifest.json
{ "name": "Hello World!", "description": "My first packaged app.", "version": "0.1", "app": { "background": { "scripts": ["background.js"] } }, "icons": { "16": "calculator-16.png", "128": "calculator-128.png" } }
次にやることは background.js というファイルを新規作成する。
background.js
chrome.app.runtime.onLaunched.addListener(function() { chrome.app.window.create('window.html', { 'bounds': { 'width': 400, 'height': 500 } }); });
そして window.html を作成する。
window.html
<!DOCTYPE html> <html> <head> </head> <body> <div>Hello, world!</div> </body> </html>
最後にアイコン(calculator-16.pngとcalculator-128.png)をプロジェクトフォルダのルートに放り込んでHelloworldは完成。
さっそく実行してみよう。
実行する前にChromeブラウザで chrome://flags を起動、「試験運用版の拡張機能 API」を有効にして再起動しておく。
そして再びChromeが立ち上がったら、「ツール」>「拡張機能」を開き、「パッケージ化されていない拡張機能を読み込む...」ボタンを押下。開いたダイアログでさっき作ったHelloworldのプロジェクトフォルダを指定してOKボタンを押下。
これで拡張機能画面にさきほどのアプリ「Hello World! ver.0.1」が登録され、そこから起動することができる。
参考
Create Your First App - Google Chrome
AndroidとChromeは統合し、Packaged Web Appsが重要になる。丸山先生が予想する新しいアプリケーションの形 - Publickey
こてさきAjax:[Google I/O 2013 速報] Chrome Packaged Apps v2 凄いことに!!
関連エントリ
スマホOSの主導権争いの行方