音楽ランキングtop5ガジェット作成

一回、一回、音楽のサイトを開いて、ランキングを見るのがメンドクサイと思ったので、iGoogle上で見れるように、音楽ランキングtop5ガジェットを公開しました。

ガジェットの全体像は、下のようになっています。


このガジェットの元となったのは、オリコンで配布されているブログパーツのソースで、iGoogle上で動作できるように、xmlファイルでインクルードを行いました。

今回のガジェットで工夫したところは、色の選択ができるところ。

上のセレクトボックスにある色を選択することで、ガジェットの色が変換されます。
ちなみに、色の設定は、保存されて、次回以降にも反映されるようになっています。
(defaultは白で設定)


(上図は、桃色に変換したガジェット)

また、ランキングは、シングル、アルバム、DVDの3タイトルで、各週間ランキングと、日別のランキングで見ることができます。

ソースは、下のように実装しました。

<?xml version="1.0" encoding="UTF-8" ?> <Module> <!-- 処理概要 --> <ModulePrefs title="音楽ランキングtop5" directory_title="音楽ランキングtop5" title_url="http://www.oricon.co.jp/" description="オリコンのデイリーランキング、ウィークリーランキング、CD情報、トップニュースを表示します。" screenshot="http://ww61.tiki.ne.jp/~yuu-maito/gadget/screenshot_musictop5.png" thumbnail="http://ww61.tiki.ne.jp/~yuu-maito/gadget/thumbnail_musictop5.png" height="300" author_link="http://temping-amagramer.blogspot.com/" author="maito.kuwahara" author_email="mai.musicfactory+gadgetfactory@gmail.com" author_affiliation="programmer" author_location="japan" /> <!-- background-color --> <UserPref name="background_color" display_name="背景色" default_value="FFFFFF" datatype="enum"> <EnumValue display_value="白" value="FFFFFF" /> <EnumValue display_value="黒" value="000000" /> <EnumValue display_value="水色" value="C6D4FF" /> <EnumValue display_value="バナナ色" value="FFFFA1" /> <EnumValue display_value="桃色" value="FFD0F2" /> <EnumValue display_value="灰色" value="C1C1C1" /> <EnumValue display_value="黄緑色" value="A9DA8C" /> </UserPref> <Content type="html"> <![CDATA[ <script language="javascript">   _IG_RegisterOnloadHandler(function lf_get(){     //userpref全体を取得する     prefs__MODULE_ID__ = new _IG_Prefs(__MODULE_ID__);     //userprefのbackground_colorを取得する     var bg_clr = prefs__MODULE_ID__.getString("background_color");     //javascriptのURLの生成     var lf_url = "http://www.oricon.co.jp/blog/tagform/lib/snippet.js?color=";     lf_url = lf_url + bg_clr;     lf_url = lf_url + "&amazon=easyofcoldfus-22";     var lf_char = "<center";     lf_char = lf_char + ">";     lf_char = lf_char + '<script type="text/javascript"';     lf_char = lf_char + ' charset="UTF-8"';     lf_char = lf_char + ' class="oriconSnippetScript"';     lf_char = lf_char + ' src="';     lf_char = lf_char + lf_url;     lf_char = lf_char + '" >';     lf_char = lf_char + "</script";     lf_char = lf_char + ">";     lf_char = lf_char + "</center";     lf_char = lf_char + ">";     document.write(lf_char);     }     );   </script> ]]> </Content> </Module>