m_shige1979のときどきITブログ

プログラムの勉強をしながら学習したことや経験したことをぼそぼそと書いていきます

Github(変なおっさんの顔でるので気をつけてね)

https://github.com/mshige1979

cordovaでプラグインのサンプルを作ってみる

corodovaでプラグインを作ったことはない

プラグインを作成した記事はあまり見かけないので良くわからないから見よう見まねでやってみた

環境

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();

結果

f:id:m_shige1979:20150706002342p:plain

なんとかここまではできた

所感

これでどのようなことが可能なのかはまだ検討が付かないけど、htmlとjavaのソースを分離して対応できるようになるかもしれない。
プラグインでどこまでのことが可能かはわからないけど…
カメラを起動するとかも既にあるやつで確認できているのでちょっと調べてみよう。

補足

javascriptを修正してもビルドが走らないことがあるかもしれないのでcordovaで実行する際は気をつけないといけない