2014年12月18日木曜日

Chrome アプリ: サンプルアプリの作り方

公式のサンプル作成方法
https://developer.chrome.com/apps/manifest

まず、Chrome アプリ用のフォルダを作成する。

フォルダの中にアプリの設定ファイル manifest.json を作成する。
{
  "name": "Hello World!",
  "description": "My first Chrome App.",
  "version": "0.1",
  "manifest_version": 2,
  "app": {
    "background": {
      "scripts": ["background.js"]
    }
  },
  "icons": { "16": "calculator-16.png", "128": "calculator-128.png" }
}

アプリの制御スクリプト background.js をフォルダ内に作成。
アプリ起動時にウィンドウを開くようにする。
chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create('window.html', {
    'bounds': {
      'width': 400,
      'height': 500
    }
  });
});

開かれるウィンドウの HTML を window.html としてフォルダ内に作成。
<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div>Hello, world!</div>
  </body>
</html>


アイコン画像を以下からダウンロードしてフォルダ内に設置。

Chrome を起動して URL に chrome://flags を入力して Enter。
「試験運用版の拡張機能 API」を有効にして、Chrome を再起動。
これで開発中のアプリを Chrome 上で実行できるようになる。


Chrome 右上のメニューボタンから、
その他のツール > 拡張機能

デベロッパーモードにチェックを入れて、
「パッケージ化されていない拡張機能を読み込む...」ボタンを押して、
作成していたアプリフォルダを選択。



するとサンプルアプリ「Hello World!」がインストールされる。
そのまま起動すると　Hello World! と表示されるウィンドウが出現する。
以上で、サンプルアプリの作成は完了。



ちなみに新しいタブを開いた画面で、
左上のアプリアイコンをクリックしてアプリ一覧を表示し、
その中から起動することも可能。


0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)