アシアルブログ

アシアルの中の人が技術と想いのたけをつづるブログです

PC/スマホでは無いWEBアプリ開発の話 -ハイブリッドキャスト編-

こんにちは、Monaca for Hybridcastチーム、斉藤です。



さて、今回はテレビの一つの未来であるハイブリッドキャストという規格をエンジニア目線から、さらにそのためのツールとして弊社で開発したMonaca for Hybridcastについて語ってみたいと思います。まじめなWEBアプリ開発の話ですが、中々触れる機会が少ないとは思いますので、楽しんで読んでいただければと思います。

以下見出しです。



* ハイブリッドキャストとはなんぞや
* ハイブリッドキャストの制限
* Monaca for Hybridcastで解決できること
* 課題
* 余談




ハイブリッドキャストとはなんぞや



ハイブリッドキャストとは、従来のデータ放送をさらに進化させ、放送 + WEBという形でテレビ内にコンテンツを表示する規格です。
従来のデータ放送で可能であった放送連動コンテンツの表示に加えて、CSS3を使ったデザイン表現の拡大、HTML5 APIを利用したコンテンツの作り込みが可能です。この仕組みでは、テレビ画面の中に放送領域とWEBブラウザ領域が一度に表示できます。さらに加えて、ハイブリッドキャスト独自の機能として、放送と連動するイベントを待ち受けて、そのタイミングでJavaScriptを実行することなどが出来ます。

要は、テレビ画面の中で放送と連動したWEBアプリを表示することが出来るって事ですね!
NHKがハイブリッドキャストを9月に開始、何ができるのか?
弊社制作実績 テレビ朝日様ハイブリッドキャストコンテンツ「クレヨンしんちゃん」

ハイブリッドキャストの制限



そんなハイブリッドキャストですが、まだまだイケてないところ(関係者の方、ご容赦ください)が多い。
特に問題だなーと思っているところは、そのコンテンツのデバッグのしにくさ。
僕たちWEBエンジニアは、コンテンツのデバッグが簡単できると思いがちですが、このハイブリッドキャストではそうはいかない。
以下のような制限が存在します。

ログ表示
Console.logと呼ばれるJavaScript APIで、ログを表示するのが一般的です。
一般のブラウザであれば、開発者ツールなどを使って、そのログを表示/確認することができますが、テレビにはそんな都合の良いツールがありません。
そのためAPIの実行をフックして、テレビ画面のブラウザ上にログ表示するという方法が当たり前のように使われています。

エラーメッセージ捕捉
さらにJavaScript内でエラーが起きても開発者ツールが存在しないため、どんなエラーが起きたかも知る事が出来ません。これを回避するために、window.onErrorというAPIを利用して、サーバーにエラーログを投げて、そこで確認するという方法が普通です。

ブラウザリロード
皆さんはWEBアプリ開発中、当たり前のようにブラウザリロードを使いますよね?
ところがこれもこの仕組みの中では満足に出来ないのです。なぜなら、PCブラウザが持っているアドレスバー、リロードボタンは存在せず、ブラウザを操作するためのインターフェースもリモコンのみため、リロード一つ行うのも、それ用のJavaScriptをコンテンツのページごとに用意しなければなりません。万が一このJavaScriptが無いページを読み込んでしまうと、再度ブラウザを立ち上げ直すことでリロードしなければなりません(アドレスバーが存在せず、特定ページへの遷移が簡単に出来ないため、これが結構な手間なのです)。

こんな制限の中、WEBアプリを作るのはそんなに簡単な事ではありません。
ではどうするか、ですが・・・

Monaca for Hybridcastで解決できること





アシアルではテレビ朝日様ハイブリッドキャストコンテンツ「クレヨンしんちゃん」を制作し、そのハイブリッドキャストの仕組みを学ぶとともに、その難しさを知りました。
その中で様々なノウハウを学び、今年の5月よりMonaca for Hybridcast(以下Monacast)というクラウドツールを提供させていただいております!

このクラウドツールを使うと、上記ハイブリッドキャストの制限を解決する事ができます。デバッグ感をPCでの場合に近づけることができるのです。基本的にはPCブラウザからこのクラウドツールを通して、テレビブラウザに命令を送ってやる事によって仕組みを実現しています。
必要なものはインターネット接続されたPCブラウザ(Chromeであること)とテレビだけです。テレビとPCを接続するための機器等は必要ありません。

※ただし、テレビだけは開発時に特別な作業が必要になり、このために一般の方々がハイブリッドキャスト用のコンテンツを作成する事が現在不可能です。

ログ表示
PCブラウザページ上にログを表示するためのインターフェースと仕組みを提供しています。
テレビ上で実行されたJavaScriptのログ内容をPCブラウザ上で閲覧できる寸法です。また、JavaScriptの対話型シェルを用意しているので、JavaScriptオブジェクトの状態を確認する事が容易です。



エラーメッセージ捕捉
こちらも、同じ画面でJavaScriptのエラー内容を表示する事が出来ます。いつ、どこでエラーが起きても、この画面によりエンジニアはそれを把握し、正しいデバッグを進める事が可能です。

