{ 2013.7.5 }

Node.js(Socket.IO)を使ってzenpreのリアルタイム配信基盤を作る

    はてなブックマーク - Node.js(Socket.IO)を使ってzenpreのリアルタイム配信基盤を作る
    このエントリーをはてなブックマークに追加

    zenpreチームの小山です。
    昨日食べた先輩のカレーがとてもおいしかったです。量が少なかったので次回大盛りを希望しました。

    zenpreリニューアル!!

    “ZENPRE”は6月11日に”zenpre”としてリニューアルしました。
    主な改善内容はリリース文章にお任せするとして、
    今回は技術的な側面から紹介できればと思います。

    大文字から小文字になっただけではないのです。

    リアルタイムプレゼンテーション配信を支える技術の刷新

    zenpreは「リアルタイムなプレゼンテーション配信」と「プレゼンテーションの共有(スライド+動画のコンテンツ作成)」の2つを軸にしてサービスを提供していますが、
    この「リアルタイムなプレゼンテーション配信」、つまり

    スピーカーがスライドを切り替えたら、同時に他の視聴者の画面のスライドも切り替わる

    という機能は、当然ながらブラウザ間のリアルタイム連携がポイントになってきます。

    ZENPREではこの部分は元々Rubyで書かれていたのですが、今回のリニューアルを機に全てNode.js(Socket.IO)で書き換えました。

    なぜわざわざNode.jsで書き換えたのか?

    実は「ベンチマーク結果でNode.jsのほうがずばぬけて優秀だった」とか、「Rubyでの実装に問題があった」とかいう皆さんが期待するような理由は、実はありません。

    強いてあげるとすれば、「zenpreをただリニューアルするのではなく、新規技術採用の起点としたい」というのと「JavaScriptがチームの共通言語だったから」というのが一番大きいです。

    現在は私がメインで開発していますが、近い日にチーム全体で改良を加えられる体制を目指しています。

    また、以前はZENPREではプレゼンテーションのプレイヤーをFlash(スライド+USTREAM)で構築していましたが、
    今回のリニューアルで、機能に占めるFlashの割合を小さくしました。
    その際に代わりに割合が大きくなったのがJavaScriptで、Nodeは当然ながら(ブラウザ上の)JavaScriptと親和性が高かったというのもあります。

    同期通信は、ZENPREではRuby<->Flash(スライド+USTREAM)で行っていたところを、zenpreではNode.js<->JavaScript(連系用ライブラリ)<->JavaScript(スライド)+Flash(USTREAM)という形で作り変えています。

    リアルタイム同期機能の別アプリケーション化

    Node.js(Socket.IO)のサンプルアプリケーションでは、よく「チャットアプリケーション」がありますが、zenpre自体のNodeの利用方法もそれと大差ありません。

    スケールの方法についても一応方策にあたりをつけていますが、現在は1プロセスで十分機能しています。

    一つ特殊なことをしているとすれば、「リアルタイム同期機能」自体を別アプリケーションとして構築しているということです(つまり、Node.jsでは全く特殊ことはしていないということですね)。

    もっと言うと、

    zenpreはリアルタイム同期機能を自身で持っておらず、別のサービスと契約して実現している

    ということを社内でしているイメージです。

    その別アプリケーションは、今は”Sync.IO“という名前でよんでいます。

    なぜわざわざ別アプリケーションにしたのか?⇒Webアプリケーションに求められる要望の多様化に備えてみた

    プログラムでは、よく「汎用的に使うものはライブラリ化して分離する」ことがありますが、そのアプリケーション版の考え方です。(「汎用的に使うものはアプリケーション化して分離する」)

    弊社では受託開発も多くやらせていただいていますが、

    Webアプリケーション(社内業務システムなど)だけで考えても、

    クライアントから求められていたり、逆にこちらからアピールする価値は
    「ブラウザから操作できますよ」という初期の単純なものから、

    • 帳票も出力できます(Excel、PDF連携)
    • 画面遷移をせずに登録できます(Ajax)
    • 1日に一度統計を表示します(グラフ、バッチ処理)
    • サーバの負荷に応じてスケールアウトします(AWS)
    • データはクラウド上に保存しまう(AWS)

    など、どんどん変わってきています。

    そして、「リアルタイムに複数ブラウザで連携する」という機能が、今後、

    「『普通の』Webアプリケーションに求められることもあるのではないか?」

    と考えて、汎用的に利用できるリアルタイム連携の基盤としてSync.IOを作ってみた、という感じです。

    Sync.IOは何ができるのか?

    Sync.IOに似ている(?)サービスとしては、例えばFirebaseなどがありますが、Sync.IOはもっともっとシンプルです(そこまで機能がないとも言えます。)。

    Sync.IOが提供している機能は2つだけです。

    • Socket.IOによるブラウザ間のリアルタイム連携の基盤
    • 連携ログの保持

    チャットアプリケーションを例にとると、
    「チャットができる」「閉じたチャットルームを作ることができる」「権限のある人だけチャットで全員に発言できるように制限できる」「チャットのログをとれる」というような機能の基盤をSync.IOは提供します。

    もし、1からPHPでチャットアプリケーションを作りたいときは、

    • チャットアプリケーション自身のユーザ認証基盤の作成(PHP)
    • 認証されたユーザだけが見れるチャットページの作成(PHP)
    • Sync.IOへアプリケーション登録
    • Sync.IOのAPIと連携するサーバサイド(PHP)
    • Sync.IOのSocket.IOと連携するJavaScript部分

    だけ(?)で「リアルタイムチャット機能」が作れます。リアルタイムなNodeアプリケーションの構築も、クローズドなチャットルームの実現方法も、連携ログの保持方法も考える必要がないですね。

    ちなみに社内技術発表のときの資料にSync.IOの仕組みが少し載っていますので、よろしければご覧ください。

    Sync.IOの今後

    Sync.IOは今のところzenpreのバックエンドという立ち位置で、それで十分なのですが、実は今すぐにでも他のアプリケーションで利用できます。
    (ユーザ登録やFacebookのようにアプリケーション登録の仕組みも既に持っています。zenpreもただの1アプリケーションとして登録されています)

    まずは、zenpreでない他のアプケーションに組み込む機会を得て、zenpreだけではわからないSync.IOの課題点を探ってみたいと思います。

    まとめ

    zenpreがリニューアルしました!

    是非使ってみてご意見ご感想をいただければと思います!

    Comments are closed.