今回は「 iTunes Search API 」を使ってみました。
ドキュメントはこちら
developer.apple.com
アップルはUIが優れているイメージがありますが、ドキュメントもシンプルでわかりやすいです。
ソースコード
index.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script> </head> <body> <h1>曲検索アプリ</h1> <input id="serch_keyword" type="text"><input id="serch_button" type="button" value="検索"> <div class="result"></div><!--ここに検索結果を表示します--> <script type="text/javascript" src="script.js"></script> </body> </html>
style.js
let keyword=''; let music_infos = {}; $('#serch_button').click(function(){ keyword = $('#serch_keyword').val(); console.log(keyword); $('#serch_keyword').val(''); $('.result').empty(); $.ajax({ url:'https://itunes.apple.com/search', type:'GET', dataType:'json', data:{ lang: 'ja_jp', media: 'music', entity:'song', country: 'JP', term: keyword, limit: '10' } }).done( function(data){ for(let i=0;i<10;i++){ let music_info ={}; music_info.artworkUrl = data.results[i].artworkUrl100; music_info.artistName = data.results[i].artistName; music_info.trackName = data.results[i].trackName; music_info.collectionViewUrl = data.results[i].collectionViewUrl; music_infos[i] = music_info; } console.log(music_infos); for(let i=0;i<10;i++){ $('.result').append("<img src=\""+music_infos[i].artworkUrl+"\">"); $('.result').append("<h3>"+music_infos[i].artistName+"</h3>"); $('.result').append("<p>"+music_infos[i].trackName+"</p>"); $('.result').append("<a href=\""+music_infos[i].collectionViewUrl+"\">曲のページへ</a><br>"); } } ).fail( function(data){ console.log('失敗しました！'); } ); });
今回は曲について検索を行いましたが、ドキュメントによると他にも映画やポットキャスト、電子書籍などさまざまな情報を取得することができるみたいです。
