アメーバブログの画像を取得するブックマークレットを書いた

2012-11-01

アメーバブログの画像を取得するブックマークレットを書いた

JavaScript

ももクロちゃんたちも使っているブログサービス、アメブロ。

最近、投稿画像の閲覧ページの表示が変わったらしい。

【画像】画像拡大ページ・画像一覧ページの表示方法が変わります｜スタッフブログ

で、その新しい画像ページではその画像を取得して保存しようとしても簡単には出来ない。例えば

http://ameblo.jp/sasaki-sd/image-11392903221-12262904057.html

みたいなページで、右クリックして画像保存、みたいなことができない。

HTML ソースみてゴニョゴニョすればもちろん取得できるのだけど、ある程度わかっていないと厳しい。

僕自身にはそういう欲求は特に無いけれど「推しの子の投稿した写メをダウンロードして保存したい！」というヲタ仲間のヒトは結構いて、困っているようだったので、ブックマークレットを作って提供することにした。

ameblo_bookmarklet.md

こんなかんじ。

PC用

javascript:(function(){window.open(document.getElementById('imgEncircle').firstChild.getAttribute('src')%2C'_blank')}())

スマートフォン用

javascript:(function(){var%20a%3Ddocument.getElementById('imgList').style%5B'-webkit-transform'%5D.match(%2F(%5Cd%2B)%25%2F)%5B1%5D%3Bwindow.open(Array.prototype.slice.call(document.getElementsByClassName('imgInner')).filter(function(e)%7Breturn%20a%3D%3D%3De.style%5B'-webkit-transform'%5D.match(%2F(%5Cd%2B)%25%2F)%5B1%5D%7D)%5B0%5D.firstChild.firstChild.getAttribute('src')%2C'_blank')}())

PC用の画面は結構単純でサクっとできたのだけど、スマフォ用のは微妙に大変だった。詳しくは調べていないけど、どうやらスワイプでスクロールさせて切り替えられるようにするため3枚常に読み込んだ状態にしていて、スワイプでcssのtranslate3dのx値を変更することで表示される画像を調節しているようだった。ので3つ取得できる画像のうち現在表示されているはずのものはどれかをstyleプロパティから判定した上で画像のsrcをとる、みたいなかんじでどうにか対応した。

とりあえずは今の表示画面で動いているうちはこれでハッピーになれるはず。