Flickrのおせっかいな埋め込みコードをJavaScriptで何とかする

ブログなどにFlickrの写真を貼り付ける為の埋め込みコードはちょくちょく変更があって現在はこのような感じになっています

スクリーンショット 2016-09-07 22.19.35

埋め込みコード

<a data-flickr-embed="true"  href="https://www.flickr.com/photos/aoshiman/29246324066/in/datetaken/" 
title="スクリーンショット 2016-08-28 13.38.41"><img src="https://c1.staticflickr.com/9/8373/29246324066_25a75afcac_o.png" width="1024" height="640" alt="スクリーンショット
 2016-08-28 13.38.41"></a><script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>

これを余計なものを取っ払ってこのようなシンプルな形にしたい

<a href="https://www.flickr.com/photos/aoshiman/29246324066/in/datetaken/" title="スクリーンショット 2016-08-28 13.38.41"><img src="https://c1.staticflickr.com/9/8373/29246324066_25a75afcac_o.png" width="1024" height="640" alt="スクリーンショット 2016-08-28 13.38.41" class="img-responsive"></a>

不要なのは頭のこの部分と

data-flickr-embed="true" 

最後についてくるJavaScript

<script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>

逆に必要なのはこれ(これはBootstrapにおけるimgタグのレスポンシブ用クラスです)

class="img-responsive"

で、昼休みの時間で出来上がったのがこのbookmarkletです(雑)。これを上記埋め込みコード生成画面で実行してあげると

javascript:(function(){var e,text,textA,textB,textC; e=document.getElementsByClassName('embed-code-text-field');text=e[0].value;textA=text.replace("data-flickr-embed=\"true\"  ",'');textB=textA.replace("\<script async src=\"\/\/embedr.flickr.com\/assets\/client-code.js\" charset=\"utf-8\"\>\<\/script\>",'');textC=textB.replace("\>\<\/a\>"," class=\"img-responsive\"\>\<\/a\>");e[0].value=textC;console.log(textC);})();

このように埋め込みコードをコンバートしてくれます

スクリーンショット 2016-09-08 21.27.20

参考サイト

Flickrの生成するEmbedコードをユーザースクリプトで自動加工する方法(Firefox + はてなブログの場合) - 酔人日月抄

  • このエントリーをはてなブックマークに追加
PAGE TOP