IonicでRSSリーダーアプリの作成をしました【第1回】

今回はAngularJSを拡張したIonicと言うフレームワークを用いてRSSリーダーアプリを作成していきたいと思います。

 

何回かに分けてRSSリーダーアプリの作成手順を載せていきたいと思います。第1回はコードを書き始める前の環境説明と、Google Feed Apiを用いずに、RSS表示されたURLからJSON表示したURLを取得する方法についての説明をしていきます。

 

「ionicの環境」

li packages: (/usr/local/lib/node_modules)

 

    @ionic/cli-utils  : 1.19.2

    ionic (Ionic CLI) : 3.20.0

 

global packages:

 

    cordova (Cordova CLI) : 8.0.0

 

local packages:

 

    @ionic/app-scripts : 3.1.11

    Cordova Platforms  : none

    Ionic Framework    : ionic-angular 3.9.2

 

System:

 

    Node : v10.5.0

    npm  : 6.2.0

    OS   : macOS High Sierra

 

Environment Variables:

 

    ANDROID_HOME : not set

 

Misc:

 

    backend : pro

 

 

RSSとは」

RSSとはRich Site Summary, RDF Site Summary, Really Simple Syndicationの頭文字を取ったもので、簡単に言うとWebサイトのニュースやブログなどの、更新情報の日付やタイトル、その内容の要約などを配信するため技術のことです。この技術を利用すると、ブログやWebニュースなどの更新がされたかどうかをいちいちサイトに訪れることなく確認することができるようになります。

 

今回はこのRSSと言う仕組みを利用してGoogleニュースを取得してきてカテゴライズ分けして配信するアプリを作成していきたいと思います。

 

今回まずはGoogleニュースのトップニュースRSS表示を行います。

 

今回はこちらの記事を参考にしました。

(参考記事)

GoogleニュースをJSONで得る | Tomehachi's Blog

 

こちらがトップニュースのRSS表示をしたURLになります。

https://news.google.com/news?hl=ja&ned=us&ie=UTF-8&oe=UTF-8&output=rss

 

スポーツに絞ったトップニュースの取得の際には先ほどのURLの最後に

topic=s

を追加します。

https://news.google.com/news?hl=ja&ned=us&ie=UTF-8&oe=UTF-8&output=rss&topic=s

 

今回はトップニュースの取得のため、最初のURLを利用することにします。

 

URLをアクセスするとするとわかると思いますが、RSS表示のままでは文字化けが起こり、また記事などの取得も大変です。そこでこのRSS表示をJSON形式に変換する必要があります。

 

以前はRSS表示をJSON形式に変換するには、Google Feed Apiを利用すれば簡単に変換できたのですが、Google Feed Apiは2017年に廃止されてしまったため利用できなくなってしまいました。そのため、Google Feed Apiの代替としてYQL Apiを利用するといいと言う話や、PHPを使って変換する方法などが書かれていましたが、他に簡単に変換できる方法はないかと探していたところ、とても便利なツールを発見しました。

それは「RSS to JSON online converter」です。

 

rss2json.com

今回のRSS表示のGoogleニュースのトップページのURLを入力すると、JSON形式のURLを返してくれます。

実際に得たJSON形式のURLはこちらです。

 

https://rss2json.com/#rss_url=https%3A%2F%2Fnews.google.com%2Fnews%3Fhl%3Dja%26ned%3Dus%26ie%3DUTF-8%26oe%3DUTF-8%26output%3Drss

 

URLにアクセスするとJSON形式で返ってきているのが確認できると思います。ここまででコードを書くまでの準備は完了しました。

 

第1回の説明はここまでです。次回は取得したJSON形式のURLを利用してアプリ開発をしていきたいと思います。