Monacaに新しく追加された『プラグイン組み込み機能』のご紹介です。
※プラグイン組み込み機能はMonacaをProfessional/Business/Enterpriseプランにてご利用頂いている方のみ利用可能です
これまでMonacaでアプリを作る時に「ネイティブの機能があと一歩たりない」と思ったことはありませんか？
私はかなりあります。
『プラグイン組み込み機能』によって、ユーザーがそれぞれ自分が欲しいネイティブで機能をプラグインとして追加できるようになりました。
本記事ではプラグイン組み込み機能の使い方を紹介します。
※プラグイン作成方法はこちらのマニュアルを参照してください
※マニュアルよりサンプルと同じファイルがダウンロードできます
![]()
![]()
![]()
アップロードされるとプラグインリストにインストールしたHelloWorldPluginが表示されます。
![]()
index.htmlを下記のように書き換えます。
プラグイン実行時の引数の"HelloWorldPlugin"はplugin.xmlでプラグイン名として指定した名称、
"say"はiOSではネイティブのインスタンスメソッドの名称に合致するものです。
IDEのメニュー「ビルド」よりiOSまたはAndroidのビルドを実行します。
ビルドが成功すると以下のようなダイアログが表示されます。
![]()
※この時「ビルドログ」でプラグインインストールが成功していることを確認できます
ビルドしたアプリを実機にインストールしてアプリを実行すると、
以下のようにプラグインの実行を確認することができます。
![]()
※現在、プラグイン組み込み機能はアプリビルドのみ対応しています。
※組み込んだプラグインの動作を確認するためにはアプリビルドし、実際の端末へインストールする必要があります。
またMonaca IDEでは組み込んだネイティブコードを編集することができるようになりました。
IDEのファイルツリーから「cordova_plugins」フォルダーを開いていくとプラグインのソースを編集することができます。
![]()
※プラグイン組み込み機能はMonacaをProfessional/Business/Enterpriseプランにてご利用頂いている方のみ利用可能です
これまでMonacaでアプリを作る時に「ネイティブの機能があと一歩たりない」と思ったことはありませんか？
私はかなりあります。
『プラグイン組み込み機能』によって、ユーザーがそれぞれ自分が欲しいネイティブで機能をプラグインとして追加できるようになりました。
本記事ではプラグイン組み込み機能の使い方を紹介します。
1. PhoneGap(Cordova)プラグインの準備
今回はサンプルプラグインを使います。
※プラグイン作成方法はこちらのマニュアルを参照してください
※マニュアルよりサンプルと同じファイルがダウンロードできます
2. プロジェクトを作成
2.1 ダッシュボードから『新しいプロジェクト』を選択します。
2.2 『最小限のプロジェクト』テンプレートを選択し、プロジェクトを作成します
3. プラグイン設定
3.1 手順2で作成したプロジェクトのIDE画面を開きます
3.2 メニューの「設定」から「プラグイン設定」を選択します
3.3 「Cordovaプラグインのインポート」を選択し、手順1で準備したプラグインをzip形式でアップロードします
アップロードされるとプラグインリストにインストールしたHelloWorldPluginが表示されます。
4. プラグイン機能の呼び出しを実装
index.htmlを下記のように書き換えます。
- <!DOCTYPE
HTML> - <html>
- <head>
<meta charset="utf-8"> <script src="plugins/plugin-loader.js"></script> <link rel="stylesheet" href="plugins/plugin-loader.css"> <script> //イベントリスナーに追加 document.addEventListener("deviceready", onDeviceReady, false); //PhoneGapの読み込みが完了した時に実行される function onDeviceReady() { //プラグインの実行 cordova.exec(success, fail, "HelloWorldPlugin","say", []); //Success callbackメソッド function success(result){ alert(result); } //Fail callbackメソッド function fail(){ alert("error!"); } } </script> - </head>
- <body>
Hello Plugin! - </body>
- </html>
プラグイン実行時の引数の"HelloWorldPlugin"はplugin.xmlでプラグイン名として指定した名称、
"say"はiOSではネイティブのインスタンスメソッドの名称に合致するものです。
4.ビルド
IDEのメニュー「ビルド」よりiOSまたはAndroidのビルドを実行します。
ビルドが成功すると以下のようなダイアログが表示されます。
※この時「ビルドログ」でプラグインインストールが成功していることを確認できます
ビルドしたアプリを実機にインストールしてアプリを実行すると、
以下のようにプラグインの実行を確認することができます。
※現在、プラグイン組み込み機能はアプリビルドのみ対応しています。
※組み込んだプラグインの動作を確認するためにはアプリビルドし、実際の端末へインストールする必要があります。
Extra
またMonaca IDEでは組み込んだネイティブコードを編集することができるようになりました。
IDEのファイルツリーから「cordova_plugins」フォルダーを開いていくとプラグインのソースを編集することができます。