概要

経緯

その手書き機能は従来Flashにて提供されていましたが、2017年2月下旬にJavaScriptでも同機能が並んで実装されました。これが「手書きjs」です。
両者の機能はほぼ同等ですが、微妙に仕様が異なり特にFlash版と比べ書き味の悪さが問題とされています。また画像サイズが344x135px固定であったFlash版と異なりJS版は自由な比率で400x400pxまで投稿できるのですが、その設定はブラウザの開発者ツールで都度HTMLソースを書き換える煩雑さがあります。

併存するFlashとJS版手書きリンク
右側JS版は書き味が良くない
サイズは可変だが変更は煩雑

そこで諸氏がスクリプトでの機能追加・改善を試み、特にガハラさん(通称)による書き味改善のスクリプトが良好でしたのでこれを中心として補助機能をまとめたのがこの拡張スクリプトです。初出・履歴などは追いきれないのですが各機能は皆様のアイデアやコードを参考に勝手にまとめさせていただいております。


主な追加機能


動作環境

使い方

1.設定方法

スクリプトをブラウザで動かす準備をします。

可能ならブックマークレットの利用が便利です。(ブラウザの対応状況は下章「既知の問題」参照)
ブックマークレットの使えないブラウザでも拡張スクリプトをウェブコンソールから動かせば利用できます。

  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);})()
    インポート用ブックマークファイル(ブラウザからインポートでブックマークを追加する場合に使用)

    ブックマークファイル ダウンロード

  2. ウェブコンソールから使う

    拡張スクリプトを適用したいページで開発者ツール(ディベロッパーツール)のウェブコンソールを開き、外部スクリプトファイル(tegakiJs_tool.js)のテキスト内容すべてをコピーしコンソールのコマンドラインにペーストして実行(エンターキー押下や再生アイコンクリックなど)します。→【参考情報】Mozilla:ウェブコンソール コマンドラインインタープリターマイナビニュース クリエイターの道具箱:さまざまなWebブラウザと開発者向けデバッグツール

    スクリプトファイル(最新版) ダウンロード
    ※特定のバージョンのファイルは更新履歴参照


2.起動操作

【注意!】手書きjs画面が表示される前にこのスクリプトを動かす必要があります

手書きを行いたいスレッドの「レス送信モード」ページを開き、(1.設定方法)で作成したブックマークを選択し(またはコンソール入力・実行し)拡張版の手書き画面を表示します。気をつけていただきたいのは、既存の手書きスクリプトが動作する前に拡張版の手書きスクリプトを動かす必要があるということです。
「レス送信モード」ページを開いてコメント記入欄見出しのリンク「手書き」「手書きjs」(※左図参照)のいずれもクリックしたことのない状態からブックマークを選択します(またはコンソール入力・実行します)。
エラーのダイアログが出る場合はすでに既存機能の「手書き」(Flash版、環境によって表示されないことも)「手書きjs」を始めていると思われます。一度他の手書きスクリプトが動いてしまっていると直らないのでページをリロードして再度拡張スクリプトを先に動かすよう試してください。


3.ツールの説明

絵を描くための操作は今まで通りです。追加機能はツールバーのアイコンをクリックして使います。

拡張スクリプトでの手書き起動に成功すると、上画像のようにツールバーとキャンバスがともにフロート状態で表示されます。ツール、キャンバスは共に上部の帯をドラッグすることで移動できます。

マーカーモードに関しての追加情報

マーカーモードはアナログ画材のマーカーペンのように彩色を容易にするために設けましたが、副次的に手書きjs作画の補助になる使い方ができます。一つは下書き・清書、もう一つはトレス・クリンナップです。
下書き・清書:まず白でキャンバスを塗りつぶし元の背景色(#F0E0D6)で下書きします。その後描画色(#800000)で「ペン入れ」し、出来たらマーカーモードでキャンバスを背景色(#F0E0D6)に塗りつぶします。下書き線は同色の背景色で塗りつぶされて清書だけが残ります。
トレス・クリンナップ:デフォルト色で絵を描き進めて重なった形や線が増えてクリンナップしたくなった時、マーカーモードにしてキャンバスを白で塗り被せます。すると描画色(#800000)は背景色(#F0E0D6)より淡い色に減色されますので上記「下書き・清書」の要領で線画を入れなおし、クリンナップできます。


(番外)自前環境でブックマークレットを使う

ここで紹介したブックマークレットではこのサイトでホストしている拡張スクリプトファイルを読み込んでいますが、外部ファイルの場所は限定されません。

拡張スクリプトファイルのコピーを手元に置いてブックマークレットのアクセスを限定すれば、このサイトが削除されても使え、アクセス記録の心配もなく(現状アクセス解析はしていません)、自分の環境に合わせカスタマイズもできます。ただしスクリプトからのローカルファイル参照はセキュリティブロックされるのでlocalhostでもLAN内でもいいのでWebサービス上に設置しなければならないかと思います。WindowsではIISが標準で使えます。→【参考情報】Microsoft TechNet:IIS での静的な Web サイトの構築Creativeweb:Windows 10/8/7/Vista に IIS をインストール

既知の問題

元掲示板の仕様の更新中は…

元ページやスクリプトの仕様が変わると使えなくなることがあります。

制約

ブックマークレットが使えない場合でもコンソールから利用できる場合があります。

ブラウザごとの特性

それぞれ一長一短となります。以下Windows版でしか確認できていませんが…。

バグなど

放置傾向なので対応しないかもしれません。

過去の問題

更新履歴

随時更新される最新スクリプト(tegakiJS_tool.js)の動作が好ましくない方は下記リンクにあるバージョン指定のもの(tegakiJS_tool_yymmdd.js)を利用するようにしてください。

日付 バージョン 備考
2019/9/19 ver.190919(現行) 従来マーカーモードでは何も描画できなかった白を描画できるよう変更。(ペン時17%、塗りつぶし時88%)
2019/9/16 ver.190916 「塗りつぶし」時もマーカーモードが反映されるよう変更。
2018/12/22 ver.181222 元のスクリプトに変更があったので該当箇所更新。元の仕様が変わったためこれより前のスクリプトが動作しなくなっています。
2018/12/20 ver.181220 元のページのノード構成とスクリプトに変更があったので対応。(仕様変更により互換性なし)
2018/12/02 ver.181202 元のスクリプトに変更があったので該当箇所更新
2018/11/10 ver.181110 元のスクリプトに変更があったので該当箇所差し替え
2018/10/29 ver.181029 元の手書きスクリプトの変更部分を差し替え(iOSでの問題対応?未検証)
2018/3/26 ver.180326 Edgeでコンソールから利用できない問題の解消
2018/3/25 ver.180325 線にジャギーの出ることがあるのを修正
2018/3/24 ver.180324 描画方法の変更、描画結果を検討して処理の簡略化と設定をチューニングしFlash版に近い表現となるように調整
2018/3/21 ver.180321 描画のスムージングのオンオフ実装(オフ時は元の描画方法)、画素密度切り替えをトグルボタンに変更、Chromeでの色ずれやや軽減、描画スムージングが不安定になる件他バグ対応
2017/10/22 ver.171022 Undo関係の問題を修正、リサイズ等もUndo対象に
2017/4/6 ver.170405 IE11・Edge対応化、ブックマーク部整理
2017/4/1 ver.170401 初版
inserted by FC2 system