この記事では、kintoneカスタマイズにおけるwebpackの使用例を通して、kintoneカスタマイズでwebpackを使うメリットを紹介します。

webpackに関する説明や導入方法は、次の記事で紹介しています。
webpackとBabelを導入してkintoneカスタマイズを効率化する

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の設定を用意したのでダウンロードして利用してください。

https://github.com/kintone-samples/sample-kintone-webpack-for-intermediate

git cloneまたはリンク先右上の緑色のClone or downloadボタンからZipファイルをダウンロードして利用してください。
以降の導入方法は上記ページのReadmeを確認してください。

今回は以下のようなディレクトリ（フォルダー）構成になっています。

アプリごとのカスタマイズのディレクトリをまとめる「apps」ディレクトリを、「src」直下に配置します。
その下に「app1」「app2」など、アプリごとのカスタマイズファイル用を配置するディレクトリを作成しています。
以下のコマンドを実行するとアプリごとにカスタマイズファイルがbuildされます。

1
2
3
4

npm run build --mode development # 開発時

# リリース時は次のコマンドで圧縮なども実施される
# npm run build --mode production

buildが完了すると下図のようにdistディレクトリにapp1.js, app2.jsなどのファイル名でJavaScriptが出力されます。

出力されたファイルをkintoneの各アプリに適用することでカスタマイズが実装できます。

src直下のcommonディレクトリには、共通の関数や定数を設置できます。
全体で何かを使いたい場合は必要に応じて用意してください。

このシリーズでは JavaScriptの便利な書き方 にて紹介されているアロー関数などES6で動くコードを書いていきます。

顧客リストの郵便番号、TEL、メールの入力をチェックする というTipsのように、入力された値に対してバリデーションするというサンプルで考えてみます。
今回は電話番号のみバリデーションをかけてみましょう。

コードは次のようなイメージになると思います。

今回は電話番号のみのチェックですが、Tipsのように郵便番号や電話番号もバリデーションする場合はファイルの内容自体が長くなってしまいそうです。

そこで、importとexport文を使ってバリデーションのみ別ファイルにモジュールとして書き、利用できます。

「common/validations.js」内にvalidTel関数を用意し、exportする

app側でimportして利用する

上記のようにexportすると別ファイルでimportができます。
詳しくは次のリファレンスを参考ください。

• mdn web docs： import文
• mdn web docs： export文

前述のように一度exportしたものは、別のファイルでも使い回せるので便利です。
今回のバリデーション関数のように、汎用的なものはどのファイルでも使えるよう、共通で利用できるようにしておくといいですね。

次のようにバリデーションの種類を増やしていくようなことも可能です。

「common/validations.js」に郵便番号のバリデーションを追加する

app側で郵便番号のバリデーションを利用する

前述の自作関数の定義に加え、各アプリのアプリIDなどを定数としてまとめることができます。
今回は「src/common/app_ids.js」というファイルに各アプリのIDを定義し、app側から参照してみましょう。
サンプルでapp3をそのようにしています。

「app_ids.js」でアプリIDを定義する

「app3.js」で定義したアプリIDを呼び出す

JavaScriptのライブラリは npm で多数公開されており、実現したいことはすでにライブラリとして用意されている場合もあります。
今回はサンプルとしてjQueryを利用してみます。

これまでのカスタマイズでは、次のどちらかの方法でライブラリを利用していたと思います。

• jQuery.min.jsなどのファイルを手動でダウンロードしkintoneにアップロードする。
• Cybozu CDN などCDNサービスで提供されるURLを設定する。

npmでライブラリをインストールする場合はその必要もなく、さきほどのようにimport文を使うことで利用できます。

npmとは

下記をコマンドラインに入力し実行します。

1

npm install jquery

実行完了後、「app1.js」にあるようにjQueryをimportして利用できます。

kintone JavaScriptカスタマイズをさらにレベルアップさせるため、手始めに今回は開発環境を用意しました。
これで、複数アプリをワンソースで扱えますし、npmで公開されている便利なライブラリや、自分で定義する関数や定数も使い回せるようになりました。

このTipsは、2020年2月版kintoneで動作を確認しています。