今回はIonicでRSSリーダーアプリの作成【第2回】です。
前回はGoogleニュースのRSS表示を取得し、JSON形式のURLを表示するところまで終わりました。
sfidante.hatenablog.jp
今回は実際にJSON形式のURLを用いて、トップニュースの表示、デザインの変更まで仕上げていきたいと思います。
(第2回の目標画面)
では、早速始めていきましょう!
まず、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を開こうとするとエラーが起こるとおもいます。
次回はその点を改善していきたいと思います。