ionic のスニペット集

このページでは、ionic のスニペットをまとめています。

  • 記載時点の ionic のバージョンは 3.0.1 です。他のバージョンでは動作しない場合があります。

コマンド

コマンド 意味
npm install -g cordova ionic ionic のインストール
ionic start アプリ名 アプリフォルダの生成 (例: ionic start MyApp)
ionic g page ページ名 ページの生成 (例: ionic g page Login) ※1
ionic cordova platform add ios iOSプラットフォームの追加 (Androidの場合 ios の代わりに android。以下同)
ionic cordova build ios iOS用のビルド
ionic cordova run ios --device アプリをiOS端末で実行
ionic serve アプリをブラウザで実行
ionic cordova resources --icon resources/icon.png (1024x1024) のアイコンをもとに各サイズのアイコンを自動生成
ionic cordova resources --splash resources/splash.png (2732x2732) からスプラッシュスクリーン用の各サイズ画像を自動生成

※1 生成後、生成したページクラスを使う場合、下記のいずれかが必要です。

ionic g page 後のページクラスの使用

Lazy Loading (遅延読み込み) をする場合

Lazy Loading は起動時にすべてのクラスを読み込まず、必要になったときに読み込むことで起動時間を短縮する方法です。(バージョン3から追加された機能のようです) これは後述する他の方法とは違い、app.module.ts を編集する必要はありません。 ただ、下記のように文字列としてページクラス名を使用する必要があります。

    this.navCtrl.push('ContactPage');

※ ページクラスの import も不要です。モーダル等でも同じように文字列でクラス名を使用します。

Lazy Loading しない場合

例えば ionic g page Login であれば src/pages/login/login.module.tsLoginPageModule が生成されているため、app.module.tsimports にモジュールを追加します。

// app.module.ts のコード先頭付近に追加
import { LoginPageModule } from '../pages/login/login.module';
// app.module.ts の imports 内それぞれに追加
    LoginPageModule,

app.module.tsdeclarations, entryComponents に追加する場合

下記のように app.module.tsdeclarations, entryComponents に追加しても動作します。

// app.module.ts のコード先頭付近に追加
import { LoginPage } from '../pages/login/login';
// app.module.ts の declarations, entryComponents 内それぞれに追加
    LoginPage,

ionic start で生成されたもともとのページがこの方法で追加されているためこちらのほうが自然に見えますが、 よく見ると ionic start で生成されたページはモジュールファイル (.module.ts) がありません。
ionic g page で生成したページをこの方法で追加したのち ionic cordova build ios --prod (本番環境用のビルド) などを実行すると下記のようなエラーが出てしまいます。

Error: Type LoginPage in /path/to/src/pages/login/login.ts is part of the declarations of 2 modules: AppModule in /path/to/src/app/app.module.ts and LoginPageModule in/path/to/src/pages/login/login.module.ts! 

Please consider moving LoginPage in /path/to/src/pages/login/login.ts to a higher module that imports AppModule in /path/to/src/app/app.module.ts and LoginPageModule in /path/to/src/pages/login/login.module.ts. 

You can also create a new NgModule that exports and includes LoginPage in /path/to/src/pages/login/login.ts then import that NgModule in AppModule in /path/to/src/app/app.module.ts and LoginPageModule in /path/to/src/pages/login/login.module.ts.

(意訳)

エラー: 型 LoginPage (/path/to/src/pages/login/login.ts) は2つのモジュールの宣言の一部になっています。(AppModule (/path/to/src/app/app.module.ts) と LoginPageModule (/path/to/src/pages/login/login.module.ts))

LoginPage (/path/to/src/pages/login/login.ts) を、AppModule (/path/to/src/app/app.module.ts) と LoginPageModule (/path/to/src/pages/login/login.module.ts) をインポートする上位モジュールに移動することを検討してください。

LoginPage (/path/to/src/pages/login/login.ts) をエクスポート、インクルードする新しい NgModule を生成し、その NgModule を AppModule (/path/to/src/app/app.module.ts) と LoginPageModule (/path/to/src/pages/login/login.module.ts) にインポートすることもできます。

UI

ナビゲーション

// ページの .ts のコード先頭付近に追加
import { NavController } from 'ionic-angular';
// constructor() の引数に追加
    public navCtrl: NavController,
// 使用したい場所に追加
    this.navCtrl.push('ContactPage');
    // this.navCtrl.create(ContactPage, { foo: 1 }); (開くページにデータを渡したい場合)

ナビゲーションで開いたページ上でデータを取得する

// ナビゲーションで開くページの .ts のコード先頭付近に追加
import { NavParams } from 'ionic-angular';
// ナビゲーションで開くページの constructor() の引数に追加
    public navParams: NavParams,
// ナビゲーションで開くページ側のデータを取得したい箇所に追加
    const foo = this.navParams.get('foo'); // this.navCtrl.push(ContactPage, { foo: 1 }); などで渡したデータのキーを指定

ナビゲーションで開いたページ上でページを閉じる

// ナビゲーションで開くページの .ts のコード先頭付近に追加
import { NavController } from 'ionic-angular';
// ナビゲーションで開くページの constructor() の引数に追加
    public navCtrl: NavController,
// ナビゲーションで開くページ側の閉じたい場所に追加
    this.navCtrl.pop();
// ナビゲーションで開くページ側の閉じたい場所に追加 (開くページにデータを渡したい場合。push() 時にコールバック関数を渡しておく)
    this.navCtrl.pop(null, () => {
      const callback = this.navParams.get('callback');
      if (callback) {
        callback({ foo: 2 });
      }
    });

