最近、と言っても3ヶ月くらい前にテレビを買ったんですが、選ぶときに「面白そうなOSがが入っている」という選定基準を掲げていました。 僕の中での面白そうなOSとは、開発ができそうなOS、カスタマイズ可能なOSです。
テレビを買った時の記事はこれです。結局PanasonicのVIERAを選びました。OSはFirefoxTVです。 kouki.hatenadiary.com
テレビを買ったのはいいんですが、テレビのコンテンツ力とNetflixの素晴らしさに感動し、何も開発することなく3ヶ月が過ぎてしまいました。 これではまずいと思ったのでそろそろFirefox TVの開発でもしようと思いこの記事を書き始めました。
FirefoxTVで開発できるようになるまで
FirefoxTVの開発は、FirefoxのWebIDEを使って行います。以下のURLでWebIDEとの接続をどう行えば良いかが書かれているので詳細はリンク先を参照してください。 developer.mozilla.org
注意すべきところは、最後のAllowing the connection from WebIDE
の節で、YesNoを応えるアラートは、その前の節で表示しているIPアドレスを確認する画面を開いている時には表示されないことです。僕はこれでだいぶ時間を無駄にしました。
IPアドレスを確認したら、一度テレビの画面に戻っておくと安心です。
FirefoxTVでHello Worldを動かす
さて、これでテレビとIDEの接続ができました。実際にHello Worldのアプリケーションを動かしてみましょう。 普通のFirefox OSアプリケーションを作るのと同じように進めていけば良いみたいです(僕はFirefox OSのアプリを作ったことがないので本当かどうかわかりませんが)
まず、FirefoxのIDEを開き新規アプリを作ってみましょう。 IDEを開き、「新規アプリ」ボタンをクリックします。
アプリのテンプレートを選択する画面が出てきます。
テンプレートはHelloWorldを選択
プロジェクト名にも"HelloWorld"と入力し、OKボタンを押しましょう
これでアプリの雛形が完成しました。
ここには基本となるHTMLファイル。そして、そこから呼び出されるjsファイルがあります。
見慣れないファイルとして manifest.webapp
というファイルがあります。これはFirefoxOS用のアプリの設定ファイルで、アプリ名やアイコン、パーミッション等の指定を行うファイルです。詳細は以下のリンクに書かれています。
アプリマニフェスト | MDN
ひとまず実行してみる事にしましょう。
リモートランタイムに接続済みなら、中央上部にある三角の実行ボタンを押すことで実行できます。接続済みではない場合、テレビのIPアドレスを右カラムにあるリモートランタイムから入力し接続してください。詳細は FirefoxTVで開発できるようになるまで
に書いてあります。
テレビで遊ぼう
おそらく画面が真っ暗になったと思います。それで正常です。
実行ボタンの右にある、デバッグボタンを押してみましょう。
デバッグ画面が出て、コンソールに "Hello world!"と出力されているのが確認できると思います。これは app.js
内でconsole.logが呼び出される事によって表示されています。
これでテレビで自分の作ったアプリケーションを動かすことができました。ただ、これだけだとつまらないので少し遊んでみましょう。WebIDE上のコンソールにいろいろ入力することで、テレビ上でプログラムを動かす事ができます。
テレビで動いてる感を簡単に出すにはalertがおすすめです。
alert("Hello world!")
と入力すれば、実際にテレビにアラートが表示されます。
テレビの写真も撮ったのですが、部屋が写り込んでしまってなんか微妙な感じになったので写真を貼るのはやめておきます。実際に動かして楽しんでください!
次はどこへ
さて次は何をやりましょう。 とりあえずパッと思いつくだけでも、画面に文字を出したり、動画を表示したり、テレビを表示したり、やりたいことはたくさんありますね。 何ができて何ができないのかはまだアプリ開発を始めたばかりなのでよくわかっていません。APIをいろいろと調べていると、実際にテレビ番組にアクセスできるAPIなんかもあるみたいで、アクセスできると楽しいなー。と思っています。実際につなぐことができるかはこれから試していきます。
また、Firefoxがテレビのサンプルプロジェクトも公開しているので、そこを読んでまた次の記事を書きたいと思います。