このページは、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、アセットを追加します。

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

この 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 にアクセスできます。Google Cloud のコードに追加する前に API 呼び出しをテストします。

DevTools コンソールのログ

詳細情報

このステップで導入した API の一部の詳細については、以下をご覧ください。

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