Web担当者の備忘録

Web制作やWebマーケティングに関するブログです

AmazonのCDと同タイトルがiTunes Storeにあるか教えてくれるChrome拡張機能「Amatunes」を作りました

f:id:yuki_hiro_3:20160430103342p:plain

 むかしから音楽が好きでアルバムをよく購入します。購入するのはもっぱらAmazoniTunesなのですが、節約のためにどちらのほうが安いか確認してから購入するようにしています。

PCのブラウザでAmazonに行き、目的のアーティスト名やアルバム名で検索し価格を確認後、iTunesのソフトを立ち上げてiTunes Storeから同様に検索して価格を確認する、というのがいつも行う作業なのですが、これ、けっこう面倒だなと前から感じていました。なのでこれを解決するツールChrome拡張機能で作ってみました。

 

Amatunesの機能

 AmazonでCDの商品ページを閲覧したとき、同タイトルと思われるiTunesのデータをテーブル表示します。名前からすぐに分かってしまうとは思いますが、AmazoniTunesを組み合わせて名前をつけました。iTunes APIを利用して実装しています。

f:id:yuki_hiro_3:20160429184121p:plain

↑ こんなかんじでiTunesを検索した結果を最大5件までAmazonの商品ページに表示します。各データは1行が1つのでデータで、列ごとにアートワーク、アーティスト名、タイトル、曲数、価格、発売日の情報です。

上の場合はiTunesを検索した結果データが見つかった場合ですが、データが見つからなかった場合は以下のような表示になります。

f:id:yuki_hiro_3:20160429191048j:plain

↑このようにジャケ写の下に「iTunes Store検索結果:該当するデータが見つかりませんでした。」と表示されます。

 

Amatunesのメリット

 AmazoniTunesのどちらが安いのか一発でわかるため時間お金を節約できます。

iTunesのソフトってけっこう重くて立ち上げに時間がかかるので、自分のように音楽を聴くとき以外は極力立ち上げたくなくないって人は多いかと思います。Amazonの商品ページを見てAmazonのほうが安ければiTunesを立ち上げなくていいので時間の節約につながります。

また普通に販売されているアルバムも簡単に価格比較できていいのですが、発売から時間が経って再販されていないアルバムはAmazonで価格がものすごく高くなっていたり、発売直後でAmazonの在庫がなく転売ヤーが価格を釣り上げている場合などは特にメリットが大きいかと思います。

たまにAmazonだけを見て買ってしまい、後からiTunesのほうがすごく安かったことに気づくことが何回もありました。Amatunesがあればそうした事態を防ぐことができます。

 

導入方法

  ChromeウェブストアにPCのGoogle Chromeでアクセスし、以下の拡張機能のページからChromeにインストールしてください。

▼Amatunesインストールページ

f:id:yuki_hiro_3:20160429192742j:plain

Amazonの商品ページに何も表示されない場合は、Chrome右上のメニューボタンから、拡張機能が有効になっているか確認してください。

f:id:yuki_hiro_3:20160429205556j:plain

 

使用した技術、ツール

 テーブル表示には、HTML5とCSS3を、iTunesからの楽曲データの取得はJavascriptからiTunes APIを使用し、Amazonの商品ページDOMからのデータ取得はjQueryを使用しました。プログラミングはテキストエディタSublime Textで行いました。

 

作ってみた感想

 大学時代にC言語Objective-Cを少しかじったことがある程度で、SIerに就職後はほとんどプログラミングをしていませんでした。ブランクとしては6年以上あります。今回使用したJavascriptは大学時代もさわったことがなかったので、簡単なJavascriptのテキストを1冊買ったのと、ドットインストールやschooなどのプログラミング学習サイトで勉強しつつ、わからないことがあるたびにググりながら制作を行いました。

 本当に久しぶりのプログラミングだったので、配列とかfor文とか懐かしいみたいな状態でした(笑) 大学時代にはじめてやったC言語でのプログラミングが全然できなくて、プログラミング自体に苦手意識があったのですが、自分の作りたいものがあるせいかそのへんを気にすることなく楽しく制作することができました。作りたいものがあると勝手に学習意欲が湧くみたいです。

 制作期間はだいたいアイディアを思いついてから1ヶ月くらいです。当初想定していたリクエストの仕方じゃデータが取得できなかったり、Chrome拡張機能からクロスオリジンでiTunesにリクエストするにはどうすればいいかなどの初歩的なところで手間取ったりしつつも、一つ一つ問題を解決しながら完成させることができました。

 

今後の修正・改善

 一応形としては完成ですが、アーティストによってはうまくiTunesからデータの取得ができていないものがあったりしたのでその修正をやっていくのと、データをテーブル表示するだけでなく試聴プレイヤーも表示させて試聴できるような機能も作りたいと思っています。

アルバムによってはAmazonの商品ページで試聴できるものがありますが、できない商品ページも多々あるので、iTunesからデータを持ってきて試聴できるようにすればより便利になるんじゃないかと考えています。

あと現在、AmazonのCDカテゴリの商品のみを対象にしていますが、デジタルミュージック(MP3)のカテゴリなどにも対応していきたいと考えています。そしてゆくゆくは音楽だけでなく、DVDやBlu-rayなどの映画のカテゴリにも対応していけたらと考えています。

参考サイト

Getting Started: Building a Chrome Extension

iTunes APIの使い方まとめ

Google Chrome拡張機能入門