プロフェッショナルディスプレイ ナレッジセンター

HTML5アプリ起動方法

  1. TOP
  2. ソフトウェア ソリューション
  3. HTML5アプリ開発・活用ガイド
  4. HTML5アプリ起動方法

開発したHTML5アプリとAVメディアファイルをディスプレイで起動する手順を説明します。
起動方法はディスプレイ内蔵ストレージ、ネットワーク経由、USBメモリー経由の3種類があります。

ディスプレイ内蔵ストレージで起動

必要なディスプレイ設定

HTML5アプリの登録管理

証明書の登録やHTML5アプリの表示向きなどが設定できます。
操作手順：[設定]→[プロ設定]→[HTML5プラットフォーム]

本体ファームウェアを最新にする

HTML5アプリの動作保証および最新機能の利用のために、ディスプレイのファームウェアを最新の状態に更新してください。
操作手順：[設定]→[システム]→[デバイス情報]

[ウェブアプリのインストール]を有効化

HTML5アプリをディスプレイで起動させるために必須の設定なります。
操作手順：[プロ設定]→[USBドライブ自動実行]内

リモコンの[ホーム] をHTML5アプリに指定する場合

[ウェブアプリ]を選択することで有効化します。

操作手順：[プロ設定] → [ホームボタン設定]

設定後、[プロ設定]→[HTML5 platform]→[起動アプリのURI]に、autorun.txtのstartup_uriプロパティで指定したURIが反映されていることを確認ください。

ディスプレイの電源に連動してHTML5アプリを起動する場合

[起動アプリ]を選択することで有効化します。

操作手順：[プロ設定] → [初期入力]

設定後、[プロ設定]→[HTML5 platform]→[起動アプリのURI]に、autorun.txtのstartup_uriプロパティで指定したURIが反映されていることを確認ください。

インストール方法

ディスプレイ内蔵ストレージにインストールする方法を説明します。転送用にUSBメモリーを使用します。
HTML5アプリは、autorun.txtのcopyappプロパティでインストールできます。

autorun.txt記述方法

HTML5アプリをインストールする際のautorun.txt記述例です。
copyappプロパティは、インストール時の動作の指定も可能です。詳しくはautrun.txtプロパティを参照ください。

JSON
{
  "action": "copyapp",
  "auid": "<app ID>",         // 起動するアプリのID
  "copyapp": {
    "app": "<app ID>",        // インストール対象のアプリのID（auidと同じ値）
    "startup_uri": "<app ID>" // 任意。電源連動起動を使う場合に指定
  }
}

フォルダを作成したのち、USBメモリーをディスプレイに挿入すると、インストールが自動実行されます。
初回のみ確認ダイアログが表示される場合があります。

コンテンツの更新方法

ディスプレイ内蔵ストレージに保存したコンテンツの更新方法は、インストール時の保存先によって方法が異なります。

docフォルダ内に保存したコンテンツ更新

/doc/フォルダ内のファイルを更新し、最初のインストール同様にautorun.txt の action に copyapp プロパティを指定します。
USBメモリーをディスプレイに挿入すると、内蔵ストレージのHTML5アプリが上書きされます。

mediaフォルダ内に保存したコンテンツ更新

ディスプレイ内蔵ストレージに保存した動画や音声は、USBメモリーの/media/フォルダの内容を上書きし、autorun.txtのmediaプロパティで更新方法を指定することで更新または削除できます。HTML5アプリフォルダ（/sony/apps）の置き換えは必要ありません。更新方法（mediaの値）はsyncとcopyがあります。syncは完全同期で差分削除も行います。一方、copyは、USBメモリーのファイルを上書きして差分を追加するのみで削除しません。用途に応じて使い分けてください。

1.“sync”指定する方法（完全同期）

autorun.txtでmediaプロパティをsyncに指定すると、ディスプレイに保存したすべての動画や音声ファイルが、USBメモリーの /media/フォルダと完全に同期されます。USBメモリーの/media/フォルダに存在しないファイルは、ディスプレイから削除されます。

