みかづきブログ その3

3ヶ月つづけてみました。

Chromeアプリをつくろう

自分用のChromeアプリをつくるべく、いろいろ調べたのでメモを残しておきます。

チュートリアル: Chrome アプリを作成する - Chrome for Work ヘルプ

材料の準備

最低限用意しなければならないのはこんな感じでしょうか。

f:id:kimizuka:20150112232835j:plain

今回はそれぞれに最低限の加工を施して、とりあえずChromeで起動して見るところまでやってみましょう。

材料の加工

manifest.json

アプリの設定が書かれてます。
とりあえずいまのところ、manifest_version は 2 を指定しておけば良いようです。
versionはなぜかStringで指定しないとエラーが起こります。

{
  "name": "Chrome App Sumple",
  "description": "Hello World.",
  "version": "1",
  "manifest_version": 2,
  "app": {
    "background": {
      "scripts": ["background.js"]
    }
  },
  "icons": {
    "128": "package-128.png"
  }
}

background.js

manifest.json の background と整合性がとれていれば名前はなんでも良いのですが、なんとなく background.js という名前になることが多いようです。
ここでは index.html を 400 × 400 のサイズで立ち上げています。

chrome.app.runtime.onLaunched.addListener(function(){
  chrome.app.window.create('index.html', {
    'bounds': {
      'width': 400,
      'height': 400, 
      'top': 0,
      'left': 0
    }
  });
});

index.html

background.js から呼ばれるHTMLファイルです。
とりあえずタイトルだけ書いておきました。
必要に応じで外部scriptをロードすることもできます。

<h1>HELLO WORLD.</h1>

package-128.png

128 × 128 の PNG画像です。
アイコンになります。

Chromeアプリの読み込み

以上のものが用意できたら早速 Chrome に読み込ませてみましょう。

f:id:kimizuka:20150120183013j:plain

  1. Chromeを起動
  2. 環境設定を開く
  3. 拡張機能のタブを選択
  4. ディベロッパーモードにチェックをいれる
  5. パッケージ化されていない拡張機能を読み込む... をクリック
  6. 先ほど用意したディレクトリを選択

とこれでアプリを登録できます。


Chromeアプリの起動

起動ボタンをクリックしてみましょう。

f:id:kimizuka:20150112232641p:plain

index.html が立ち上がれば成功です!



なんの役にも立たないアプリですが、まずは基本が大事ということで。
今回は以上です。