アプリ開発基本情報

HTML5アプリの開発・活用に必要な技術情報をまとめています。基本的な仕組みはシンプルで、autorun.txt に起動するアプリの auid を指定し、manifest.json にアプリ情報と起動方法を指定します。USBメモリーをディスプレイに挿入すると、autorun.txt に基づいてHTML5アプリが起動します。

1. ファイル構造ルール

HTML5アプリを開発する際は、以下のディレクトリファイル構造のルールに従う必要があります。

			
USB:/
　├ sony/
　│　├ autorun.txt          // Specifies app ID
　│　└ apps/
　│　　　└ webapps/
　│　　　　　├ <app name 1>/  // Application Folder Name
　│　　　　　│　└ app/        // Application Directory
　│　　　　　│　　├ manifest.json
　│　　　　　│　　└ doc/      // Document Root
　│　　　　　├ <app name 2>/
　│　　　　　│　└ app/
　│　　　　　│　　├ manifest.json
　│　　　　　│　　└ doc/
　│　　　　　└ ...
　└ media/
　　　├ video1.mp4
　　　└ video2.mp4

		

HTML5アプリ名は任意の名前を指定します。
複数のHTML5アプリは、/sony/apps/webapps/配下に配置できます。

Tips
起動できるアプリは1つです。ディスプレイ内蔵ストレージへ複数のHTML5アプリを同時にインストールする場合は、/sony/apps/webapps/ 配下に複数のアプリを配置します。

2. 静的ファイルの配置

HTML、JavaScript、CSS、画像（.html、.js、.css、.png など）の静的ファイルは、HTML5アプリ起動方法によって配置場所とアクセス方法が異なります。

外部Webサーバーに配置の場合

静的ファイルは外部Webサーバーに配置し、URLをmanifest.jsonのweb_urlプロパティで指定します。

USBメモリーまたはディスプレイ内蔵ストレージに配置の場合

静的ファイルを/doc/フォルダ内に配置し、パスをmanifest.jsonのlocal_pathプロパティで指定します。

例　静的ファイル配置（local_path）

file://localhost/doc/<file_name>.html

3. 動画などの容量の大きいファイルの配置

外部Webサーバーに配置する場合は、静的ファイルと同様にURLをmanifest.jsonのweb_urlプロパティで指定します。
USBメモリーまたはディスプレイ内蔵ストレージに配置する場合は、/media/フォルダ内に配置することで、manifest.jsonのプロパティ指定なくディスプレイがアクセスします。

例　動画ファイル配置

file://localhost/media/<file_name>.mp4

autorun.txtは、JSON形式のキー/バリュー形式に基づいて記述します。

すべての値は文字列型で、プロパティはauid のみ必須です。詳細および任意で利用可能なプロパティは以下を参照してください。
HTML5アプリの動作（起動・インストール・削除）を指定することもできます。

autorun.txtの構造・プロパティ

構造

autorun.txt に、起動したいHTML5アプリのID auid を指定します。ディスプレイは、USBメモリーが挿入されると autorun.txt を読み込み、各アプリの manifest.json の auid と照合して一致したHTML5アプリを起動します。

autorun.txt と manifest.json の auid 対応関係

			
USB:/ 
/sony/
　　├ autorun.txt // auid
　　├ apps/webapps/
　　　　　　　├ <app name 1>/app/manifest.json // auid
　　　　　　　├ <app name 2>/app/manifest.json // auid_1
　　　　　　　├ :

		

Tips
autorun.txt に指定できる auid は1つのみです。複数のHTML5アプリをディスプレイ内蔵ストレージへ同時にインストールする場合のみ、複数配置をします。

記述例

autorun.txt の記述例

JSON

