経緯
その手書き機能は従来Flashにて提供されていましたが、2017年2月下旬にJavaScriptでも同機能が並んで実装されました。これが「手書きjs」です。
両者の機能はほぼ同等ですが、微妙に仕様が異なり特にFlash版と比べ書き味の悪さが問題とされています。また画像サイズが344x135px固定であったFlash版と異なりJS版は自由な比率で400x400pxまで投稿できるのですが、その設定はブラウザの開発者ツールで都度HTMLソースを書き換える煩雑さがあります。
そこで諸氏がスクリプトでの機能追加・改善を試み、特にガハラさん(通称)による書き味改善のスクリプトが良好でしたのでこれを中心として補助機能をまとめたのがこの拡張スクリプトです。初出・履歴などは追いきれないのですが各機能は皆様のアイデアやコードを参考に勝手にまとめさせていただいております。
主な追加機能
- 書き味の改善:Flash版に及ばずながらも滑らかで精度感のある書き味を実現します
- キャンバスのリサイズ:キャンバスのリサイズをより簡単に行います
- 高画質化オプション:描画時の画素密度を倍にし更に高画質化を図ることが可能です
- キャンバス表示の拡大・縮小:キャンバスを画面上で拡大表示し描きやすくします
- キャンバスの反転:キャンバス画像を反転し歪みの確認などに使います
- マーカーモード:マーカー風の濃い線画を透過する描画で着彩を容易にします
- ツールとキャンバスのフロート化:拡大時にはみ出したりボタンに被さったりしがちなキャンバスをフロート化で自由に動かせます
動作環境
- 某所のスレッドの“レス送信モード”をブラウザで開いていること
- Win10のEdge、IE11、Chrome、Firefox各最新でブックマーク動作確認(2018/3/26確認)(下章「既知の問題」参照)
- ブラウザ機能拡張との兼ね合いやモバイルOSでの動作は未検証です
1.設定方法
スクリプトをブラウザで動かす準備をします。
可能ならブックマークレットの利用が便利です。(ブラウザの対応状況は下章「既知の問題」参照)
ブックマークレットの使えないブラウザでも拡張スクリプトをウェブコンソールから動かせば利用できます。
- ブックマークレットから使う(おすすめ)
ブックマークレット、すなわちブックマーク(お気に入り)にJavascriptを記述したものを作成し、そのブックマークを選択すれば拡張版手書きが開始されるようにします。
ブックマークレットはブラウザ上でいずれかのページ(例えばこのページでも)をブックマークするか、直接新しいブックマークを作成し、内容の編集でURL欄に下記のスクリプトを記入して作成します。記載するJavascriptはこのサイトでホストされる拡張スクリプトファイル本体を呼び出す部分だけです。
ブックマークレットの作成手順はブラウザごとにも異なりますので詳しくは各解説を調べてください。
→【参考情報】Qiita:ブックマークレットの登録方法
ブックマークのURL欄に記載するスクリプト(ブラウザで作る場合)
最新版(おすすめ、随時最新のスクリプトを読み込み)
javascript:(function(d,s){d=document;s=d.createElement('script');s.src='//hadacan.web.fc2.com/tegaki/files/tegakiJS_tool.js';d.body.appendChild(s);})()
特定バージョン固定(例:ver.181222に限定する場合、scrのファイル指定を"tegakiJS_tool_181222.js"に)
※現在2018/12/22より前のスクリプトは動作しなくなっています。更新履歴参照
javascript:(function(d,s){d=document;s=d.createElement('script');s.src='//hadacan.web.fc2.com/tegaki/files/tegakiJS_tool_181222.js';d.body.appendChild(s);})()
インポート用ブックマークファイル(ブラウザからインポートでブックマークを追加する場合に使用)
ブックマークファイル ダウンロード
- ウェブコンソールから使う
拡張スクリプトを適用したいページで開発者ツール(ディベロッパーツール)のウェブコンソールを開き、外部スクリプトファイル(tegakiJs_tool.js)のテキスト内容すべてをコピーしコンソールのコマンドラインにペーストして実行(エンターキー押下や再生アイコンクリックなど)します。→【参考情報】Mozilla:ウェブコンソール コマンドラインインタープリター、マイナビニュース クリエイターの道具箱:さまざまなWebブラウザと開発者向けデバッグツール
スクリプトファイル(最新版) ダウンロード
※特定のバージョンのファイルは更新履歴参照
手書きを行いたいスレッドの「レス送信モード」ページを開き、(1.設定方法)で作成したブックマークを選択し(またはコンソール入力・実行し)拡張版の手書き画面を表示します。気をつけていただきたいのは、既存の手書きスクリプトが動作する前に拡張版の手書きスクリプトを動かす必要があるということです。
「レス送信モード」ページを開いてコメント記入欄見出しのリンク「手書き」「手書きjs」(※左図参照)のいずれもクリックしたことのない状態からブックマークを選択します(またはコンソール入力・実行します)。
エラーのダイアログが出る場合はすでに既存機能の「手書き」(Flash版、環境によって表示されないことも)「手書きjs」を始めていると思われます。一度他の手書きスクリプトが動いてしまっていると直らないのでページをリロードして再度拡張スクリプトを先に動かすよう試してください。
拡張スクリプトでの手書き起動に成功すると、上画像のようにツールバーとキャンバスがともにフロート状態で表示されます。ツール、キャンバスは共に上部の帯をドラッグすることで移動できます。
- 「サイズ変更」:ダイアログに縦・横px数を順次入力してキャンバスサイズを変更します
- 「倍密度」:内部的に倍サイズのキャンバスで描き高画質化する機能のON/OFF(既定はOFF)
- 「縮小」「等倍」「拡大」:画面表示の上での拡大縮小
- 「スムージング」:滑らかな線が描ける機能のON/OFF(既定はON)、OFF時は元の手書きJSと同じに
- 「マーカー」:マーカー風の透過して塗り重ねられるモードのON/OFF(既定はOFF)
- 「ペン調整-1」「ペン調整0」「ペン調整+1」:ペンの太さ微調整(±0.3px)、印象の変わりやすい細いペンでの調整に
- 「塗りつぶし」:描画色でキャンバス全体を塗りつぶします
- 「反転」:左右反転します
- 「情報」:今の画像の拡大率やピクセル数などをキャンバス上部に表示します
マーカーモードに関しての追加情報
マーカーモードはアナログ画材のマーカーペンのように彩色を容易にするために設けましたが、副次的に手書きjs作画の補助になる使い方ができます。一つは下書き・清書、もう一つはトレス・クリンナップです。
下書き・清書:まず白でキャンバスを塗りつぶし元の背景色(#F0E0D6)で下書きします。その後描画色(#800000)で「ペン入れ」し、出来たらマーカーモードでキャンバスを背景色(#F0E0D6)に塗りつぶします。下書き線は同色の背景色で塗りつぶされて清書だけが残ります。
トレス・クリンナップ:デフォルト色で絵を描き進めて重なった形や線が増えてクリンナップしたくなった時、マーカーモードにしてキャンバスを白で塗り被せます。すると描画色(#800000)は背景色(#F0E0D6)より淡い色に減色されますので上記「下書き・清書」の要領で線画を入れなおし、クリンナップできます。
拡張スクリプトファイルのコピーを手元に置いてブックマークレットのアクセスを限定すれば、このサイトが削除されても使え、アクセス記録の心配もなく(現状アクセス解析はしていません)、自分の環境に合わせカスタマイズもできます。ただしスクリプトからのローカルファイル参照はセキュリティブロックされるのでlocalhostでもLAN内でもいいのでWebサービス上に設置しなければならないかと思います。WindowsではIISが標準で使えます。→【参考情報】Microsoft TechNet:IIS での静的な Web サイトの構築、Creativeweb:Windows 10/8/7/Vista に IIS をインストール