Ionicでアニメ情報を取得するスマホアプリを作ってみた

こんにちは、虎の穴ラボのS.Sです。

普段は、WEBエンジニアをやっている私ですが、
今回は、Ionicを使って、簡単にスマホアプリを作ってみましたので、
その内容をご紹介させていただきます。

Ionicとは

Ionicとは、Google社のAngularというアプリケーションフレームワークをベースに、HTML5アプリの開発に特化して作られたJavaScriptフレームワーク。

Ionicのココがスゴい！！

上記のとおり、WEB技術を使って、Web/iOS/Androidアプリが同時に開発が可能。（いわゆるハイブリッド開発）
例えば、iOSアプリを開発する場合、Objective-Cもしくは、Swiftの知識が必要になりますが、
Ionicを使えば、それらの知識は必要なく、JavaScriptとHTMLの知識があれば開発出来ちゃうのです！すっごーい！！
またIonicは、Angularを採用しているので、TypeScriptでも書くことができます！（今回はTypeScriptで書いてみました）

その他に、Ionicの詳しい情報や開発環境の構築方法に関しては、以下の本がわかりやすいのでオススメです！
（とらのあな通販サイトでも購入出来ます）
ec.toranoana.shop

実際に作ってみた

試しに今回は、放映中のアニメ作品の情報が取得できるAnime APIを使って、
2018秋アニメの放映作品一覧を表示するアプリを作ってみました。

Anime APIの詳細については、以下をご参照ください。
qiita.com

◼️用意したもの

・Mac（もちろんWindowsでも開発は可能ですが、iOSアプリの実行環境がないため）
・Xcode
・Android Studio

◼️プロジェクトの作成

まずプロジェクトを作ります。（例：anime-api）

$ ionic start anime-api

そのあとテンプレート選択がありますが、今回は「blank」を選択しました。
※ 基本的にこのテンプレートのソースを書き換えて、開発します。

◼️ HTTP通信により、APIからデータを取得する

まずIonicのプロジェクトで、HttpClientを使う為に、app.module.tsに HttpClientModuleを登録します。

anime-api/src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

次に、home.ts に HttpClientを読み込みます。さらに ionViewDidLoad を使って、ページがロードされた時に、GET送信にて、Anime APIを呼び出してます。そのレスポンスをpostsという変数に格納しています。

anime-api/src/pages/home/home.ts

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

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

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

  ionViewDidLoad(){
    this.http
      .get('http://api.moemoe.tokyo/anime/v1/master/2018/4')
      .subscribe(data => {
        this.posts = data
      })
  }
}

◼️ 画面表示

*ngFor を使って、postsに格納されたデータを全件表示しています。
　title : 作品タイトル
　twitter_account : 公式ツイッターアカウント

anime-api/src/pages/home/home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      2018秋アニメ一覧
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
 <ion-item *ngFor="let p of posts">
   <h2>{{p.title}}</h2>
   <p>Twitter:@{{p.twitter_account}}</p>
 </ion-item>
</ion-content>