サード・パーティJavaScriptライブラリの操作

カスタム・コードでそのライブラリ内の関数、オブジェクトおよび変数を使用する場合は、Visual Builderでサード・パーティのJavaScriptライブラリを参照できます。

コード内の外部JavaScriptライブラリを参照するには、JavaScriptライブラリをapplicationのリソースにインポートし、モジュールにロードするファイルを参照するカスタム・コードを追加する必要があります。

JavaScriptライブラリをアーカイブとしてapplicationにインポートします。
1. Web Appsペインで、「リソース」フォルダに移動し、jsを右クリックして、「インポート」をクリックします。
  ソース・ビューを使用している場合は、webApps/<webapp>/resources/jsに移動し、「インポート」をクリックします。
  ファイルを直接resourcesフォルダにインポートすることもできますが、すべてのJavaScriptファイルをresources/jsフォルダに保持することをお薦めします。
2. インポートするアーカイブを選択し、「インポート」をクリックします。
カスタム・コードを定義し、モジュールにロードするファイルを参照します。そのためには、define文を使用します。この文では、ファイルへのパスと、コードでインポートされたライブラリを参照する別名を指定します。
次に、gl-matrix-min.jsライブラリに使用されるdefine文の例、ベクトル、行列および関連する線形代数演算(applicationのresources/jsフォルダにインポートされたもの)を示します:
```
define(['resources/js/gl-matrix-min'], (glmatrix) => {
  'use strict';

  class AppModule {
    createVec3(form) {
      let myVec3 = glmatrix.vec3.create();
      glmatrix.vec3.set(myVec3, 0,0, 2.0);
      return myVec3;
    }
  }
  
  return AppModule;
});
```
JSファイルの名前にresources/jsを追加するだけで、ファイルが参照されることに注意してください(.js拡張子は必要ありません)。インポートに名前を付けるために使用される別名glmatrixにも注意してください。この別名は、ライブラリ内のオブジェクトおよび関数の参照に使用する名前です。

ヒント:

JavaScriptライブラリをアプリケーションのリソースにインポートし、設定エディタで「インポート」を使用して、JavaScriptファイルにコードを追加せずにアプリケーションでコールできるインポート済リソースへの参照を作成することもできます。「カスタム・コンポーネント、CSSおよびモジュール・インポートの管理」を参照してください。