ねむかたのブログ

趣味で開発した色々なもののメモ的ブログです

Scrapboxで貼り付けたURLにサムネイルを追加するUserScript書いてみた

はじめに

自分は普段の開発で参考にしたサイトをscrapboxにまとめていますが、後々見返したときにページのタイトルだけではどんな内容だったかぱっと見で思い出せないことが多々ありました。

そこでURLにサムネイルを追加するUserScriptを書いてみました。

※この記事はscrapboxに書いたこちらの記事をはてなブログ用に書き直した内容となっています。

scrapbox.io

UserScriptとは

scrapbox.io

公式ヘルプには物々しい感じで書かれていますが、自分のプロジェクトをCSSやJSの記法で自由にカスタマイズできる機能です。はてなブログで言うとフッターに<script>を書いたりデザインCSSをいじったりするイメージです。

URLからページのスクショを生成するAPIで画像URLを作る

wordpressが提供しているURLからページのスクショを生成するAPIを利用しました。

こちらのページを参考にしました。 soarbog.com

'https://s.wordpress.com/mshots/v1/' + WebページのURLにアクセスすると生成されたページのスクショ画像が取得できます。

これをscrapboxに貼り付けたURLの下に表示させるUserScriptを書けば目的の機能の出来上がりです。

実際に書いたUserScript

  scrapbox.PopupMenu.addButton({
     title: 'Add thumb',  
     onClick: text =>{
     let tabs = text.match("(\t+)");
     let match = text.match(".?(http.+).?")[1];
     match = match.replace("]","");
     if (tabs == null){
      text=text + '\n'+ '[https://s.wordpress.com/mshots/v1/' + match + '?&.png]\n';
     } 
     else if (tabs[1].length == 1){
        const tab = tabs[1].replace("\t","");
      text=text + '\n' + tab + '[https://s.wordpress.com/mshots/v1/' + match + '?&.png]\n';    
     }
     else {
        const tab = tabs[1].replace("\t","");
      text=text + '\n[' + tab + '][https://s.wordpress.com/mshots/v1/' + match + '?&.png]\n';
     }
     return text;
     }
  })

このコードをscrapboxの自分のページのcode:script.jsにコピペすれば自分のプロジェクトに導入できます。

コードの流れは以下の通り。

  1. 選択されたテキストのURL部分を抽出する。
  2. WordPressの機能のURLからページのスクショを生成するAPIで画像URLを作る。
    • 'https://s.wordpress.com/mshots/v1/' + match + '?&.png]\n'
    • ?&.pngscrapboxに画像URLであることを認識させるために追加したもの
  3. 選択されたテキストの次の行に生成した画像URLを追加する。

URLが箇条書きの要素になっている場合はその真下に来る様にtabの数を調整しました。

使い方

gyazo.com

  1. 適当なWebページのリンクを貼り付ける
  2. URLを含む行を選択して右クリック -> Add Thumb
    • 行の右側の余白をトリプルクリックするとやりやすい
  3. URLの真下にページのスクショが追加される

scrapboxの記法のタイトル付きのURL表記[タイトル URL]にも対応しています。

課題

日本語のページがたまに文字化けする

自分が昔書いたQiitaの記事でスクショを生成したらこんな感じで文字化けしました。 他の日本語のQiitaの記事はうまくいくのもあるので謎です。 WordPressAPIの仕様な気がします。

https://s.wordpress.com/mshots/v1/https://qiita.com/Aries1A/items/7702455b1c5b32a66761?&.png

おわりに

この機能を使ってプログラミング勉強に励みたいと思います💪