JSON
{
  "action": "copyapp",
  "auid": "<app ID>",
  "copyapp": {
    "app": "<app ID>",  // インストール対象のアプリのID
    "media": "sync"
  }
}
2. “copy”指定する方法（差分を追加・削除なし）

autorun.txtでmediaプロパティをcopyに指定すると、USBメモリーの /media/フォルダ内 にあるファイルを使って、ディスプレイに保存済みの 動画や音声ファイルをコピーします。USBメモリーの /media/フォルダ内に存在せず、ディスプレイ側にのみある動画や音声は削除されずに残ります。

JSON
{
  "action": "copyapp",
  "auid": "<app ID>",
  "copyapp": {
    "app": "<app ID>",  // インストール対象のアプリのID
    "media": "copy"
  }
}

アンインストール方法

ディスプレイからHTML5アプリをアンインストールするには、 autorun.txt の action プロパティをremoveapp に設定します。
removeappプロパティは、アンインストール時の動作の指定も可能です。詳しくはautrun.txtプロパティを参照ください。

例

JSON
{
  "action": "removeapp",
  "auid": "<app ID>",
  "removeapp": {
    "app": "<app ID>",
    "media": "remove",
    "mode": "confirm"
  }
}

ネットワーク経由での起動

必要なディスプレイ設定

HTML5アプリの登録管理

証明書の登録やHTML5アプリの表示向きなどが設定できます。
操作手順：[プロ設定]→[HTML5プラットフォーム]

リモコンの[ホーム] をHTML5アプリに指定する場合

操作手順：[プロ設定] → [ホームボタン設定]

[ウェブアプリ]を選択することで有効化します。

ディスプレイの電源に連動してHTML5アプリを起動する場合

[起動アプリ]を選択することで有効化します。

操作手順：[プロ設定] → [初期入力]

設定後、[プロ設定]→[HTML5 platform]→[起動アプリのURI]に、autorun.txtのstartup_uriプロパティで指定したURIが反映されていることを確認ください。

起動（表示）方法

HTML5アプリは外部Webサーバーに配置し、manifest.json の web_urlプロパティにHTTP/HTTPSのURLを指定します。
USBメモリーは、起動するアプリのURLをディスプレイに登録/起動するための手段として使用します。

転送用フォルダ作成方法

1. USBメモリーにファイルを配置

サンプル「Webサイトの表示」をダウンロードすると便利です。サンプルの /sony/ ディレクトリをUSBメモリーのルートにコピーします。

サンプルダウンロードダウンロード

例 サンプル「Webサイト表示」

USB:/
├ /sony/
      ├ autorun.txt
      ├ apps/webapps/manifestjson_weburl/app/manifest.json
　　　　　├  manifest.json
2. autorun.txt を作成する

サンプルをそのまま使う場合は変更は不要です。独自のアプリIDを使う場合は、autorun.txtのauidに、manifest.jsonのauidと同じ値を指定してください。

サンプル autorun.txtのauid

JSON
{
  "auid": "net.sony.tv.sample.manifestjson_weburl"
}
3. “web_url”でHTTP/HTTPS指定

manifest.jsonのweb_urlプロパティを設定します。

例　HTML5アプリ起動時に”http://example.com/&#8221; を表示する場合

JSON
{
  "name": {
    "default": "en_US",
    "en_US": "<app display name>"
  },
  "auid": "net.sony.tv.sample.manifestjson_weburl",
  "version": "1.0",
  "manifest_version": "1.0",
  "app": {
    "launch": {
      "web_url": "https://example.com/"  // 表示するURLに変更
    }
  },
  "minimum_web_platform_version": "1.0"
}
4. USBメモリーをディスプレイに挿入

ディスプレイにUSBメモリーを挿入すると、autorun.txtに基づいて起動処理が自動実行され、web_urlで指定したWebサイトが表示されます。

