Last.fmウィジェットはどこに行った？

by
このエントリーをはてなブックマークに追加

この情報は古いです。現在は Flash を使わないウィジェットが推奨されています。詳しくはこちら → jQuery 版 Last.FM ウィジェットを導入してみた

しばらく前からLast.fmを利用している。SNSと言うより、自分の音楽嗜好を記録し、まだ見ぬ（聴かぬ）名曲を探すツールとして使うとおもしろい。

で、せっかくブログ始めたからには前々から気になってたウィジェットを貼ろうとしたのだが、これが妙なことになっている。Last.fmからウィジェット紹介のページが消えてるのだ1。

Last FM Widget ? What Happened – Web Site Support – Last.fm
http://www.lastfm.jp/forum/21713/_/579208

どうやら去年の11月から何かおかしかったらしい。「最近ほったらかしだったし、メンテめんどいからもうやめるね！　今度からはサードパーティのアプリ使ってよ」（スタッフ談、超意訳）と書いてある。どこにもそんなアプリ見つからないんだけど……。

途方に暮れていたのだが更にググってみると、ウィジェットのHTMLソースを整形して解説してあるサイトを見つけた。これをいじって自分のところに貼っちゃえばいいのだ。

Last.fmウィジェットのコード整形 – 最遅メンヘル研究会
http://d.hatena.ne.jp/kageroh_/20080606/1212706200

Last.fmのWidgetを設置。 – fujii-t:blog（フジイブログ）
http://www.hitohen.com/fujii-t/2007/12/last-fm.html


今更ですがLast.fmがおもしろい | ブルマンぶるぶる
http://www.bluesman.nbworks.co.jp/2010/02/16/715/

上記のようなリンクを参考にして次のコードを書いた。

使い方

下に載せた「ウィジェットテンプレート – Last.fm」「インデックステンプレート – lastfm.css」はともにMovable Type用だが、他のブログでもそのまま使えるだろう。Last.fmウィジェットには「CHART」「QUILTS」「PLAYER」と言った種類があるようだが、下に載せるコードは「CHART」のものだ。「ウィジェットテンプレート」中、「delphinus_iddqd」（7, 8, 18, 24, 25, 32, 55行目）は表示させたいLast.fmアカウントと置換する。

更に、「type」（55行目）を指定することで次の5種類に対応する。

置換文字列 モード
recenttracks 最近聴いたトラック
topartists 総合トップアーティスト
toptracks 総合トップトラック
weeklyartistchart 週間トップアーティスト
weeklytrackchart 週間トップトラック

「type」を変更したときは、併せて「インデックステンプレート」の12行目の「recenttracks」を、「weeklytracks」「topartists」といったものに変更する。

また、チャート自体も2種類のスタイルがある。「ウィジェットテンプレート」の45, 52行目にある「friends_4.swf」を「19.swf」に置換すると、フレンドへのリンクが無くなったシンプルなものになる。（画像下右）

2styles.png

両方のテンプレート中にある「blue」を変更すると全体の色合いを変えることができる。「black」「grey」「blue」「red」の4色があるようだ。

チャート中にリストアップする曲やアーティストの数は、51行目の「height」で指定する……のだが、これは文字通り「画像の縦の長さ」を表していて、リストアップする数を直接指定することはできない。試行錯誤するしかないようだ。

……もう、自分でも書いていて訳がわからなくなってきた。これだけ煩雑な仕様2のものを、わざわざ苦労して設置する意味があるのか……なんて言ったら元も子もないね。せっかく苦労したのだから、ここに記録として残しておこう。

ウィジェットテンプレート – Last.fm

<table class="lfm">
  <thead>
    <tr>
      <td colspan="3">
        <a
          title="delphinus_iddqd: 最近聴いたトラック"
          href="http://www.lastfm.jp/user/delphinus_iddqd/"
          >
        </a>
      </td>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td class="config">
        <a
          title="自分だけのウィジェットをゲット"
          href="http://www.lastfm.jp/widgets/?colour=blue&chartType=recenttracks&user=delphinus_iddqd&chartFriends=0&from=code&widget=chart"
          >
        </a>
      </td>
      <td class="view">
        <a
          title="delphinus_iddqd のプロフィールにアクセス"
          href="http://www.lastfm.jp/user/delphinus_iddqd/"
          >
        </a>
      </td>
      <td class="popup">
        <a
          title="このウィジェットをポップアップに読み込む"
          href="http://www.lastfm.jp/widgets/popup/?colour=blue&chartType=recenttracks&user=delphinus_iddqd&chartFriends=0&from=code&widget=chart&resize=1"
          target="_blank"
          >
        </a>
      </td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td colspan="3">
        <object
          codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0"
          data="http://cdn.last.fm/widgets/chart/friends_4.swf"
          type="application/x-shockwave-flash"
          width="184"
          height="199"
          >
          <param
            name="movie"
            value="http://cdn.last.fm/widgets/chart/friends_4.swf"
            />
          <param
            name="flashvars"
            value="type=recenttracks&user=delphinus_iddqd&theme=blue&lang=jp&widget_id=chart_cba70e0086672310041ab7e1b13fb750"
            />
          <param
            name="bgcolor"
            value="2792c3"
            />
          <param
            name="quality"
            value="high"
            />
          <param
            name="allowScriptAccess"
            value="always"
            />
          <param
            name="allowNetworking"
            value="all"
            />
        </object>
      </td>
    </tr>
  </tbody>
</table>

インデックステンプレート – lastfm.css

table.lfm {
  border-collapse: collapse;
  margin-bottom: 20px;
}
table.lfm a {
  background-repeat: no-repeat;
  display: block;
  height: 20px;
  overflow: hidden;
}
table.lfm thead a {
  background-image: url('http://cdn.last.fm/widgets/images/jp/header/chart/recenttracks_regular_blue.png');
  background-position: 0px -20px;
}
table.lfm thead a:hover {
  background-position: 0px 0;
}
table.lfm tfoot a {
  background-image: url('http://cdn.last.fm/widgets/images/jp/footer/blue.png');
}
table.lfm tfoot td.config a {
  background-position: 0 -20px;
  width: 85px;
}
table.lfm tfoot td.config a:hover {
  background-position: 0 0;
}
table.lfm tfoot td.view a {
  background-position: -85px -20px;
  width: 74px;
}
table.lfm tfoot td.view a:hover {
  background-position: -85px 0;
}
table.lfm tfoot td.popup a {
  background-position: -159px -20px;
  width: 25px;
}
table.lfm tfoot td.popup a:hover {
  background-position: -159px 0;
}
table.lfm thead td {
  padding-left: 4px;
}
table.lfm tfoot td.config {
  padding-left: 4px;
}
table.lfm tfoot td.popup {
  padding-right: 2px;
}
table.lfm tbody td {
  padding: 0px 2px 0px 4px;
}
  1. ウィジェット紹介ページ「http://last.fm/widgets/」をクリックすると、画像を使った簡易チャートのページに飛ばされる。 ↩
  2. しかも「QUILTS」「PLAYER」は未だよくわかんない。誰か教えて…… ↩

コメントを残す