Konyで外部ライブラリをインポートする方法

目次

1.はじめに
2.実装方法
3.まとめ

はじめに

外部ライブラリとは、他の開発者が作成した様々な関数をパッケージにしたもので、用途に応じてインポートして関数を使用することができます。
例えば、チャットアプリを作成したい時には、データの送受信に役立つ機能がパッケージ化された外部ライブラリをインポートすることで、自分で一から作成することなく欲しい機能を実装することができます。
この記事では、Konyで外部ライブラリをインポートする方法をご紹介します。
それでは解説していきます。

実装方法

ライブラリ内のアラートを出すメソッドを、Formに設置したボタンで呼び出すデモを作成しながら解説していきます。
完成イメージはこちらです。

今回は分かりやすいように、インポートする jsファイル(ライブラリ)を作成します。
アラートを出す処理を記載したsetAlert.jsを作成しました。こちらをKonyにインポートします。

setAlert.js

define(function(){  
  function setAlertSample(){
    alert('Konyでライブラリをインポート');
  }
  return {
    setAlertSample : setAlertSample
  };
});

Konyでは、外部ライブラリに対してFormやCompornentのようにインポート機能がないため、対象のファイルを直接フォルダーに入れていきます。
パスは以下の通りです。
"Project" > modules > require

requireフォルダに対象のファイルを追加したら、File > Refreshでプロジェクトを更新します。Project> Modules > require に追加したファイルがあることを確認してください。

デモの作成

ボタンを押すことで追加したsetAlert.js内のSetAlertを呼び出すデモを作成します。

1. Widgetの作成
Formを作成して、Button Widgetを作成します。

2. frmControllerに処理を追加
ボタンを押した際に動くonClickメソッドを作成します。

formDemoController.js

  onClick : function() {
    require(['setAlert'], function(setAL) {
      setAL.setAlertSample();	
    });
  }

module > require に格納したsetAlertをrequireメソッドで取得してsetAlertSampleを実行しています。functionの引数には、setAlertメソッドでreturnした中身が格納されています。

setAlert.js

  return {
    setAlertSample : setAlertSample
  };

複数のmoduleを使用したい時は、以下のように指定することができます。
require(['xxx'],['yyy']), function(XX, YY) {})

3. Actionの紐付け
Controllerで作成したonClickをButtonに紐付けます。
Buttonを選択して、右のActionタブ > onClick横のEdit > Invoke Function > onClickを選択します。

4.ビルド結果

まとめ

今回はKonyで外部ライブラリをインポートする方法について紹介いたしました。
ライブラリのインポート以外にも、requireを使えばソースを役割ごとに分けてコードの可読性をあげることも可能です。是非、お試しください！

参考