2005年2月12日土曜日

last.fmを音ログのように表示するスクリプト

05_02_12_001.jpg音ログを使ってる人は多いかと思います。
便利ですよね。
自分の聞いてる曲を、blogに表示してくれて。

下でかいた、last.fmは専用サイトには聞いてる曲をupしていってくれるのですが、
blogには反映されません。
特にPluginとかもないようですし。

そこで、我が同僚のHALがJavaScriptで書いてくれました。
なんと、音ログと共存可能。

最高です。

下記に、設置方法を明記しておきます。
なお、私はMT3.151-jaですが基本的にメインに自作スクリプトを設置できるタイプのBlogなら同じはずです。

ちなみに、last.fmと音ログのアカウントを取得していることを前提としますので取得していないかたは取得して
下さい。
なお、片方だけ(last.fmだけ)でも設置可能ですが、その際はlast.fmでRADIOを聞いている時のみBlogに
反映されます。

詳細は、halを熟読して下さい。
ややこしい!という人用に簡単にまとめると、

last.fmとotologを両方使う場合(mp3やCDはotologで反映されてRADIOはlast.fmでblogにでる状態)

ブラウザで、
http://hal.dynsite.net/lastfm.cgi?username=hal&password=halnopassword&otolog=/b-utf8/hal
にアクセスします。

last.fmだけの人は、
http://hal.dynsite.net/lastfm.cgi?username=hal&password=halnopassword
まででOKです。

設定部分は、
username=halの部分は、last.fmのID
password=halnopasswordの部分は、last.fmのPassword
otolog=/b-utf8/halの部分は、自分のサイトの文字コード/音ログのユーザアカウント
となります。

詳しい方で、セキュリティを気にする方は、MD5も使用できます。
その際は、

http://hal.dynsite.net/lastfm.cgi?username=hal&md5password=308ed2ada154c6e86632cbe10cdf29a2

のようにして、MD5化したPasswordをmd5passwordに続けて記述して下さい。

要は、passwordをmd5passwordにして平文を暗号化済みに書き換えるだけでOKです。


上記の項目を自分の設定に置き換えてアクセスすると、halのtoppageに近い物が表示されるはずです。
CDのジャケやアーティスト名が問題なくでていた場合、問題なく動作していますので、右クリックをしてソースの
表示ででてきたソースをコピーします。

表示されない場合、設定項目に不備があると思われますのでよく確認してください。

さて、右クリック(OSXだとCTL+Click)してソースを表示をすると

<script language="javascript" type="text/javascript" src="http://hal.dynsite.net/lastfm.cgi?id=%EA%01N%DD%1D%5BLj%B8%89%2F%86%E4%C8g%A2%C1Wb%EE%1E%90%DB%A9%C7b
%A1%DE%B5%D2%1Bi%29%B6%95%23%27w%B0p%BB%18%27%05Zcu%C1H%1F%E22%19%
80%81%95%3A%EBuL%82%3A%ADj%16%CC%A1%DA%8F%E8%C1%B9%9A%93%BF%E1%82%
E3%25"></script>


こんな感じのがかいてあるはずです。(暗号みたいな部分は人によって異なります)

<script language=から</script>

まで全てコピーして自分のblogの貼付けたい場所に貼付ければ
OKです。

今、音ログを使っている人はそこに置き換えれば良いでしょう。

最後に、スタイルシート(css)の設定方法を下記に明記しておきます。

last.fmのアーティスト名、曲名等

.lastfmBanner {
font-family: Verdana, Arial, sans-serif;
font-size: x-small;
line-height: 150%;
text-align: left;
padding: 0px 0px 0px 5px;
margin: 0px;
}

.lastfmBanner h4 {
font-family: Verdana, Arial, sans-serif;
font-size: x-small;
text-align: left;
font-weight: bold;
margin: 0 0 0 0;
padding: 0px;
}


なお上記設定は、このサイトと同じ物なので適宜書き直して下さい。

上記のように音ログのCSSとそろえると、last.fmと音ログの違和感がなくて良いでしょう。

また下記を書いておくとlast.fmのRDFリンクがそれっぽいボタンになります。

a.xmlbutton {
font-family: Verdana, sans-serif;
font-size: 10px;
font-weight:bold;
border:1px solid;
border-color:#FC9 #630 #330 #F96;
padding:0 3px;
color:#fff;
background:#F60;
text-decoration:none;
margin-right:5px;
}

.xmlbutton {
font-family: Verdana, sans-serif;
font-size: 10px;
font-weight:bold;
border:1px solid;
border-color:#FC9 #630 #330 #F96;
padding:0 3px;
color:#fff;
background:#F60;
text-decoration:none;
margin-right:5px;
}



音ログだけの人は、あまり関係ないです。
ハイw

このスクリプトによる、被害は一切当方及びHALは関知致しません。
AT YOUR OWN LISKでお願い致します。

尚、BUG等があった場合はコメントに投稿していただければHALの気力が続く限りは改善致します。

special thx hal

上記解説が、ややこしいという声をうけまして、設置作業簡略化の為
作者のHALがスクリプト生成CGIを組んでくれました。
Script is here
上記、Linkを開いていただくと、

(exp. haldynsite)
(exp. halnopassword)
(exp. 308ed2ada154c6e86632cbe10cdf29a2)
(exp. /b-utf8/haldynsite)

という具合になっていると思います。
(form部分はあると過程して下さい面倒だったので、、w)
で、内容としては上記解説と同じですのでその通りに打ち込んでください。
打ち込んだらSUBMITを押します。
そうすると、SUBMITの下にソースがでてきます。
それが、blogに貼り付けるJavaスクリプトとなりますので、ここからは上記解説と同じです。
フォームの中身をすべてコピーして適宜、設置したい場所に貼り付けて下さい。

4 件のコメント:

  1. 早速拝見しましたが、ウホッ、、ちょい難解です。。orz
    まずは音ログの勉強から始める事にしてみます。
    ��これも出社時に教えてくださいませー。(_ _)

    返信削除
  2. 更新してみました。
    http://hal.dynsite.net/lastfm.cgi
    に直接アクセスしてもらえばformが出てきます。
    ここから適当に入力すれば張り付けるhtmlが生成されます。前と同じ使い方も一応できます。

    返信削除
  3. ちょっと試そうと頑張ってみたのですが、よく分からず。。
    おバカな質問させてください。
    ��中国にいるのにごめんね。。
    これはlast.fmと音ログのユーザID、Passwdが共に同じでないと上手く行かん予感が禿げしくしてるんですが、この認識は間違い??

    返信削除
  4. 連続カキコですまんけど、私の場合last.fmと音ログでユーザ名が異なります。。
    アカウントの取れる、取れないの都合上。。

    返信削除

素材集

FreePhoto