Chrome キオスクアプリを作成してデプロイする

この記事は、Chrome 管理者と Chrome アプリの開発経験があるデベロッパーを対象としています。

Chrome 管理者は、Chrome OS を搭載したデバイスを、デジタル署名やインタラクティブ ディスプレイなどの用途に特化したデバイスに変えることができます。Chrome ウェブストアから既製のキオスクアプリをデプロイすることも、独自のキオスクアプリを構築することもできます。

Chrome のバージョン 57 以降では、Chrome OS を搭載するデバイスの一部は Android アプリに対応しています。管理対象の Chrome デバイスに Android アプリをインストールする方法については、キオスクとして運用する Chrome デバイスで Android アプリを使用するをご覧ください。

考慮事項

  • キオスクアプリをデプロイする前に、Chrome OS を搭載したデバイスを登録する必要があります。詳しくは、Chrome デバイスの登録をご覧ください。
  • Chrome のパッケージ化アプリを使用してキオスクアプリを構築できます。ただし、ホスト型アプリは使用できません。
  • 全画面表示で実行するように設定されている Chrome アプリを使用してください。
  • Chrome for Work アプリ開発の成功事例を参考にしてください。

手順 1: Chrome キオスクアプリを構築する

デベロッパーは、Chrome デバイスにデプロイするキオスクアプリを、お手持ちのウェブアプリの使用、あるいは新しいアプリの作成という 2 つの方法で構築できます。

ウェブアプリを持っている場合

ウェブアプリをお持ちの場合は、Chrome アプリ開発ツールを使用してキオスクアプリとしてパッケージ化できます。
  1. パソコンで、アプリのファイル用のフォルダを作成します。
  2. Chrome アプリ開発ツールの拡張機能を開きます。
    まだ Chrome アプリ開発ツールの拡張機能をお持ちでない場合は、Chrome ブラウザに追加してください。
  3. キオスクアプリのアプリ名と最初のバージョンを入力します。
    最初のバージョン番号には 0.0.0.1 などの小さい数を指定します。こうすることで、今後新しいバージョンのアプリをアップロードする際に、バージョン番号を大きくしていく余裕ができます。
  4. アプリのホームページの URL を入力します。
    これが新しいキオスクアプリで最初に表示するページになります。
  5. (省略可)アプリで使用するナビゲーション コントロール(戻る、次へ、再読み込み、セッションの再開始など)を選択します。
  6. (省略可)次のタイムアウト値を指定します。
    • セッションのアイドル タイムアウト - アプリがアイドル状態になってから閲覧データ(アプリのキャッシュや Cookie など)が削除されるまでの時間。
    • ホームに戻るまでのタイムアウト - アプリがアイドル状態になってからホームページに戻るまでの時間。閲覧データは削除されません。
      [セッションのアイドル タイムアウト] と [ホームに戻るまでのタイムアウト] のデフォルト値は 0 分です。アプリはタイムアウトしません。
  7. (省略可)アプリのユーザー向けの利用規約を入力します。
  8. (省略可)ホームページを表示するデバイスの画面に合うようにホームページを回転します。
    たとえば、縦向きレイアウトに設定されたデバイスでアプリを実行する場合は、アプリを 90 度回転します。
  9. [キオスクモードを有効にする] を選択します。
  10. [キオスクアプリのエクスポート] をクリックします。
  11. アプリファイルを書き出す場所を選択し、[選択] をクリックします。

Chrome アプリ開発ツールを使用してキオスクアプリを作成したら、ファイルを追加してカスタマイズできます。

新しいアプリを構築する場合

次の手順で、サンプル ファイルを使用しながら、簡単なキオスクアプリを構築することができます。
  1. パソコンで、アプリのファイル用のフォルダを作成します。
  2. アプリの HTML ファイルを作成します。
    1. テキスト エディタを使用して HTML ファイルを作成します。
      サンプルの HTML ファイル を参照してください。
    2. ファイルに application.html という名前を付けて、アプリのフォルダに保存します。
  3. マニフェストを作成します。
    1. テキスト エディタを使用して JavaScript® Object Notation(JSON)ファイルを作成します。サンプルの JSON ファイル を参照してください。
    2. kiosk_enabled が true に設定され、"kiosk_enabled": true と記述されていることを確認してください。
    3. (省略可)アプリが通常のアプリとして実行されないようにするには、kiosk_only を true に設定し、"kiosk_only": true と記述してください。
    4. (省略可)ウェブページが最初にキオスクアプリの WebView コントロールに読み込まれるまでの時間を短縮するには、WebView タグで partition="persist:" を指定します。
      詳しくは、partition 属性のデベロッパー情報をご覧ください。
    5. サードパーティ製の JSON 検証ツール(JSONLint など)を使用して、JSON コードが正しくフォーマットされていることを確認します。
    6. ファイルに manifest.json という名前を付けて、アプリのフォルダに保存します。
  4. アプリの高さと幅を指定します。
    1. テキスト エディタを使用して、CSS(カスケーディング スタイル シート)ファイルを作成します。サンプルの CSS ファイル を参照してください。
    2. ファイルに application.css という名前を付けて、アプリのフォルダに保存します。
      注: キオスクアプリは自動的に全画面表示されます。
  5. (省略可)ユーザーがキオスク セッションを終了できるようにします。
    1. テキスト エディタを使用して、JavaScript(JS)ファイルを作成します。サンプルの JS ファイル を参照してください。
    2. ファイルに application.js という名前を付けて、アプリのフォルダに保存します。
  6. バックグラウンド スクリプトを作成します。
    1. テキスト エディタを使用して、JS ファイルを作成します。サンプルの JS ファイル を参照してください。
    2. ファイルに background.js という名前を付けて、アプリのフォルダに保存します。
  7. アプリのアイコンを作成して、アプリのフォルダに保存します。
    1. 128x128 ピクセルのアイコンを作成し、128.png という名前を付けて保存します。
    2. 96x96 ピクセルのアイコンを作成し、96.png という名前を付けて保存します。

