Tag Archives: Chromecast

こんにちは。陽気なシステム屋のうっちーです。

DVDに先駆けて、Google Playで「アナと雪の女王」の販売が開始されましたね！

https://play.google.com/store/movies/collection/promotion_400092a_frozen_xfnjp

Google Playで購入した映画やテレビコンテンツを大画面で見るならChromecastが便利です。家電量販店でも購入できるようになっていますので、600円分の Google Playクレジットがもらえる 2014年 7月 31日までにぜひ一台買っておきましょう。

—
6月末の Google I/O 2014で、Chromecastがさらに便利になる新機能が3つ発表されました。

1. Android画面のミラーリング表示
2. 同じWiFiに属していないデバイスからのCast （Nearby device）
3. アプリと接続していない時の表示カスタマイズ（Backdrop）

このうち、「1. Android画面のミラーリング表示」がリリースされたので早速試してみました。

AndroidのChromecastアプリを起動して「画面のキャスト」を選ぶだけです。簡単ですね。

あとはずっとAndroidの画面がミラーリング表示されているので、映したい画面のアプリに移って操作すればよいです。
電源ボタンを押してスリープさせても復帰するとまたミラーリング表示を再開するので、止めたくなったらChromecastアプリに戻って「切断」する必要があります。

アプリ開発時の打ち合わせのやり方やプレゼン、デモの方法も変わってくるかもしれませんね。

Android画面のミラーリング表示を試してみました。

Chromecastと同じWiFiに入らないとCastできないのは非常に大きな制約だったのですが、これが撤廃されるのは嬉しいですね。
なんでもChromecastから人間の耳には聞こえない周波数の音波を出して、これを使ってSenderデバイスとペアリングさせるようです。

対応アプリも続々登場していますし、可能性が広がりますね。

こんにちは。陽気なシステム屋のうっちーです。

先日Google Cast SDK Developer Console に変更があり、Receiverアプリの登録手順が変わりました。

難しいことは何もないのですが、設定が必要な項目が増えて面倒になっていますね。

Chromecastアプリの開発において、まず一つ目に注意すべき点として、Googleのサービスは常に進化し続けており、突然ガラッと仕様が変わってしまうことがあるという点が挙げられます。

昨日まで動いていたアプリが突然動かなくなってしまったということもあり得ます。アプリやサービスを作りっぱなしにせず、新しい情報をキャッチアップし続けることが求められています。

次に、Receiverアプリは保護されていません。これは一般的なHTMLアプリケーションと同様、Chrome Developer Toolsを使ってアプリの内容を解析することが可能だということです。以下はGoogle Playで有料販売されているアプリのReceiver側ですが、一般的なHTMLアプリケーションだということができますね。

次にChromecastはSenderと同じWiFiネットワーク上に存在する必要があるという点が挙げられます。
これはアプリアイデアを考える上で一つ大きな制約と言えますね。将来的にこの制限が撤廃されるのではという情報もあったのですが、今のところ望みが薄そうです。

Googleの公式見解として「Chromecastを保護する唯一の方法は、（Chromecastを参加させる）WiFiネットワークを適切なパスワードで保護すること」というアナウンスが出ています。

https://support.google.com/chromecast/answer/3210071?hl=ja

※（追記）Google I/O 2014で、同じWiFiに入れなくても、音波通信を使って近くのNearbyデバイスをペアリングする機能が追加されることが発表されました。

あとは、複数のクライアント（Sender）から1つのChromecastを使うことが可能であることを以前ご紹介しましたが、1つのクライアント（Sender）から一度に複数のChromecastへキャストする方法が分かりません。SenderアプリからはReceiverリストという形で見えているChromecastの一覧を取得できるのですが、セッションを一つずつ確立する必要があり、同時に複数のReceiverへメッセージを送る方法が判明していません。回避する方法があるようにも思いますが、できれば正式にサポートしてほしいところですね。

いくつか、Chromecastアプリを開発する際に注意すべき点、現状の制限について書いてみました。

ChromecastはいかにもGoogleらしい、素材に近いプロダクトだと思います。アイデア次第で様々な使い方が考えられます。

今週は、Google I/O 2014を控えています。新しい活用法が見つかるかもしれませんね。

こんにちは。陽気なシステム屋のうっちーです。

Chromecastは海外では先行して発売されており、開発用のSDKも提供されていたため、Google Playでいくつか対応アプリが公開されています。
今回は、どのようなアプリを作ればよいか参考にするために Google PlayでChromecast対応アプリをいくつか購入して試してみましょう。

