Monacaでアプリ開発① Vue.jsの利用

Monaca

Monacaは，HTML5でアプリを作成するための開発プラットフォームです． PCで動作するウェブアプリだけでなく，AndroidやiOSで動作するスマートフォン・アプリを開発することができます． クラウドベースの開発環境が利用できるため，ブラウザ（Chrome）さえあれば気軽にアプリ開発に挑戦できます． また，スマートフォンにMonaca Debuggerをインストールすることで， スマートフォン・アプリとしての動作を確認することができます． Monacaをプログラミング教育に用いるMonaca Educationのプランも提供されており， 導入校一覧に椙山女学園大学も掲載されています． Monacaを利用した開発を始める前に下記の準備をしましょう．

• Monacaのアカウントの取得（Googleアカウントでも利用可）
• Monaca Debuggerのスマートフォン（Android，iOS）へのインストール

Vue.js

Vue.jsは，ウェブアプリを制作するためのJavaScriptフレームワークです． JavaScriptのみでスクラッチから開発するよりも，効率的に開発が可能です． 従来はjQueryと呼ばれるJavaScriptライブラリが広く用いられてきましたが， 近年はVue.jsに代表されるJavaScriptフレームワークが採用されるようになりました． Monacaでは，Vue.jsに加え，AngularやReactなどのフレームワークが利用可能ですが， その中でもVue.jsは，初学者にとっても扱いやすいフレームワークとして人気があります． そこで，この授業ではVue.jsを利用したアプリの開発を目標とします．

プロジェクトの作成

準備が出来たら，早速，Monacaにアクセスしましょう． まず最初に，新規にプロジェクトを作成します． 下記の手順に従って，Vue.jsを利用したテンプレートで開発を始めます．

テンプレートの種類

フレームワークテンプレート を選択しましょう．

フレームワーク

Vue.js を選択しましょう．

テンプレート

Onsen UI V2 Vue Minimum を選択しましょう．

プロジェクトの情報

プロジェクト名 に「Monacaでアプリ開発①」， 説明 に「Vue.jsの利用」を設定しましょう．

テンプレートの確認

プロジェクトを作成したら，クラウドIDE で開きます． 最初に /src/App.vue を確認しましょう． App.vue は 単一ファイルコンポーネント（SFC: Single File Component） と呼ばれ， HTML，CSS，JavaScriptをまとめて記述することが可能なファイルです． このテンプレートでは，<template></template>がHTML，<script></script>がJavaScriptで記述されています．

HTML

それでは，HTML部分を確認しましょう． ここで，v-onsで始まるタグは，Onsen UIのコンポーネントです． 例えば，v-ons-toolbarはツールバー，v-ons-buttonはボタンを表しています（詳細な説明は割愛）． 上から，ツールバーの表示，文字列の表示，ボタンの表示で構成されています． ここで，注目したいのは {{ title }}と，@click="alert"の2箇所です． 前者はマスタッシュ（口ひげ）と呼ばれ，後述するVueで定義された変数titleを参照するための記述です． 後者はクリック・イベントを処理するための記述であり，v-onディレクティブと同等の表現です（v-on:click="alert"と記述しても同じ）．

<template>
    <v-ons-page>

      <!-- ツールバーの表示 -->
      <v-ons-toolbar>
        <!-- タイトルの表示 -->
        <div class="center">{{ title }}</div>
        <div class="right">
          <v-ons-toolbar-button>
            <v-ons-icon icon="ion-navicon, material: md-menu"></v-ons-icon>
          </v-ons-toolbar-button>
        </div>
      </v-ons-toolbar>

      <!-- 文字列の表示 -->
      <div style="text-align: center; padding-top:10px">Hello World!</div>

      <!-- ボタンの表示 -->      
      <p style="text-align: center">
        <v-ons-button @click="alert">Click Me!</v-ons-button>
      </p>

    </v-ons-page>
</template>
<script>
  /* JavaScriptのコード */
</script>

JavaScript

次にJavaScript部分を確認しましょう． data(){}は，dataオプション と呼ばれ，JavaScriptの変数を定義します． 定義された変数はHTMLで{{ 変数名 }}で参照することができます． ここでは，変数titleにMy Appを代入しています． また，methods:{}は，methodsオプション と呼ばれ，JavaScriptのメソッドを定義します． 定義された変数はイベント処理などで呼び出すことができます． ここでは，アラートを画面に出力するalert()メソッドが定義されています．

