wpionic.tokyo #2 ionic チュートリアル – Capital P

前回に引き続き、2017/5/24に開始された wpionci.tokyo の第二回リポートである。今回は前回の反省をふまえ、 ionic で画面を表示するところまでを行う。

ionic のプロジェクトを作成する

公式ドキュメントに記載されている手順に従い、インストールからエミュレーターまでの起動を試す。

ionic インストール

まず、前回までにやった通り、ionicのインストールは済ませておく必要がある。Gulpなどで node に触れる人にはもしかしたら馴染みがないかもしれないが、グローバルオプションをつけてインストールする必要がある。

npm install -g ionic cordova

また、これは勉強会当日にエミュレーターが起動しなかったことの原因なのだが、iOSで確認した場合は以下の2つのツールもインストールが必要だ。ios-deploy はコマンドラインからiOSアプリをビルドするツールで、 ios-sim は同様にCLIでエミュレーターを起動するツールである。

npm install -g ios-deploy ios-sim

さらに補足として、 nvm や nodebrew などのNodeJSのバージョンを複数インストールできる環境を用意しておこう。これには2つの利点がある。

自然とhomeディレクトリにインストールされるようになる（＝パーミッションの問題が発生しなくなる）
更新の早いNodeにおいて、依存関係の問題が解消しやすくなる

また、これは筆者（＝勉強会の開催者）としての個人的な意見であり、多少乱暴なことを承知で言うが、Macを使おう。それだけで面倒なことが一気に減る。

これでインストールは完了だ。

ionic チュートリアル

チュートリアルは Getting Started に記載されている通りの手順で進める。任意のフォルダに移動して、次のコマンドを打つと、 myApp フォルダにプロジェクトファイルが展開される。

ionic start myApp tabs

このフォルダのうち、特にいじるものは src フォルダの中だ。

こちらの中身は一般的なWebプロジェクトのようになっている。tsという拡張子はtypescriptのファイルである（筆者の環境ではQuicktimeの何かと認識されている）

とりあえず、いじる前に外見を確認してみよう。myAppフォルダで以下のコマンドを発行することにより、Webブラウザから確認することができる。

ionic serve

なお、ブラウザはChromeを使おう。ChromeにはAngular開発用の拡張があり、それを利用することでいくつかの利点が存在する。複数存在するので、色々ためして共有してほしい。

さて、続いて、iOSエミュレータでのチェックを行う。エミュレーターはMacユーザーなら無料でダウンロードできるXcodeに付属している。

ionic cordova emulate ios

コマンドラインに大量の文字列が出力され、完了すればエミュレーターが起動するはずだ。

およそこれぐらいで1時間ほどが経過した。

ionic コンポーネントを追加してみる

ionicにはコンポーネント（部品）という概念があり、その多くはすでに組み込み済みだ。htmlタグのように利用することができる。

勉強会では適宜自分で追加してみようということになったが、筆者がやった事例を紹介しよう。

コンポーネントの表示

まず、 pages/home/home.html を書き換え、ボタンを表示してみる。ボタンは ion-button という属性を button タグに割り当てれば表示される。

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h2>Ionicへようこそ!</h2>
  <p>
    <button ion-button>Button</button>
  </p>
  <p>
    This starter project comes with simple tabs-based layout for apps
    that are going to primarily use a Tabbed UI.
  </p>
  <p>
    Take a look at the <code>src/pages/</code> directory to add or change tabs,
    update any existing page or create new pages.
  </p>
</ion-content>

コンポーネントにはタグ形式のものと属性形式のものがある。これでとりあえずボタンの表示は完了だ。

ただ、これだけでは芸がないので、「ボタンをクリックしたら何かが起きる」ということにチャレンジしよう。

コンポーネントのイベント登録

そのためには、まずクリックイベントを追加する必要がある。Angular や React などの最近のフレームワークは普通にクリックイベントをHTMLに記載する。この点はjQuery全盛期に言われていた「HTMLにイベントハンドラーを書くべきではない」という方針とは変わっているので、注意しよう。

さて、まずは pages/home/home.html にイベントを記載する。ボタンの部分だけ抜粋する。

<button ion-button (click)="presentToast()">Button</button>

clickがカッコでくくられているのは誤植ではなく、Angularが1から2へ移行する際に多くの人々を驚かせた変更点だ。ともかく、これによりボタンをクリックすると presentToast メソッドが動作するようにになる。

では、どこにイベントを書くのか？　Angularでは、すべての部品をコンポーネント化し、必要なHTML, CSS, JS(Typescript) を同じフォルダにまとめる。したがって、 pages/home/home.html の動作をつかさどるのは pages/home/home.ts となる。

詳細はのちの勉強会で触れるが、AngularJSにおいて、同じコンポーネント内のメソッドは暗黙的にスコープ内に展開される。要するに、 home.ts の HomePageクラスに presentToast メソッドを実装すれば、それは (click)="presentToast()" のように利用できるわけだ。そのようにメソッドを実装してみよう。

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

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

  constructor(public navCtrl: NavController) {}

  presentToast() {
    // Do somehting.
  }

}

これでひとまずメソッドは実装された。

別のコンポーネントの利用

presentToast の中から、別のコンポーネントを呼び出してみよう。今回はToast（アプリの上下にピコンと表示される通知ウィジェット）を利用しよう。

Toastはコンポーネントだが、タグを書くのではなく、JSから呼び出す。ドキュメンテーションに従って次のように書く。

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { ToastController } from 'ionic-angular';

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

  constructor(
    public navCtrl: NavController,
    public toastCtrl: ToastController
  ) {}

  presentToast() {
    let toast = this.toastCtrl.create({
      message: 'ボタンが押されたよ',
      duration: 3000
    });
    toast.present();
  }

}

ポイントは3点。