2019年11月8日金曜日

FireTV アプリでコントローラのボタンをハンドリングしてみた

概要
環境
ハンドリング用テストアプリ
(おまけ) コントローラ keycode 対応表
最後に

概要

Web アプリケーションとして作成した FireTV アプリで FireTV のコントローラのイベントハンドリングをしてみました
D-Pad は日本では使えないので Bluetooth コントローラのみ対応しています

環境

FireTV 3gen 4K
macOS 10.15

ハンドリング用テストアプリ

今回は Web アプリケーション版の FireTV アプリになります
アプリは Ruby + JavaScript で構築します

bundle init
vim Gemfile

gem "sinatra"

bundle install --path vendor
vim app.rb

require 'sinatra/base'

class TestWebApp < Sinatra::Base
  get '/' do
    erb :index
  end
end

vim config.ru

require './app'
run TestWebApp

mkdir views
vim views/index.erb

<html>
  <head>
    <title></title>
    <style type="text/css">
      body {
        background-color: #FFFFFF;
        margin: 30px;
      }
    </style>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <script type="text/javascript">
      $(window).keydown(function(e) {
        $("#keycode").text(e.keyCode);
        return false;
      });
    </script>
  </head>
  <body>
    <h3>down keycode</h3>
    <div id="keycode"></div>
  </body>
</html>

解説

基本は index.erb を見れば OK です
jQuery を使って keycode のハンドリングをしています
keydown を使ってキーボードイベントを取得しそこから e.keyCode で番号が取得できます
あとはその番号を div タグに設定しているだけです

また CSS で背景を白に設定しています
FireTV はデフォルトの背景が黒なのでそのままだと画面が真っ黒になってしまうためです
あと margin も地味に大事でこれがないとテレビによってははみ出してしまうので入れています

動作確認 (ローカル)

bundle exec rackup config.ru

http://localhost:9292 にアクセスしてキーボードを叩いてみましょう
叩くごとに keycode が変わるのが確認できると思います

動作確認 (FireTV)

bundle exec rackup config.ru -o 0.0.0.0

IP アドレスで Web App Tester からアクセスするのでバインドする IP を 0.0.0.0 にしておきます
Web App Tester を起動しましょう
そして動作しているマシンの IP アドレスを入力してテストアプリとして登録します

あとは起動して動作確認しましょう
静止画ですが実際はコントローラのボタンをポチポチすれば番号が変わるのが確認できると思います

(おまけ) コントローラ keycode 対応表

公式の keycode 表とキーボードの keycode 表を対応付けしてみました
FireTV 上ではなくブラウザ上でキーボードを使ってテストしたい場合に参考にしてください

Select (13) -> Enter
Up (38) -> 上矢印
Down (40) -> 下矢印
Left (37) -> 左矢印
Right (39) -> 右矢印
Play/Pause (179) -> なし
Rewind (227) -> なし
Fast Forward (228) -> なし
Back (NA) -> なし

また公式には書いていなかったですがメニューボタンは「18」でした
音声検索ボタンとホームボタンはハンドリングできなさそうでした

最後に

FireTV のコントローラのボタンのハンドリングをしてみました
Web アプリケーションとして実装している場合は普通に keydown イベントをハンドリングすれば良さそうです

hawksnowlog