export default{
  data() {
    return {
      title: 'My app' /* タイトル */
    };
  },
  methods: {
    alert() {
      // ボタンをクリックしたときの処理       
      this.$ons.notification.alert('This is an Onsen UI alert notification test.');
    }
  }
};

テンプレートの実行

テンプレートを実行してみましょう． 「Clicke Me!」をクリックすると，alert()メソッドが呼び出され，ダイアログに「This is an Onsen UI alert notification test.」と表示されます．

クイズアプリの開発

テンプレートを改良して クイズアプリ に改良しましょう． 作成するクイズは4択の選択問題とします．

HTML

クイズ問題を表す文字列はquestionに代入し，マスタッシュ{{ question }}で表示します． v-ons-buttonをコピーして，4択の選択肢を表すボタンを表示します． 正解の選択肢はcorrect()，不正解の選択肢はwrong()を呼び出します．

<template>
    <v-ons-page>

      <v-ons-toolbar>
        <div class="center">{{ title }}</div>
        <div class="right">
          <v-ons-toolbar-button>
            <v-ons-icon icon="ion-navicon, material: md-menu"></v-ons-icon>
          </v-ons-toolbar-button>
        </div>
      </v-ons-toolbar>

	  <!-- 文字列の表示（questionをマスタッシュで表示） -->
      <div style="text-align: center; padding-top:10px">{{ question }}</div>

	  <!-- ボタンの表示（4つのボタンを表示） -->
      <p style="text-align: center">
        <v-ons-button @click="wrong">A型</v-ons-button>
        <v-ons-button @click="wrong">B型</v-ons-button>
        <v-ons-button @click="correct">O型</v-ons-button>
        <v-ons-button @click="wrong">AB型</v-ons-button>
      </p>

    </v-ons-page>
</template>
<script>
  /* JavaScriptのコード */
</script>

JavaScript

dataオプション で，titleとquestionを定義します． また，methodsオプションで，correct()とwrong()を定義します． それぞれ，alert()で，「正解」「不正解」と表示します．

export default{
  data() {
    return {
      title: 'クイズ', /* タイトルを変更 */
      question: '向の血液型は？' /* クイズ問題を設定 */
    };
  },
  methods: {
	/* 正解のときの処理 */
    correct() {
      this.$ons.notification.alert('正解！');
    },
	/* 不正解のときの処理 */
    wrong(){
      this.$ons.notification.alert('不正解');
    }
  }
};

実行

クイズアプリを実行してみましょう． 正解のボタンをクリックすると「正解！」，不正解のボタンをクリックすると「不正解」と表示されます．

ダイアログの利用

アラート・ダイアログではなく，標準のダイアログを利用して，正解・不正解を表示するように変更してみましょう． v-ons-dialogで正解と不正解のダイアログを作成します． これらのダイアログの表示・非表示は，correctDialogとwrongDialogの値によって制御されます．

HTML

<!-- 正解のダイアログ -->
<v-ons-dialog cancelable :visible.sync="correctDialog">
  <p style="text-align: center">正解!</p>
</v-ons-dialog>

<!-- 不正解のダイアログ -->
<v-ons-dialog cancelable :visible.sync="wrongDialog">
  <p style="text-align: center">不正解</p>
</v-ons-dialog>

JavaScript

dataオプションでcorrectDialogとwrongDialogを定義し，初期状態はfalseに設定します． correct()メソッド，または，wrong()メソッドが呼ばれると，trueに変更し，ダイアログを表示させます．

export default{
  data() {
    return {
      title: 'クイズ',
      question: '向の血液型は？',
      correctDialog: false, // 正解ダイアログの表示フラグ
      wrongDialog: false // 不正解ダイアログの表示フラグ
    };
  },
  methods: {
    correct() {
      this.correctDialog = true;
    },
    wrong(){
      this.wrongDialog = true;
    }
  }
};

実行

クイズアプリを実行してみましょう．標準のダイアログで正解・不正解が表示されます．

課題

アプリが完成したら，次の課題に挑戦してみよう！

• オリジナルのクイズ問題に変更
• クイズ問題を増やす

プロジェクトのソースコード

• GitHubレポジトリ
• Monacaの公開URL