アラート

// ページの .ts のコード先頭付近に追加
import { AlertController } from 'ionic-angular';
// constructor() の引数に追加
    public alertCtrl: AlertController,
// 使用したい場所に追加
    const alert = this.alertCtrl.create({
      title: 'タイトル',
      message: 'メッセージです。',
      buttons: ['OK']
    });
    alert.present();

モーダル

// ページの .ts のコード先頭付近に追加
import { ModalController } from 'ionic-angular';
// ページの constructor() の引数に追加
    public modalCtrl: ModalController,
// 使用したい場所に追加
    const modal = this.modalCtrl.create('ContactPage'); // Pageを指定してモーダルを表示
    // const modal = this.modalCtrl.create(ContactPage, { foo: 1 }); (開くページにデータを渡したい場合)
    modal.onDidDismiss(() => {
      // モーダルが閉じられたときの処理
    });
    modal.present();

モーダルで開いたページ上でデータを取得する

// モーダルで開くページの .ts のコード先頭付近に追加
import { NavParams } from 'ionic-angular';
// モーダルで開くページの constructor() の引数に追加
    public navParams: NavParams,
// モーダルで開くページ側のデータを取得したい箇所に追加
    const foo = this.navParams.get('foo'); // this.modalCtrl.create(ContactPage, { foo: 1 }); などで渡したデータのキーを指定

モーダルで開いたページ上でページを閉じる

// モーダルで開くページの .ts のコード先頭付近に追加
import { ViewController } from 'ionic-angular';
// モーダルで開くページの constructor() の引数に追加
    public viewCtrl: ViewController,
// モーダルで開くページ側の閉じたい場所に追加
    this.viewCtrl.dismiss();
    // this.viewCtrl.dismiss({ foo: 2 }); // 元のページにデータを渡したい場合 (modal.onDismiss((data) => {}); で受け取り)

ローディング

// ページ等の .ts のコード先頭付近に追加
import { LoadingController } from 'ionic-angular';
// ページの constructor() の引数に追加
    public loadingCtrl: LoadingController,
// 使用したい場所に追加
    const loading = this.loadingCtrl.create({
      content: 'テスト',
      duration: 4000
    });
    loading.present();

その他

入力チェック (バリデーション)

  • 参考: Angular - Form Validation (英語)
  • formControlName を使用して、フォームグループの項目との紐付け(バインディング)を行う例です。
<!-- ページの .html に追加 -->
  <form [formGroup]="form" (ngSubmit)="submit()">
    <ion-list>
      <ion-item>
        <ion-label>氏名</ion-label>
        <ion-input formControlName="name"></ion-input>
      </ion-item>
      <div ion-text class="error" no-lines *ngIf="errors.name">{{errors.name}}</div>

      <ion-item>
        <ion-label>メールアドレス</ion-label>
        <ion-input formControlName="email"></ion-input>
      </ion-item>
      <div ion-text class="error" no-lines *ngIf="errors.email">{{errors.email}}</div>

      <ion-item>
        <ion-label>情報を記憶する</ion-label>
        <ion-checkbox formControlName="save"></ion-checkbox>
      </ion-item>
      <div ion-text class="error" no-lines *ngIf="errors.save">{{errors.save}}</div>

    </ion-list>
    <button ion-button type="submit" block>送信</button>
  </form>
/* app.scss に追加 (エラーテキストのスタイル) */
div.error {
  margin-left: 20px;
  color: red;
}
// ページの .ts のコード先頭付近に追加
import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
// ページのクラスのメンバ変数として追加

  /** フォーム項目 */
  form: FormGroup;
  /** フォーム項目のエラーテキスト */
  errors = {};
  /** フォーム項目名 */
  controlNames = {
    name: "氏名",
    email: "メールアドレス",
    save: "情報を記憶する"
  };
// ページの constructor() の引数に追加
    public formBuilder: FormBuilder,
// ページの constructor() 内に追加
    this.form = this.formBuilder.group({
      // 項目名: [初期値, ルール]
      name: ["", Validators.required],
      email: ["", [ Validators.required, Validators.email ]],
      save: [false],
    });
// ページクラス内に追加

  /**
   * 送信処理を行います。
   */
  submit() {
    // グループ内のどれかがエラーの場合
    if (!this.form.valid) {
      for (const field of Object.keys(this.form.controls)) {
        this.errors[field] = '';
        const control = this.form.get(field);    
        // 項目ごとに入力エラーがあればエラーメッセージをセット
        if (!control.valid) {
          // 必須チェックがエラーの場合
          if (control.errors.required) {
            this.errors[field] = this.controlNames[field] + "を入力してください。";
          }
          else if (control.errors.email) {
            this.errors[field] = this.controlNames[field] + "はメールアドレスの形式にしてください。";
          }
          // TODO その他
        }
      }
      return;
    }
    // TODO 入力チェック後の処理
  }

値のセット等

// あとから値をセットする場合
    this.form.setValue({
      name: 'test',
      email: 'test@example.com',
      save: true
    });
// あとから一部の項目のみ値をセットする場合
    this.form.patchValue({
      name: 'test'
    });

更新履歴

  • 2017/08/06 下記を追加しました。
    • ナビゲーション (NavController) の項目を追加しました。
    • ionic g page 後のページクラスの使用」を追加し、ページクラスの Lazy Loading (Ionic and Lazy Loading Pt 1 | The Official Ionic Blog) を考慮した説明にしました。
  • 2017/07/26 初版