ブラウザリロード
こちらも、PCブラウザ上から操作できるようにしました。
PCブラウザのボタン一つを押すだけで、テレビブラウザのリロードが可能です。
Monacastを開発した中でも、小さめの機能ですが、あると無いとではデバッグのスピードが全く違います。

この他にも、HTML, CSS動的書き換えをサポートしています。

課題



これら僕たちの結晶を買ってくださり、すでに使っていただいてる方々もいらっしゃいます。
ですが、このツールだけではまだまだ出来ない事が多い。
上記内容も踏まえ、以下にデバッグという観点で簡単に表を作ってみました。



いかがでしょうか?まだまだWEBアプリのデバッグという点では、PCでのそれには追いつきません。
このハイブリッドキャストでのデバッグをより良くするには、内部で使われている情報の取得(メモリ表示)、JavaScriptエンジンの実行制御(ブレークポイント)など、ネイティブレイヤーに触るといったことが必要になります。現状でそれが可能なのは各社テレビメーカー様のみため、そういった拡張がこのツールでは不可能になっています。



余談



いかがだったでしょうか。
こんな世界もあるんだーと思っていただけたでしょうか。
HTML5がPC/スマホ以外にも使われていること、それがこんな進化を遂げている事を知っていただけたら幸いです。

個人的な予測ですが、今後HTML5機器が増えると、こういった事がテレビに限らず起こります。カーナビ、電話などなど、HTML5が搭載される機器は少なくはないはずです。そうなるとデバッグは大変ですよね。
Monacastを開発して行く中で、そういった未来のデバッグ環境をより良くすることに担えたら、と改めて思いました。

「Monaca for Hybridcast」について詳しく

はじめてのAmazon VPC

こんにちは、牧野です。
最近、鎌倉の「コクリコ」というお店のクレープにハマっています。
今のところ、レモンシュガーとアンチョビサラダが一押しです。ほのかに甘い、縁がパリパリの生地に、強めの酸味や塩味がよく合います。
鎌倉に行くことがあれば、ぜひ試してみて下さい。

さて。
だいぶ前になりますが、AmazonAWSを使う機会があり、その時にVPC(バーチャルプライベートクラウド)を使いました。今日はその話題です。

VPCは、クラウド上にプライベートなネットワークを用意し、その中にEC2サーバーを設置できるというものです。
まず、一つのローカルネットワークを作成し、さらにその中に複数のサブネットワークを作り、各ネットワーク内にサーバーを設置できます。あるサブネットは外部公開用、別のサブネットは内部専用というように、自由にネットワークを設定できます。

便利なのですが多少クセがあり、VPCとインターネットをつなぐのにルーター機能を持つサーバーを設置する必要があります。
VPCの作成ウィザードに従っていけば作れるのですが、それだとルーター機能のためだけのサーバーが出来てしまいます。

今回は、自分で設置するサーバーの一台にルーター機能を持たせるために、ウィザードを使わずに設定する方法を紹介します。例として、以下のようなネットワーク、サーバーを作ることにします。




1.VPCを作成する。(VPCのYour VPCsメニューから Create VPCボタン)

2.作ったVPC内に、外部からアクセス可能なサブネットと内部用サブネットを作成する。(VPCのSubnetsメニューから Create Subnetボタン)

3.VPCのInternet Gatewayを作成する。(VPCのInternet GatewaysメニューからCreate Internet Gatewayボタン)
作ったInternet Gatewayを先ほど作ったVPCにアタッチ。(作ったInternet Gatewayを選択し、Attach to VPCボタン)

4.外部からアクセス可能なサブネットに、ルーター兼公開サーバーを設置する。(EC2のInstancesメニューからLaunch Instanceボタン)
 OS選択後のINSTANCE DETAIL画面でE、C2-VPCをチェックし、マシンを設置するサブネットを選択
 Network Interfaceの設定で、IP AddressのところにサーバーのIPを入力
 今回は 10.123.0.100
 
 ※このマシンのセキュリティグループ設定がsshアクセス可能になっていることを確認

5.VPCのセキュリティーグループを変更し、外部からsshアクセス可能になるように変更する。(VPCのSecurity Groupsメニューから、セキュリティーグループを選んで変更)

6.VPCルーターになるサーバー用のelastic ipを作成
作ったマシンにelastic ipを割り当てる。
 Elastic IPsメニューからAllocate New Addressを押し、EIP used in: で VPCを選択してIPを取得。
 取得したIPを選択してAssociate Addressで関連づける。

7.外部公開サブネット用のRoute Tableを用意する。(VPCのRoute TablesメニューからCreate Route Table)
VPCを作った時点で、一つRoute Tableが用意されるので、それを変更。下記設定を追加する。
 Destination 0.0.0.0/0 で targetは先ほど作ったInternet Gatewayインターフェイス名を選択。
このRouting tableを、外部からアクセス可能なサブネットに関連づける。

これで、割り当てたelastic ipでルーター機能を持つサーバーにSSHでアクセスできるはずです。

