OneLittle STUPID New T-shirts!! 通販開始! Movable Type Template RGM-79C
マイメロメロメロミメロメロアワセテメロメロムメロメロなSTUPID BLOG 趣味SIDE
2004年3月26日

Kung-Tunesの自動画像表示 その2

ブログにKung-Tunesを使って今自分の聴いている曲名リストを表示しているものに自動的にジャケット表示を追加するやり方です。

utf-8上で動作確認しています。他の場合はどうなるかテストしていないので分からないです。
あと、すべて自己責任で行ってください。

PHPを使用しています。ですので、最低限のphpの知識は必要になります。以下に記述するソースの意味が理解出来ない、もしくは理解するために自分で調べたりするのがイヤな方にはお勧め出来ないです。

公開しているソースは自分のところでうまくいった方法を紹介しているだけでどの環境でも保証するものではありません。

(2004.03.27)
・Amazonに該当データがない場合、リンクタグをつけないようにし、イメージタグはmp3データのコメントタグを読みに行き、そこに何もない時はタグを付けないようにしました。

(2004.03.28)
<STEP9>を追加してソースの動作確認方法を追加。

Kung-Tunesおよび曲名リスト表示の仕方は省略します。
<用意するもの>
・Kung-Tunes
・AmazonアソシエイトID
・Amazonデベロッパー・トークン(Amazon WEBサービスを使用するために必要)
・NuSOAPのnusoap.php(このページから nusoap.php のみをダウンロードしてください)
・PHPの使えるサーバ

<STEP1>
Kung-Tunesの設定の変更。Preferenceのuploadの項目、真ん中らへんに書き出すファイルの名前を設定するNameと言うところがあるのでそ、この拡張子をphpに変更。(例:trackinfo.php)

<STEP2>
書き出すファイルのテンプレートを変更。メニューバーからFormatsを選択し、編集画面を出し、一番上の項目「Current template」の部分を適当に名前を付けて(例:php)、「add」ボタンを押します。これで新しいテンプレートが追加されたはずです。

<STEP3>
Formatsウインドウの上から2番目「Header」の部分を

<?php

require_once('nusoap.php');// nusoap.phpの読み込み

$soapclient = new soapclient("http://soap.amazon.co.jp/schemas3/AmazonWebServices.wsdl",true);// SOAP接続

$proxy = $soapclient->getProxy();

に書き換え。

<STEP4>
Formatsウインドウの上から3番目「Format for currently playing track」の部分を

$word = htmlspecialchars(stripslashes("^p+^a"));

$q = rawurlencode($word);

$params = array(

'keyword' => $q,

'page' => '1',

'mode' => 'music-jp',

'tag' => 'xxxx-22', //アソシエイトID

'devtag' => 'xxxxxxxxxxxx', //デベロッパー・トークン

'type' => 'lite',

'locale' => 'jp'

);

$result = $proxy->KeywordSearchRequest($params);

if (!$result['faultstring']) {

$items = $result['Details'][0];

$sakusya = $items['Artists'][0];

$html = "<a href=$items[Url] target=_blank><img src=$items[ImageUrlMedium] border=0 vspace=0><br /><div class='cat'><strong>^t</strong></div>#p by<strong>^p</strong><br />#p#a from [^a] #a</a>";//現在聴いている曲の表示フォーマット

}

else {

$html = "#k<img src=^k width=130 height=130 border=0 vspace=0><br />#k<div class='cat'><strong>^t</strong></div>#p by<strong>^p</strong><br />#p#a from [^a] #a</a>";

}

echo "<!--\n";

echo "document.write(\"";

echo $html;