ナビゲーション コントロールとリセットボタンのあるテストアプリ用のアプリ ファイルが含まれた、こちらの サンプル zip ファイル を使用することもできます。このアプリのライブ バージョンの Chrome Browser Kiosk App 1.0 が Chrome ウェブストアで公開されています。このファイルはどのテキスト エディタでも編集できます。

手順 2: キオスクアプリをテストする

デベロッパーは、キオスクアプリが Chrome OS を搭載したデバイスで動作することを確認してください。

  1. Chrome デバイスで Google アカウントにログインします。
  2. テストするデバイスにアプリのフォルダを保存します。
  3. chrome://extensions/ にアクセスします。
  4. 右上の [デベロッパー モード] をオンにします。
  5. [パッケージ化されていない拡張機能を読み込む] をクリックします。
  6. アプリのフォルダを検索して選択します。
  7. Chrome で新しいタブを開いて 次へ [アプリ] 次へ 目的のアプリをクリックしてください。アプリや拡張機能が読み込まれ、正常に動作していることを確認します。
  8. 必要に応じて manifest.json ファイルに変更を加え、アプリのフォルダをホストしてからもう一度テストします。これを、アプリが正常に動作するまで繰り返します。

手順 3: Chrome ウェブストアで公開する

デベロッパーは、アプリや拡張機能をインストールできるユーザーを制限することもできます。Chrome ウェブストアでキオスクアプリを公開するには、次の 2 つの方法があります。

  • 一般公開 - すべてのユーザーがアプリを閲覧してインストールできます。
  • 限定公開 - アプリのリンクを知っているユーザーのみが閲覧してインストールできます。アプリは Chrome ウェブストアの検索結果には表示されません。アプリのリンクはドメイン外のユーザーと共有することができます。

Chrome ウェブストアにキオスクアプリを追加するには、ファイルが保存されているフォルダを zip 形式で圧縮してから、Chrome ウェブストアで公開します。

手順 4: キオスクアプリをデプロイする

管理者は、Google 管理コンソールでキオスクアプリを追加できます。追加するアプリが複数ある場合は、デフォルトのポリシーを使用してそれらをまとめて追加できます。アプリを 1 つずつ追加してポリシーを設定することもできます。

複数のアプリを追加する

  1. Google 管理コンソールログインします。

    管理者アカウント(末尾が @gmail.com でないもの)でログインします。

  2. 管理コンソールのホームページから、[デバイス管理] 次へ [Chrome 管理] にアクセスします。

    [デバイス管理] がホームページに表示されていない場合は、画面下部の [その他の設定] をクリックします。

  3. [デバイスの設定] をクリックします。
  4. 左側で、ポリシーを設定する組織を選択します。
    全ユーザーを対象とする場合は、最上位の組織を選択します。それ以外の場合は子組織を選択します。
  5. [キオスクの設定] までスクロールします。
  6. [キオスクアプリ] の場合は、[キオスクアプリの管理] をクリックします。
  7. アプリを追加するには、[Chrome ウェブストア] をクリックしてキオスクアプリを検索します。
    • 一般公開のアプリの場合は、アプリ名やアプリ ID を使用して検索します。
    • 限定公開のアプリの場合は、アプリ ID を使用して検索します。
  8. 手動でアプリを追加するには、[カスタムアプリを指定] をクリックして次の操作を行います。
    • Chrome ウェブストアの Trusted Tester アプリの場合は、アプリ ID と URL(https://clients2.google.com/service/update2/crx)を入力します。
    • Chrome ウェブストアでホストされていないアプリの場合は、アプリ ID とサードパーティ ウェブサーバーの URL を入力します。
  9. [追加] 次へ [保存] をクリックします。
  10. [保存] をクリックして確認します。

個々のアプリを追加する

  1. Google 管理コンソールログインします。

    管理者アカウント(末尾が @gmail.com でないもの)でログインします。

  2. 管理コンソールのホームページから、[デバイス管理] 次へ [Chrome 管理] にアクセスします。

    [デバイス管理] がホームページに表示されていない場合は、画面下部の [その他の設定] をクリックします。

  3. [アプリの管理] をクリックします。
  4. 左側の [アプリの種類] フィルタ メニューから [Chrome アプリ] を選択します。
  5. 設定するアプリをクリックします。
  6. [キオスクの設定] をクリックします。
  7. 左側で、キオスクアプリを実行する組織を選択します。
    全ユーザーを対象とする場合は、最上位の組織を選択します。それ以外の場合は子組織を選択します。
  8. アプリと拡張機能のポリシーを設定します。詳しくは、各設定の詳細をご覧ください。
  9. [保存] をクリックします。

関連トピック

この情報は役に立ちましたか?
改善できる点がありましたらお聞かせください。