So-net無料ブログ作成
» スポンサーリンク

Last.fmチャート表示ブログパーツの新しいバージョンを公開しました
» Last.fm 関連 

2006年から地味に細々と公開していた Last.fm チャート表示ブログパーツとコード作成ページの公開を2012年3月12日で終了させました。



ブログパーツを設置していた人はいきなり終了メッセージが表示されたので驚かれたかもしれません。(びっくりさせて申し訳ないです)

新しいバージョンを公開します

新バージョンは元々は自分専用として作っていたものですが、もしかしたらまだ使いたい人がいるかもしれないと思って前作に引き続き急遽公開することにしました。


これはサンプル画像です

 前々から JavaScript だけでいちから作り直したいと思っていたものの、アルバムアートワークの抽出処理をどの方法でやるか迷っていてなかなか手がつけられないでいたのですが、最近ふと iTunes Store のデータを JavaScript から検索できる iTunes Search API があったことを思い出し、テストしてみたら意外に良い結果がでたので採用することにしました。

 チャートデータは以前と同じく Last.fm API で用意されているユーザー単位でリスニングデータが取得できる RSS/XML を、今回は Google Feed API を利用して取得してクライアント側(ブラウザ側)で処理するように変更しました。

 JavaScript で作ったプログラム本体はそれぞれの API をつなぎ合わせた200行程度のもので、とくに凝ったこともしてないシンプルなものです。

おまけ機能 (Amazon / iTunes / YouTube の関連リンク)

アートワークの上をマウスオーバーさせると、Amazon と iTunes Store のボタンが現れての該当曲の購入ページにアクセスできます。
(オプションで Amazon アソシエイトとリンクシェアのコードが指定できます)

ついでに一番新しいアーティスト名と曲名を使って YouTube の Disco ページ(自動プレイリスト)を表示できるようにしてみました。
(プレイリストが作成できない場合は YouTube 側でエラーが表示されます)



簡単設定ページ

今回も簡単にコードが生成できる設定ページを作りました。
直接 URL のパラメータをいじる自信がない人はこちらを使ってみてください。

 » Last.fm chart maker Version 2



埋め込み HTML コードとオプションパラメータ詳細

今回はブログと同じ So-net の空きスペースを利用することにしたので以前と URL が変わります。(ちなみに前は自宅 Web サーバで動かしていました)

下の HTML コードをブログのサイドバーなど表示したい位置に貼り付けて、赤字の "Last.fm のユーザ ID" の箇所を自分の ID に変更してください。
<iframe border="0" frameborder="0" marginheight="0" marginwidth="0" scrolling="no" src="http://www003.upp.so-net.ne.jp/bjork/lastfm/chart.html?user=Last.fmユーザID&オプション=値" style="width:166px;height:370px;"></iframe>

"&オプション=値" の部分はオプションを付加しない場合は消してください。

オプションパラメータは以下のものが指定できます。

オプション項目 内容 省略時の値
アルバムアートワークの表示 表示する: aw=true
表示しない: aw=false
aw=true
YouTube Disco ボタンの表示 表示する: yt=true
表示しない: yt=false
(yt=false かつ aw=true の場合は
アートワーク上にボタンを表示します)
yt=true
grooveshark ボタンの表示 表示する: gs=true
表示しない: gs=false
(gs=false かつ aw=true の場合は
アートワーク上にボタンを表示します)
gs=false
チャートの表示 表示する: ch=true
表示しない: ch=false
ch=true
チャート部分の幅
(貼り付けコードの width の値が優先されます)
cw=幅(ピクセル) cw=500
表示項目選択 アーティスト名 - 曲名: it=0
曲名 - アーティスト名: it=1
曲名のみ: it=2
it=0
チャート文字色 tc=RGB 指定(16進数形式) tc=444444
(濃いグレー)
背景色 bc=RGB 指定(16進数形式) bc=FFFFFF
(白)
last.fm ユーザページへのリンク
(チャート部分全体にリンクが付きます)
有効: lf=true
無効: lf=false
lf=true
Amazon アソシエイト対応
(Amazon ボタンのリンクに付加されます
アソシエイトに加入している必要あり)
amtag=トラッキング ID
(*******-22 の最大16桁のコード)
指定なし
リンクシェア対応
(iTunes Store ボタンのリンクに付加されます
リンクシェアの iTunes Store プログラムと
提携している必要あり)
lstag=サイトコード
(登録サイトに与えられる11桁のコード)
指定なし
iTunes アフィリエイト対応
(iTunes Store ボタンのリンクに付加されます
iTunes アフィリエイトプログラムと
提携している必要あり)
istag=アフィリエイトID
(登録ユーザーに与えられる6桁のコード)
指定なし