現在、日本国内でChromecastを購入すると、600円分の Google Playクレジットがもらえる特典がついてきます。（2014年 7月 31日まで）
https://support.google.com/chromecast/answer/6008836?hl=ja

この特典を受け取るには、2014年 7月 31日までに Chromecastをセットアップし、設定アプリで「クーポンをチェック」をタップします。

すると、Google Playで利用できるクーポンコードが発行されます。

それでは、Google Play クレジットが充当されたら、Google Playで「Chromecast」で検索し、対応アプリをインストールしましょう。

まずは、複数のゲームの詰め合わせ「Gamecast」を試してみます。

テトリスやフラッピーバード、ブロック崩しを楽しめます。アップデートでゲームが追加されたりもするようですね。Sender側は以下のようにコントローラをイメージした画面が表示されます。

次は「Chromecast Romantic Love Notes」を見てみましょう。

画像を表示して文字を被せているだけの単純なアプリですが、大画面モニターに表示するとインパクトがありますね。

「Chromecast Fireplace & Candles」のように、音が出る動画版もあります。

次は、「Chromecast Countdown」を見てみましょう。

単純なカウントダウン・タイマーですが、 イベント会場等では便利に使えるのではないでしょうか。

このように、Chromecastアプリは単純なものであってもアイデアさえあれば、大きな画面を活かしてインパクトのあるものを作ることができるのではないかと思います。

大きなテレビに繋ぐことを考えると、高精度の画像や音声、動画や地図を組み込むのが良さそうですね。

次回は、Chromecastアプリを開発する際に注意すべき点や制限について考えてみたいと思います。

こんにちは。陽気なシステム屋のうっちーです。

これまで作成してきたアプリは、1対1、かつ、SenderからReceiver（すなわち、Chromecast）へ一方的にメッセージ、指示を送るだけでした。

Chromecastは複数のSenderからメッセージを受け取り、また、メッセージを受け取ったことをSender側へ通知することができます。

今回は、CastHelloTextサンプルを改造して複数クライアントへ対応させていきましょう。

まずはReceiverから。以前にwindow.messageBus.onMessage のイベントリスナーで event.data を参照すれば、Senderから送られてきた文字列を受け取ることができるとご説明しました。

この時、event.senderId を参照すると、送信元を識別できる識別子を取得できます。

また、window.messageBus.send 関数にsenderIdと文字列を渡すと、指定されたSenderへ通知を行うことができます。

window.messageBus.onMessage のイベントハンドラを以下のように書き換えてみましょう。

            window.messageBus.onMessage = function (event) {

                var obj = new Object();
                obj.senderId = event.senderId;
                obj.data = event.data;
                obj.event = 'joined';

                arr[event.senderId] = obj;
                displayText(JSON.stringify(obj));

                for (key1 in arr) {
                    for (key in arr) {
                        window.messageBus.send(key1, JSON.stringify(arr[key]));
                    }
                }
            }
 

次にSender側ですが、window.messageBus.send 関数が送ってきたメッセージを受け取るコードを書かなければなりません。
session.addMessageListener(namespace, receiverMessage); されている、receiverMessage 関数を以下のように書き換えましょう。

    function receiverMessage(namespace, message) {
<em></em>

          <em>//appendMessage("receiverMessage: " + namespace + ", " + message);</em>

        var message = JSON.parse(message);
        appendMessage("senderId: " + message.senderId);
        appendMessage("data: " + message.data);
        appendMessage("event: " + message.event);
    };
 

あとは、デバッグしやすいようにHTMLを少し編集します。 それでは実行してみましょう。
まずは、1台目の端末より空メッセージを送信してセッションを確立します。

2台目の端末からも同様に空メッセージを送信してセッションを確立します。
1台目の端末へ戻り、メッセージ文字列を入力して送信します。


Chromecastへメッセージが送信され、また、Chromecastからメッセージを受信しています。

2台目の端末へ移り、異なる文字列を送信します。



Chromecastから1台目が送信した情報も合わせて受信しました。
1台目側の画面も確認してみましょう。

同様に、1台目が送信した情報と2台目が送信した情報の両方を受信しています。

ここまでわかれば、対戦式のゲームなんかも実装できそうですね。
と言いますか、この改造内容自体が githubで公開されている、TicTacToeサンプルから抜き出したものです。

TicTacToeサンプルを実行すると、以下のようになります。

