kintoneカスタマイズにwebpackを導入するメリット

目次

はじめに

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

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

webpackを導入するメリット

webpackを入れると、いろんなことができます。

使用するエディタ

このシリーズではMicrosoft社が提供している Visual Studio Code (External link) を利用します。

Visual Studio CodeはJavaScriptのコードの対応が手厚いのと、コマンドラインも表示できるので便利です。
webpackを動作させるためのコマンドもVisual Studio Codeのコマンドラインから実行しています。

メニュー > 表示 > 統合ターミナルでVisual Studio Code画面下部にターミナルが表示されますので、コマンドはその中で実行できます。

詳細は次のページなどを参照ください。
Visual Studio Codeの使い方、基本の「キ」 (External link)

複数アプリのカスタマイズを扱う(環境整備編)

冒頭で紹介したwebpackの記事はあくまで導入記事なので、この記事ではもう一歩実用に踏み込んで 複数のアプリをカスタマイズする場合 を考えてみます。

次のURLに複数のアプリをカスタマイズするためのwebpackの設定を用意したのでダウンロードして利用してください。

sample-kintone-webpack-for-intermediate

https://github.com/kintone-samples/sample-kintone-webpack-for-intermediate (External link)

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で動くコードを書いていきます。

JSファイルを分割する

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

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

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

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

「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 (External link) で多数公開されており、実現したいことはすでにライブラリとして用意されている場合もあります。
今回はサンプルとしてjQueryを利用してみます。

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

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

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

npmとは (External link)

jQueryのインストール

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

1
npm install jquery

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

おわりに

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

information

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