』でも紹介されていますが、DeliciousはFirefoxのアドオンの使いやすさなどから、はてブよりも高く評価されることも多いソーシャルブックマークです。インターフェイスが全て英語なので、取っつきにくいところもありますが、実際に使ってみるとiPhoneとの連携も充実していてかなり便利。
本の中でiGoogleガジェットにDeliciousを組み込むと便利ということが書かれていました。さっそく登録しようと思ったのですが、本で紹介されていたiGoogleガジェットがなかなか見つかりません。そこで、Deliciousが提供しているLinkrollsとTagrolls用ブログパーツを、iGoogleガジェットにする方法を考えてみました。
「iGoogleガジェットを作る」というと、開発者しかできないような難しい印象がありますが、実は誰でも自由に作ることができます。
ここで紹介した手順に従って作成すれば、一通りの流れを把握できるようになるはずです。
Deliciousのlinkrollsとtagrollsのスニペットを取得します
LinkrollsやTagrollsと言っても、日本語では意味がすぐに分かりません。
簡単に言うと、Linkrollsは「ブックマークした記事の一覧」、Tagrollsは「タグクラウド」という程度のものです。
ブックマークした記事やタグクラウドには、自分の関心事が集約されていますので、iGoogleに常に表示させて置くのはとても良いアイデアです。
まずは、Deliciousのブログパーツのページにアクセスします。
Linkrolls - Deliciousブックマーク記事一覧
Tagrolls - タグクラウド
このページでは、表示したい内容をカスタマイズすることができます。
iGoogleで使いやすいように自分の好みで自由に設定します。
設定が終わったら表示されているjavascriptのスニペットをコピーしておきます。
Dropboxのpublicフォルダにファイルをアップ
今回はlifehackrの記事からインスピレーションを得て、Dropboxというオンラインファイルストレージサービスを利用することにしました。
iGoogleを利用するには、xmlファイルをサーバ上に設置する必要があります。
従来はレンタルサーバなどを別途借りる必要がありましたが、Dropboxの"public"＝「共有フォルダ」にファイルを置くことでサーバの代わりに利用することができます。
Googleが提供しているストレージもあるようですが、今のところDropboxを使うのが最も簡単です。
このフォルダに以下で作成するxmlファイルを保存していきます。
Linkrollsを表示するためのiGoogleガジェットを作る
赤い文字の部分が先程コピーしたスニペットです。
<![CDATA～～～]]>で囲まれた部分がiGoogleに表示されます。
その他の部分は、タイトルや、スクロールの有無、高さの設定などを設定しています。
分かる人は自分流にカスタマイズしてみてください。
青い文字の部分は、記事をクリックしたときに別ウィンドウでページを開かせるための設定です。
Deliciousの公式サポート掲示板で紹介されていた方法をそのままいただいてきました。
http://support.delicious.com/forum/comments.php?DiscussionID=1186
これがないとiGoogleの中で記事が開いてしまい、見づらく使いづらいガジェットになってしまいます。
このファイルに適当なファイル名をつけて、DropboxのpublicフォルダにXML形式で保存します。
このとき文字コードをUTF-8にして保存することを忘れないでください。
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="◯◯◯◯'s Delicious Bookmarks" scrolling="true" height="400" />
<Content type="html">
<![CDATA[
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$(".delicious-link").attr("target","_blank");
$(".delicious-tag").attr("target","_blank");
});
</script>
<script type="text/javascript" src="http://feeds.delicious.com/v2/js/[ユーザーID]?title=My%20Delicious%20Bookmarks&icon=m&count=20&bullet=%C2%BB&sort=date&tags&name&showadd"></script>
]]>
</Content>
</Module>
Tagrollsを表示するためのiGoogleガジェットを作る
次はtagrolls＝タグクラウドの設定です。
こちらも赤い文字の部分に先ほどコピーしたスニペットを貼りつけます。
ただし、ここでは、高さを調整するために「height="400"」を付け加えています。
iGoogleの設定に合わせて、見やすい高さを指定することができます。
同じくpublicフォルダにXML形式で保存しますが、もちろんUTF-8で保存することを忘れずに。
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="◯◯◯◯'s Delicious Bookmarks" height="400" scrolling="true" />
<Content type="html">
<![CDATA[
<script type="text/javascript" src="http://feeds.delicious.com/v2.1/js/tags/[ユーザーID]a?title=My%20Delicious%20Tags&icon&count=100&sort=alpha&flow=cloud&name&showadd&color=73adff-3274d0&size=12-35" height="400" ></script>
]]>
</Content>
</Module>
Mydorpboxで公開されたファイルのURLを確認する
Dropboxのpublicフォルダに保存をすると、そのファイルを外部の人が閲覧できるようにURLが割り振られます。
図のように右クリックをして「Dropbox」＞「copy public link」で保存したファイルのURLをチェックします。
iGoogleにxmlファイルの内容を読み込ませてガジェットを表示させる
最後にiGoogleに表示をします。
iGoogleのトップページで「コンテンツを追加」をクリック。
移動した先で「フィードやガジェットを追加」をクリックすると、URLの入力を求められますので、コピーしたXMLファイルのURLを貼りつけます。
それで設定は完了です。
ちなみに、tagrollsにはあえて別リンクをさせていません。
タグクラウドをクリックすると、ガジェットの内部でDeliciousのページが表示されます。
これが意外と見やすい。
イメージは「SEO」というタグをクリックした状態ですが、記事の一覧がスマートに表示されて、スクロールバーで下の方まで見ることができます。
DeliciousのDisplay Optionsで「new window」に設定しておけば、そこで記事をクリックしたときには別ウィンドウで表示されるようになります。