ここまで、Chromecastでどのようなアプリを作ることができるか検証してきました。
あとはアイデア次第です。世界を変えるアプリを作りましょう！

こんにちは。陽気なシステム屋のうっちーです。

お友達のたっちー氏からネタをいただいたので、Chromecastを使ってどのようなことができるかをもう少し見てみたいと思います。

Chromecastは時々、自動的に内蔵ソフトウェアのアップデートが行われます。

先日、ビルド17250というバージョンが配布され、WebGLのサポートが行われたようです。

早速、three.jsのサンプルをいくつかChromecast上で動かしてみました。three.jsはWebGLを扱いやすくするJavascriptのライブラリで、以前Nikeのプロモーションで使われ話題になったようですね。

http://www.pillandpillow.com/mvsw/site/

WebGLはウェブブラウザで3DCGを表示させるための標準仕様です。

こんなサンプルも動かすことができるようです。

アイデア次第で多彩な表現を実現できそうですね。

次回は複数のクライアントでChromecastとやり取りしてみます。

こんにちは。陽気なシステム屋のうっちーです。

前回まででシンプルなサンプル「CastHelloText」をChromecastで動作させることができました。

今回はメッセージの送信と受信を行っているコードについて見てみます。

まずはSender側から

https://github.com/googlecast/CastHelloText-chrome/blob/master/chromehellotext.html

とりあえず、sendMessageという関数を呼べば、任意の文字列をChromecastへ送ることができそうですね。

次にReceiver側。

https://github.com/googlecast/CastHelloText-chrome/blob/master/receiver.html

window.messageBus.onMessage のイベントリスナーで event.data を参照すれば、送られてきた文字列を受け取ることができそうです。

これだけ理解しておけば、あとはJavascriptでゴリゴリすればアプリケーションを作成することができます。

でも、Receiverアプリについて、Chromecast上で実行されるコードをデバッグできないと開発しづらいですよね。

そのためにはデバッグ用のポートへ接続しましょう。

まず、Chromecastに割り当てられているIPアドレスを調べる必要があります。スマートフォン版のChromecast設定用アプリを使えば簡単に調べることができます。

そして、PCのChrome Webブラウザから、Chromecastの9222番ポートへアクセスします。

すると、以下のような画面が表示されます。

リンクをクリックしてみましょう。お馴染みの Chrome Developer Tool が表示されます。

これで通常のWebアプリケーションのフロントエンド同様にデバッグ作業を行うことができますが、Chromecastの通信内容をより詳細に把握したい場合は、コンソールで以下を実行します。

<strong>cast.receiver.logger.setLevelValue(cast.receiver.LoggerLevel.DEBUG); </strong>

<a href="http://www.system-i-enter.com/blog/blog/2014/06/10/chromecast-6/cast-receiver-loggerlevel-debug/" rel="attachment wp-att-4828"><img class="alignnone size-medium wp-image-4828" src="http://www.system-i-enter.com/blog/wp-content/uploads/cast.receiver.LoggerLevel.DEBUG_-300x176.png" alt="" width="300" height="176" srcset="https://www.i-enter.co.jp/blog/wp-content/uploads/cast.receiver.LoggerLevel.DEBUG_-300x176.png 300w, https://www.i-enter.co.jp/blog/wp-content/uploads/cast.receiver.LoggerLevel.DEBUG_-1024x601.png 1024w" sizes="(max-width: 300px) 100vw, 300px" /></a><a href="http://www.system-i-enter.com/blog/blog/2014/06/10/chromecast-6/cast-receiver-loggerlevel-debug-2/" rel="attachment wp-att-4829"><img class="alignnone size-medium wp-image-4829" src="http://www.system-i-enter.com/blog/wp-content/uploads/cast.receiver.LoggerLevel.DEBUG_.2-300x176.png" alt="" width="300" height="176" srcset="https://www.i-enter.co.jp/blog/wp-content/uploads/cast.receiver.LoggerLevel.DEBUG_.2-300x176.png 300w, https://www.i-enter.co.jp/blog/wp-content/uploads/cast.receiver.LoggerLevel.DEBUG_.2-1024x601.png 1024w" sizes="(max-width: 300px) 100vw, 300px" /></a>

<span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;font-size: 13px;line-height: 19px">ここまででChromecastアプリの概要についてご説明しました。</span>

<span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;font-size: 13px;line-height: 19px">次回はChromecastを使ってどのようなアプリを作ることができるのか、少しアイデアを出して考えてみましょう。</span>

こんにちは。陽気なシステム屋のうっちーです。

