SSブログ

ツイッターでアップロードした画像のオリジナル画像を表示するブックマークレット [メール投稿]

正己さんはTwitterを使っています: "ツイッターでオリジナル画像を表示する→ javascript:(function(){var%20url=document.location.href;url='https:'+url.split(':')[1]+':orig';window.open(url);})();"
...

 ツイッター本家でアップロードした画像は、今のところ、
 https://pbs.twimg.com/media/ファイル名(jpg、png、他)
 らしく、このURLの末尾にサイズを指定する :large、:small、:medium、:thumb、:orig の付いたURLもある。
 大きなサイズの画像をアップロードすると縮小されて表示されてることがある。URLにサイズ指定が無いのにアップロードしたオリジナルのサイズで表示されないことがある。サイズ指定の :orig がオリジナルの画像かもしれないので、サイズ指定がなかったり、:large、:small、:medium、:thumb がURLの末尾についている画像を :orig が付いた
 https://pbs.twimg.com/media/ファイル名(jpg、png、他):orig
にして表示するのを容易にしたい。
 そこで、ブックマークレットを作った。IE11でも使えるらしい。ただし、画像がツイートに埋め込まれた状態ではなく、画像だけが表示された状態でしか利用できない。上のようにツイートにスクリプトは残してあるが、忘れちゃうかもしれないのでブログに残す。
 ブックマークレット→ 【to_orig
 追記(2015/2/28):
 上のブックマークレットは、画像を表示させてからオリジナルに切り替えるものだったが、もっと便利に、statusページから直接オリジナル画像を別のタブで表示してくれて、画像が複数ある場合にも対応しているブッマークレットを作ってくれてる人がいた。
【Twitter画像原寸表示ブックマークレット】
 ここの「Twitter画像原寸表示 v1.141218c」を使ってみたが、とても便利だった。
 どうやら、statusページのheadタグ内から'pbs.twimg.com/media/'を検索して':large'の前までのURLを抜き出して':orig'を付加する作業を検索範囲を縮小しながら繰り返しているらしい。

 とても勉強になったので、私も同じ仕組みのスクリプトを作ってみた。最初は同じようにheadタグ内を検索するようにしていたのだが、headタグ内に画像などの情報が無い場合もあるのでbodyタグ内を検索させた。それから、'pbs.twimg.com/media/'を検索すれば早いのだけど、'pbs.twimg.com'で検索して/media/以外も拾えるようにしてみた。/profile_images/は邪魔なので除外し、bodyタグ内は同じ画像のURLが大量にあるので重複して表示しないようにして、さらに、返信元ツイートなどを表示している時にブックマークレットをクリックしたらエンコードされたテキストが抽出されてURLの終わりを見つけるのに失敗していたので、除外した。
 他の情報にも対応できるようにと工夫したつもりだったが、/media/'以外はGIFアニメをmp4に変換しちゃった/tweet_video/とそのサムネイルの/tweet_video_thumb/しか見つからなくて、対して応用が利かなく、スクリプトが複雑になっただけだった。やはり、【Twitter画像原寸表示ブックマークレット】の「Twitter画像原寸表示 v1.141218c」の方を使った方が良い。
 でも、バグを消しながら一所懸命作ったので、私のスクリプトとブックマークレットも載せておく。

 ブックマークレット→ 【to_orig
javascript:(function(){
var%20url=document.location.href;
var%20str=document.getElementsByTagName('bodyhead')[0].innerHTML;
if(url.indexOf('pbs.twimg.com/media/')!=-1){
url='https:'+url.split(':')[1]+':orig';window.open(url);
}
else%20if((url.indexOf('twitter.com')!=-1)&&(url.indexOf('status')!=-1)){
var%20posA=str.indexOf('pbs.twimg.com');
var%20posB=str.indexOf('"',posA+1);
var%20url0='';
while(posA!=-1){
url=str.substring(posA,posB);
if((url.split(':')[0]!=url0)&&(url.indexOf('profile_images')==-1)&&(url.indexOf('profile_banners')==-1)&&(url.indexOf('&quot')==-1)){
url0=url.split(':')[0];
if(url.indexOf('media')!=-1){url='https://'+url0+':orig'}
else{url='https://'+url}
window.open(url);
}
posA=str.indexOf('pbs.twimg.com',posB+1);
posB=str.indexOf('"',posA+1);
}
}
})();

追記(2015/2/28):
 やっぱりバグが残っていたので、bodyの中を検索するのを諦めてheadの中を検索するように一時的に変更した。画像以外のメディアもブックマークレットで単独表示できるようになればと思ったけれど、今はニーズが無いので諦める。
nice!(0)  コメント(0)  トラックバック(0) 
共通テーマ:moblog

nice! 0

コメント 0

コメントを書く

お名前:[必須]
URL:
コメント:
画像認証:
下の画像に表示されている文字を入力してください。

トラックバック 0

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。