ももクロちゃんたちも使っているブログサービス、アメブロ。
最近、投稿画像の閲覧ページの表示が変わったらしい。
【画像】画像拡大ページ・画像一覧ページの表示方法が変わります｜スタッフブログ
で、その新しい画像ページではその画像を取得して保存しようとしても簡単には出来ない。例えば
http://ameblo.jp/sasaki-sd/image-11392903221-12262904057.html
みたいなページで、右クリックして画像保存、みたいなことができない。
HTMLソースみてゴニョゴニョすればもちろん取得できるのだけど、ある程度わかっていないと厳しい。
僕自身にはそういう欲求は特に無いけれど「推しの子の投稿した写メをダウンロードして保存したい！」というヲタ仲間のヒトは結構いて、困っているようだったので、ブックマークレットを作って提供することにした。
ameblo_bookmarklet.md · GitHub
こんなかんじ。
- 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をとる、みたいなかんじでどうにか対応した。
とりあえずは今の表示画面で動いているうちはこれでハッピーになれるはず。
