ruby|author:kawasaki|tag:|comment:nonこんにちわ、Fusic新卒のカワサキです。CoffeescriptとかLessのコンパイル自動化のため今回はPusherにリアルタイム通信周りを「おまかせ」したおかげで、ほとんどサーバサイドが必要なく、Html・CSS・Javascriptのクライアントサイドアプリになったかなという感じ。Rubyは最低限必要部分だけで、メインはSinatraのpublicディレクトリにGruntでクライアントサイド開発をしやすい環境整えて、開発していきました。回答者点滅のような感じで、簡単にリアルタイム通信を行えます。当日の進行・景品の準備・音源の獲得。サーバ側・早押しボタン・ポイント画面の実装。いった感じで役割分担し、全体の構成や問題についてはみんなで話し合って進めていきました。感想やまとめ・当日は思った以上にみんなが真剣にクイズとか考えてくれたし、盛り上がってよかった。・無駄にアタッ○25に詳しくなった。色で違うとかw・幹事チームのメンバーは普段案件とかであまり関わりがなかったので、短い期間ですががっつり絡めてよかった。・普段業務で使ったことがなかった技術、今回でいえばPusherやGruntなど使えて勉強になった。php|author:oyama|tag:|comment:nonzenpreチームの小山です。昨日食べた先輩のカレーがとてもおいしかったです。量が少なかったので次回大盛りを希望しました。zenpreリニューアル!!“ZENPRE”は6月11日に”zenpre”としてリニューアルしました。今回は技術的な側面から紹介できればと思います。大文字から小文字になっただけではないのです。リアルタイムプレゼンテーション配信を支える技術の刷新zenpreは「リアルタイムなプレゼンテーション配信」と「プレゼンテーションの共有(スライド+動画のコンテンツ作成)」の2つを軸にしてサービスを提供していますが、この「リアルタイムなプレゼンテーション配信」、つまり「スピーカーがスライドを切り替えたら、同時に他の視聴者の画面のスライドも切り替わる」という機能は、当然ながらブラウザ間のリアルタイム連携がポイントになってきます。ZENPREではこの部分は元々Rubyで書かれていたのですが、今回のリニューアルを機に全てNode.js(Socket.IO)で書き換えました。Node.jsで書き換えたのか?実は「ベンチマーク結果でNode.jsのほうがずばぬけて優秀だった」とか、「Rubyでの実装に問題があった」とかいう皆さんが期待するような理由は、実はありません。あげるとすれば、「zenpreをただリニューアルするのではなく、新規技術採用の起点としたい」というのと「JavaScriptがチームの共通言語だったから」というのが一番大きいです。現在は私がメインで開発していますが、近い日にチーム全体で改良を加えられる体制を目指しています。今回のリニューアルで、機能に占める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アプリケーションに求められる要望の多様化に備えてみたプログラムでは、よく「汎用的に使うものはライブラリ化して分離する」ことがありますが、そのアプリケーション版の考え方です。帳票も出力できます(Excel、PDF連携)画面遷移をせずに登録できます(Ajax)1日に一度統計を表示します(グラフ、バッチ処理)サーバの負荷に応じてスケールアウトします(AWS)データはクラウド上に保存しまう(AWS)など、どんどん変わってきています。「『普通の』Webアプリケーションに求められることもあるのではないか?」と考えて、汎用的に利用できるリアルタイム連携の基盤としてSync.IOを作ってみた、という感じです。Sync.IOは何ができるのか?Sync.IOに似ている(?)サービスとしては、例えばFirebaseなどがありますが、Sync.IOはもっともっとシンプルです(そこまで機能がないとも言えます。Sync.IOが提供している機能は2つだけです。「チャットができる」「閉じたチャットルームを作ることができる」「権限のある人だけチャットで全員に発言できるように制限できる」「チャットのログをとれる」というような機能の基盤を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の課題点を探ってみたいと思います。PHPMatsuri|comment:non多分久しぶりな登場の気がする萩原です。Matsuriに参加させていただきました!(今回は福岡!)弊社からは何と8人も参加させて頂きました。全員LTで発表しましたので発表の最後の方にはまたFusicかとつぶやかれるくらいでした。一人目って書きましたが別に二人目とかタイトルが続くことは多分ないんじゃないかと思います。Matsuri今回は、本当にネタが思いつかずやることが決まったのは当日14時くらいでした。役に立たないものおもしろそうなものを作ろうということは何となく事前に決めていましたが。何とかネタは思いついたものの、時間内に出来るんだろうかとか思いながらバタバタ作っていたらなんだかんだで日付が変わったころには大体できてしまっていました。残り時間は書いたのもを見直したり、前でファミコンやってるのを眺めてたりホークスと横浜のトレードに衝撃を受けていたり(しかも今日公式に発表されたトレード、メンツが変わってたし)してました。今回やったこと今回はお絵かきのアプリを作りました。お絵かきするだけじゃつまらないので、お絵描きの履歴を取っておいて速度まで再現するものをCakePHPとJavasciptで作成しました。具体的に何をしたかというと・canvasを利用して絵を描きつつ、mousemove中のマウスの座標や色、線の太さ、時刻を取得。・絵を描き終わったタイミングでAjaxでデータを送信して保存。・保存したデータを利用して、SetTimeoutを使ってcanvasで描写。なんてことをやってました。え?PHPがどこにあるのかって?saveとかfindとか使ったってば!PHPmatsuriの間一つもPHPに関してググらなかったけど!因みにmousemoveでとれる座標はすべて取得しているので1分くらい描き続けると保存のAjaxが30秒くらいかかります・・・。(まぁVM使って動かしてたんで実際にやればもっと速くなるとは思いますが・・・。)ちなみにちょっと公開する場所とかないのでお見せできないのが残念です。ついでに言うと発表はダダすべりしました・・・。感想ネタは2週間くらい前から考えてたんですが、思いついたのは当日。当日になって「エイヤ」でやっても意外となんとかなるものだなと思ってしまいました。作ったものを評価してくれたみたいで本とシャツをいただけました!ありがとうございます!前回は結構セッションをたくさん聞いたので、今回はコーディングをメインに参加しました。Reserved.このblogについて株式会社Fusicのエンジニア陣が書くblogです。日々の業務で培った技術ネタや活用事例などをご紹介いたします。