前回までで Chromecastアプリを動かす準備ができました。

それでは、Chromecastの拡張機能をインストールしてSenderアプリを動かしましょう。
Chromecastの拡張機能は、現在以下のURLよりインストールできます。
https://chrome.google.com/webstore/detail/google-cast/boadgeojelhgndaghljhdicfkmllpafd?hl=ja

青い「+ 無料」のボタンをクリックするとインストールされます。

それでは、SenderアプリをアップロードしたURLにアクセスしてみましょう。

テキストボックスに文字を入力してEnterキーを押下すると、Cast先のChromecastを指定できるようになります。同じネットワーク内に複数のChromecastが存在する場合は複数表示されるわけですね。

目的のChromecastを選ぶと、

テキストボックスに入力した内容がChromecastへ送られモニターに表示されます。

次回は同じReceiverアプリに対してandroidアプリからCastしてみます。

こんにちは。陽気なシステム屋のうっちーです。

Chromecastアプリを登録して動かしてみます。

ChromecastアプリにはSenderとReceiverとがあります。

SenderはReceiverへ何らかの情報を送ります。Receiverは情報を受け取って、何らかのアクションを行います。

ReceiverはChromecast上（のChrome OS上のChrome）で動作するため、HTML+CSS+Javascriptを使って開発します。ようはChrome上で動作するものでないとダメということですね。

SenderはAPIが提供されているiOSでもAndroidでもJavascriptでも構いません。
詳しくは、http://news.mynavi.jp/column/androidnow/071/ の解説を読んでいただくとわかりやすいと思います。

マイナビニュース 【コラム】塩田紳二のアンドロイドなう (71) 「Chromecast」とは?

Google Cast SDK Developer Console にReceiverアプリを登録します。Receiverアプリはhttpsでホストする必要があります。S3なんかでもイケるように思いますが、今回は「HelloText-Chrome」サンプルのreceiver.htmlをそのまま Microsoft Azureにアップロードしました。

※2014.6.23 追記
この画面におけるReceiverアプリの登録方法が若干変更されました。
画面キャプチャは、https://www.system-i-enter.com/blog/blog/2014/06/23/chromecast-10/ に添付したように変わっています。

また、ReceiverアプリはGoogle ドライブでホストすることができるのでオススメします。

「New Custome Receiver」画面でPublishedをYESに変え、SaveをクリックしてOverview画面へ戻ると、さきほど登録したReceiverアプリがApplications一覧の末尾に追加されています。

「Application ID」が付けられ、Status欄のPublishingインジケーターが伸びていきます。Publishには現状、10分ほど時間がかかります。この間にSenderアプリの準備を行いましょう。

SenderアプリはReceiverとは異なり登録作業は必要ありません。ただし、アプリ内に「Application ID」を埋め込む必要があります。
さきほど発行された「Application ID」をコピーし、Senderアプリの以下の箇所を書き換えてください。

ReceiverアプリのStatusがPublishedになったら、PCのChrome WebブラウザよりSenderアプリを置いたURLにアクセスしてください。

あ！　その前にChrome WebブラウザにChromecastの拡張機能をインストールしておかなければいけませんね。

次回はChromecastアプリの動きについて見ていきます。

こんにちは。陽気なシステム屋のうっちーです。

前回はChromecastがどのようなデバイスかをお話しました。ChromecastはSDKを使用して対応アプリを開発できます。

それでは、Chromecast向けのアプリを作っていきましょう。

Google Cast SDKを使ったサンプルは、https://github.com/googlecast で提供されています。

まずは、この中で最もシンプルで理解しやすいと思われる「HelloText-Chrome」を実際に自分のChromecastを使って動かしてみます。

そのためには、Google Cast SDK Developer Console で開発者登録を行う必要があります。

登録料が 5$(USD) かかります。Google Playカードは使用できないので、Google Walletで支払いを行ってください。

決済が完了したら、1日以内にメールが届き、Google Cast SDK Developer Consoleにログインできるようになります。

まずは、最下部にある「ADD NEW DEVICE」をクリックして、お手持ちのChromecastをデバイス登録してください。Chromecast本体に印字されているシリアル番号（以下の写真で赤で塗りつぶした辺りに書かれています）を入力します。登録が完了してStatusが「Ready For Testing」になるまで少しかかるようですね。

次に「ADD NEW APPLICATION」をクリックしてください。「New Receiver Application」の画面に遷移します。

Receiverアプリって？？

次回はChromecast対応アプリの仕組みについてご説明します。