「ほぼ準拠」と書いたのは、例えばローカルストレージの実装である 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の主導権争いの行方
