smart.fmの「もっと見る」をすべて展開するブックマークレット

smart.fmの「もっと見る」をすべて展開するブックマークレット

背景

smart.fmのサイトでは、ウォールや日記にてコメントを残すことができますが、コメントの数が多くなると一定数以降のコメントは折りたたまれて、残りは「もっと見る」というリンクを辿らないと表示されません。特に、ウォールのコメント(Shout)については、初期の頃からのコメントがずっと残っているので、過去のものをすべて読もうとすると何度も何度も「もっと見る」をクリックすることを強いられます。

smart.fm終了にあたり、こういったコメントなどによるユーザー間の交流の記録も失われてしまうわけで、せめてローカルに保存しておきたいところです。当初はAPIを使って何とかしようと思ったのですが、一筋縄にはいかないようで、次善の策としてFirefoxの拡張機能「ScrapBook」を使って、ブラウザに表示されている内容をごっそり保存するのが手っ取り早いと思います。しかし、表示されている内容しか保存できないため、ScrapBookで保存する前には、「もっと読む」をすべてクリックしてコメント内容を展開する必要があります。

そこで、手でいちいちクリックする代わりに、「もっと見る」リンクを自動で探して展開するブックマークレットを作ってみた次第です。

使い方

登録・起動は一般的なブックマークレットと同様です(この説明で分かる方だけが使ってください)。

ブックマークレットを起動すると、smart.fmの画面上の「もっと見る」リンクが次々に展開されていきます。けっこう時間がかかるので、処理中は画面左上に「ローディングアイコン」を表示するようにしました(中央の数字は画面上の「もっと見る」リンクの数です)。クリックすると処理を途中で中断します。

技術的な話

私が普段JavaScriptを書く際には「jQuery」を使っています(Webアプリを作る際は「jQuery UI」も)。正直なところ、すでにこれなしではJavaScriptでプログラムを書ける気がしません。そもそも、JavaScriptを使い始めたのがごく最近で、JavaScriptを初めてからすぐにjQueryを使うようになったので、「素のJavaScript」だけでプログラムを書いた経験がほとんどありません。

とはいえ、ブックマークレットを書くという局面では、jQueryを使うのは牛刀な感じがしてきます。ブックマークレットで外部ライブラリをロードするというのも大げさに感じます。

しかしながら、すでにjQueryを使っているサイトのページに対してブックマークレットを適用するのであれば話は別です。smart.fmではjQuery(1.3.2)を使っているので、smart.fmのサイトで使うブックマークレットならば、普通にjQueryを使えるわけです。

jQueryさえあれば、「もっと見る」リンクをすべてクリックするなんてことはお茶の子さいさいです。ブックマークレットはあまり長くしすぎるとブラウザ側でブックマークとして扱えなくなってしまうのですが、jQueryを使うとコードが非常にコンパクトにまとまります。ローディングアイコンを出してみたり、途中でキャンセルできるようにしたりしましたが、トータルで500文字以下に抑えられました。

危険性

しかし、ブックマークレットを作ってみて実感しましたが、ブックマークレットというものは本質的に危険な仕組みです。特に今回のように「クリック」操作を伴う場合、クリックする対象を間違えて選択してしまうと大変なことになりかねません(プログラムミスがあって、誤って「クリック」の対象を「削除ボタン」にしてしまったとすると……)。

普通に作っていても危険なのだとすると、故意にユーザーに危害を与えるべく悪意を持って開発すれば、いくらでもユーザーに損害を与えることができてしまうわけです。例えば、画面内のすべての「コメント送信」ボタンを「クリック」することも可能ですし、事前に画面内のすべてのテキストボックスに「f*ck you」みたいな文字列を設定しておくことも朝飯前なわけです。

むろん私にはそのような意図は毛頭ありませんが、どこの馬の骨とも知れない人間が提供しているブックマークレットを使うということがいかに危険なことであるか、リスクを認識した上で、自己責任で利用するようお願いします。これはこのブックマークレットに限った話ではなく、一般的な話です。

(このブックマークレットはsmart.fmユーザー向けのものであるため、本来この記事はsmart.fmの日記にて書くべきなのですが、(ギークではない一般の人が多い)smart.fmのユーザー層に「非公式のブックマークレットを安易に使う習慣」が広まってしまうことを懸念して、smart.fmの日記では公開していません)

処理の内容を説明する意味も含めて、ブックマークレット化する前の元ネタのJavaScriptコードも載せておきます。

オリジナルのJavaScript

(function() {
    var f = true;   // 処理を継続するかどうかのフラグ
    var e = $('<div id="__bml-wait" style="position: fixed; top: 0; left: 0; width: 24px; height: 20px; background-image: url(http://assets3.smart.fm/html5/images/animated/loading_tabs_24px.gif); opacity: 0.5; padding-top: 4px; text-align: center">?</div>').appendTo('body');
                    // ローディングアイコンを表示する
    e.click(function() {f = false});    // アイコンをクリックされたら処理を中断
    (function expand() {
        var n = $('.more_link > a').size();     // 「もっと読む」リンクの数
        if (f && n > 0) {   // 処理継続フラグON かつ リンクが存在しているか?
            e.text(n);                          // 残りリンク数を表示する
            $('.more_link > a:first').click();  // リンクをクリックする
//          var y = $('.more_link > a:first').offset().top;
//          $('html, body').animate({scrollTop: y}, 'slow');
            setTimeout(expand, 3000);           // 3秒後に再実行する
        } else {
            e.remove();     // ローディングアイコンを消去する
        }
    })();
})()

ブックマークレットのHTMLソース

<a href="javascript:(function(){var f=true;var e=$('<div id="__bml-wait"style="position:fixed;top:0;left:0;width:24px;height:20px;background-image:url(http://assets3.smart.fm/html5/images/animated/loading_tabs_24px.gif);opacity:0.5;padding-top:4px;text-align:center">?</div>').appendTo('body');e.click(function(){f=false});(function expand(){var n=$('.more_link>a').size();if(f&&n>0){e.text(n);$('.more_link>a:first').click();setTimeout(expand,3000);}else{e.remove();}})();})()">smart.fmの「もっと見る」をすべて展開するブックマークレット</a>