Flickr新デザイン対応版 ブログ貼り付け用リンク作成ブックマークレットを作ってみた


これまではFlickrから画像のリンクを取得するにはFirefox+Flickwriter(GreaseMonkey)の組み合わせで楽々だったのですがページデザインの変更により使えなくなってしまいました。

新デザインではリンクが簡単にとれるボタンも準備されたのですが、サイズの変更にしか対応しておらずDescriptionを取得することが出来なかったのでBookmarkletを作ってみました。

どんなブックマークレットか?

HTMLタグの作成に必要な情報の取得し、純正のリンクにDescriptionを追加したようなdivを生成します。またdivの前にコメントとしてFlickr+タイトルが入ります(複数をまとめてコピペしていくとどのリンクか見分けがつかなくなるので)

<!-- Flickr title-->
<div>
<a href="" title><img src=""/></a>
<p>desc</p>
</div>

素人の付け焼刃ですのでどんな弊害があるかもわかりませんが使いたい方はすこし勉強すれば自分で改変できますのでどうぞ。

自作or改変するには?

以下の知識が必要になります。

  • javascript
  • DOM
  • HTML

ネットで初心者向けページを回りつつ使われてる単語を調べていけばそこまで難しくは無いはず。

そのままつかうなら

このままで使いたい方もいらっしゃると思いますがその場合でも
var imgid = url.substr(38,10);この行の38の数字を変更する必要があります。
FlickrのスクリーンネームではなくYahooIDアカウントが8文字ならこのまま動くはずです。
8文字以上なら-8した数を38に足して書き直します、8文字以下なら8から引いた数を38から引きます。

画像のサイズは長辺が500になる設定です。参考ページをみて変更してください。

ソース

var im = document.getElementsByTagName("link")[0].href;
im = im.substr(0,57)+".jpg";
var url = (encodeURI)(document.location.href);
var imgid = url.substr(38,10);
var title = document.getElementById("title_div"+imgid).childNodes[0].nodeValue;
var desc = document.getElementById("description_div"+imgid).childNodes[0].nodeValue;
if (desc==null) desc = document.getElementById("description_div"+imgid).childNodes[0].childNodes[0].nodeValue;else desc="";
alert("<!-- Flickr "+title+"-->\n<div><a href=\""+url+"\" title=\""+title+"\"><img src=\""+im+"\"></a><p>"+desc+"</p></div>");

感想とか

多少は各知識についてしっていたので2時間ぐらいで完成した。できればFlickwriterのようにサイズを選択できるようにしてみたいけど気力が潰えたので自分仕様でおk。

変更するべき箇所があるのでそのままの形でのブックマークレットの公開は辞めておきます。ソースをコピーして参考ページにて作成してください。

参考ページ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です