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>
◼️ ブラウザで動かしてみる

ソースの改修はこれで完了なので、実際に動かしてみます。

$ ionic serve

するとブラウザが立ち上がり、アプリが起動されます。
もしこの時に、エラーが発生すれば、エラーの詳細を以下のとおり教えてくれます。(ココもスゴい!)

f:id:toranoana-lab:20181126122135p:plain
正常に起動すれば、アプリの画面がブラウザ上に表示されます。
(※Google Chromeのデベロッパーツールを使って、スマホ用に表示しています)
f:id:toranoana-lab:20181126122219p:plain

◼️ iOSで動かしてみる

Ionicは、Apache Cordova をサポートしているので、Cordovaを使ってビルドすることが出来ます。
これにより、HTML5アプリからiOS/Android アプリにコンパイルすることが出来ます。

以下のコマンドで、実際にIonicのプロジェクトから、Xcode用のプロジェクトに変換されます。

$ ionic cordova build ios --prod

すると、/platforms/ios/ の配下に Xcode用のプロジェクトが生成されます。
その中の xcodeproj ファイル(今回だと anime-api.xcodeproj )をXcodeで開きます。

f:id:toranoana-lab:20181126122229p:plain

ビルド完了後、再生ボタンを押すと、エミュレータが立ち上がり、実際にiOSでの動作確認が出来ました!

f:id:toranoana-lab:20181126122239p:plain

◼️ Androidで動かしてみる

iOSと同じくコマンド1発で、Ionicのプロジェクトから、Android用のプロジェクトに変換されます。

$ ionic cordova build android --prod

すると、/platforms/android/ の配下に Android用のプロジェクトが生成されます。
/platforms/android/ の プロジェクトを Android Studio で開きます。

f:id:toranoana-lab:20181126122247p:plain

ビルド完了後、再生ボタンを押すと、エミュレータが立ち上がり、実際にAndroidでも動作確認が出来ました!

f:id:toranoana-lab:20181126122259p:plain


このようにひとつのプロジェクトで、 web/iOS/Android アプリの開発が同時に出来る Ionic は、とても魅力的です。
またWEB技術を使って、開発が出来たので、Objective-Cや、Swiftの知識がない私でも、iOSアプリを開発することが出来ました。

ハイブリッドなアプリ開発に興味がある方には、Ionic オススメです!!

虎の穴ではJavascriptエンジニアをはじめとして一緒に働く仲間を絶賛募集中です!
この記事を読んで、興味を持っていただけた方はぜひ弊社の採用情報をご覧下さい。
www.toranoana.jp