Android用のハイブリッドアプリを構築してみる。。。～Cordovaプラグインの追加・実装～

はじめに

前回の記事（こちら）でvueプロジェクトにcordovaを追加するプロジェクトを作成しました。
今回は、そのプロジェクトでcordovaのプラグインでダイアログ・トースター表示・カメラなどを試してみたいと思います。

使うcordovaプラグイン

• ダイアログ
• トースター
• カメラ

環境のおさらい

メインのvueプロジェクト

• メインとなるvueのプロジェクトは、「vuecordova」フォルダにあります。
• 「vuecordova」プロジェクト配下には、「src-cordova」フォルダがあり、このフォルダがcordovaプロジェクトのルートフォルダとなります。
  vuecordovaプロジェクトをビルドすると、「src-cordova/www」フォルダにビルドされたリソースが格納されます。

cordovaプロジェクト

• cordovaプロジェクトフォルダになります。

cordovaプラグインの追加

cordova plugin addでプラグインを追加する

cordovaプロジェクトのフォルダで実行する必要があります

>cd src-cordova
>cordova plugin add cordova-plugin-dialogs
>cordova plugin add cordova-plugin-camera
>cordova plugin add cordova-plugin-toaster

cordovaプラグインの確認

>cordova plugin ls
cordova-plugin-camera 4.1.0 "Camera"
cordova-plugin-dialogs 2.0.2 "Notification"
cordova-plugin-toaster 0.0.1 "Toaster Plugin"
cordova-plugin-whitelist 1.3.4 "Whitelist"

プラグインを呼び出す実装を行う

<template>
  <div class="home">
    <sui-button primary @click="javascriptAlert">javascript alert</sui-button>
    <br><br>
    <sui-button primary @click="cordovaAlert">cordova plugin dialog alert</sui-button>
    <br><br>
    <sui-button primary @click="javascriptConfirm">javascript confirm</sui-button>
    <br><br>
    <sui-button primary @click="cordovaConfirm">cordova plugin dialog Confirm</sui-button>
    <br><br>
    <sui-button primary @click="cordovaToaster">cordova plugin dialog Toaster</sui-button>
    <br><br>
    <sui-button primary @click="cordovaCamera">cordova plugin dialog Camera</sui-button>
    <img :src="imgData" />
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'Home',
  data: function(){
    return {
      imgData : ""
    }
  },
  components: {
    HelloWorld
  },
  methods: {
    javascriptAlert: function() {
      alert("hogehoge");
    },
    cordovaAlert: function(){
      navigator.notification.alert("aaa", function(){}, "タイトル", "OK!");
    },
    javascriptConfirm: function(){
      const ret = confirm("○○ですか？");
      alert(ret);
    },
    cordovaConfirm: function(){
      navigator.notification.confirm("××ですか？", function(result){alert(result)}, "タイトル", "OK!, No!");
    },
    cordovaToaster: function(){
      navigator.showToast('CordovaToasterでshowTast');
    },
    cordovaCamera: function(){
      navigator.camera.getPicture((imageData) => {this.imgData = "data:image/jpeg;base64," + imageData;}, function(message){alert(message)}, {});
    }
  }
}
</script>

• ボタンを押下した際に、notificationやshowToastやcameraを呼び出すようにしています。
• 画面表示のイメージの比較のため、JavaScriptのalertとconfirmも呼び出す実装を入れています。
• sui-buttonは、semantic UIのボタンを表示するコンポーネントです。

ビルド＆実機デバッグの実行

vueプロジェクトのビルド

これはvueプロジェクト直下で実行する。 ビルドをすることで、「src-cordova/www」にビルド結果が格納されます。

npm run build

実機デバッグの実行

ちょっと時間がかかりますが、USB接続しているAndroid端末にアプリがインストールされて、実行されます。

cd src-cordova
cordova run android --device

実行結果

• 画面表示
  

• JavaScriptのalert関数を実行
  

• Cordovaプラグインのnavigator.notification.alertを実行
  

• JavaScriptのconfirm関数を実行
  

• Cordovaプラグインのnavigator.notification.confirmを実行
  

• Cordovaプラグインのnavigator.showToastを実行

  • 画面の下にメッセージが表示されます

• Cordovaプラグインのnavigator.camera.getPictureを実行

  • カメラが起動します。
    

まとめ・・・

navigator.notification.alertとnavigator.notification.confirmは、JavaScriptのalertとconfirmと見た目はあまり変わりませんね。。。
navigator.showToastを使うことで、アプリっぽい表示ができますね。