記事を書くのが楽になる！選択範囲内の画像タグを遅延ロードにする CopyQ スクリプト

f:id:dot-harley:20200110233155j:plain

はてなブログの記事編集画面、サイドバーから写真を貼り付けすると問答無用で「はてな記法」が挿入されますよね。

このブログは遅延読み込みライブラリの Lozad.js を利用しています。

Lozad.js を利用するため、はてな記法から HTML の img タグに直して class属性と data-src 属性を付けて src 属性を空にする、という作業を毎回毎回手打ちでおこなっていましたが、非常に面倒です。

そこでこれらの作業を自動化する CopyQ スクリプトを作ってみました。

Lozad.js についてはこちらの記事をご覧ください。

はてなブログに Lozad.js を導入して画像を遅延読み込みする方法 - In my mind

特徴

選択範囲内のすべての画像タグに data-src 属性とclass="lozad"が追加され、src 属性は削除されます。
マークダウン形式の画像タグは HTML 形式に変換されます。
はてな記法の画像タグは HTML 形式に変換されます。
ついでに schema.org の構造化データが付きます。
正規表現による置換を繰り返すことで実現してます。「もっとスマートなやり方があるよ」という方はぜひコメント欄にお願いします。

免責事項

無保証です。このスクリプトを使用して何らかの損害が発生したとしても、作者は責任を負いません。

不具合の報告はコメント欄にお願いします。直せるかどうか分かりませんが。。。

コード

[Command]
Command="
    copyq:
    if (!copy())
      abort()
    
    // \x9078\x629e\x7bc4\x56f2\x306e\x30c6\x30ad\x30b9\x30c8\x3092\x5909\x6570\x306b\x683c\x7d0d
    var text = str(clipboard())
    
    // Markdown image tag -> HTML
    var newText = text.replace(/!\\[(.*?)\\]\\((.*?)\\s*\\\"(.*?)\\\"\\)/g , '<img src=\"$2\" alt=\"$1\" title=\"$3\">')
    newText = newText.replace(/!\\[(.*?)\\]\\((.*?)\\)/g , '<img src=\"$2\" alt=\"$1\">')
    
    // hatena image tag -> HTML
    newText = newText.replace(/\\[(\\w):id:(.*?):(\\d{8})(\\d{6})(\\w):plain(:alt=.*?)?\\]/g , '<img src=\"//cdn-ak.f.st-hatena.com/images/fotolife/d/$2/$3/$3$4.$5\" alt=\"$1:id:$2:$3$4$5:plain$6\" title=\"$1:id:$2:$3$4$5:plain$6\" class=\"hatena-fotolife\">')
    newText = newText.replace(/<img (.*?)src=\"(.*?)\\.j\"(.*?)>/g , '<img $1src=\"$2.jpg\"$3>')
    newText = newText.replace(/<img (.*?)src=\"(.*?)\\.p\"(.*?)>/g , '<img $1src=\"$2.png\"$3>')
    newText = newText.replace(/<img (.*?)src=\"(.*?)\\.g\"(.*?)>/g , '<img $1src=\"$2.gif\"$3>')
    
    // img src -> data-src + class=\"lozad\"
    newText = newText.replace(/<img (?:data-)?(.*?)src=\"(.*?)\"(.*?)>/g , '<img $1data-src=\"$2\"$3 class=\"lozad\">')
    newText = newText.replace(/<img (.*?)class=\"(.*?)\"(.*?)class=\"(.*?)\"(.*?)>/g , '<img $1class=\"$2 $4\"$3$5>')
    newText = newText.replace(/<img (.*?)class=\"(.*?)\"(.*?)class=\"(.*?)\"(.*?)>/g , '<img $1class=\"$2 $4\"$3$5>')
    newText = newText.replace(/class=\"(.*?)lozad(.*?)lozad(.*?)/g , 'class=\"$1lozad$2$3')
    
    // schema.org
    newText = newText.replace(/<.*?itemscope.*?>[\\s\\n]*(<img .*?>)[\\s\\n]*<\\/.*?>/g , '$1')
    newText = newText.replace(/<img (.*?)itemprop=\".*?\"(.*?)>/g , '<img $1$2>')
    newText = newText.replace(/<img (.*?)>/g , '<span itemscope itemtype=\"http://schema.org/Photograph\"><img $1 itemprop=\"image\"></span>')
    
    // Remove trailing space
     newText = newText.replace(/ {2,}/g , ' ')
    
    if (text == newText)
      abort();
    
    //\x51fa\x6765\x4e0a\x304c\x3063\x305f\x3082\x306e\x3092\x8cbc\x308a\x4ed8\x3051
    copy(newText)
    paste()"
Icon=\xf121
InMenu=true
Name=img \x30bf\x30b0 \x9045\x5ef6\x30ed\x30fc\x30c9\x5316 (lozad.js)