【中間報告】Flickr の新しい個別写真ページから貼り付け用HTMLコードを取得するブックマークレットを作ろうとしている途中
2014-03-27-1
[Programming][Bookmarklet]
作業途中ですが、あまりまとまった時間が取れないこともあり、とりあえず現状を報告しておきます。
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回実行すれば大丈夫なのですが、ちょっともやもやします。
以下メモ:
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); })();
この記事に言及しているこのブログ内の記事