MusicSearcher

nekome_musicsearcher_130717
webAPI経由で取得したxmlや、rssの情報を一覧表示する練習。
今回は「MusicSearcher」と題し、アーティスト名で検索すると曲名一覧が出るものを試作してみました。

 

使い方

・入力テキストに好きな「アーティスト名」を入力し、enterキー(またはsubmitボタン押下)で
 php経由で一覧を取得し、表示します。
 ※長いアーティスト、バンド名の場合は、語句毎にスペースで区切るとたくさん出ます。
 ※最大50件まで表示ですが、お試しのレイアウトのため30件まで表示されます。

・曲名クリックで youtubeに検索文字列つきでジャンプするようにしました。

その他メモ

・ほとんどの画面要素は、canvasで表示していますが、EaselJSに入力テキストが
 なさそうだったので入力テキストとボタンだけDOM要素で配置しました。
・2バイト文字だと、テキストの表示幅lineWidthの設定値を超えた表示でも、
 正しく判定されず改行されませんでした。
 ※英語だとちゃんと改行される。
 ※参考サイト http://jsdo.it/mamaaaan/bnKq 

・xmlなど構造体で取得できるものならだいたいのwebAPIに、対応できそう。
・今回の使用APIは、http://www.lastfm.jp/api

参考リンク

APIとPHPを使ってwebページを自動作成/Last.fmのウェブサービス

PHPに渡されたURLパラメータをそのままPHPの変数として使う

jQuery.ajaxで簡単に非同期通信

PHPでJSONを取得

クロスドメインPHP

クロスドメインの制約を外す事ができるproxy「Simple PHP Proxy」

EaselJSのTextクラスで作成したテキストの幅と高さを取得する