どうも、まさとらん(@0310lan)です。
今回は、JavaScriptでJSONを使った「Webアプリ開発」に挑戦してみようと思います!
そこで、アップルが提供している「RSS Generator」からJSONデータを取得し、多彩なジャンルのランキングサイトを構築してみましょう!
【 RSS Generator 】
「RSS Generator」という名前の通り、これはiTunes Storeで提供されているスマホアプリ、音楽、映画…などの最新情報をRSS形式で取得可能なURLを自動生成してくれるサービスです。
ただし、URLを少し変えるだけで「JSON(JSONP)データ」も取得できるようになっているので、このデータを読み込んでアプリや音楽などの最新ランキングを自動表示するサイトを作ってみたいと思います!
■必要なファイルを準備しよう!
それでは、最初に必要となるファイルを準備するところから始めましょう!
今回のランキングサイトは非常にシンプルなので、必要なファイルは「index.html」と「app.js」の2つだけです!
取得したJSONデータを「テーブル要素」でランキング順に表示するという単純なモノです。
まずは、「index.html」のbody内に、テーブル要素の枠組みだけを用意しておきます。
<!-- index.html --> <body> <div class="container"> <!-- ランキング表示用のテーブル要素を準備 --> <table id="ranking" class="table table-striped table-hover"></table> </div> </body>
今回はJavaScriptにフォーカスを当てたいので、CSSに関しては軽量で汎用性の高いフレームワーク「Spectre.css」を読み込むだけにしておきましょう。(CSSフレームワークについてはコチラを参照)
※上記HTML要素内のクラス名は、すべて「Spectre.css」で用意されているものだけを使っています。
次に「app.js」ですが、ひとまず以下のような内容で作っておきましょう!
// app.js window.addEventListener('load', function() { // 最初に実行される処理を書く getAppList(); }); function getAppList() { // JSONデータを取得する処理を書く }
HTMLを読み込んだ後、最初に実行される関数として「getAppList()」を作成しています。
この中に、「iTunes Store」のJSONデータを取得する処理を書いていくようにしたいと思います!
■「JSONデータ」が得られるURLを作ろう!
必要なファイルが準備できたところで、早速「JSONデータ」を取得するURLを作っていきましょう!
最初に、「RSS Generator」のサイトにアクセスして、以下の画面構成を確認します。
それぞれの機能は以下のとおり!
- 国名を選択
- アプリ、音楽、映画などのメディアを選択
- 無料アプリ・有料アプリ、最新情報などの選択
- 取得するデータ数の選択
- 各メディアのジャンルを選択
上記の内容で、自分が欲しい情報をマウスでボチボチと選択するだけでURLが自動生成されるので便利です!
例えば、日本のiOS無料アプリランキング情報(全ジャンル)を10件取得するためのURLはこのようになります。
https://itunes.apple.com/jp/rss/topfreeapplications/limit=10/xml
そして、このURLからJSONデータを取得するのは簡単で、末尾の「xml」を「json」に書き換えるだけでOK!
https://itunes.apple.com/jp/rss/topfreeapplications/limit=10/json
試しに、このURLをブラウザのアドレスバーに入力すると、「JSONデータ」として情報が得られているのが分かります!
■「JSONデータ」をJavaScriptで扱おう!
さて、ここまで来ればあとはJavaScriptからJSONデータを読み込んで、ランキングを表示するだけです!
そこで、jQueryなどのライブラリを使っても良いのですが、単純にJSONを取得するだけなので今回は標準で使える「fetch」を使ってみましょう!
「fetch」の使い方はものすごく簡単で、JSONを読み込むだけならこんな感じに書けます。
fetch(url) .then(function (data) { return data.json(); // 読み込むデータをJSONに設定 }) .then(function (json) { // JSONデータを取得して処理する });
冒頭の「url」の部分に、先ほど生成したURLを代入すれば、最終的に変数「json」の中に取得したデータが入っています。
結果をコンソールログに出力すると、「feed」→「entry」配下にしっかりとデータが取得できていますね!
このように、「fetch」は簡単で使いやすいのですが、一部のブラウザはまだ対応していなかったりします。
【 対応状況の詳細|Can I use… 】
そこで、現状は同機能を提供するライブラリ「fetch.js」を読み込んでおくのが良いでしょう。
<script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.1/fetch.min.js"></script>
■ランキングに必要な情報を確認しよう!
先ほど、コンソールログに出力したデータの中身をもう一度よく見てみましょう!
10件のデータが配列で用意されているわけですが、それぞれのデータには…
- アプリのアイコン画像URL
- アプリのタイトル
- アプリのダウンロードURL
のような個別の詳細情報も取得できるのが分かります。
今回作るランキングサイトはシンプルなモノなので、上記3点の情報があればひとまず充分でしょう。
これらのJSONデータにJavaScriptからアクセスするのは簡単で、それぞれの階層を辿っていくだけで取得できます。
// 10件の配列データを格納 var appList = json.feed.entry; for(var i=0; i<appList.length; i++) { // ①アプリのアイコン画像URLを取得 var imgUrl = appList[i]['im:image'][0].label; // ②アプリのタイトルを取得 var appTitle = appList[i].title.label; // ③アプリのダウンロードURLを取得 var linkUrl = appList[i].link.attributes.href; }
データはランキング順に用意されているので、for文で順番にループを回しながら各データにアクセスすれば良いでしょう。
■ランキングを表示してみよう!
取得したランキング情報を、JavaScript側で動的に「テーブル要素」を生成して表示してみたいと思います!
すでに冒頭で、HTML側に「table」要素の外枠を用意していたので、あとは中身の「列・行」を追加していくだけでOKです。
先ほど、for文を使って「imgUrl(画像)」「appTitle(タイトル)」「linkUrl(リンク)」をそれぞれ取得しているので、以下のような感じでテーブルを作ることが出来ます!
// 行を追加 var row = table.insertRow(); // 順位をセルに追加 row.insertCell().textContent = i+1; // アイコン画像をセルに追加 row.insertCell().innerHTML = '<img src="'+ imgUrl +'">'; // タイトルをセルに追加 row.insertCell().textContent = appTitle; // ダウンロードリンクをセルに追加 row.insertCell().innerHTML = '<a href="' + linkUrl +'">リンク</a>';
ブラウザで確認すると、見事にランキングが表示さましたね!
ちなみに、「RSS Generator 」をいろいろ触ってみると分かりますが、URLを少し変えるだけでさまざまなランキングを作れるのが分かります。
例えば、「topfreeapplications」→「toppaidapplications」に変更すれば、有料アプリランキングも簡単に作れます。
(例)
「topsongs」に変更すれば、音楽のランキングが表示されます。
(例)
「topmovies」に変更すれば、映画のランキングも簡単です。
(例)
(音楽・映画などは、JSON構造が少し違う場合もあるので要注意)
さらに、URL内の「jp」を「us(アメリカ)」「cn(中国)」「ru(ロシア)」などに変更すれば、世界各国のランキングを作ることも簡単に出来るわけです。
■ブラウザ側にデータを保存しよう!
最後に、取得したJSONデータをブラウザの「ローカルストレージ」に保存する方法も解説しておきます。
現状は、毎回データを取得しにいくプログラムになっているため、あまり効率が良くないので「ローカルストレージ」にデータを保存し、そこから読み込むように変更してみましょう!
といってもそんなに難しくはなく、一番最初に「ローカルストレージ」にデータがあるかどうかをチェックする条件分岐を書いておけばOKです!
window.addEventListener('load', function() { // ローカルストレージのデータを取得 var listKey = window.localStorage.getItem('appranking'); if(listKey) { // ローカルストレージにデータがあれば // そのデータを使ってランキングを表示する } else { // ローカルストレージにデータが無ければ // JSONデータを取得しにいく } });
ローカルストレージにデータを保存する処理もこのように簡単です。
var appList = json.feed.entry; // 配列データを格納 // 取得したデータを「appranking」という名称で保存する window.localStorage.setItem('appranking', JSON.stringify(appList));
ここまでの内容を踏まえて、今回のサンプルデモを以下のリンクから確認できるのでぜひ試してみてください!(手動で最新データに更新する機能も追加しています…)
【 サンプルデモ 】
サンプルデモの全ソースコードは、以下のリンクから確認できます。
github.com
■まとめ
今回利用した「RSS Generator 」のランキング情報は、実際にiTunesやApple Storeなどで閲覧できるランキング情報と同じものですが、少し更新タイミングにズレがあるのは覚えておきましょう。
ただ、自分で好きなようにカスタマイズして開発できるのは大きな魅力だと思います。
注意点として、JSONデータへのアクセスはなるべく最小限にし、サーバーに負荷をかけないようにローカルストレージなどを使いましょう。
ぜひ、みなさんも挑戦してみてください!
■アルゴリズムの学習レッスン動画が期間限定無料で見放題!プログラミング学習コース
paizaでは、未経験者でも動画を通してプログラミング等が学べる「paizaラーニング」を公開しております。
本日から2017年1月23日までの期間限定で「アルゴリズム入門1」を無料公開中!
来週2017年1月24日から30日までの一週間は、「アルゴリズム入門2」の無料公開を予定しています。
paizaラーニングでは、paizaの人気美少女キャラクター霧島京子(cv:上間江望)が、かわいい声で優しく・楽しく・わかりやすくプログラミングを教えてくれます。「霧島京子による1本3分程度のレッスン動画」に加え、「ブラウザ上でコードを書いて実行できるオンライン実行環境」「複数の練習問題」で、初心者でも無理なくプログラミングを習得することができます。
paizaではスキルのあるエンジニアがきちんと評価されるようにし、技術を追い続ける事が仕事につながるようにする事で、日本のITエンジニアの地位向上を図っていければと考えています。特にpaizaではWebサービス提供企業などでもとめられる、システム開発力や、テストケースを想定できるかの力(テストコードを書く力)などが問われる問題を出題しています。
テストの結果によりS,A,B,C,D,Eの6段階でランクが分かります。自分のプログラミングスキルを客観的に知りたいという方は是非チャレンジしてみてください。