cordovaでプラグインのサンプルを作ってみる
環境
android 5.x
cordova 5.x
corodovaのプロジェクトを作成
作成
cordova create sample01 com.example.mshieg1979 Sample01 -d
androidの環境を追加
cd sample01 cordova platform add android
AndroidStudioの環境で開くようにする
実装
res/xml/config.xmlを編集
<feature name="MyFirstPlugin"> <param name="android-package" value="com.example.mshieg1979.MyFirstPlugin" /> </feature>
※末尾のwidgetの前に追加
src配下でプラグインのコードを実装
package com.example.mshieg1979; import android.widget.Toast; import org.apache.cordova.CallbackContext; import org.apache.cordova.CordovaPlugin; import org.json.JSONArray; import org.json.JSONException; public class MyFirstPlugin extends CordovaPlugin{ @Override public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException{ callbackContext.success(); android.widget.Toast.makeText( this.cordova.getActivity(), args.getString(0), Toast.LENGTH_SHORT ).show(); return true; } }
index.jsに追加
/* * Licensed to the Apache Software Foundation (ASF) under one * or more contributor license agreements. See the NOTICE file * distributed with this work for additional information * regarding copyright ownership. The ASF licenses this file * to you under the Apache License, Version 2.0 (the * "License"); you may not use this file except in compliance * with the License. You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, * software distributed under the License is distributed on an * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY * KIND, either express or implied. See the License for the * specific language governing permissions and limitations * under the License. */ var app = { // Application Constructor initialize: function() { this.bindEvents(); }, // Bind Event Listeners // // Bind any events that are required on startup. Common events are: // 'load', 'deviceready', 'offline', and 'online'. bindEvents: function() { document.addEventListener('deviceready', this.onDeviceReady, false); }, // deviceready Event Handler // // The scope of 'this' is the event. In order to call the 'receivedEvent' // function, we must explicitly call 'app.receivedEvent(...);' onDeviceReady: function() { app.receivedEvent('deviceready'); var btn1 = document.getElementById("btn1"); btn1.addEventListener("click", function(){ var text1 = document.getElementById("text1"); var data = text1.value; cordova.exec(function(){ console.log("プラグイン呼び出し成功"); }, function(){ console.log("プラグイン呼び出し失敗"); }, 'MyFirstPlugin', 'actionName', [data]); }, false); }, // Update DOM on a Received Event receivedEvent: function(id) { // var parentElement = document.getElementById(id); // var listeningElement = parentElement.querySelector('.listening'); // var receivedElement = parentElement.querySelector('.received'); // // listeningElement.setAttribute('style', 'display:none;'); // receivedElement.setAttribute('style', 'display:block;'); // // console.log('Received Event: ' + id); } }; app.initialize();
結果
なんとかここまではできた
所感
これでどのようなことが可能なのかはまだ検討が付かないけど、htmlとjavaのソースを分離して対応できるようになるかもしれない。
プラグインでどこまでのことが可能かはわからないけど…
カメラを起動するとかも既にあるやつで確認できているのでちょっと調べてみよう。
補足
javascriptを修正してもビルドが走らないことがあるかもしれないのでcordovaで実行する際は気をつけないといけない