このチュートリアルでは、Chrome アプリを初めて作成する手順を説明します。Chrome アプリは拡張機能とよく似ているため、既存のデベロッパーはマニフェストとパッケージ化の方法を認識できます。作業が完了したら、アプリをpublishするためにコードとアセットの ZIP ファイルを作成するだけです。
Chrome アプリには次のコンポーネントが含まれます。
- マニフェストは、アプリの概要、アプリの起動方法、アプリに必要な権限について Chrome に指示します。
- バックグラウンド スクリプトを使用して、アプリのライフサイクルを管理するイベントページを作成します。
- コードはすべて Chrome アプリのパッケージに含める必要があります。これには、HTML、JS、CSS、ネイティブ クライアント モジュールが含まれます。
- アイコンやその他のアセットもすべてパッケージに含める必要があります。
ステップ 1: マニフェストを作成する
まず、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" }
}
ステップ 2: バックグラウンド スクリプトを作成する
次に、次の内容の新しいファイルを background.js という名前で作成します。
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('window.html', {
'outerBounds': {
'width': 400,
'height': 500
}
});
});
上記のサンプルコードでは、ユーザーがアプリを起動すると onLaunched イベントが発生し、その後すぐに、指定した幅と高さのアプリのウィンドウが開きます。バックグラウンド スクリプトには、追加のリスナー、ウィンドウ、投稿メッセージ、起動データを含めることができ、これらはすべてイベントページでアプリの管理に使用されます。
ステップ 3: ウィンドウ ページを作成する
window.html ファイルを作成します。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>Hello, world!</div>
</body>
</html>
ステップ 4: アイコンを作成する
次のアイコンをアプリフォルダにコピーします。
ステップ 5: アプリを起動する
フラグを有効にする
Chrome アプリの API の多くはまだ試験運用版であるため、試してみるには試験運用版の API を有効にする必要があります。
- chrome://flags にアクセスします。
- [試験運用版の拡張機能 API] を探し、[有効にする] リンクをクリックします。
- Chrome を再起動します。
アプリの読み込み
アプリを読み込むには、Chrome の設定アイコンをクリックし、[ツール] > [拡張機能] を選択して、アプリと拡張機能の管理ページを表示します。
[デベロッパー モード] チェックボックスがオンになっていることを確認します。
[パッケージ化されていない拡張機能を読み込む] ボタンをクリックし、アプリのフォルダに移動して、[OK] をクリックします。
新しいタブを開いて起動
アプリを読み込んだら、新しいタブページを開いて新しいアプリのアイコンをクリックします。
または、コマンドラインから読み込んで起動する
Chrome の次のコマンドライン オプションがイテレーションに役立つかもしれません。
--load-and-launch-app=/path/to/app/は、指定されたパスからパッケージ化されていないアプリケーションをインストールして起動します。アプリケーションがすでに実行されている場合は、更新されたコンテンツで再読み込みされます。--app-id=ajjhbohkjpincjgiieeomimlgnllは、Chrome にすでに読み込まれているアプリを起動します。以前実行されていたアプリは再起動されませんが、更新されたコンテンツで新しいアプリが起動します。