[Ionic x VueでWebアプリ開発] アラートを表示する

はじめに

Ionicはクロスプラットフォームのモバイルアプリ向けフレームワークです。主にiOS/Android向けに、ワンソースコードでモバイルアプリを開発することができます。

先日その紹介ブログを書きました。

Ionic x Vueでモバイル向けWebアプリの爆速開発を始めよう！

もっと触ってみたくなったので、色々と触っていきたいと思います。まずはよくある「アラートを表示する」をやってみました。

事前準備

こちらのブログ を通して作成したプロジェクトをベースに進めます。

アラートを表示する

Home.vue にアラートを表示するボタンを置き、そのクリックイベントでアラートを実際に表示します。

<template>
  <div class="ion-page">
    <ion-header>
      <ion-toolbar>
        <ion-title>Hello World</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content class="ion-padding">
      <h1>Welcome To @ionic/vue</h1>
      <img alt="Vue logo" src="../assets/logo.png" />
      <ion-button @click="onClick" full>Go to About Page</ion-button>
      <ion-button @click="showAlert" full>Show Alert</ion-button>
    </ion-content>
  </div>
</template>

<script>
export default {
  name: "home",
  methods: {
    onClick () {
      this.$router.push('about')
    },
    showAlert() {
      return this.$ionic.alertController
        .create({
          header: 'アラートのヘッダー',
          subHeader: 'アラートのサブヘッダー',
          message: 'メッセージ <strong>です</strong>!!!',
          buttons: [
            {
              text: 'キャンセル',
              role: 'cancel',
              cssClass: 'secondary',
              handler: () => {
                console.log('キャンセル')
              },
            },
            {
              text: 'OK',
              handler: () => {
                console.log('OK')
              },
            },
          ],
        })
        .then(a => a.present())
    }
  }
}
</script>

AlertController を使います。インスタンスは this.$ionic.alertController で取得することができます。

create() メソッドで実際に作るアラートの詳細を設定します。 buttons には表示したいボタンを置きつつ handler に関数を渡し、ハンドリングできるようにします。

戻り値は Promise になっているので then() でチェーンし、実際に作成されたインスタンスを present() で表示します。

これで以下のようなアラートが表示されます。

柔軟に利用できるアラートを活用しよう

アラートに表示できる内容は幅広いので、利用率は高いと思います。大事な処理にはホウレンソウをしっかり行いましょう！