iTunes APIを使ってみる

iTunes APIを使ってみる – メディアデザイン実習Jitunes_for_mac
iTunes Search / App Store Search API

Apple社のご存知「iTunes」サービスから、「Search API」が提供・公開されています。

iTunes全体のデータを検索する(データベースに問い合わせる)ことができます。

自分のWebサイトやアプリにiTunes検索機能をもたせたり、コンテンツに関連するiTunesデータを表示したりできます。

 

利用例

2013-05-27 18.54.36

Shazam(iOS)

周囲で流れている音楽をマイクから聴きとって、曲名を教えてくれるiOSアプリ。

(1)マイクでShazamアプリに曲を聴かせる

(2)音声データをコード化→Gracenoteエンジンで曲名ゲット

(3)曲名からiTunesAPIでカバーアート、プレビュー音声、購入リンクをゲット (左図参照)

 

参考) http://matome.naver.jp/odai/2133364016722604501

 

公式ドキュメント
http://www.apple.com/itunes/affiliates/resources/documentation/itunes-store-web-service-search-api.html

APIには、そのAPIをリリースしている団体(提供企業)が公開しているドキュメント(マニュアル)があります。マニュアルのなかで、APIの使い方が説明されています。
大きなインターネット企業のほとんどは日本国外の企業ですから、公式ドキュメントは大抵の場合英語で書かれています。(はてなAPIやmixiAPIなどの資料は日本語ですが)

 

APIにかぎらず、ITの世界では(特に技術者は)英語がある程度読めるようにならないといけません。「え〜英語!?まじカンベンしてください…」

→ 英語スキルが完全でなくても、それを補う2つの道があります。

 

(1)あらかじめ概念を理解しておく。
APIっていうのはこういうものだから、APIのドキュメントにはこういう説明がされているはず。そういう風に、あらかじめ内容や構成に予想を立てながら理解を試みれば、一言一句英語がわからなくても知りたいことは理解出来ます。

(2)日本語で書かれた解説記事をたくさん読む。

これも「あらかじめ概念を理解しておく」ことにつながりますが、うまくいけばほとんどは公式ドキュメントを読まなくても理解できるかもしれない。
ただ、公式ドキュメントの情報にまさるものはないので、日本語情報だけに「逃げる」のは絶対に良くないということは肝に銘じておいてください。

 

このAPIのエンドポイント

https://itunes.apple.com/search

 

パラメータ

term

キーワード文字列。

entity

得られる検索結果のタイプ。次のうちから選んで使う(右側の英語のほう)。

  • ムービー:movieArtist, movie
  • ポッドキャスト:podcastAuthor, podcast
  • ミュージック:musicArtist, musicTrack, album, musicVideo, mix, song
  • ミュージックビデオ:musicArtist, musicVideo
  • オーディオブック:audiobookAuthor, audiobook
  • ショートフィルム:shortFilmArtist, shortFilm
  • TV番組:tvEpisode, tvSeason
  • アプリ:software, iPadSoftware, macSoftware
  • 電子ブック:ebook
  • すべて:movie, album, allArtist, podcast, musicVideo, mix, audiobook, tvSeason, allTrack

country

日本の場合は JP

lang

日本語の場合は ja_JP

limit

取得したい件数。最大200

offset

何番目から取得するか。

 

 

 :songタイプで「beatles」を検索

 

クエリストリングでちょっと確認

http://itunes.apple.com/search?term=beatles&entity=song&country=JP

郵便番号の時も見たように、結果がJSONデータとして見えます。
JavaScript/jQueryコードを書いて、このJSONデータをAJAXで取得・操作します。

 

動作デモ1
http://dev.koekatamarin.com/zokei/20130528_itunes/

Aptanaでプロジェクト作成
Webプロジェクト → Boilerplate(cached)
プロジェクト名は「itunes」

index.htmlに記述

 
css/style.cssに記述(215行目あたり)

※とりあえず見やすくするためだけのスタイルなので、必須ではありません。自由に書き換えても構いません。

 
js/script.jsに記述

 
※「//」からはじまる灰色の文字は「コメント」なので、書かなくても良いです。

ここまで書けたら、今使っているPC内のローカルサーバーにアクセスして確認!
http://127.0.0.1:8020/itunes/

サンプルと同じように動いてますか?
動いていなかったら、
ブラウザ画面上で右クリック→要素の検証→Console
に、エラーの内容が表示されているはず。
それを見ながら「デバッグ(バグ取り)」しなければなりません。

 
このサンプルコードを改良

それでは次に、先ほどの表を改良したいと思います。

動作デモ2
http://dev.koekatamarin.com/zokei/20130528_itunes2/

  • 「画像」のところを、アドレスではなく実際のイメージに。
  • 「時間」のところを、人間にわかりやすい時間表記に。

以下のJavaScriptコードの、オレンジ色の行に注目し、先ほどのコードに新しいコードを追加・変更します。

js/script.js

動作デモ2と同じように動きましたか?

 

創意工夫してみる
このような流れで、各自で自由にプログラムを改良してみましょう。

たとえば、こんな感じ。
動作サンプル3
http://dev.koekatamarin.com/zokei/20130528_itunes3/

 

index.html

css/style.css

js/script.js

 

番外編:他のAPIに置き換えてみる「Giphy API」
プログラムコードはほぼこのままで、別のAPIを利用してみましょう。
GIFアニメを収集したサイト「Giphy」のAPIを使って、キーワードに応じたGIF画像をずらりと表示します。

Giphy
http://giphy.com/

Giphy API Documentation
https://github.com/giphy/GiphyAPI

動作サンプル4
http://dev.koekatamarin.com/zokei/gif/

style.cssに追加

 

js/script.js
変更箇所
・1行目
・19〜23行目
・37〜39行目

Have fun!(^ω^)

 




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です