注意

  • 初回のみ確認ダイアログが表示される場合があります。
  • web_urlを”https“で指定する際は、以下にご注意ください。ディスプレイの時刻が正しくないと作動しない場合があります。
  1. ディスプレイの日時設定が正確であることを確認してください
  2. 正式に発行されたサーバー証明書を使用してください
  3. ルート証明書を[プロ設定]→[HTML5プラットフォーム]でディスプレイに取り込むこと

USBメモリー経由で起動

必要なディスプレイ設定

HTML5アプリの登録管理

証明書の登録やHTML5アプリの表示向きなどが設定できます。
操作手順：[プロ設定]→[HTML5プラットフォーム]

USBメモリー経由でHTML5アプリを起動する場合

[ウェブアプリの起動]を有効化

USBメモリーにHTML5アプリを格納して起動させる場合は必須になります。
操作手順：[プロ設定]→[USBドライブ自動実行]内

ネットワーク接続する場合

環境に応じて、必要な設定をしてください。

SSIDやセキュリティの設定

操作手順：[プロ設定]→[Wi-Fiアクセスポイント]　

NTPサーバーとの同期

操作手順：[プロ設定]→[NTPサーバー]　

リモコンの[ホーム] をHTML5アプリに指定する場合

[カスタムメニュー]を選択することで有効化します。

操作手順：[プロ設定] → [機能設定] → [ホームボタン設定]

設定後、[プロ設定]→[HTML5 platform]→[起動アプリのURI]に、autorun.txtのstartup_uriプロパティで指定したURIが反映されていることを確認ください。

ディスプレイの電源に連動してHTML5アプリを起動する場合

[起動アプリ]を選択することで有効化します。

操作手順：[プロ設定] → [初期入力]

設定後、[プロ設定]→[HTML5 platform]→[起動アプリのURI]に、autorun.txtのstartup_uriプロパティで指定したURIが反映されていることを確認ください。

起動方法

サンプル「ローカルアプリ起動」をダウンロードすると便利です。サンプルの /sony/ ディレクトリをUSBメモリーのルートにコピーします。

サンプルダウンロードダウンロード

1. USBメモリー内にファイルを配置

HTML、JS、CSS、画像などの静的ファイルは /doc/フォルダに配置してください。

サンプル フォルダ構造

USB:/
　├ /sony/
　　　├ autorun.txt
　　　├ apps/webapps/manifestjson_localpath/
　　　　　├ /app/
　　　　　　　├ manifest.json
　　　　　　　├ /doc/
　　　　　　　　　├ index.html  // 起動ページ（サンプル）

Tips

  • サンプル「ローカルアプリ起動」のindex.htmlは、video.mp4を再生対象として参照していますが、video.mp4は含まれていません。
    任意の動画ファイルを/doc/ フォルダに配置してください。
  • 容量の大きい動画などのAVメディアファイルは、/media/フォルダを作成して配置することを推奨します。
    ディスプレイはfile://localhost/media/ 経由でアクセスできます。 詳しくはこちら。

2. manifest.jsonの設定

サンプル「ローカルアプリ起動」をそのまま使う場合は変更は必要ありません。独自のファイルを起動する場合は、manifest.jsonのlocal_path プロパティにパスを指定してください。

サンプル manifest.json

JSON
{
  "name": {
    "default": "en_US",
    "en_US": "<app display name>"
  },
  "auid": "net.sony.tv.sample.manifestjson_localpath",
  "version": "1.0",
  "manifest_version": "1.0",
  "app": {
    "launch": {
      "local_path": "file://localhost/doc/index.html"  // 起動するHTMLファイルのパス
    }
  }
}

3. ディスプレイに表示

USBメモリーをディスプレイに挿入すると、autorun.txt に基づいて起動処理が自動実行され、local_path で指定したページが表示されます。

コンテンツの更新方法

コンテンツを更新する場合は、更新したいファイルに応じて /doc/ または /media/ フォルダ内のファイルを更新してください。