つみかさね

一球一球のつみかさね 一打一打のつみかさね 一歩一歩のつみかさね 一坐一坐のつみかさね 一作一作のつみかさね 一念一念のつみかさね

html5+jQueryを使うと面白いモノが!

html5+jQueryを使うと面白いモノが!

筆談ボードとか、ホワイトボード、お絵かきソフトなどのアプリは一杯あって選ぶのが大変な位です。簡単に使えて、見やすいものを作ってみました。(ただ複雑になるとなかなか作るのが難しいので)html5+jQueryを使っていろいろ遊んでみました。

始めに「手書きホワイトボード」これはマウスでボードに書くだけ、線の太さも2種類、色も4種類、消去は一気に全部消せる。全画面をある色にすることも出来る。文字を書いて失敗したときは背景の色で塗ることで消しゴムで消すようになる。これはネットに繋がなくでもindex.htmlをダブルクリックすることでも使える。(自分のPC上で)。またタブレットAndroid)で該当URLにアクセスして使うことが出来る。ipadは不明。

プロジェクターに繋いだときなど黒板がわりに。Zoomのホワイトボードの代わりに画面共有で使う。また聴覚障害者の筆談ツールとしても使える。

手書きホワイトボード
http://www2s.biglobe.ne.jp/~ouji/Whiteboard/wboard/

次にWeb Whiteboardは上記より少し複雑になっている。テキスト文字を打ち込むことも出来る。線の幅は細かく調整出来る。線の透明度も変えられる。なかなかの優れものです。でもタブレットAndroid)では全く動作しない。ipadは不明。

Web Whiteboard
http://www2s.biglobe.ne.jp/~ouji/Whiteboard/

次にお絵かきソフト(html5_Canvas)。
Webにあるお絵かき掲示板のようなことはほとんど出来る感じのお絵かきソフトです。色の種類も線の太さ、色の透明度も任意で選ぶことが出来る。また書いた作品は自分のパソコン、タブレットに保存することが出来る。タブレットAndroid)でも動作します。ipadは不明。

お絵かきソフト
http://www2s.biglobe.ne.jp/~ouji/Whiteboard/oekaki/

この3つのソフトウェアは自分のPCに置いておいて、index.htmlをダブルクリックするだけで動作する。但し、Web Whiteboardはネットワークに繋がってる必要がある。

 

f:id:tsumikasane3:20200710191317j:plain

ホワイトボード

f:id:tsumikasane3:20200710191317j:plain

ホワイトボード1