Zenn
🍞

Ionic/AngularのToastはヘルパーメソッドで利用すると捗る話

2020/12/14に公開
Angular
Ionic
tech

この記事はIonic Framework / Capacitor Advent Calendar 2020の記事です。

Ionicには、Toastという小さな通知UIがあります。

https://ionicframework.jp/docs/api/toast/

Alertは、ユーザは何かしらのボタンをタップしないと閉じることのできない操作中断タイプの通知ですが、Toastは duration に表示時間を設定することで自動的に閉じることができます。ユーザの操作を中断しないので、データが保存できたフィードバックなどに活用します。

弊社アプリでは、以下のような通知はToastを利用しています。

  • グループを作成しました
  • トークグループに参加しました
  • 通知設定を変更しました
  • ログアウトしました
  • パスワードリセットのためのメールを送信しました

なのですが、ある程度アプリが大きくなってくると、Toastの引数は多少冗長に感じてきます。以下がToastのインターフェイスです。

export interface ToastOptions {
  header?: string;
  message?: string | IonicSafeString;
  cssClass?: string | string[];
  duration?: number;
  buttons?: (ToastButton | string)[];
  position?: 'top' | 'bottom' | 'middle';
  translucent?: boolean;
  animated?: boolean;
  color?: Color;
  mode?: Mode;
  keyboardClose?: boolean;
  id?: string;
  enterAnimation?: AnimationBuilder;
  leaveAnimation?: AnimationBuilder;
}

もちろん毎回すべてを指定するわけではありませんが、アプリをつくってるとToastのアプリ的な規格が決まってくるので繰り返しの引数を指定することになります。そこで、これをServiceにうつしてヘルパー化してしまいましょう。

import { ToastOptions } from '@ionic/core/dist/types/components/toast/toast-interface';

public async presentToast(options: ToastOptions): Promise<void> {
  options = Object.assign(
    {
      position: 'top',
      color: 'dark',
      duration: 2000,
      buttons: ['閉じる'],
    },
    options,
  );
  const toast = await this.toastCtrl.create(options);
  await toast.present();
}

あまり話題にあがりませんが、 @ionic/angular をいれると、依存関係に @ionic/core があるので一緒にnode_modules内に入っています。メソッドの引数のインターフェイスはそちらに保存されていますので、 import してくることで利用することが可能です。上記メソッドをつくっておくと、以下のような書き方ができます。

// before 
const toast = await this.toastCtrl.create({
  message: 'グループを作成しました',
  position: 'top',
  color: 'dark',
  duration: 2000,
  buttons: ['閉じる'],
});
await toast.present();

// after
await this.helper.presentToast({
  message: 'グループを作成しました',
});

ついでに、Toastはいえばユーザ操作に対するフィードバックなわけなので、フィードバックが起きたことをユーザに弱いバイブレーションをあわせて通知することも可能です。Capacitorを使ってる場合、 Haptics というプラグインがありますので、これをToastのヘルパーに組み込んでみましょう。

  import { ToastOptions } from '@ionic/core/dist/types/components/toast/toast-interface';
+ import { HapticsImpactStyle, Plugins } from '@capacitor/core';
+ const { Haptics } = Plugins;

  public async presentToast(options: ToastOptions): Promise<void> {
    options = Object.assign(
      {
        position: 'top',
        color: 'dark',
        duration: 2000,
        buttons: ['閉じる'],
      },
      options,
    );
    const toast = await this.toastCtrl.create(options);
    await toast.present();
+   if (this.platform.is('hybrid')) {
+     Haptics.impact({ style: HapticsImpactStyle.Light });
+   }
  }

これでToastでの通知と同時に、ユーザにバイブレーションでのフィードバックを起こすことができるようになりました。Ionicのメソッドはシンプルなのでついつい繰り返して書き散らしがちですが、できるだけHelperをつくってまとめていけば見通しよくなっておすすめです。

それでは、また。

Discussion