【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タグは利用できません


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

本鯖運営維持のため、上記リンクから注文してもらえると助かります~

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

  • 今日は食あたりでダウン 医師と話したところ、昨日食べたお刺身が怪しそう 皆さんも生物の食事にはご注意ください
    about 3日 ago
  • 仙 人╔╗  天使╠╣  妖精╠╣  聖者╠╣  賢者╠╣  健全╠╣ ══════ スケベ╠╣⇦Mask_Siva  変態╠╣ ド変態╠╣   獣╠╣  性獣╠╣ 変態王╚╝ #スケベ度ランク https://t.co/NwzHF2421k 彼らには勝てないか。。。
    about 3日 ago
  • 今日学んだことは、ヤフオクAPIはGET/POST共に対応だけど、ヤフーショッピングAPIはGETのみ。 しかも、同じ意味なんだけど、パラメータ名がバラバラだったり、リストの考え方も違っているので、こういった類似APIでは統一性が求められるなと感じましたね。
    about 3日 ago

BGMにどうぞ

機動戦士ガンダムUC オリジナルサウンドトラック

2 UNICORN -澤野弘之

↓の再生ボタンで再生できます
もっと楽曲を試聴したいなら
>>>こちら<<<
2017年7月
« 6月  
 1
2345678
9101112131415
16171819202122
23242526272829
3031 

アーカイブ

↓応援おねがいします!↓

ブログランキング・にほんブログ村へ