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

今回はIonicでRSSリーダーアプリの作成【第2回】です。

前回はGoogleニュースRSS表示を取得し、JSON形式のURLを表示するところまで終わりました。

sfidante.hatenablog.jp

今回は実際にJSON形式のURLを用いて、トップニュースの表示、デザインの変更まで仕上げていきたいと思います。

 

(第2回の目標画面)

f:id:sfidante:20180814213240p:plain

 

では、早速始めていきましょう!

まず、Ionicを編集し始める前に前回作成した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

JSONの"items"の中に1つ1つの記事が入っていることが確認できたと思います。

それらをHTTP通信を利用して取り出していきます。

まず、src/app/app.module.tsを以下のように変更します。

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';

import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { TabsPage } from '../pages/tabs/tabs';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

//変更箇所↓
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    TabsPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    //変更箇所↓
    HttpClientModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    TabsPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

次にsrc/pages/home/home.tsを以下のように書き換えます

import { Component } from '@angular/core';
import { IonicPage, NavController, LoadingController } from 'ionic-angular';
import { HttpClient } from '@angular/common/http';


@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  items:{
    title: string,
    content: string,
    pubDate: string,
    link: string,
    guide: string
  }[]=[];

  constructor(
    public navCtrl: NavController,
    public http: HttpClient,
    public loadingCtrl: LoadingController
  ) {}

  ionViewDidLoad(){
    const loader = this.loadingCtrl.create({
      content: "Please wait...",
      duration: 1000
    });
    loader.present();

    const jsonURL = "https://api.rss2json.com/v1/api.json?rss_url=https%3A%2F%2Fnews.google.com%2Fnews%3Fhl%3Dja%26ned%3Dus%26ie%3DUTF-8%26oe%3DUTF-8%26output%3Drss"

    console.log(jsonURL);
    this.http
      .get(jsonURL)
      .subscribe(data => {
        this.items = data['items'];
        
        loader.dismiss();
      })
  }
}

 変更箇所が多いので順番に説明していきます。まず、HTTP通信を行うために、HTTPClientを読み込んで、httpという変数に入れます。

そしてHTTP通信を行った返り値を格納するための変数itemsの型定義を行います。

最後にHTTPClientモジュールを使ってGETメソッドを行います。

これでhome.tsの準備は完了しました。

最後にsrc/home/home.htnlを編集してトップ画面に表示を行っていきましょう。

<ion-header>
  <ion-navbar color="primary">
    <ion-title>トップニュース</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding class="News">
  <ion-list>
    <ion-item *ngFor="let i of items" [navPush]="'ArticlePage'" [navParams]="{ index: i }" class="news">
      <div>
          <h2>{{i.title}}</h2>
          <p>{{i.pubDate}}</p>
      </div>
    </ion-item>
  </ion-list>
</ion-content>

ここまで来たらトップ画面の表示まで完了したと思います。

ですが、記事詳細の画面が完成していないため、これから作成していきます。

一度ターミナル画面に戻り、ionic gコマンドを実行し、pageを選択、名前をarticleにします。

そこで作成したsrc/pages/article/article.tsを次のように書き換えましょう。

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, LoadingController } from 'ionic-angular';
import { HttpClient } from '@angular/common/http';

@IonicPage({
  segment: 'article/:i',
  defaultHistory: ['HomePage']
})
@Component({
  selector: 'page-article',
  templateUrl: 'article.html',
})
export class ArticlePage {
  item:{
    title: string,
    content: string,
    pubDate: string,
    link: string,
    guide: string
  } = {
    title: null,
    content: null,
    pubDate: null,
    link: null,
    guide: null
  };

  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams,
    public http: HttpClient,
    public loadingCtrl: LoadingController
  ) {}

  ionViewDidLoad() {
    console.log('ionViewDidLoad ArticlePage');

    const loader = this.loadingCtrl.create({
      content: "Please wait...",
      duration: 3000
    });
    loader.present();

    const url = this.navParams.get('index');
    this.item = url;
  }
}

ここまで来たらあとわずかです。src/pages/article/article.htmlを以下のように変更します。

<ion-header>
  <ion-navbar color="primary">
    <ion-title>記事詳細</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
  <ion-item class="article">
    <h2>{{item.title}}</h2>
    <p>{{item.pubDate}}</p>
  </ion-item>
  <div [innerHTML]="item.content"></div>
</ion-content>

これで大体の雛形は完成しました。

あとは見た目のデザインの部分を整えていきます。

src/app/app.sccsを以下のように変更します。

[padding] h1:first-child, [padding] h2:first-child, [padding] h3:first-child,
[padding] h4:first-child, [padding] h5:first-child, [padding] h6:first-child{
    margin-top: 0;
}

ion-label{
    white-space: normal;
}

.News{
    background-color: #D3D3D3 ;
}

これでRSSアプリの雛形の完成です!

ただ記事詳細画面においてURLを開こうとするとエラーが起こるとおもいます。

次回はその点を改善していきたいと思います。

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を利用してアプリ開発をしていきたいと思います。