2013年06月18日

【Chrome】Packaged Apps アプリをHelloWorld【Google】

Google Chrome の Packaged Apps (PA) はOpen Web Apps (OWA) に「ほぼ準拠」した仕様となっている。
「ほぼ準拠」と書いたのは、例えばローカルストレージの実装である 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の主導権争いの行方
posted by 寄り道退屈男 at 14:15 | Comment(0) | TrackBack(0) | Packaged Apps
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.sakura.ne.jp/tb/69630130
※言及リンクのないトラックバックは受信されません。

この記事へのトラックバック