小技チョコレート

ちょっとした小技を紹介するだけのブログです。

GoogleフォトからScrapboxに貼り付けた画像のURLを整形し、画像が見えるようにするUserScript

Googleフォトの画像をブラウザでドラッグしてScrapboxにドロップするだけだと、長いURLが貼り付けられるのみで、画像は見えません*1。この貼り付けられたURLを整形して、画像が見える状態にするUserScriptを紹介します。

動作の様子と使い方

動作の様子はこちらのGIFのとおりです。

f:id:ichbin:20200107164458g:plain

Googleフォトの画像(サムネイルでなく、各画像そのもの)をブラウザ上でドラッグしてScrapboxのページ上にドロップすると、長いURLが書き込まれます*2。このURLを先頭から末尾まで選択します。そこにポップアップするボタンの中に”GooglePhoto"というボタンがあるので、これをクリック。そしてカーソルをその行の外に置くと、Scrapboxページ上に画像が見えるようになります。

Googleフォトから複数の画像を貼り付けた場合は、各々のURLを個別に選択してポップアップボタンを押す、という操作が必要です。

導入の仕方

Scrapboxの「自分のページ」に下記のUserScriptを貼り付けて、ブラウザをリロードし、ページ上部に表示される”Load new UserScript”をクリック。それで完了です。

code:script.js
 scrapbox.PopupMenu.addButton({
    title: 'GooglePhoto',  // "GooglePhoto"はボタンの名前。変更可能。
    onClick: text =>{
    text=text.split(/\n/).map(line => line.replace(/^(.+)$/g,'[$1#.jpg]')).join('\n')
   return text;
    }
 })

備考

このUserScriptがしていることは、Scrapboxページ上で選択された各URLを[#.jpg]で囲んでいるだけです。その拡張子を.jpgとしてありますが、貼り付けた画像のファイル形式がJPEG以外であっても、このままで正しく表示できるようです(JPEG, PNG, GIF, BMP, TIFFで確認済み)。

*1:Googleフォトの画像上で右クリックして「画像のURLをコピー」して、それをScrapboxにペーストした場合も、同じ結果になります。

*2:Googleフォトの画像上で右クリックして「画像のURLをコピー」して、それをScrapboxにペーストした場合も、同じ結果になります。