kintoneカスタマイズにwebpackを導入するメリット
はじめに
この記事では、kintoneカスタマイズにおけるwebpackの使用例を通して、kintoneカスタマイズでwebpackを使うメリットを紹介します。
webpackに関する説明や導入方法は、次の記事で紹介しています。
webpackとBabelを導入してkintoneカスタマイズを効率化する
webpackを導入するメリット
webpackを入れると、いろんなことができます。
-
JSのファイルを分割できる
開発の規模が大きくなるにつれJSファイルも大きくなりますが、webpackを使うことでファイルを分割できます。 -
自作の関数を使い回せる
webpackを使うことで別ファイルに定義した関数を使い回すことができます。 -
アプリIDをどこかにまとめて定義したい
関数だけでなく、定数も同様にまとめて定義して別ファイルから読み込むことができるため、複数アプリの設計情報を1つのファイルで定義できます。 -
npmで公開されているライブラリを使用できる
ライブラリ使用時は、ライブラリのJavaScriptファイルをダウンロードし、個別でkintoneアプリに適用する必要がありますが、webpackを使用すれば個別の適用は不要になります。
使用するエディタ
このシリーズではMicrosoft社が提供している Visual Studio Code を利用します。
Visual Studio CodeはJavaScriptのコードの対応が手厚いのと、コマンドラインも表示できるので便利です。
webpackを動作させるためのコマンドもVisual Studio Codeのコマンドラインから実行しています。
メニュー > 表示 > 統合ターミナルでVisual Studio Code画面下部にターミナルが表示されますので、コマンドはその中で実行できます。
詳細は次のページなどを参照ください。
Visual Studio Codeの使い方、基本の「キ」
複数アプリのカスタマイズを扱う(環境整備編)
冒頭で紹介したwebpackの記事はあくまで導入記事なので、この記事ではもう一歩実用に踏み込んで 複数のアプリをカスタマイズする場合 を考えてみます。
次のURLに複数のアプリをカスタマイズするためのwebpackの設定を用意したのでダウンロードして利用してください。
sample-kintone-webpack-for-intermediate
https://github.com/kintone-samples/sample-kintone-webpack-for-intermediate
git clone
またはリンク先右上の緑色のClone or downloadボタンからZipファイルをダウンロードして利用してください。
以降の導入方法は上記ページのReadmeを確認してください。
ディレクトリ構成
今回は以下のようなディレクトリ(フォルダー)構成になっています。
アプリごとのカスタマイズのディレクトリをまとめる「apps」ディレクトリを、「src」直下に配置します。
その下に「app1」「app2」など、アプリごとのカスタマイズファイル用を配置するディレクトリを作成しています。
以下のコマンドを実行するとアプリごとにカスタマイズファイルがbuildされます。
|
|
buildが完了すると下図のようにdistディレクトリにapp1.js, app2.jsなどのファイル名でJavaScriptが出力されます。
出力されたファイルをkintoneの各アプリに適用することでカスタマイズが実装できます。
src直下のcommonディレクトリには、共通の関数や定数を設置できます。
全体で何かを使いたい場合は必要に応じて用意してください。
複数アプリのカスタマイズを扱う(実践編)
このシリーズでは JavaScriptの便利な書き方にて紹介されているアロー関数などES6で動くコードを書いていきます。
JSファイルを分割する
顧客リストの郵便番号、TEL、メールの入力をチェックするというTipsのように、入力された値に対してバリデーションするというサンプルで考えてみます。
今回は電話番号のみバリデーションをかけてみましょう。
コードは次のようなイメージになると思います。
今回は電話番号のみのチェックですが、Tipsのように郵便番号や電話番号もバリデーションする場合はファイルの内容自体が長くなってしまいそうです。
そこで、import
とexport
文を使ってバリデーションのみ別ファイルにモジュールとして書き、利用できます。
「common/validations.js」内にvalidTel
関数を用意し、export
する
app側でimport
して利用する
上記のようにexport
すると別ファイルでimport
ができます。
詳しくは次のリファレンスを参考ください。
自作関数を使いまわす
前述のように一度export
したものは、別のファイルでも使い回せるので便利です。
今回のバリデーション関数のように、汎用的なものはどのファイルでも使えるよう、共通で利用できるようにしておくといいですね。
次のようにバリデーションの種類を増やしていくようなことも可能です。
「common/validations.js」に郵便番号のバリデーションを追加する
app側で郵便番号のバリデーションを利用する
アプリIDなどkintoneアプリの設計情報をまとめて定義する
前述の自作関数の定義に加え、各アプリのアプリIDなどを定数としてまとめることができます。
今回は「src/common/app_ids.js」というファイルに各アプリのIDを定義し、app側から参照してみましょう。
サンプルでapp3をそのようにしています。
「app_ids.js」でアプリIDを定義する
「app3.js」で定義したアプリIDを呼び出す
npmで公開されているライブラリを使用する
JavaScriptのライブラリは
npm
で多数公開されており、実現したいことはすでにライブラリとして用意されている場合もあります。
今回はサンプルとしてjQueryを利用してみます。
これまでのカスタマイズでは、次のどちらかの方法でライブラリを利用していたと思います。
- jQuery.min.jsなどのファイルを手動でダウンロードしkintoneにアップロードする。
- Cybozu CDNなどCDNサービスで提供されるURLを設定する。
npmでライブラリをインストールする場合はその必要もなく、さきほどのようにimport文を使うことで利用できます。
jQueryのインストール
下記をコマンドラインに入力し実行します。
|
|
実行完了後、「app1.js」にあるようにjQueryをimport
して利用できます。
おわりに
kintone JavaScriptカスタマイズをさらにレベルアップさせるため、手始めに今回は開発環境を用意しました。
これで、複数アプリをワンソースで扱えますし、npmで公開されている便利なライブラリや、自分で定義する関数や定数も使い回せるようになりました。
このTipsは、2020年2月版kintoneで動作を確認しています。