古い記事
ランダムジャンプ
新しい記事
作業途中ですが、あまりまとまった時間が取れないこともあり、とりあえず現状を報告しておきます。

Flickr のPCブラウザのUIが変更になりました。強制変更で前には戻れなさそう。というわけで、「Flickr の新しい個別写真ページから貼り付け用HTMLコードを取得するブックマークレット」を作ろうとしています(昔のUI向けのブックマークレットが使えなくなったので)。クライアントサイドで完結するブックマークレットを目指しています。

追記: 新UIから貼付け用HTMLコードが取得できますが、いちいち iframe か a+img かを選んだり、サイズを選んだりが面倒なので、ここ[2014-02-10-1]のようなブックマークレット群を用意して一発ですましたいのです。これが開発のモチベーションです。)

YUIとか分からないのでやみくもな調査を行った結果、とりあえず、
「Share this photo ボタン」
を2回クリックすると
「div class="ui-dropdown ui-dropdown-closed c-share-linkembed-embedsizedd"」
以下に貼付け用HTMLコードが登場することが分かりました。

ただし、ブックマークレットで obj.click() すると、YUI由来(たぶん)のエラーが出てしまうという問題でつまっています。気にせずブックマークレットを2回実行すれば大丈夫なのですが、ちょっともやもやします。

以下メモ:
エレメント
 
div class="ui-dialog-wrapper"
> div class="ui-charmtabs c-share-linkembed"
> div class="ui-charmtabs-content"
> div data-tab="html" class="ui-charmtabs-contentitem-selected"
> div class="ui-dropdown ui-dropdown-closed c-share-linkembed-embedsizedd" #HTMLコードが入るところ
> a title="Share this photo" class="button share ui-util-dialog-anchor" #シェアボタン
 
(1) シェアボタンを2回クリックするとDOMツリーに全サイズのHTMLコードが現れるようだ。
なので、まずは
<a title="Share this photo" class="button share ui-util-dialog-anchor">...</a>
を2回クリック。
 
javascript:(function(){
var o=document.getElementsByClassName('ui-util-dialog-anchor');
o[0].click();o[0].click();
})();
 
javascript:(function(){
var o=document.getElementsByClassName('ui-util-dialog-anchor');
try{o[0].click();}catch(e){o[0].click();};
try{o[0].click();}catch(e){o[0].click();};
})();
 
javascript:(function(){
var o=document.getElementsByClassName('ui-util-dialog-anchor');
o[0].onclick=function(){};
o[0].click();o[0].click();
})();
 
どうしてもエラーが出て止まる。原因不明。YUIとかわかってないと無理かも。
ERROR: event.returnValue is deprecated. Please use the standard event.preventDefault() instead.
 
しかしバッドノウハウあり。もういちど実行すれば大丈夫。ブックマークレットは2回実行!(ひどい…)

(2) HTMLコードが埋まっている箇所にアクセス。
つまりは
<div class="... c-share-linkembed-embedsizedd" ...>
にアクセス。
 
javascript:(function(){
var o=document.getElementsByClassName('c-share-linkembed-embedsizedd');
prompt('',o.length);
})();
 
javascript:(function(){
var o=document.getElementsByClassName('c-share-linkembed-embedsizedd');
prompt('',o[0].innerText);
})();
 
javascript:(function(){
var o=document.getElementsByClassName('ui-util-dialog-anchor');
o[0].click();o[0].click();
var p=document.getElementsByClassName('c-share-linkembed-embedsizedd');
prompt('',p[0].innerText);
})();
 
そこのリスト(ul/li)から全サイズのaタグのみゲット。
 
(for safari, chrome)
javascript:(function(){
var o=document.getElementsByClassName('ui-util-dialog-anchor');
o[0].click();o[0].click();
var p=document.getElementsByClassName('c-share-linkembed-embedsizedd');
var u=p[0].getElementsByTagName('ul');
var v=u[0].innerText;
v=v.replace(/<iframe.+?iframe>/g,'');
v=v.replace(/\s\s+/g,'\n');
prompt('',v);
})();
 
(for safari, chrome, firefox)
javascript:(function(){
var o=document.getElementsByClassName('ui-util-dialog-anchor');
o[0].click();o[0].click();
var p=document.getElementsByClassName('c-share-linkembed-embedsizedd');
var u=p[0].getElementsByTagName('ul');
var v=u[0].innerHTML;
v=v.replace(/<\/?([sl]|if).*?>/g,'');
v=v.replace(/\s\s+/g,' ');
prompt('',v);
})();