ホーム » Ionic の基礎 » ローディングコントローラの使い方

ローディングコントローラの使い方

処理に時間がかかり、ユーザーに少しの間待っていてもらいたい場合には、処理中を表すアニメーションと「ロード中...」などのメッセージを見せることがよく行われます。

本来はユーザーを待たせないようにできるのが一番ですが、やむを得ない場合には、画面がフリーズした状態で待ってもらうよりは、アニメーションでもいいので、動いていた方が良いものです。

Ionic フレームワークではこうした「ロード中...」メッセージを制御するための、LoadingController が利用できます。

HTTP の応答を待つ例

モバイルアプリから非同期処理を行う代表例として、次の例では HTTP リクエストを送り、その応答を待つ例を示します。

サーバー側は、次のような PHP スクリプトで JSON 文字を返すことにします。

<?php
session_start();

if( !isset($_SESSION['led']) || !$_SESSION['led']) {
	$_SESSION['led'] = 'off';
}

if( isset($_REQUEST['op']) && $_REQUEST['op'] ) {
	if( $_REQUEST['op'] == 'on' ){
		$_SESSION['led'] = 'on';
	}
	elseif( $_REQUEST['op'] == 'off' ) {
		$_SESSION['led'] = 'off';
	}
	else {
		// Do nothing
	}
}

$r = array( 'status' => $_SESSION['led'] );

sleep(3);

echo json_encode( $r );

?>

応答は次のような JSON です。

{"status":"off"}

off または on を返します。

Ionic プロジェクトの作成と HTTP プラグインのインストール

さて、ここでスマートフォン側のテスト機は、アンドロイドを利用したので、プロジェクトは次のように作成しました。

$ ionic start loading1 blank --v2
$ cd loading1
$ ionic platform add android
$ ionic plugin add cordova-plugin-http
$ npm install --save @ionic-native/http

HTTP リクエストを送るために cordova-plugin-http プラグインを利用します。

home.html テンプレートは次のようにします。

<ion-header>
  <ion-navbar>
    <ion-title>
      LED Controller
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
  <button ion-button block
    (click)="onClick()"
    [color]="(ledStatus == 'unknown') ? 'light' : ((ledStatus == 'on') ? 'danger' : 'dark')">{{ledStatus}}</button>
</ion-content>

home.ts は次の通りです。

import { Component } from '@angular/core';
import { LoadingController } from 'ionic-angular';
import { HTTP } from '@ionic-native/http';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
  providers: [ HTTP, LoadingController ],
})
export class HomePage {

  ledStatus: string = 'unknown';

  constructor(
    public http: HTTP,
    public loadingCtrl: LoadingController,
    ) {}

  onClick(){
    this.updateStatus();
  }

  updateStatus(){
    let op: string = "";
    switch(this.ledStatus){
      case "on":
        op = "off";
        break;
      case "off":
        op = "on";
        break;
    }

    this.sendReq(op);
  }

  sendReq(op: string){
    let url: string = `上記スクリプトの URL はここ`;
    
    // "Please wait..." を表示
    let loader = this.loadingCtrl.create({
      spinner: "dots",
      content: "Please wait..."
    });
    loader.present();

    // HTTP リクエストを送信 (スクリプトで op というパラメータを受けとる)
    this.http.get(url,{'op':op},{})
    .then((httpResp)=>{
      loader.dismiss();
      let r = JSON.parse(httpResp.data);
      switch(r.status){
        case 'on':
          this.ledStatus = 'on';
          break;
        case 'off':
          this.ledStatus = 'off';
          break;
      }
    })
    .catch((err)=>{
      console.log(err);

      loader.dismiss();
      this.ledStatus = 'unknown';
    });
  }
}

今回のポイントは LoadingController です。このインスタンスをコンストラクタで受け取っています。

今回は spinner プロパティで "dots" という文字を渡しています。特にスピナーの種類を指定しなければ、プラットフォームに依存して既定のスピナーが表示されますので、特別な理由が無い限り指定しない方がよいと思います。

アンドロイド端末上で実行するには次のコマンドです。

$ ionic run android

ホーム » Ionic の基礎 » ローディングコントローラの使い方