{
  "action": "auid",　　// auid: 起動 / copyapp: インストール / removeapp: 削除
  "auid": "<app ID>", 　　// Mandatory. 起動するアプリのID
  "copyapp": {
    "app": "<app ID>",      // 内蔵ストレージインストール対象のアプリのID
    "media": "nocopy",　　// copy / sync / nocopy
    "mode": "confirm",　　// confirm / auto / dryrun
    "startup_uri": "<app ID>", 　　// 電源連動起動するアプリのID
    "home_menu_app": "false"　　// ホームメニューアイコンの表示 true / false
  },
  "removeapp": {
    "app": "<app ID>",　　// 削除対象のアプリのID
    "media": "keep",　　// keep / remove
    "mode": "confirm"　　// confirm / auto / purge
  }
}

{
  "action": "auid",　　// auid: 起動 / copyapp: インストール / removeapp: 削除
  "auid": "<app ID>", 　　// Mandatory. 起動するアプリのID
  "copyapp": {
    "app": "<app ID>",      // 内蔵ストレージインストール対象のアプリのID
    "media": "nocopy",　　// copy / sync / nocopy
    "mode": "confirm",　　// confirm / auto / dryrun
    "startup_uri": "<app ID>", 　　// 電源連動起動するアプリのID
    "home_menu_app": "false"　　// ホームメニューアイコンの表示 true / false
  },
  "removeapp": {
    "app": "<app ID>",　　// 削除対象のアプリのID
    "media": "keep",　　// keep / remove
    "mode": "confirm"　　// confirm / auto / purge
  }
}

ディスプレイ内蔵ストレージに配置する場合の制御プロパティ

1. “copyapp”

ディスプレイ内蔵ストレージにHTML5を配置する場合は、以下のプロパティを組み合わせて、インストール時の動作をより細かく制御できます。

プロパティ	必須/任意	デフォルト値	説明
action	任意	auid	USBメモリー挿入時の動作指定 USBメモリー挿入時に自動実行される処理の制御（autorun.txt のKey設定）。autorun.txt に設定できるKeyは以下。 auid：指定された auid のHTML5を起動（必須）。 copyapp： HTML5アプリをディスプレイにインストール。 removeapp： HTML5アプリをディスプレイからアンインストール。
auid	必須		auid の指定。
app	任意		インストール対象のHTML5アプリの auid または auid のリストを指定。
media	任意	nocopy	USB:/media ディレクトリのインストール動作の指定 USBメモリー内の /media /ディレクトで、以下のいずれかの動作を指定。 copy： USB:/media/フォルダのファイルコピー。同名ファイルがディスプレイ側に存在すると、USB:/media /のファイルに上書き。 USB:/media/に存在せず、ディスプレイに保存されているファイルは残る。 sync：ディスプレイ側と USB:/media/フォルダ間のファイル同期。 USB:/media/に存在しないファイルは、ディスプレイ側は削除。 nocopy：ファイルをコピーしない。
mode	任意	confirm	HTML5アプリのインストールフローにおけるUI動作の指定インストールフロー時のUIの挙動を以下のいずれかで指定。 confirm：インストールフロー中に確認ダイアログを表示。 auto：インストールフロー中にダイアログを表示しない（自動実行）。 dryrun：インストールせず、startup_uri で指定したHTML5アプリを起動。
startup_uri	任意		startup_uri に対応する auid を指定。
home_menu_app	任意	FALSE	ホームメニュー（Leanback Launcher）アイコンの動作指定 auid または uri を指定すると、それを起動するためのアイコンがホームメニューに表示。 false または空文字列を指定した場合、アイコンは表示されない。

“startup_uri”について

startup_uri は copyapp の子プロパティです。startup_uri に auid を指定すると、ディスプレイの電源ON時に自動的にそのHTML5アプリを起動する設定ができます。

JSON

{
  "action": "copyapp",
  "auid": "<app ID>",
  "copyapp": {
    "app": "<app ID>",
    "startup_uri": "<app ID>"  // 任意。電源連動起動を使う場合に指定
  }
}

{
  "action": "copyapp",
  "auid": "<app ID>",
  "copyapp": {
    "app": "<app ID>",
    "startup_uri": "<app ID>"  // 任意。電源連動起動を使う場合に指定
  }
}

2. “removeapp”

以下のプロパティを組み合わせることで、アンインストール時の動作をより細かく制御できます。