8.ルーターになるマシンにログインして、iptablesを設定。
少し乱暴ですが、Cent OSであれば、/etc/sysconfig/iptablesに以下のような設定ファイルを用意してiptablesをstartすれば動きます。


*nat
:PREROUTING ACCEPT
:POSTROUTING ACCEPT
:OUTPUT ACCEPT
-A POSTROUTING -s 10.123.0.0/255.255.0.0 -o eth0 -j MASQUERADE 
COMMIT
*filter
:INPUT ACCEPT
:FORWARD ACCEPT
:OUTPUT ACCEPT
COMMIT

コマンドでは、以下のようになります。


iptables -t nat -A POSTROUTING -o eth0 -s 10.123.0.0/16 -j MASQUERADE

-sのソースIPは、VPCのネットワークアドレスを指定します。

9.LinuxのIPフォワードを有効にする。
CentOSの場合、/etc/sysctl.confの以下の行を変更して反映します。


net.ipv4.ip_forward = 1




sysctl -p /etc/sysctl.conf


10.ルーター機能を持つサーバーの設定変更
EC2のInstancesメニューからルーターになるマシンを選択し、ActionsのChange Source/Dest.CheckをDidsabledに設定。

11.内部用サブネットにサーバーを作成。
今回は、IP 10.123.1.100

12.プライベートサブネット用のルーティングテーブルを作成して関連づける。
Destination 0.0.0.0/0 で、ルーターになるマシンを指定して追加後、内部用サブネットに関連づける。

これで、内部のサーバーからルーター機能を持つサーバー経由で外部にアクセスできるはずです。
アクセス制限をかけたい場合、VPC全体であればVPCのSecurity GroupまたはACLを、サブネット単位であればVPCのNetwork ACLsメニューでACLを作成して対象サブネットに関連付けます。


以上、VPC設定の紹介でした。
慣れれば結構便利に使えるのではないかと思います。

ReMIX Tokyo 09 にて、出展・講演してきました。

こんにちは。小林です。

本日、ReMIX Tokyo 09にて、ブース出展 + 講演に参加してきました。
講演では、セッションB-1 「Silverlight + PHP(FastCGI) + Windows Azureで作る初めてクラウドアプリケーション」にて、後半30分に「Windows Azureプログラミング(PHP編)」と題して、亀本が講演を担当しました。

[2009/8/12追記]
ReMIXでの講演内容が、「@IT・特集:PHP on Windows Azure - PHP開発者もクラウド開発を始めよう!」にて紹介されております。是非、こちらもご覧ください。


Windows Azure プログラミング(PHP編)


○ 講演模様


○ 展示ブース。左:VS.Php ポスター。右:PHP on Azure ポスター。
※ VS.Phpについては、次期バージョン2.7においてSilverlightに対応する予定です。


○ 商談中・・・。(?)


○ 「PHP on Azure」~ PHPアプリケーションをクラウド上で動かす ~(ポスター)


○ 今回使用した、クラウド・サービスのメリット、および代表的なクラウド・サービスの比較をまとめた、パンフレット。
※ 上述の内容は、2009年7月16日現在の情報。最新の情報については各社のサイトをご覧ください。
※ 価格例に関しては、アクセス数・ネットワークI/O、データ量を仮定した上で、各社から発表されている料金体系をもとに算出。アプリケーションによっては、料金が異なる場合もあるため、大凡の参考値としてお考えください。
※ 発表されている価格は米国で提供されるサービス料金より算出。日本における提供価格は、2009年7月16日現在、未発表。
※ [2009/8/12追記] 公開していたパンフレット内に、一点、記載のミスがございました。Amazon EC2SLA(サービス稼働率)について、「99.5%」と記載しておりましたが、正しくは「99.95%」となります。関係者の皆様にはご迷惑をおかけしましたこと深くお詫び申し上げます。

ReMIX Tokyo 09のメインテーマは、本日発表された「Silverlight 3」でしたが、米時間の14日に、ニューオリンズで開催された「Worldwide Partner Conference 2009」において、クラウドサービス「Windows Azure Platform」の概要と利用価格が発表されました(※ 日本における提供価格は、現時点では未発表)。

Windows Azure, SQL Azureは、今年11月17~19日開催の「Professional Developer Conference(PDC) 2009」で提供が開始されます。それまでは、CTP(Community Technology Preview)プログラムで無料で試用することができるので、興味がある方は、こちらのWindows Azureのサイトから申し込んでみたらいかがでしょうか。

展示では、Silverlightアプリケーションの多くの事例が展示されていましたが、FLexを含め、今後、ますますUIに優れたリッチなWebサイトが増えていくと感じました。マウスでのドラッグアンドドロップ操作による選択や、複数の選択肢の切替表示のさせ方など、確かに「使いやすさで優れている」ことを実感しました。

タッチパネルによる直感的な操作によって優れたUIを実現しているiPhoneアプリもそうですが、リッチなWebサイト構築には、ますますデザイナーとプログラマの連携が重要となることを感じました。