LGのスマートTV（webOS）の実機に自作アプリをインストールして動作確認を行うまでの一連の流れを解説します！
スマートTVのアプリの開発において、シミュレーターは確かに便利です。
ただ、シミュレーターが「嘘をつかない」のはあくまでロジックまで。
実際にリモコンを握って操作した時のもっさり感や、大画面で見つけたフォントの違和感、そして実機特有のメモリ制限……。
こうした「現場のリアル」は、やはりテレビにアプリをインストールして動かしてみないことには始まらないので、やはり最終的なパフォーマンスや挙動は実機で確認をしたいものです。
「PC上では完璧だったのに！」という悲劇を防ぐためにも、今回はLGのスマートTV（webOS）実機に自作アプリをインストールし、動作確認を行うまでの最短ルートをまとめました。
1. 事前準備：開発環境を整える
まずは、テレビ側とPC側、以下にそってそれぞれの準備を進めます。
テレビ側の準備
Developer Modeアプリのインストール:
LG Apps(旧LG Content Store)から「Developer Mode」アプリを検索してインストールします。
「Developer Mode」アプリはTVを開発者モードに切り替え、アプリのインストールをおこなうために必要なアプリです。
WebOSアカウントの作成:
LGの公式サイトの右上「SIGN IN」から新規会員登録をしてアカウントを作成します。
WebOSアカウントはDeveloper Modeを有効にするために必要です。
PC側の準備
WebOS SDKのCLIツールをインストールします。以下のコマンドでインストールをすることができます。
# CLIツールのインストール npm install -g @webos-tools/cli # インストールの確認 ares -V
2. テレビとPCを接続（ペアリング）する
開発用PCからテレビを操作できるように設定をします。
ステップ1：Developer Modeの起動
テレビで「Developer Mode」アプリを起動し、ログインします。
画面上の Dev Mode Status と Key Server を「ON」にします。
ステップ2：PCの登録
TVと同じネットワークにPCを接続します。
PCのターミナルで以下のコマンドを実行し、対話形式でテレビの情報を入力していきます。
ares-setup-device
? Select add
? Enter Device Name: play // 自由にわかりやすい名前
? Enter Device IP address: xxx.xxx.xx.xx // Deveoper ModeのIPアドレス
? Enter Device Port: 9922 // 固定
? Enter ssh user: prisoner // 固定
? Enter description: play TV // 自由にわかりやすい説明
? Set default ? Yes
? Save ? Yes
ステップ3：キーの取得
テレビとのセキュアな通信を確立するために、パスフレーズ（Key）を取得します。
# playは先ほど設定をしたデバイス名 ares-novacom --device play --getkey
コマンド実行後、テレビ画面の左下に表示されてる6文字のパスフレーズをPCに入力します。
ステップ4：接続確認
以下のコマンドで、テレビの情報が取得できれば接続は成功です！
# playは先ほど設定をしたデバイス名 ares-device --system-info --device play
3. アプリの作成とインストール
いよいよテレビで動くアプリをインストールします。今回は既存のWebページを表示する「Hosted web app」形式を例にします。
Webページ自体のHTMLやJavaScriptの詳細については今回は省かせていただきます。
アプリの雛形作成
ares-generate -t hosted_webapp ./sampleApp
上記のコマンドを実行して生成された index.html 内の window.location.href を、実際にテレビで表示させたいページのURLに書き換えます。
<!doctype html> <html> <head> <!-- xxx ここを任意のURLに変更する！ --> <script>location.href='xxx';</script> </head> <body></body> </html>
アプリを起動するとここで書き換えたURLへと遷移されます。
パッケージ化とインストール
作成したディレクトリを以下のコマンドで .ipk 形式にパッケージングし、テレビへインストールします。
# パッケージ化 ares-package ./sampleApp # インストール（playは先ほど設定をしたデバイス名） ares-install --device play ./sampleApp/com.domain.app_0.0.1_all.ipk
アプリの起動
インストールが完了したら、PCからコマンドでアプリを起動してみましょう。
# playは先ほど設定をしたデバイス名 ares-launch --device play com.domain.app
テレビの画面が切り替わり、指定したページが表示されれば確認完了です！ お疲れ様でした！
Tips: よく使うデバッグコマンド
開発中に役立つコマンドをいくつか紹介します。
インストール済みアプリの一覧表示
ares-install --device play --list
IPアドレスが変わってしまった時の修正
ares-setup-device --modify play --info "host=xxx.xxx.xx.xx"
アプリの強制終了
ares-launch --device play --close com.domain.app
まとめ
一度パスを通してデバイス登録さえしてしまえば、次からは非常にスムーズに実機確認が行えます。
シミュレーターだけでは見落としがちなリモコンのフォーカス制御や、大画面での描画パフォーマンスなど、実機でしか見えない部分は意外と多いもの。
「リリース直前にテレビで見たらガタガタだった」という事態を避けるためにも、早めに実機で触っておくのが結局のところ一番の近道です。
何より、自分の作ったものがテレビの大画面で動くのは、シンプルに開発のモチベーションにも繋がります！
大画面でのUI/UX確認や、テレビ特有のパフォーマンスの癖を掴むためにも、ぜひ実機を活用してみてください。
以上、配信基盤グループの新井でした！
