Lento con forza

大学生気分のIT系エンジニアが色々書いてく何か。ブログ名決めました。

FirefoxTVのアプリケーション開発1 〜Hello world編〜

最近、と言っても3ヶ月くらい前にテレビを買ったんですが、選ぶときに「面白そうなOSがが入っている」という選定基準を掲げていました。 僕の中での面白そうなOSとは、開発ができそうなOS、カスタマイズ可能なOSです。

テレビを買った時の記事はこれです。結局PanasonicVIERAを選びました。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のアプリを作ったことがないので本当かどうかわかりませんが)

まず、FirefoxIDEを開き新規アプリを作ってみましょう。 IDEを開き、「新規アプリ」ボタンをクリックします。 f:id:kouki_dan:20160110011543p:plain

アプリのテンプレートを選択する画面が出てきます。
テンプレートはHelloWorldを選択
プロジェクト名にも"HelloWorld"と入力し、OKボタンを押しましょう
f:id:kouki_dan:20160110011800p:plain

これでアプリの雛形が完成しました。 f:id:kouki_dan:20160110011842p:plain ここには基本となるHTMLファイル。そして、そこから呼び出されるjsファイルがあります。 見慣れないファイルとして manifest.webapp というファイルがあります。これはFirefoxOS用のアプリの設定ファイルで、アプリ名やアイコン、パーミッション等の指定を行うファイルです。詳細は以下のリンクに書かれています。
アプリマニフェスト - アプリセンター | MDN

ひとまず実行してみる事にしましょう。 リモートランタイムに接続済みなら、中央上部にある三角の実行ボタンを押すことで実行できます。接続済みではない場合、テレビのIPアドレスを右カラムにあるリモートランタイムから入力し接続してください。詳細は FirefoxTVで開発できるようになるまで に書いてあります。

テレビで遊ぼう

おそらく画面が真っ暗になったと思います。それで正常です。
実行ボタンの右にある、デバッグボタンを押してみましょう。 f:id:kouki_dan:20160110012926p:plain

デバッグ画面が出て、コンソールに "Hello world!"と出力されているのが確認できると思います。これは app.js 内でconsole.logが呼び出される事によって表示されています。

これでテレビで自分の作ったアプリケーションを動かすことができました。ただ、これだけだとつまらないので少し遊んでみましょう。WebIDE上のコンソールにいろいろ入力することで、テレビ上でプログラムを動かす事ができます。 f:id:kouki_dan:20160110013242p:plain

テレビで動いてる感を簡単に出すにはalertがおすすめです。
alert("Hello world!")
と入力すれば、実際にテレビにアラートが表示されます。
f:id:kouki_dan:20160110013352p:plain

テレビの写真も撮ったのですが、部屋が写り込んでしまってなんか微妙な感じになったので写真を貼るのはやめておきます。実際に動かして楽しんでください!

次はどこへ

さて次は何をやりましょう。 とりあえずパッと思いつくだけでも、画面に文字を出したり、動画を表示したり、テレビを表示したり、やりたいことはたくさんありますね。 何ができて何ができないのかはまだアプリ開発を始めたばかりなのでよくわかっていません。APIをいろいろと調べていると、実際にテレビ番組にアクセスできるAPIなんかもあるみたいで、アクセスできると楽しいなー。と思っています。実際につなぐことができるかはこれから試していきます。

また、Firefoxがテレビのサンプルプロジェクトも公開しているので、そこを読んでまた次の記事を書きたいと思います。