※注意:ソース中のバックスラッシュ(\)が全角に化けています。これは半角でないとちゃんと動作しません!!OSX環境ならoptionキー+¥で入力されると思います。
赤い部分の上の方、アソシエイトIDとデベロッパー・トークンは自分の番号に変更してください。下の方は任意で変更してください。青くなってる$items[Url]はAmazonへのリンクアドレスが入り、$items[ImageUrlMedium]には画像のアドレスが入りますので、これを消すと画像表示がされなくなります。[ImageUrlMedium]の部分は画像の大きさを表していて、他には[ImageUrlSmall] と[ImageUrlLarge] があるので、3つのうちの好きな大きさを選んでください。

黄色の部分はmp3ファイルのコメント欄に画像のアドレスを入れておけば(例:http://www.xxx.com/images/xxx.jpg)、それが反映されて画像表示されるようになっています。必要ない場合やコメント欄に他の情報を入れてる方は黄色の部分ごと削除してください。

<STEP5>
Formatsウインドウの上から4番目「Format for recent tracks list」の部分

$word2 = htmlspecialchars(stripslashes("^p+^a"));

$q2 = rawurlencode($word2);

$params2 = array(

'keyword' => $q2,

'page' => '1',

'mode' => 'music-jp',

'tag' => 'xxxx-22', //アソシエイトID

'devtag' => 'xxxxxxxxxxxx', //デベロッパー・トークン

'type' => 'lite',

'locale' => 'jp'

);

$result2 = $proxy->KeywordSearchRequest($params2);

if (!$result2['faultstring']) {

$items2 = $result2['Details'][0];

$sakusya2 = $items2['Artists'][0];

$html = "<a href=$items2[Url] target=_blank><div class='cat'><strong>^t</strong></div><img src=$items2[ImageUrlSmall] border=0 vspace=0><br />#p by<strong>^p</strong><br />#p#a from [^a] #a</a>";

else {

$html = "<div class='cat'><strong>^t</strong></div>#k<img src=^k width=50 height=50 border=0 vspace=0><br />#k#p by<strong>^p</strong><br />#p#afrom [^a] #a</a>";

}

echo $html;

変更場所はSTEP4と同じです。

<STEP6>
Formatsウインドウの上から5番目「Inactivity message」の部分

echo "<!--\n";

echo "document.write(\"";

echo "<div class='cat'>iTunes is not playing anything now.</div>";

何も聴いていない時に表示されるメッセージ。赤の部分が実際表示される部分なので任意に変更してください。

<STEP7>
Formatsウインドウの一番下「Footer」の部分

echo "\" );\n";

echo "// -->";

?>

以上でKung-Tunesの設定は終わりです。

<STEP8>
nusoap.phpをトラックリストと同じ階層にアップロード。
後はリストを表示したい部分(例:MovableTypeのTopページだとテンプレートのMain Indexの部分)に、

<script language="javascript" type="text/javascript" src="http://www.xxxx.com/mt/trackinfo.php"></script>

を記述。赤い部分は自分の環境に合わせて書き換えてください。

<STEP9>
うまく表示されない場合、ブラウザで直接phpファイルを開いてみると原因が分かるかもしれないです。
ブラウザのアドレス欄に「http://www.xxxx.com/mt/trackinfo.php」等、アップロードしたphpファイルを直接指定して読み込みます。成功している場合はブラウザには何も表示されないと思いますが、ソースを見てみると表示されるリストが書き出されています。
ブラウザにParse error: parse error in /usr/xxx/xxx/trackinfo.php on line 4(数字)等と表示された時はその数字の行で文法エラーが出ているので、Kung-Tunesに入れたソースをもう一度見直してください。

以上で終わりです。ソースに無駄あるかもしれないですがいっぱいいっぱいなんで勘弁してくださいw
あと、これはAmazonへアーティスト名とアルバム名を送って検索してその検索結果を表示しているので、たまに違うものが表示されたりします。アーティスト名とアルバム名が同じ場合に違うアルバムが出てきたりします。それとコンピレーションの場合も探しきれないみたいです。

それと。Amazonに画像がない場合は当然ながら画像は表示されません。

<分かってる問題点>
アーティスト名やアルバム名にダブルクォート(")が入ってるとエラーになり何も表示されなくなるので適当に変更してください。

Posted by 骨兎 at 18:09 このエントリーを含むはてなブックマーク

Trackback

このリストは、次のエントリーを参照しています: Kung-Tunesの自動画像表示 その2:

Title: NowPlaying設置してみたのり巻 2本目
Excerpt: NowPlayingというソフトを設置したものの、美しい画像ながらクリックできないことに不満が出て来て、これでAmazonへリンク貼れればいいなぁと思って探して...[続きを読む]
From: kjfive_blog
Date: 2005.01.26
Title: Winampで現在再生中の曲を表示
Excerpt: Winampで現在再生中の曲をサイトに表示する方法[続きを読む]
From: イソプロピルアンチピリン
Date: 2005.02.24
Title: プレイリストにアートワークを表示したい 2
Excerpt: というわけで右サイドバーの「iTunes プレイリスト」に画像を表示することに成...[続きを読む]
From: いろんなことが起こる
Date: 2005.11.29
Title: プレイリストにアートワークを表示したい 3
Excerpt: iTune プレイリストを設定してから1週間ほど経つのですが。想像以上に Ama...[続きを読む]
From: いろんなことが起こる
Date: 2005.12.04

Comments (6)

つじ:

こんにちは?
いつぞやはコメントくださってありがとうございました。
この度、Kung-Tunesの画像表示に挑戦してみたのですが....う?んです。
trackinfo.phpを直接ブラウザで開くと以下のようなエラーです。
Parse error: parse error, unexpected '\"', expecting ',' or ';' in (ファイルまでのパス)trackinfo.php on line 8

8行目は....「'keyword' => $q,」です。

全角のバックスラッシュはエディタの検索置換でに変えました。「optionキー+¥」とありますが、「¥」キーがどこかわからなくて「optionキー+y」で「」としました。

もういっぺん最初からやってみます。
ソースをエディタにコピペした際に、行によっては行末に半角スペースが入っていたので、それらを消去して改行してしまったんですがマズかったでしょうか?

Posted by: つじ at 2004年11月17日 17:40
skulusa:

マークじゃなくて「option」キー+「」キーで半角の「\」になるんですよ。なので、全角のバックスラッシュ「\」を半角のバックスラッシュ「\」に置き換えたらうまくいくのではないでしょうか?

この記事書いたのが随分前なので詳細は思い出せないですが・・。

ちなみに「」キーは「delete」キーの真横です(OSX)QuickSilverとiBookで確認しました。

Posted by: skulusa at 2004年11月17日 21:34
つじ:

恐れ入ります

> ちなみに「」キーは「delete」キーの真横です
あ、ありました!
ヨシ、さっそくoption+....ン?miエディタの検索置換入力フィールドでは半角のヌに。
いま、このコメント入力時は\できます。
てなわけで、頂いたレスから拝借してコピペ。
とりゃ?。

どよん。
エラー再発。
メッセージが少しだけ変わりました。

もういっぺん最初からやってみて駄目だったら手を引きます。
ありがとうございました。

Posted by: つじ at 2004年11月19日 01:16
skulusa:

多分miやjedit4だと化けるんでテキストエディットかjedit xですればいいと思います。

Posted by: skulusa at 2004年11月19日 02:45
?市 Author Profile Page:

はじめまして。
こちらの記事を参考にさせていただいて
無事設置することができました。

トラックバックを送信させていただいたんですが
PING エラーでひょっとしたら多重に送られているかもしれません。
申し訳ありません。
その際はお手数ですが削除お願いできますでしょうか?

これからもよろしくお願いいたします。
本当にありがとうございました。

Posted by: ?市 Author Profile Page at 2005年11月28日 22:15
skulusa:

はじめまして。
調べてみた所、spamフィルターに引っかかってました。

Posted by: skulusa at 2005年11月29日 04:07

Post a comment