お絵描きライブ

完成 2022.10.25 公開（2022.10.25 更新） © CC BY 4+ visibility519

完成 © CC BY 4+

2022.10.25 公開（2022.10.25 更新） visibility519

画用紙代わりのスマホ画面に指でお絵描きすると、その様子がリアルタイムに共有されます。オンラインのメリットを活かした、お絵描きのエンターテイメント化ツール！

link https://doodleshareex.yellowmix.net/

sell IoT, LINE, LINE Pay, PostgreSQL, Redis, WebSocket, dokku

動画

開発素材: ツール

SDK for Node.js™

API

LINE Pay

システム構成: お絵描きを行う部分は HTML の Canvas を使い、その JavaScript イベント（TouchStart, TouchMove, TouchEnd）に応じて線を結んで Canvas に絵を描画することで実現しています。

また TouchEnd イベントが発生するたびに描画した絵を PNG 画像に変換し、アプリケーションサーバーへ送信しています。アプリケーションサーバー側では送信されてきた画像とそのユーザー ID を、配信者向け画面に WebSocket で通知します。

配信者画面ではユーザーが１ストローク描くたびに WebSocket 経由で送信されてくる画像をユーザー毎のフレーム内に再表示します。これをずっと繰り返すことで複数の参加者から非同期に送られてくる画像を全てハンドリングしてライブのように共有して見せる、ということを実現しています。

難しいのはユーザーの規模が100名単位のように増えた場合で、WebSocket プロトコル自体がステートフルなため、コンテナ環境でも単純にはスケールできません（全てのイベントを配信者が拾えきれなくなるため）。そこは Redis の Pub/Sub 機能を使って実現できることはわかっていますが、まだ実現できていません。

個々の配信者向けに、専用の部屋（URL）を発行したり、その部屋をパスワードで保護できるようにしています。これにより未来のイベントの QR コードを事前に発行して告知に含めることができるようにしています。この機能は将来的に有償とすることをイメージしていて、LINE PAY API を使っています（サンドボックス機能で動くところまで実装しています）。

ストーリー: 「お絵描き」はポテンシャルを持ったコンテンツだと考えています。日本のイラスト文化にもあっているし、LINE スタンプが広く使われているのも、生まれ持った DNA による効果もあると思っています。

そんな「お絵描き」を ウェブでエンターテイメント化したい と思い、このようなサービスを思いつきました。

誰でも（ペンタブとか持ってなくても）その場から参加してお絵描きでき、参加者全員のお絵描きを リアルタイムで共有 できたら、これまでになかったエンターテイメントになりえる、と考えました。

１つの画面内で複数の絵が描かれていく様子を目の当たりにできる、というのはこれまでには無く、ウェブならではだと思っています。

実際にお絵描きライブを使って、参加者にお絵描きしてもらった時の様子を配信した時の動画をこちらで公開しています: https://www.youtube.com/watch?v=sPJ-cKHmD2c

可能性はお絵描きだけにとどまりません。例えばオンラインでクイズを出し、このサービスを使ってクイズに（お絵描きで）回答させることもできます。それらの様子を Zoom や YouTube で配信することもできます。

サービスのマネタイズについては、（お絵描きをする人ではなく）配信者向けに考えています。自分専用の部屋（の URL）をあらかじめ取得する場合は、その利用権利を購入していただく想定です。

現在はこの決済機能の実装に LINE PAY API を使っています。決済は全てオンラインだけで完結し、その場で決済して利用権利を得て、専用部屋をカスタマイズ（パスワード保護など）できるまでを実現しています。

これまでになかった「お絵描きコンテンツ共有」の可能性を感じてもらえると嬉しいです。