【HTML・鯖運営】iTunes Storeの検索ページを改修しました


だいぶ前にWebAPIとjsonの勉強を兼ねて作っていたiTunes Storeのアイテムを検索できるWebページを作っていたのですが、使いにくいというご指摘を頂戴していたので、ちょっと改修してみました。

改修ポイントは、

  • カテゴリに合った情報を表示することと
  • 楽曲では試聴ができること
  • iPhoneでも利用できるようにブラウザに掛かるコストを抑えること

の3点になります。

今までは、アルバムの画像と楽曲の場合はサンプルのリンクを表示するだけだったんですよね。
それだけじゃ確かに使いにくいよね。^_^;

リンク:iTunes Search

 

まず、私が使っているiTunesのWebAPIですが、誰でも使うことのできるもので、こちらに仕様がまとまっています。
平たく言ってしまうと、カテゴリと検索キーワードをリクエスト情報として送るとjsonで検索結果が返されるものになります。

興味のある方は、先ほどのリンク先で詳細を確認してみてください。
本記事の執筆時では英語の文書しかありませんが。。。

WebAPIはいくつか使ってみていますが、カテゴリごとに戻ってくる情報が異なる点が注意かなと思いました。

 

で、今回は楽曲、動画、アプリ、電子書籍の4種類のカテゴリを用意して、それぞれ検索できるようにしました。
試しにキーワード「ガンダム」で検索してみると以下のような感じで表示されます。

【楽曲】

iTunesSearch_audio

【動画】

iTunesSearch_video

【アプリ】

iTunesSearch_software

【電子書籍】

iTunesSearch_ebook

楽曲に関しては、HTML5のaudioタグを用いて、ブラウザ標準のオーディオプレーヤーでサンプルを試聴できるようにしました。

その他のカテゴリでは、商品の補足説明を表示するようにしています。
ただし、アプリに関しては無駄に情報が多く、逆に見にくくなると判断し表示はしませんでした。

デザインに掛かるコストは最小限に抑えたので華やかさはありませんが、その分情報の表示はスムーズに行えるかと。
気軽に楽曲の検索・試聴が楽しめるかと思います。

 

将来的には、毎回Webページをロードし直すコストも削減したいと思っています。
残念ながら、現時点での私にはAjaxなどの知識がないため、実現はできていません。
改善点は、勉強できるポイントだと思っているので、時間がある時に勉強を兼ねて改修します。
(もし知識のある方がご覧になっていましたら、参考サイトなどを教えてもらえると助かります)

一応、アフィリエイトタグもリンクには付加しているので使っていただければ私にちょっぴり収入が入ります。
なので、ぜひ使ってください!

その代わり、使いにくい点は可能な限り直しますので、この記事へのコメントやブログのメッセージフォームから連絡を頂ければと思います。
よろしくお願いします。

リンク:iTunes Search


この記事をシェアする

    Mask_Siva

    北の試される大地に生息しているSEです。
    楽しみながらプログラムを作ったり、ゲームで遊んだりしています。

    コメントをお待ちしております

    HTMLタグは利用できません

    Advertising



    新品/中古ゲーム販売 通販ショップの駿河屋

    Twitter

    仮面被り過ぎ@コンプレックス大佐
    @Mask_Siva

    • 2番機の再セットアップ完了。 データが全部飛んでるから、細かい調整は後日。 1番機もOSの入れ替えまでは完了。 CPU性能が低いからアプデに時間がかかってる。
      about 12時間 ago
    • 思ったよりGOTOのクーポンが使えるお店ないなぁ、、、 コンビニでも使えるらしいから、夜食を買うのに充てるのが良さそうですね。
      about 13時間 ago
    • 1番機はWindowsのアップデートを行えば完了かな。 2番機は64bit移行がどうしてもできない(スペック上はOKなんだけど)のと文鎮になってしまったので、PCの初期化へ。
      about 14時間 ago

    BGM

    機動戦士ガンダムUC オリジナルサウンドトラック4
    9 9thMob. :流星のナミダ -澤野弘之

    ↓の再生ボタンで再生できます
    色々な楽曲を試聴したいなら
    >>>こちら<<<

    Nico Nico Community

    Calendar

    2020年10月
     123
    45678910
    11121314151617
    18192021222324
    25262728293031

    Archive

    My WIsh List

    Amazonで気になっている物をまとめています。

    「これは良かった!」「こっちの方がいいよ!」というものがあれば、教えてください<(_ _)>

    https://amzn.to/3oof0rZ