注意: 2013年10月から iTunes アフィリエイトプログラムの提携元が Linkshare から PHG に移行されます。移行後は Linkshare のオプション指定 ("lstag=") は無効になるので注意してください。

各オプションの先頭に "&" を付けて URL に続けて追加してください。
複数指定する場合はオプション毎に頭に "&" を付けて続けて追加してください。

» オプション指定の例
文字色を白(FFFFFF)、背景色を黒(000000)に指定する場合
<iframe border="0" frameborder="0" marginheight="0" marginwidth="0" scrolling="no" src="http://www003.upp.so-net.ne.jp/bjork/lastfm/chart.html?user=Last.fmユーザID&tc=FFFFFF&bc=000000" style="width:166px;height:370px;"></iframe>

 チャート部分の幅はオプションの "cw=" で指定できますがあまり小さくすると曲名が長いときに改行される場合があります。
 全体の幅を調整したいときは "cw=" は指定せずに、埋め込みコードの width を調整してください。

現状ではアートワークと YouTube ボタンの横幅は変更できなくしています。
(ジュエルケース画像の位置調整がめんどくさいので…)

追記: 不具合修正および変更点

[追記] 2011/03/19
  1. Chart Maker ページでコードを作成した場合に Amazon アソシエイトのオプションが効いていなかった不具合を修正しました。

  2. YouTube ボタンが表示なし (yt=false) の場合にアートワーク上にボタンを追加するようにしました。

  3. アートワーク上のボタンの色をグレーに変更しました。

  4. アートワークが見つからなかったときの画像を変更しました。



[追記] 2012/03/20
はてなダイアリーでは iframe のタグを直接貼ることができない仕様になっていますが、Google gadget を利用すれば貼ることができるようです。
はてなダイアリーで Gimite さんが公開されているコンバータを使うと簡単に変換できます。

 » iframe → Google Gadget コンバータ

[追記] 2012/03/20
Chart Maker ページに Last.fm ユーザーページのリンクを指定するオプションパラメータ "lf=" の項目を追加しました。

[追記] 2012/03/26
貼り付けるブログによって背景色が反映されない場合がある不具合を修正しました。
Amazonのリンクで日本語が含まれるタイトルが正常に検索できない不具合を修正しました。

[追記] 2012/06/27
iTunes Search API でアートワークが取得できなかった場合は、YQL 経由で Amazon の検索画像結果から抽出して、さらに見つからなかった場合は Google の画像検索結果の中からアートワークの可能性が高い画像を判別して抽出するようにしました。

[追記] 2012/11/13
「grooveshark で聴く」ボタンを表示するオプションを追加しました。
パラメーターは表示ありが "gs=true"、表示なしが "gs=false" もしくは未指定。
デフォルトは表示なし "gs=false" です。

[追記] 2013/08/21
iTunes Store のアフィリエイトプログラムが2013年10月から、Linkshare から PHG に移行されることに伴い、新たにオプションを追加しました。
パラメーターは "istag=XXXXXX" でアフィリエイト ID を指定してください。
従来の Linkshare オプション "lstag=" も Linkshare の iTunes Store の契約が終わるまでは有効です。

[追記ここまで]


旧バージョンのユーザの方も含めて、もし気に入ってもらえて使っていただければうれしいです。

なにぶん急ごしらえの出来立てで、細かい部分のチェックが行き届いていないので、動作がおかしいところがあるかと思いますが、そのときはコメントやメールなどで知らせていただけると助かります。

免責事項:
  1. 当サービスを利用したことによる情報の正確性、確実性、安全性、合法性、最新性について一切の保証を与えるものではありません。
  2. 当サービスに含まれる情報もしくはサービスの利用により生じる直接的または間接的な損失に対し、当方は一切責任を負うものではありません。
  3. 当方は理由の如何に関わらず、情報の変更及び運営の中断または中止により生じる直接的または間接的な損失に対しても、当方は一切責任を負うものではありません。
  4. 予告なしに当サービス上の情報を変更、または運営を中断又は中止させていただくことがあります。


