アナログな「手書きのボード」(イメージとしてはキングジムのブギーボード)をデジタル&ネットで提供できるようなアプリ: FreeBoard を作ってみました:
https://github.com/dotnsf/freeboard/


使い方を以下に紹介しますが、以下は IBM Cloud 上で動かすことを前提とした使い方です。アプリケーションサーバーを個人PCなどで動かすことは可能ですが、ちょっと手順が異なります(まあ自分でサーバーを動かそうと思うような人なら大丈夫だと思います)。ただしデータストアで IBM Cloudant (IBM Cloud の DBaaS)を使うので、IBM Cloud のアカウントは必須となります。


IBM Cloud を使って実際に動かすには Node.js ランタイムと IBM Cloudant サービスインスタンスを作成して、これらをバインドした状態で(或いは IBM Cloudant のユーザー名とパスワードを settings.js に記載した状態で)リポジトリから取得したソースコードをプッシュするだけです:
2018080601


作成したアプリケーションサーバーに PC またはスマートフォンのブラウザでアクセスします。以下のような画面になればとりあえず実行環境が作成できています(なお、以下のスクリーンショットは 2018/08/10 時点でのものです):
2018080701


画面中央の四角がキャンバス部分です。ブラウザのサイズを変更しても一定割合を計算しながらキャンバス部分のサイズも自動的に変更されます:
2018080702


キャンバス上部にある2つのセレクトボックスからペンの色と太さを選択します。このペンの色と太さはいつでも変更可能です:
2018080703


ペンが決まったらキャンバス部分に向かってマウスドラッグまたはタッチで自由に絵を描くことができます:
2018080704


途中でペンを変えることで多色で描くことができます。描き終わった画像を保存するには "save" ボタンをクリックします:
2018080705


画面最上部に日付時刻が表示されました。これは先程の画像がここに保存されたことを意味しています:
2018080708



"reset" ボタンをクリックするか、画面をリロードしてキャンバスをクリアします。その後でこの保存した画像の日付時刻部分をクリックして呼び出します:
2018080707


保存された画像が呼び出されてキャンバス内に表示されます:
2018080708


呼び出された画像に更に変更を加えることも可能です。変更後に改めて "save" をクリックします:
2018080709


保存画像が1つ追加されました。これで2つの画像が保存され、呼び出しが可能になっています:
2018080710


保存した画像を削除するには選択後に "delete" ボタンをクリックします:
2018080711


確認メッセージが表示されたあとに削除が実行されます。削除後、保存画像が(2つから)1つに減っていることがわかります:
2018080712


同じ画面をスマートフォンのブラウザから見ても同じように見えます(画面サイズは異なりますが・・)。スマートフォンの場合はタッチ操作で絵を描画できます:
2018080713


注意事項として、保存時の排他制御は行っていない点に注意ください。どちらかというと保存はおまけ機能のつもりで、でっかい画面で共有ホワイトボードとして使うようなイメージで作成しました。

なお、マウスドラッグやタッチ操作でキャンバスに描画する部分はすべて HTML5 と JavaScript だけで(サーバーサイド処理を使わずに)実現しています。この部分だけを切り出して別リポジトリで公開しているので、この部分に興味あるかたはこちらを参照ください:
https://github.com/dotnsf/html5pen


特に見た目に関してはまだまだ改善の余地があると思っていて、issue リストの先頭にも加えています。この辺りは自分の余裕時間と相談しながらぼちぼちと。