プロパティ	必須/任意	デフォルト値	説明
app	任意		削除対象のHTML5アプリ情報を指定。
media	任意	keep	USB:/media/ のアンインストール動作の指定 keep: AVメディアファイルを削除しない。 remove: AVメディアファイルを削除する。
mode	任意	confirm	HTML5アプリのアンインストールフローにおけるUI動作の指定 confirm：アンインストールフロー中に確認ダイアログを表示。 auto：アンインストールフロー中にダイアログを表示しない（自動実行）。 purge：インストールされているすべてのHTML5アプリと AVメディアファイルをアンインストール。フロー中に確認ダイアログを表示。

manifest.jsonは、auid、表示名、起動URL、スプラッシュ画像などのアプリ情報を指定します。
manifestファイルは “manifest.json” というファイル名にする必要があります。

例　web_url

JSON

{
  "name": {
    "default": "en_US",
    "en_US": "<app display name>"　　// ホームメニューなどに表示されるアプリ名
  },
  "auid": "com.example.myapp",　　// 逆ドメイン形式（例：http://example.com → com.example）
  "version": "1.0",
  "manifest_version": "1.0",
  "app": {
    "launch": {
      "web_url": "http://example.com/myapp"　// URLの指定
    }
  },
  "splash": "splash.jpg",
  "minimum_web_platform_version": "1.0"
}

{
  "name": {
    "default": "en_US",
    "en_US": "<app display name>"　　// ホームメニューなどに表示されるアプリ名
  },
  "auid": "com.example.myapp",　　// 逆ドメイン形式（例：http://example.com → com.example）
  "version": "1.0",
  "manifest_version": "1.0",
  "app": {
    "launch": {
      "web_url": "http://example.com/myapp"　// URLの指定
    }
  },
  "splash": "splash.jpg",
  "minimum_web_platform_version": "1.0"
}

例　local_path

JSON

{
  "name": {
    "default": "en_US",
    "en_US": "<app display name>"　　 // ホームメニューなどに表示されるアプリ名
  },
  "auid": "<app ID>",　
  "version": "1.0",
  "manifest_version": "1.0",
  "app": {
    "launch": {
      "local_path": "file://localhost/doc/index.html"  // USBまたは内蔵ストレージ経由で起動するHTMLファイルのパス
    }
  },
  "splash": "splash.jpg",
  "minimum_web_platform_version": "1.0"
}

{
  "name": {
    "default": "en_US",
    "en_US": "<app display name>"　　 // ホームメニューなどに表示されるアプリ名
  },
  "auid": "<app ID>",　
  "version": "1.0",
  "manifest_version": "1.0",
  "app": {
    "launch": {
      "local_path": "file://localhost/doc/index.html"  // USBまたは内蔵ストレージ経由で起動するHTMLファイルのパス
    }
  },
  "splash": "splash.jpg",
  "minimum_web_platform_version": "1.0"
}

manifest.jsonのプロパティ詳細

Field Name			必須/ 任意	説明
name			必須	HTML5アプリ名を指定。
	default		必須	既定の表示言語を指定（例：en_US）。 ※指定した言語に対応したHTML5アプリ名の指定が必須です。
	en_US			HTML5アプリ名の言語 (英語) を指定。
	ja_JP			HTML5アプリ名の言語 (日本語) を指定。
	…			※必要に応じて、上記のように言語ごとにHTML5アプリ名を列挙。