[関連サイト]
 Last.fm API
 Google Feed API
 iTunes Search API
nice!(2)  コメント(23)  トラックバック(1)   » カテゴリー:Last.fm 関連
permalink
trackback
このエントリーをはてなブックマークに追加


» スポンサーリンク
DMR

サウンドハウス


nice! 2

コメント 23

ku9

旧バージョンを使わせて頂いてた者です!
新バージョンを使用したいと思ったのですが
はてなダイアリーの場合、iframeタグのパーツは利用できないようなのです。
今後はiframeのみになるのでしょうか?
夜分遅くにすいません。
by ku9 (2012-03-18 04:29) 

TAN

申し訳ないですが当面の間はiframe形式でいこうと思っています。

はてなダイアリーに外部のHTMLやJavascriptのコードを貼り付ける方法はIT戦記のamachangさんの記事が参考になるかもしれません。
http://d.hatena.ne.jp/amachang/20110108/1294523433
by TAN (2012-03-18 09:05) 

おなし

こんにちは。

旧バージョンユーザーとして、新バージョンの公開とてもうれしいです。
ジャケットの表示、youtubeへのリンクといった、ビジュアル要素も加わって頼もしい。

iframeもgoogle gadgetを用いれば、はてなダイアリーにはっつけることもできるとのことで、よかったです。

ひとつ質問があります。
旧バージョンではチャートのどこかをクリックすればlast.fmのユーザーページにジャンプできる仕組みになっていたように思うのですが、新バージョンにはそういった機能は、一見したところありません。
ユーザーページへのリンクは新バージョンに追加される予定はありますか?


お返事いただければ幸いです。
by おなし (2012-03-18 23:57) 

TAN

チャート部分をクリックしてlast.fmのユーザーページにジャンプするように変更しました。

ページキャッシュが残っている場合は、チャート部分で右クリックしてフレームを再読み込みしてみてください
by TAN (2012-03-19 01:54) 

kazu

chart maker Version 2でコードを作成しましたが
Amazonのアソシエイトのリンクが出来ていないようです。
そのCDのページには飛んでいるのに・・・

検証の方をお願いします。


by kazu (2012-03-19 15:29) 

TAN

失礼しました。
修正しました。
ページキャッシュが残るのでブラウザで再読み込みしてから作成してみてください。

製作中に本体のほうのパラメータの名前を変更して作成ページのほうを変更し忘れていました。
by TAN (2012-03-19 17:08) 

おなし

迅速な対応に驚いています。

より便利につかうことができます。
ありがとうございました。
by おなし (2012-03-19 18:04) 

フルグラ

こんばんは。
上にもある通り、はてなダイアリーではiframeタグは利用できないようです。
amachangさんの記事も見てみましたが、よくわからず…。
他にLast.fmのチャートメーカーが見つからなく、愛用させていただいていたので困っています。
もしお時間があればiframe形式以外のバージョンも作成していただけないでしょうか。よろしくお願いします。
by フルグラ (2012-03-19 19:43) 

おなし

こんばんわ、よこから失礼します。

私はamachangさんとは別の、gimiteさんという方が作ったgoogle gadgetコンバータを使わせてもらいました。
参考になるかと思うので紹介しておきます。
http://d.hatena.ne.jp/Gimite/20080114/1200313343

こちらのコンバータでiframeをgoogle gadgetに変換すれば、はてなダイアリーにもチャートを表示させることができますよ。
by おなし (2012-03-20 18:58) 

TAN

>フルグラさん
iframeを使わずに中身のJavaScriptを直接埋め込んでもらう方法もあるにはありますが、はてなダイアリーでJavaScriptも直接貼れないようなので、現状ではGoogle gadgetを利用して表示してもらうしか方法がありません。

上のコメントのおなしさんが紹介しておられるコンバータを使ってみてはどうでしょうか。
by TAN (2012-03-20 21:21) 

フルグラ

>TANさん、おなしさん
ご教授ありがとうございます!
簡単に変換→表示することができ、大変助かりました。
今後もTANさんのブログパーツ、愛用させて頂きます!
by フルグラ (2012-03-20 23:18) 

