たけるのプログラミング

作ったものとか、気ままにアップします。

iTunes Search APIを使って、音楽検索してみた！

今回は「 iTunes Search API 」を使ってみました。

ドキュメントはこちら
developer.apple.com

アップルはUIが優れているイメージがありますが、ドキュメントもシンプルでわかりやすいです。

今回作ったWebアプリ

f:id:takeru232423:20210724225201p:plain

検索したキーワードに関連する曲の情報(アーティスト名、アルバム画像、iTunesの曲のリンク)が10個表示されます。

ソースコード

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('失敗しました！');
        }
    );
});


今回は曲について検索を行いましたが、ドキュメントによると他にも映画やポットキャスト、電子書籍などさまざまな情報を取得することができるみたいです。