すぎゃーんメモ Twitter

2012-11-01

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

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

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

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

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

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

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

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

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

ameblo_bookmarklet.md

こんなかんじ。

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をとる、みたいなかんじでどうにか対応した。

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

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

トラックバック - http://d.hatena.ne.jp/sugyan/20121101/1351700140
リンク元