アプリキャストのアプリを10分で作る方法
- December 8th, 2008
- Posted in ライフハック
- Write comment
さて、「テレビウィジェットコーディング勉強会」を開催しました。アプリキャスト（テレビ上で動くウィジェット）をライブコーディングしてもらう、というマニアックなものでしたが、20名近くの方にご参加いただきました（感謝！）。
会場ではサンプルアプリを2つ、ゼロから作ってもらいました。僕個人もそう思いましたが、「思ったより簡単かも☆？」という感想を持たれた方が多かったのでは。
現在豪華賞品があたるコンテストも開催中なので、以下に「アプリキャスト開発の流れ」を紹介してみます。腕に覚えのある方は挑戦してみては。基本的にミニアプリなのですぐ出来ちゃうんじゃないでしょうかね。
↑ BRAVIAとかVAIOとかあたります。ソニーさん曰く「かなりがんばりました」とのことｗ。
なお、この記事で題材にするのは百式企画塾で優勝した「猫カメラ」。猫が見ている風景をウェブカメラ経由でテレビに出せたら楽しくない？という実に素晴らしいアイデアです。
↑ 猫につけたカメラから見た風景がテレビに映るという発想です。
ただ、猫を用意するのは大変なので、ウェブ上に公開されているライブカメラ映像を1秒ごとにとってきてウィジェットに表示、というものにしてみましょう。
以下、作業ログになります。
- 開発環境を整える
- エミュレータを起動して設定
- ファイル構成について
- info.xmlを作る
エミュレーターとマニュアル、レファレンス、サンプルアプリがソニーサイトで配布されているのでダウンロードします。
↑ ダウンロードしたファイル群。
エミュレータはWindows専用ですね。あとDirectXが必要です。さくっとインストールしちゃいましょう。マニュアルとかレファレンスは適当に目を通しておけばよいでしょう。
さっそくエミュレーターを起動します。
↑ こんな感じ。
次に作業フォルダを用意します。作業フォルダはデフォルトで「マイドキュメント」の「My Applicast」以下になります。ここにアプリケーションをフォルダごとつっこめばエミュレータ上で参照することができます。
↑ 「My Applicast」にフォルダを突っ込むと・・・。
↑ こんな感じで見れます。
あとエミュレータのメイン画面でメモリマップが見られるようにしておきましょう。設定から以下をチェックします。
↑ ここね。設定したらエミュレータを再起動します。
なお、エミュレータはテレビリモコンからの入力を受け付けます。特殊ボタンなどは以下を参考にしましょう。
↑ キーボードとリモコンの対応表。
これで準備完了です。いよいよコーディングですが、そのまえにどういうファイルを作らなくちゃいけないか、ファイル構成を知っておきましょう。
アプリキャストを作るには最低限これぐらいのファイルが必要です。
↑ これだけ。
画像ファイルは別として、動作させるだけだったらinfo.xml、layout.xml、widget.jsがあればとりあえずOKです。今回のコーディングではこの3つを見ていきます。
これはウィジェットの情報を保持しておくものですね。まずはコードから。
<?xml version="1.0" encoding="UTF-8"?> <Info> <name>猫カメラ.TV</name> <width>280</width> <height>165</height> <profile> <spec>AC2.0</spec> </profile> </Info>
ほとんど説明は必要ないかと思いますが、ウィジェットの名前、サイズを指定しています。
次に作るのがレイアウト情報です。HTMLを作るみたいな感じかな。独自のマークアップではありますが、意味はわかりますよね。
<?xml version="1.0" encoding="UTF-8"?> <Widget> <Component name="widget"> <Bitmap name="initial-bg"/> <Bitmap name="neko"/> </Component> </Widget>
これもわかるかと思いますが、Componentを作って、背景画像（initial-bg）とnekoという領域を配置しています。Bitmapとしているのはここに画像を置くためです。テキストだったら<Text>になります。
ここまで来たらあとはneko領域に画像を表示させる、とわかりますよね。ここのコードも簡単。
まずは画像を表示させるための関数を作ります。neko領域を指定して、ウェブ上の画像をそこに入れ込みます。
function nekoCapture() {
var node = getNode('neko');
loadImage(node, 'http://example.com/neko.jpg');
}
つぎにこれを呼び出す本体を作ります。ただ単に表示させるのも芸がないので、1秒ごとに更新してみます。
function onLoad() {
setInterval(nekoCapture, 1000);
}
以上！これでアプリキャスト上で猫が見られるようになりましたよ。
↑ テスト画像で実行（ちょっとわかりにくいかな・・・）。
なお、ここまでで動作確認はできますが、もし可能ならBRAVIAにて確認作業をした方がいいようです（さすがに全員持っているわけではないのであくまで推奨ですが）。フォントの違いなどがあるので、まれにレイアウトが崩れたりするようです・・・。
ちなみに作ったアプリをBRAVIAで試すにはUSBメモリに突っ込むだけ、というお手軽さ。USB対応のBRAVIAだったらそこにあるアプリを自動認識してくれるようです。
以上ですかね。細かいことをいい始めると他に気をつけるべきところはちょこちょこありますが、わりとコーディングは簡単というのがおわかりいただけたのでは。
なお、アプリキャストでは公式ブログも立ち上げており、こちらでもマニアックな開発テクニックが紹介されています。わからないことがあればコメントに残しておいてほしい、とのことなのでこちらもご活用ください。
ちなみに現在投稿されているアプリも一覧で見れますが、どれもシンプルなものばかりなのでコード量も少なくて済みそうですよ・・・。
↑ アプリのアイデアを考えるのにも参考になりますね。
今回のコンテストで入賞すれば全国のBRAVIAからそれが見られるようになるそうなので是非チャレンジしてみてください。賞品も豪華ですし、今なら結構な確率で（ｒｙ
なお、一点注意が。アプリキャストコンテストに応募するにはアプリキャストの投稿が必要なのですが、投稿した直後の画面でコンテストへのエントリーをしない人がやたら多いそうです。投稿したらコンテストにエントリーすることを忘れずに！
■ 関連記事
- 【百式企画塾】 「テレビを便利にするウィジェット」の結果発表！ | IDEA*IDEA
- 『近未来テレビ会議』で「みんなのテレビ」について考えた | IDEA*IDEA
- テレビウィジェットコーディング勉強会（12月3日）へのお誘い | IDEA*IDEA
No comments yet.