TAN

解決できてよかったです[ニコニコ]
今後もブログパーツ共々音楽方丈記をよろしくお願いします。
by TAN (2012-03-23 16:18) 

ゆき

初めまして。
旧バージョンの頃からチャートメイカー愛用させていただいてます。
新バージョンの公開、とても嬉しいです。

ユーザーページへのジャンプ機能がついたようですが、
これを無効にすることはできないでしょうか?
可能でしたら是非お願いしたいです。
by ゆき (2012-03-23 23:31) 

TAN

作成ページのほうには項目はありませんが、オプションパラメータの説明にある "lf=false" をつけると無効になります。
頭に "&" をつけて "&lf=false" を iframe の url のオプションパラメータの末尾に追加してください。

あとで作成ページにも項目追加しておきます。

by TAN (2012-03-23 23:42) 

ゆき

素早い対応嬉しいです。お手数おかけしました。
どうもありがとうございました!

ブログパーツのおかげで以前よりも音楽を聴くのが楽しくなりました。
これからも更新楽しみにしています('ω')
by ゆき (2012-03-28 03:06) 

pika

新バージョン公開されたのですね^^
とても嬉しいです♪
また大切に使わせて頂きますo(_ _)o
by pika (2012-04-06 20:57) 

TAN

使っていて動きがおかしいところとかあったら、気軽に知らせていただけると助かります。
by TAN (2012-04-07 15:21) 

sakuraberry

こんにちは。旧Verからずっと使わせていただいています。
最近、『チャートデータが取得できません』というメッセージが頻繁に出るんですが、これってサーバー側の問題でしょうか?
最初は自分の環境の問題かな?と思っていたのですが、常にではないので、そういうわけではないみたいです。
最近よくこの状態になっているので気になって質問させて頂きました。
by sakuraberry (2012-05-30 10:33) 

TAN

使っていただきありがとうございます。
自分もところでも最近時々取得エラーがでることがあります。

前のバージョンでも時々発生していたのですが、ここ数年いつからかLast.fmのサーバーは反応が遅くなっていて、サーバーが重かったり返答しないことが以前より多くなっています。

ユーザー側の原因ではないので安心してください。
by TAN (2012-05-30 18:07) 

はな

こんにちは。
旧Ver.から愛用させていただいています。

ここ一週間くらいチャートが反映されない状態で、Last.fmのサイトを覗いてみたらデザインが新しくなっていたのですが、その影響でしょうか?scrobbleは問題ないようで、こちらのパーツに反映されていないだけのようです。

以前から反映が遅かったり不安定だったことはありましたが、これだけ長い間全く反映されなかったことはなかったので、何か対策などありましたら教えていただけると助かります。
by はな (2015-08-28 13:16) 

TAN

今確認してみたら、last.fmが提供するチャートのfeed(rss)のサーバーが止まっているようです。

各ユーザーのチャートのfeed(RSS)はこれで確認できます。
「ユーザー名」のところはご自分のものを指定してください。
http://ws.audioscrobbler.com/2.0/user/ユーザー名/recenttracks.rss

今後復旧がない場合(feedの提供が終わってしまった場合)は、APIからチャートを取得する方法に変更しようかと思いますが、変更に少し時間がかかるかもしれません。

by TAN (2015-08-29 05:21) 

はな

お返事ありがとうございます。

そのURLにアクセスしたところ404でした。
どうやら向こうの問題のようですね。

使わせていただいてる身なので今後変更するかどうかはTANさんにお任せします。
わざわざ確認していただきありがとうございました!
by はな (2015-09-02 22:23) 

TAN

現在Last.fmのリニューアルに合わせてAPIのほうも調整中なのか、開発用のAPIアカウントの新規登録ができないようなので、修正するにも修正できない状態です。


by TAN (2015-09-11 22:21) 

コメントを書く

名前:[必須]
URL:
コメント:
画像認証:
下の画像に表示されている文字を入力してください。

Facebook コメント

トラックバック 1

この記事のトラックバックURL:
※言及リンクのないトラックバックは受信されません。

iTunes Store 音楽アプリベストセラー
for iPad





for iPhone/iPod touch





for Mac