カラー設定ダイアログを作るのはそう簡単ではない
「Skin Coordinate」に背景色の設定機能が無いので、これを作る事を考えたのですが、カラー設定ダイアログをいちから作るのは簡単ではなさそうです。 これまで、編集画面で動作する「Blog Table」「Draw The Line」などのツールでは、場所が編集画面なので、そのカラー設定ダイアログを利用することが出来ました。
しかし、「Skin Coordinate」は普通のブログページで動作するので、自製するかプラグインを探して利用する方法を考えないと、どうにもなりません。
ネットを調べると、JavaScriptで作られた「カラー設定パネル」「カラーピッカー」の類も、かなりの種類が存在する様です。 ただ、それらはHTMLに設定コードを書き込んで使うタイプで、「Tampermonkey」上で動作させる事は前提にしていません。 とりあえず簡単そうな（それでも1000行程度のコード）設定パネルのソースコードを入手して、「Tampermonkey」から使える様に書換えました。
下は、そのダイアログをテスト起動したところです。
しかし、パネルの表示がやっとで、どのボタンも上手く動作せずにエラーで行き詰まりました。 そこで、他に使えそうな設定パネルを探していると、見落としていた以下のページがありました。
上のページで実際にダイアログのテストが出来ますが、郵便ポストの口の様なボタンをクリックすると、立派なカラーピッカーが表示されます。 しかも設置は「input要素」を1個置くだけのコードで、煩雑なライブラリの設定などは不要です。
これは「カラー設定ダイアログがJavaScript標準パーツ化」されたという事です。
ブラウザやOSによって異なるダイアログ
下は、新Edge / Chrome で表示される「カラー設定ダイアログ」です。
（「Tampermonkey」のスクリプトでボタンを表示して、それを押してダイアログを表示させています）
左上のボタンはCSSで正方形にしていますが、通常はこの様なボタン表示で、ボックス内の色はこの「input要素」で設定した「value」を表示しています。 ボタンをクリックすると、下にダイアログ（カラーピッカー）が表示されて、充分な機能です。
面白いのは、ダイアログがブラウザウインドウの外にも表示されている点で、ブラウザ内のJavaScriptで、OSレベルの機能を呼出して動作させている様です。
で、同様に Firefoxで「カラー設定ダイアログ」を表示させると、下の様に Windows のデフォルトの設定パネルが表示されます。
Chrome/新Edgeはコンパクトですがドラッグ移動が出来ません。 一方、Firefoxの方はドラッグ可能で、使い勝手が少し違いますが、とにかく簡単なコードで「カラー設定ダイアログ」を使えるのは大変に有り難いもんです。
Chrome / 新Edge のサンプルコード
以下は、少しデザインを考慮した、「カラーinputボタン」の設置のサンプルです。
「Tampermonkey」にスクリプトコード「Default Picker」をコピペして保存します。 このツールをONにしてアメブロのブログページを開くと、画面の中央あたりにバナーの様な「Color Picker」のボタンが表示されます。
色の部分をクリックすると、下に「カラー設定ダイアログ」が表示されます。
ピッカーで設定した色は、ボタンに保持されます。「カラー設定ダイアログ」以外の部分をクリックすると、ピッカー部は閉じます。
サンプルテストのコードなので、ボタン自体を閉じる事や移動する事が出来ませんが、設定したカラー値は「input要素」のvalue値で簡単に取得できます。 先の Firefoxの図は全く同コードですが、実装では少し調整が必要です。
「Default Picker」
これは「カラーインプット要素」の設置と動作を試すためだけのテストコードです。
Chrome/新Edge/Firefoxの「Tampermonkey」の新規スクリプトページに、以下のスクリプトコードをペーストして保存する事で、テストコードを試す事ができます。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
〔 Default Picker 〕