auid			必須	auid を指定。
version			必須	HTML5アプリのバージョン番号を指定。
manifest_version			必須	manifest のバージョンを指定。 ※1.0 を指定してください。
app			必須	HTML5アプリ情報を指定。
	launch		必須	次のいずれかの方法で起動ページを指定。
		local_path		起動ページ指定方法 1: file:// で始まるファイルパスでの指定。
		web_url		起動ページを指定方法 2: http:または https:で始まる URL。 https:の場合、以下の点にご注意ください: 1: ディスプレイの日時設定が正確であること 2: 正式に発行されたサーバー証明書を使用すること 3: ルート証明書を[プロ設定]→[HTML5プラットフォーム]でディスプレイに取り込むこと
		cold_boot_delay	任意	ディスプレイ本体ON初回時の HTML5 アプリ起動遅延。時間の指定（ミリ秒単位）。デフォルト値は0。ネットワーク接続が確立するまでの待機時間を指定などで利用。
	screen		任意	画面設定を指定。
		orientation	任意	表示方向の指定。 0: 通常方向（既定値） 90: 時計回りに90度回転 270: 時計回りに270度回転（反時計回りに90度回転） ※180度の指定は不可です。 Tips: プロ設定での設定を推奨します。操作手順: [プロ設定] →[HTML5プラットフォーム]→[ウェブアプリの表示の向き] →[ウェブアプリを優先する]を有効化して向きを設定します。 ※この場合、プロ設定での設定が優先されます。
		bgcolor	任意	背景色を指定 (例: #FFFFFFFF)。
	window_close		任意	window.close() の動作指定。 0: 無効（既定値） 1: 有効
	attachkeys		任意	HTML5アプリで取得可能な追加Key eventを指定。詳細はこちらを参照。
	alert_dialog		任意	アラートダイアログの表示動作の指定。 ignore: アラートダイアログを表示しない。 ※`alert_dialog` の指定がない場合、アラートダイアログを表示。
	confirm_dialog		任意	確認ダイアログの表示動作の指定。 yes: 表示する（既定値） no: 表示しない
	prompt_dialog		任意	入力ダイアログの入力欄に表示する文字列を設定。文字列を指定すると、ユーザー操作なしで入力内容が確定される。
	initial_input		任意	BZ40P / BZ35P / BZ30P: 非対応デフォルトで適用される表示画質設定の指定。 video: 動画表示に適した設定（既定値） photo：静止画表示に適した設定
	fixed_input		任意	BZ40P / BZ35P / BZ30P: 非対応 HTML5アプリのコンテンツ切り換え時の動作指定コンテンツが、静止画／動画／外部入力の切り換え時の動作を指定。 true：コンテンツにかかわらず表示画質設定を変更しない。 ※切り換わり時のちらつきを抑制します。 false：コンテンツに応じて表示画質設定を変更する（既定値）。
	fixed_picture_mode		任意	BZ40P / BZ35P / BZ30P: 非対応画質モードの固定設定再生コンテンツに関係なく[画質モード]を固定。picture_mode が指定されている場合、initial_input と fixed_input の設定は無効。 none：再生コンテンツに応じて[画質モード]を自動切り換え（既定値）。 game：常に画質モードを[Game]に固定。 ※HDMI遅延を抑えたい場合はこちらを利用してください。
	onsleep		任意	リモコン操作によるディスプレイ電源OFF時の内蔵ブラウザ動作指定。 stop：ブラウザの動作を停止（既定値）。 pause：ブラウザの動作を一時中断。電源ONのタイミングで再開。 continue：ブラウザの動作を継続。
	background		任意	ディスプレイがバックグラウンド時のJavaScript 動作指定。 ※例: HTML5アプリ実行中にYouTubeが起動した場合など。 true: JavaScriptを継続して動作させる。 false: JavaScriptを停止（既定値）。
	cache_files_and_images		任意	キャッシュ動作の指定。 true: キャッシュを有効（既定値）。 ※HTML、CSS、JavaScript、および動画／静止画コンテンツのキャッシュが有効になります。 false: キャッシュを無効。
	video		任意	N/A
		multiple_video_tags	任意	BZ40P / BZ35P / BZ30P 非対応 video要素の複数同時利用指定。 true：複数の video 要素の同時利用を許可。 ※ true の場合、上限値は 2K動画 x 2個となり、4K + 2K 不可となりますのでご注意ください。 false：複数の同時利用を許可しない。 ※ 複数の video 要素が作成された場合、後から作成されたものが優先される「あと勝ち方式」（既定値）となります。
	error_page		任意	エラーページを指定。
		default	任意	HTTPエラー発生時のページ指定指定可能スキームは http://, https://, file://。例 *http:// example.com/error/404.html*
		detail	任意	各HTTPステータスコードに対するエラーページ指定指定可能なURLスキームは http://, https://, file://。例: こちらは、403、500、タイムアウトエラー時の指定例です。
splash			任意	splash.jpgなど、HTML5アプリ内のスプラッシュ画像ファイル名を指定。
reboot			任意	HTML5アプリがクラッシュした場合の動作指定。 true：自動的にHTML5アプリを再起動。 false：何もしない（既定値）。
minimum_web_platform_version			必須	Web app runtimeのバージョンを指定。 ※JavaScript で `navigator.userAgent` を確認してください（例: 1.0など）。

Key event

Key eventの一覧とサンプルHTML5アプリを用意しています。

サンプル「リモコンキーイベント」&リファレンスダウンロード

ディスプレイのリモコンのKey event（[ホーム]Key、チャンネル操作Key、矢印Keyなど）を、manifest.jsonのattachkeys プロパティで指定し、HTML5アプリで受け取ることができます。

例　各Key eventの指定

JSON

"app": {
  "attachkeys": [
    "VK_HOME",   // ホームボタン
    "VK_CH_UP",  // チャンネルアップ
    "VK_CH_DOWN"  // チャンネルダウン
  ]
},


"app": {
  "attachkeys": [
    "VK_HOME",   // ホームボタン
    "VK_CH_UP",  // チャンネルアップ
    "VK_CH_DOWN"  // チャンネルダウン
  ]
},

例　Key eventの受け取り

JSON

document.onkeydown = function(e) {
  if (e.keyCode === VK_HOME) {
    // Please implement a home key behavior here.
  }
}

document.onkeydown = function(e) {
  if (e.keyCode === VK_HOME) {
    // Please implement a home key behavior here.
  }
}

403、500、タイムアウトエラー時の指定例

HTTPエラー発生時に表示するページの指定例を以下に示します。

JSON

[
  {“status_code” : “403”, “path” : “http://example.com/doc/403.html”},
  {“status_code” : “500”, “path” : “file://localhost/doc/500.html”},
  {“status_code” : “timeout”, “path” : “file://localhost/doc/timeout.html”}
]

[
  {“status_code” : “403”, “path” : “http://example.com/doc/403.html”},
  {“status_code” : “500”, “path” : “file://localhost/doc/500.html”},
  {“status_code” : “timeout”, “path” : “file://localhost/doc/timeout.html”}
]

W3C/HTML5 API

HTML5アプリでは、Webの標準的な機能の一部に制限があります。詳細はW3C/HTML5 APIで対応状況を確認してください。

拡張オブジェクトタグとJavaScript APIの提供

ブラビアプロフェッショナルディスプレイでは、独自の拡張オブジェクトタグとJavaScript APIを提供しています。

拡張オブジェクトタグ・JavaScript API リスト

拡張オブジェクトタグ

以下のMIMEタイプを<object>タグに指定すると、HTML5アプリ内に各種メディアを表示できます。JavaScriptによる制御コードと組み合わせて使用します。

例

application/x-decimated-video　HDMI入力映像をHTML5アプリ内に表示
application/x-multicast-video　マルチキャストビデオ再生
application/x-4k-photo　高品質画像を表示

JavaScript API

JavaScript APIは、HTML5アプリ内からディスプレイの状態取得や制御を行うためのインターフェースです。

例

sony.tv.DirectoryReader　ディレクトリ内のファイル一覧を取得
sony.tv.systemevents　ディスプレイのシステムイベントを検出（入力切替、電源状態など）
sony.tv.picturemode 　画質モードの取得・変更

イーサネットまたはWi-Fi経由でadbコマンドを使用し、ログの取得やリモートデバッグができます。HTML5アプリの配置場所が内蔵ストレージ・USBメモリー・外部Webサーバーのいずれの場合でも使用できます。

注意
PCとディスプレイのUSBケーブル接続によるデバッグはサポートしていません。

セットアップ

デバッグ機能を使用するには、以下の手順でセットアップする必要があります。

ディスプレイ: [開発者向けオプション]を有効にする
操作手順: [設定]→[開発者向けオプション]→[開発者向けオプション]を有効にする。
PCにadbコマンドをインストールする
PCにAndroid SDK Platform-Toolsをインストールし、adbコマンドを使用できるようにします。
PCとディスプレイを接続する
以下のコマンドでPCからディスプレイに接続します。接続はイーサネットまたはWi-Fi経由で行います。

adb connect <ディスプレイのIPアドレス>

ログ取得方法

コンソールログでの取得方法
ディスプレイはコンソールログをサポートしています。
以下のコマンドでログを取得できます。Logcat は javascript console.log() だけでなく他のシステムログも表示します。

			
$ adb logcat -c   //バッファクリア
$ adb logcat -v time   //ログ取得
$ adb logcat -v time > log.txt  // データ保存に ">" (リダイレクト) も利用可能

ログの停止方法
[Control] + [c]で停止できます。

リモートデバッグ方法

ディスプレイはリモートデバッグ機能をサポートしており、ディスプレイ上で動作しているHTML5アプリをPCブラウザ上でデバッグできます。

WebAppRuntime v1.4.10.以降

1. コマンドの実行
<HTML5アプリurl>でアプリを指定し、以下のコマンドを実行すると、リモートデバッグ機能が有効になり、WebAppRuntimeが起動します。

			
$ adb shell am start -a android.intent.action.VIEW -n com.sony.dtv.browser.webappruntime/.WebAppRuntimeActivity --es uri <HTML5 application url> -e args '--remote-debugging-socket-name=tvsdk-debugging-socket'

2. Devices画面の表示

PCのChromeを起動し、アドレスバーに “chrome://inspect/#devices” を入力すると、Devices画面が表示されます。

3. リモートデバッグの実行
Devices画面のモデル名下にある “inspect” ボタンを押下すると、新規DevToolsが起動してリモードデバッグが実行されます。

WebAppRuntime v1.3.22.以前

1. WebAppRuntimeの起動
以下のコマンドを実行すると、リモートデバッグ機能が有効になり、WebAppRuntimeが起動します。

			
$ adb shell am start -a android.intent.action.VIEW -n com.sony.dtv.browser.webappruntime/.WebAppRuntimeActivity -e args '--remote-debugging-socket-name=tvsdk-debugging-socket'
$ adb forward tcp:9222 localabstract:tvsdk-debugging-socket

2. PCとディスプレイを接続
PCのChromeを起動し、アドレスバーにhttp://localhost:9222 を入力すると、PCとディスプレイが接続されます。

3. コンソールログの表示
Chromeブラウザにデバッグ情報とコンソールログが表示されます。

キャッシュモードの無効化

キャッシュ機能を無効化したい場合は、manifest.jsonで可能です。
ページ読み込みでキャッシュされた画像やファイルを削除するには、manifest.jsonのcache_files_and_imagesプロパティを false にします。

JSON

{
  "app": {
    "cache_files_and_images" : false // Disable cache mechanism
  }
}

{
  "app": {
    "cache_files_and_images" : false // Disable cache mechanism
  }
}

アプリ開発基本情報

基本構造

1. ファイル構造ルール

2. 静的ファイルの配置

外部Webサーバーに配置の場合

USBメモリーまたはディスプレイ内蔵ストレージに配置の場合

3. 動画などの容量の大きいファイルの配置

autorun.txtによるHTML5アプリ起動指定

autorun.txtの構造・プロパティ

構造

記述例

ディスプレイ内蔵ストレージに配置する場合の制御プロパティ

1. “copyapp”

“startup_uri”について

2. “removeapp”

manifest.jsonによる情報指定

manifest.jsonのプロパティ詳細

Key event

403、500、タイムアウトエラー時の指定例

Webの標準的な機能の制限

W3C/HTML5 API

拡張オブジェクトタグとJavaScript APIの提供

拡張オブジェクトタグ

JavaScript API

HTML5アプリのデバッグ方法（Android TV OS 12以下）

セットアップ

ログ取得方法

リモートデバッグ方法

WebAppRuntime v1.4.10.以降

WebAppRuntime v1.3.22.以前

キャッシュモードの無効化