いつものどうでもいい話
１月初旬に国内で国際会議があり、いよいよプレゼン資料を作らなければならないのになぜかやる気にならずorz
我ながらこの気分屋には困り果てています。とりあえず出勤してできる限り進めているところです。
そんなときに限って変な思いつきをするもので、どうしても気になりだしツールを作ってしまったという話です。
どんなことがやりたかったのか？
例えば、プレゼンで「ここ」を示すときに図形を上において示すことはよくあると思うんです。例えば、以下のような感じです。
全然、これでいいんですが、これって見ずらいんですよね。。。他の部分の見えた状態になっているのでなんというか集中できない感じがします。
これをこんな感じにするといい感じですよね？たぶん、多くの方がやっていることと思います。僕もどこかで見た記憶があります。
この図を作るのに、例えば、Macだとプレビューがあればできるんですよね。プレビューには任意の形で図形をくり抜く機能があるので、それでコピーしておいて、画像全体の明るさを下げて、そこにコピーした画像を貼り付ければできます。
フォトショとか使えばもっとかっこよくできるのかもしれませんし、もしかするとこういうツールってあるのかもしれませんが、ちょっと探した感じでは見つかりませんでした。
これくらいならプログラミングすればいいじゃん、と思ったんですね。
ツールの使い方
一応、仕事をして家に戻ってから、p5jsで２時間くらいかけて作りました。なかなか思い通りに動作しなかったところがあって。。。苦労しましたがとりあえず動きました。GitHub Pagesにアップしていますのでお使いになることができると思います。Chrome、Safariで動作確認しています。
ツールの名前は、Spot Lighting Image Maker です。どうでもいいですなぁ。スポットライト効果のような感じがしたのでそう名付けました。
（１）まず、ブラウザで以下にアクセスしてください。
https://takahashilabo.github.io/SpotLightImageMaker/
（２）ファイル選択ボタンを押して、編集したい画像を選択してください。ブラウザに読み込まれます（サーバにはアップされませんのでご安心を）。読み込みが完了すると、ブラウザに原寸大で表示されます。高解像度の画像だと。。。かなり使いにくいと思います。プレゼンで使用することを前提としていますので、とりあえず画面には収まるサイズであることを前提としていますので、もし大きすぎて（解像度が高すぎて）使いにくい場合はリサイズして画面サイズ程度にしてください。
（３）画像を読み込み直後は以下のようになります。操作キーの説明が上部に３秒くらい表示されます。いずれ消えますのでお待ち下さい（そのまま操作してもらっても構いません）。
（４）図が少し暗く表示されていると思います。デフォルトで９０％くらいの明度になっていると思います。変更したければ、QとAのキーでアップ・ダウンできますのでお好みに変更してください。以下はかなり暗くしてみた図になります。
（５）続いて、スポットライトを当てたい場所をマウスでドラッグします。マウスボタンを離すと楕円状のスポットライト？が表示されます。もし、間違った場合は、ESCキーを押せば１つ前に戻すことができます。
（６）最後にSキーを押せば、アップロードした形式と同じ画像ファイル（ファイル名に＿をつける）がダウンロードできます。別の画像を続いて処理したい場合はブラウザの更新ボタンを押してください。
注意点というか仕様
一度、編集した画像にさらにスポットライトを増やすことができません。これは仕様になります。元々、スポットライトが当たっていない部分の明度を落として保存してしまっているので、そこを明るくすることができないからです。例えば、以下のような感じになります。スポットライトを当てたはずの場所（設定とカメラ）が少し暗くなり、さらにスポットライトを追加した部分（画面左中央）はさらに暗いスポットライトになります。
あと、たぶん、楕円以外でくり抜きたいという要望ってあるような気がします。これは利用する人がいたらいつか追加したいと思います。コードはここにありますので好きに変更してもらっても構いません。
さて。。。明日も頑張ろう。
風呂入って一杯飲んで寝よ。お湯割りの美味しい時期ですねぇ〜🍶
