10月
04
2011
2

画像まとめページを自動でサムネイル・スライドショー化するブックマークレット

縦に長く画像のリンクが大量にあるようなページで、ページに含まれている画像を全てサムネイル一覧にまとめて、そのサムネイルの内容をスライドショーのように表示する事が出来るブックマークレットです。
下のリンクをブックマークバー等にドラッグしてクリックすると利用出来ます。

とりあえずこのページで試してみる場合は、そのまま “imageview” をクリックしてみて下さい。

imageview

javascript:(function(d){var%20s=d.createElement('script');s.src='http://www.otchy.net/js/imageview.js';d.getElementsByTagName('head')[0].appendChild(s);})(document);

動作

下記のように、サムネイル画像の img 要素があってそれに大きい画像がリンクしているような部分をページ上から抜き出して、サムネイル一覧を生成します。
<a href=”***.jpg”><img src=”***_mini.jpg” /></a>
HTML のロードが完了していない時は、HTML のロードが完了するまで待ってから動作します。

サムネイル一覧を作成する時、いったんページの最下部まで自動的にスクロールする事で、GIGAZINE のように、画像が遅延ロードされるページでも全ての画像を取得出来るように配慮しています。

サムネイル一覧から任意の画像をクリックすると、その場で大きな画像が開きます。
画像の上でクリックしたり、矢印キーの左右で、画像を切り替える事が出来ます。

画面キャプチャ

こういう感じの画像まとめ、よくありますよね。

ここでブックマークレットを実行すると読み込みが始まり、読み込みが完了するとサムネイル一覧が作成されます。

サムネイルから画像を選択すると、その場で拡大表示されます。

対象ブラウザ

Google Chrome 14 と、Firefox 3.6 で動作確認しています。恐らく、Firefox 4+ と Safari 4+ あたりでは動作すると思われます。
IE に関してはほとんど未確認ですが、IE6 は動作しません。IE7、IE8 もたぶん動作しません。IE9 はもしかしたら動作するかも知れません。

(追記)
利用者の方から Firefox 7 と IE9 で正常動作するとの報告をいただきました。ありがとうございます。

Written by Otchy in: Development | タグ:
8月
22
2011
2

Greasemonkey をインストールせずに試すブックマークレット

Gresemonkey (など) のスクリプトをインストールすることなく任意のサイトでちょこっと試すためのブックマークレット。
起動すると、user.js の URL を聞いてくるので、入力すると今開いているページにそのスクリプトを読み込みます。
単にその user.js をそのページに追加するだけの単純な仕組みなので、GM_* 等への対応はありません。

任意のサイトを対象とした user.js を書くにあたって、自分のテストを楽にするために書きました。

GM Test

javascript:(function(d){var%20a=prompt('Enter%20script%20URL.');if(a){var%20s=d.createElement('script');s.src=a;d.getElementsByTagName('head')[0].appendChild(s);}})(document);
Written by Otchy in: Development | タグ: , ,
8月
01
2011
2

Gmail で未読だけを表示するブックマークレット

Gmail のタグとかの表示で、未読のみを表示するボタンがないのは何故だろう?と思ったのでブックマークレット書きました。
ただ検索実行まで解析しきれなかったので、検索ボタンにフォーカス移して終わりです。
ブックマークレット実行後、Enter キーを押す必要があります。
未読検索

javascript:(function(d){var%20q=d.getElementById(':re');q.value=q.value+'%20is:unread';d.getElementById(':rj').focus();})(window.frames['canvas_frame'].contentWindow.document);
Written by Otchy in: Development | タグ: ,
9月
28
2010
2

Tumblr の引用元を一発で開く方法

明示的に開くならブックマークレットで。Redirect Tumblr

javascript:(function(e){if(!e)return;location.href=e.href;})(document.querySelector&&document.querySelector('.source%20a'));

自動的に開くなら GreaseMonkey で。

// ==UserScript==
// @name           Auto redirect from Tumblr
// @namespace      http://www.otchy.net/
// @include        http://*.tumblr.com/post/*
// ==/UserScript==
(function(e){
	if (!e) return;
	location.href = e.href;
})(document.querySelector && document.querySelector('.source a'));

まあ、引用元のリンクが見えているのであんまり需要はないですかね?
引用元のリンクのテキストや位置が常に変わるので、探すのが面倒という場合などにどうぞ。

サポートブラウザ:document.querySelector を実装しているブラウザ (IE 以外 らしい)

Written by Otchy in: Development | タグ: , ,
12月
17
2009
2

Google Map から検索結果無しの URL を作るブックマークレット

Google Map では、任意の画面からそこへリンクするための URL を生成する事が出来るのですが、その URL には、その時使用した検索ワードが含まれた形になっています。
まあそんな事気にすんなよ、といえばそれまでですが、人に URL を伝える時とか、検索ワードが入っていない方がスマートに見えていいなぁ、なんて言う事もあるかと思います。

そこで、それを簡単にするブックマークレットを作ってみました。
(参考:ブックマークレットの使い方)

javascript:(function(l,v,i,a,r){if(!l)return;v=l.value;i=v.indexOf('?');r=v.substr(0,i)+'?';a=v.substr(i+1).split('&');while(v=a.shift()){if(v.match(/^(q|hnear)=/i))continue;r+=v+'&';}prompt('Copy%20it!',r);})(document.getElementById('leurl'));

まず、上記のブックマークレットを登録したら、下記の 3 ステップで検索結果無し URL が手に入ります。

ステップ1

普通に検索します。

step1

ステップ2

リンクを表示させます。

step2

ステップ3

ブックマークレットを実行します。

step3

あとはよしなに~。

Written by Otchy in: Development | タグ: ,

Powered by WordPress | Aeros Theme | TheBuckmaker.com