このページは、2020 年にサポートが終了した Chrome アプリプラットフォームに関するドキュメントの一部です。Enterprise および Education のお客様については、少なくとも 2025 年 1 月までは ChromeOS で引き続きサポートされます。詳しくは、アプリの移行をご覧ください。

このページは Cloud Translation API によって翻訳されました。

ステップ 1: Chrome アプリを作成して実行する

このステップでは、次のことを学習します。

マニフェストファイルやバックグラウンドスクリプトなど、Chrome アプリの基本的な構成要素です。
Chrome アプリをインストール、実行、デバッグする方法。

このステップの推定所要時間は 10 分です。
このページの一番下に移動 ↓ すると、この手順を完了できます。

Chrome アプリについての理解を深める

Chrome アプリには次のコンポーネントが含まれます。

マニフェストでは、アプリのメタ情報を指定します。マニフェストは、アプリについて、その起動方法、アプリが必要とする追加の権限について Chrome に指示します。
イベントページはバックグラウンドスクリプトとも呼ばれ、アプリのライフサイクルを管理します。バックグラウンドスクリプトでは、アプリのウィンドウの起動や終了など、特定のアプリイベントのリスナーを登録します。
コードファイルはすべて Chrome アプリでパッケージ化する必要があります。これには、HTML、CSS、JS、ネイティブクライアントモジュールが含まれます。
アセット（アプリアイコンを含む）も Chrome アプリにパッケージ化する必要があります。

マニフェストを作成する

任意のコードエディタまたはテキストエディタを開き、manifest.json という名前のファイルを作成します。

{
  "manifest_version": 2,
  "name": "Codelab",
  "version": "1",
  "icons": {
    "128": "icon_128.png"
  },
  "permissions": [],
  "app": {
    "background": {
      "scripts": ["background.js"]
    }
  },
  "minimum_chrome_version": "28"
}

このマニフェストでは、background.js という名前のバックグラウンドスクリプトを記述しています。次にこのファイルを作成します。

"background": {
  "scripts": ["background.js"]
}

このステップで後ほど、アプリアイコンを用意します。

"icons": {
  "128": "icon_128.png"
},

バックグラウンドスクリプトを作成する

次のファイルを作成し、background.js という名前で保存します。

/**
 * Listens for the app launching then creates the window
 *
 * @see /apps/app.window.html
 */
chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create('index.html', {
    id: 'main',
    bounds: { width: 620, height: 500 }
  });
});

このバックグラウンドスクリプトは、単にアプリの chrome.app.runtime.onLaunched 起動イベントを待機してコールバック関数を実行します。

chrome.app.runtime.onLaunched.addListener(function() {
  //...
});

Chrome アプリが起動すると、chrome.app.window.create() は簡易 HTML ページ（index.html）をソースとして使用して新しいウィンドウを作成します。HTML ビューは次の手順で作成します。

chrome.app.window.create('index.html', {
  id: 'main',
  bounds: { width: 620, height: 500 }
});

バックグラウンドスクリプトには、追加のリスナー、ウィンドウ、ポストメッセージ、起動データを含めることができます。これらのすべてがイベントページでアプリの管理に使用されます。

HTML ビューを作成する

「Hello World」というメッセージを画面に表示するシンプルなウェブページを作成し、index.html として保存します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <h1>Hello, let's code!</h1>
</body>
</html>

他のウェブページと同様に、この HTML ファイル内に追加のパッケージ化された JavaScript、CSS、アセットを含めることができます。

アプリアイコンを追加する

この 128x128 の画像を右クリックして、_icon128.png という名前でプロジェクトフォルダに保存します。

この PNG を、ユーザーが起動メニューに表示されるアプリのアイコンとして使用します。

すべてのファイルが作成されていることを確認します。

プロジェクトフォルダに次の 4 つのファイルがあるはずです。

ファイルフォルダのスクリーンショット

デベロッパーモードで Chrome アプリをインストールする

デベロッパーモードを使用すると、アプリを配信パッケージとして確定することなく、アプリをすばやく読み込んで起動できます。

Chrome のアドレスバーから chrome://extensions にアクセスします。
[デベロッパーモード] チェックボックスをオンにします。

デベロッパーモードを有効にする

[パッケージ化されていない拡張機能を読み込む] をクリックします。
ファイル選択ツールダイアログを使用して、アプリのプロジェクトフォルダに移動し、それを選択してアプリを読み込みます。

パッケージ化されていない拡張機能を読み込む

完成した Hello World アプリを起動する

プロジェクトを解凍した拡張機能として読み込んだら、インストールしたアプリの横にある [Launch] をクリックします。新しいスタンドアロンウィンドウが開きます。

ステップ 1 後の完成した Hello World アプリ

以上で、新しい Chrome アプリの作成が完了しました。

Chrome DevTools を使用して Chrome アプリをデバッグする

Chrome デベロッパーツールでは、通常のウェブページと同じようにアプリの検査、デバッグ、監査、テストを行うことができます。

コードに変更を加えてアプリを再読み込みしたら（右クリック > [アプリを再読み込み]）、DevTools コンソールでエラーを確認します（右クリック > [要素を検証]）。

[要素を検証] ダイアログボックス

（ステップ 3 の [バックグラウンドページを検証する] オプションについてはアラームを使用します）。

DevTools JavaScript コンソールでは、アプリで使用できる API にアクセスできます。API 呼び出しは、コードに追加する前に簡単にテストできます。

DevTools コンソールのログ

自然言語処理についてや、

この手順で導入する API の詳細については、以下をご覧ください。

次のステップに進む準備はできましたか？ステップ 2 - 既存のウェブアプリをインポートする » に進みます。