初出：2012年6月19日 00:35
日々、iPhoneやiPad、iTunesで再生した曲を「本日のiTunes BGM」としてブログに載せてた。2007年初頭から続けているんだが、実はこの仕組み、iTunesから書きだしたXMLをJavaScriptで解析してページに表示するということをやっていました。
KenG Weblog - はじめてのAjax：mixiミュージックもどきをブログで実現
でも、この方法だとデータによっては曲のリリース年が正しく表示されないという問題を抱えていたので、JavaScriptをやめてPHPで解析する方法に変えてみました。
参考にしたWebページはこちら。
PHPで書かれたiTunesのXMLパーサー
ポイントは、iTunesのXMLをパースすることに特化したPHPライブラリ「iTunes XML Parser for PHP」を使うこと。これが意外に簡単にできた。リリース年をきちんと表示できるようにすることが重要だったわけだけど、iTunes内の曲データにはリリース年が登録されていないものも多々ある。そういうものはいっそのこと曲そのものを表示しないという潔い仕様にすべく、パースしたHTMLをjQueryで判定して、非表示処理する自作ルーチンも組み込んでみた。
2007年に書いた先のブログでは、締めにこういうことを書いていた。
"曲リストにアフェリエイトのリンクを自動で張れたらいいなあ。iTunes StoreがAPIを公開してくれたら、そういったこともできるのにね。もしくはiTunes Storeの商品データベースをもっている他サイトが、そういう技術を提供するとか、してくれないかな。"
なんとそのとおりの技術があるというのだ。月日が流れるというのは伊達じゃない。その間、まったくノーチェックだったのは情けない。
iTunes Search APIから、視聴プレイヤーつきのアフィリエイトを作る
PHPでパースした曲データをiTunes Store APIに渡して、iTunesで扱っている曲だけを表示するようにしてみた。ここでのポイントは、曲名とアーティスト名と収録アルバム名の3つを組み合わせてAPIに問い合わせること。トッド・ラングレンの「Hello, It's me」は当然ながら「Something/Anything」に入っているわけで、ソフィア・コッポラには悪いが「ヴァージン・スーサイズ」の映画サントラが表示されても困る。でも「Something/Anything」のスラッシュをそのままAPIに渡すとうまく検索されないので、スラッシュを「＋」に変換する細かい処理なんかを追加してある。
このAPIは、ジャケットのアートワークやiTunes Storeのリンク、さらには試聴音源のURLまで返してくれる。
そこで、今までの「本日のiTunes BGM」にはなかったアートワーク表示をしてみた。うーん、良い。じゃあさらに欲を出して、アートワークをクリックすると試聴できるようにしたい。ブラウザの互換性云々は気にもせず、HTML5のaudioタグでもって再生する処理を組んでみた。
参考にしたWebページはこちら。
HTML5 Audio オブジェクトを JavaScript で制御する方法
この参考サイトではブラウザ判定など、きちんとしたオーディオプレーヤー的なものを作っているが、自分はそこまで力を入れることもなく、必要最低限の処理に絞り込んだ。
その代わり、アートワークをクリックして再生／停止をする処理や、再生中に別の曲をクリックされた場合の動き。さらには、クリックしてから再生するまでのロード中にくるくるスピナーを表示させ、再生が終わったら停止ボタンを非表示にするというaudioタグのイベント制御に力を入れた（というか、UIをそうしちゃったからには力を入れざるを得なかった）。そこで、イベントを補足する方法はこのページを参考にした。
video／audio要素のイベントを捕捉する
そんなわけで一応完成したのが、このブログの全ページに表示されているiTunes BGM。これからIEなどのブラウザ対応やら、iPhone/iPadへの対応などやっていかないといけないけど、それはまた追々。
最後に。ただテキストで曲の情報を掲載しているよりも、アートワークがあったほうがより音楽が伝わるだろう。アートワークだけでなく、その場で曲を聴けたほうが音楽は当然グっと近くなるだろう。そう考えながら機能を追加してきたけど、ここまで作り切ったときにフと客観的に思ったのが、音楽だけでは何か足りない。曲を推薦している人がなぜこの音楽を選んだのか、その言葉を知りたい。そんな思いに駆られた。昨今では音楽評論家という職業がなかなか成り立たなくなっているという。権威化した評論家は鬱陶しいだけだが、リスナーをガイドしてくれる評論家は、大切だと思う。自分が評論家になれるとは思わないが、フランクな形で「この曲はお薦めだよ！」という意思表示はしていきたいなぁ。
JavaScriptはこちら（要jQuery）
https://wonderwall.net/blog/keng/itsplay.js （UTF-8です）
MovableTypeテンプレートに埋め込んだパーツは以下の内容。
本日のBGM
★印があったら「これは聴いてみてほしい！」という推薦曲です。曲名をクリックするとiTunes Storeへジャンプします。
'; // loop through the songs in the array and get 4 fields that I want to see foreach ($songs as $song) { $output .= 'Recent Post
- 水曜どうでしょうの副音声をiPhoneやApple TVで再生するTips
- iPhoneアプリ「Top 100s by Year」がかなり楽しい
- Geniusプレイリストについての考察
- iPhoneで60GB分の音楽にアクセスする方法
- 【ご連絡】このブログのパーマリンクがぼろぼろにつき、URL規則を変更
- WebサイトをiPhoneに最適化する方法
- 祝! ジョンレノンのiTunes Store販売開始
- iPodやiTunesは、音が良いか悪いか、さあどっち?
- DRMフリー、LIFEの写真もフリー
- Happy Birthday! Moto! なブログパーツ
- Jobsさん、現実湾曲フィールド炸裂！ の「音楽の考察」
- はじめてのAjax：mixiミュージックもどきをブログで実現
- 備忘録：携帯用メールサーバ「mobileimap」を導入
- Google Mapを自分のサイトに組み込む方法 2 : 経路＋マーカー編
- Google Mapを自分のサイトに組み込む方法
- Googleさんは、この記事をこんな風に解釈しました
- iTVを通して見る「メディアの個人解放」と「iTunes経済圏」
- BeatlesがiTunesにやって来る? やぁやぁやぁ
- 備忘録：クリック一発でPodcastをiTunesに登録する方法
- Jumping Steve ─ ジョブズをiTunesで踊らせて
Now & Then
Twitter Updates
-
OAuthRequest('https://api.twitter.com/1.1/statuses/user_timeline.json','GET',array('screen_name' =>$search_word,'count' =>'3'));
//Jsonデータをオブジェクトに変更
$oObj = json_decode($vRequest);
//var_dump(json_decode($vRequest));
//オブジェクトを展開
for($i_tweet = 0; $i_tweet < sizeof($oObj); $i_tweet++){
$screen_name = $oObj[$i_tweet] -> {'screen_name'};//ユーザーID
$profile_image_url = $oObj[$i_tweet] -> {'profile_image_url'};//プロフィール画像のURL
$text = $oObj[$i_tweet] -> {'text'};//ツイート
$date = $oObj[$i_tweet] -> {'created_at'};//時間
$tweet_time=strtotime($date);//Unixタイムスタンプ形式に変換
$now_time=time();//現在の時刻をUnixタイムスタンプで取得
$relative_time=$now_time-$tweet_time;//つぶやかれたのが何秒前か
if($relative_time<60){//ss
$displayTime = $relative_time.'秒前';
}elseif($relative_time>=60 && $relative_time<(60*60)){//mm
$displayTime = floor($relative_time/60).'分前';
}elseif($relative_time>=(60*60) && $relative_time<(60*60*24)){//hh
$displayTime = floor($relative_time/(60*60)).'時間前';
}elseif($relative_time>=(60*60*24)){//日付
$displayTime = date('n月j日',$tweet_time);
}
//表示
echo '
- ' . $text .'' . $displayTime . ' '; } ?>
