こんなものを作ってみました
余興用にまたちょっとしたものをつくってみました。
「リアルタイムお絵かきシステム」です!
スマホでお絵かきすると、投影用のパソコンにもリアルタイムに絵が書かれてゆきます。
ほぼほぼ遅延無しで、筆使い(指使い?)がパソコンに反映されていますね。
面白いですね〜。
一度、大きな忘年会で、以下のクイズシステムと組み合わせて、
「誰が一番○○さんを上手く描かけるか?!」という問題にしてこれを使ったのですが、
かなり盛り上がりました。
決め手は「Socket.IO」
クイズシステムも同じ仕組みを使っているのですが、
この技術の決め手は「Socket.IO」です。
通常、HTTPでは、クライアントがサーバに対して、ページや情報を取りに行く、単方向の通信しかできません。
ですが、このSocket.IOというのを使ってやると、上記だけでなく、サーバがクライアントに対して、「状況変わったから、画面書き換えてね」という情報を送ってやることができるのです。
双方向通信、まさにインタラクティブってやつですね。
それを応用してやると・・・
今回、それを応用してやるとこうなります。
<クライアント→サーバの通信>
まず、クライアント①にあたるスマホから指で線を引きます。
書いたこと(線の開始点・終了点も含め)をサーバへ伝えます。
<サーバ→クライアントの通信>
次に、サーバが、クライアント②にあたるPCへ「線書かれたんだけど」という情報を伝えてやります。
それを受け取ったPCは、「ここからここまで書かれたらしい」ということで、その通りに画面内に線を引っ張ります。
これらの通信によって、スマホで書いた線が、PC側にも反映され、絵の同期が取れるわけですね。
対応ブラウザ(クライアント側)
このSocket.IOは、Google Chrome・Safari・Firefox、そして鬼門のIEちゃんでも比較的新しいバージョンなら動きます。多分、Operaとかの他のニッチなブラウザでも動くはずです。
サーバ側
サーバ側は、Node.jsという土台のWebサーバプログラムを導入し、その上にSocket.IOのライブラリを導入してやることになります。
このあたりは、次回詳しく書きます。
デモページ
- 投影画面(PC向け)
-
絵を書く画面(スマホ向け) もしくは、以下のQRコードから。
スマホは、画面回転をOFFにした上で、横に90度本体を持ち替えた状態で書いてください。そうすると、PC上に正しい方向で線が書かれるはずです。
※下の写真の状態です!
※同時に複数の方がアクセスして絵を書くと、当然PC上にそれが反映されますので、故障ではありません!(笑)
次回は、実装の仕方など、もう少しブレークダウンして書きたいと思います。
では、また!!!
>>次回の記事はこちら