業務システムで住所のマスターをどのように保持するか、というのはいつでも悩ましい問題です。
今回は、マスターデータをアプリに持って、それを参照してごく簡単な住所の入力支援プルダウンを作る方法をご紹介します。
都道府県を選択したら、次にその都道府県で絞り込まれた市区町村を選択するという動きの、いわゆる多段プルダウンです。
Customineの基本的な事柄は、こちらの「はじめてのカスタマイズ」をご参照ください。
利用想定シーン
今回は、総務省が提供している「全国地方公共団体コード」をマスターとして利用し、都道府県と市区町村名のプルダウンを作成するカスタマイズをCustomineで作成してみます。都道府県のプルダウンを選択すると、それに基づいて絞り込まれた市区町村名のプルダウンが作成される、というカスタマイズです。
住所に限らず、大項目を選択したら中項目を選択肢として表示し、中項目を選択したら小項目を表示するような、多段階のプルダウンを作成することができます。
事前準備:住所マスターの作成
総務省のサイト:http://www.soumu.go.jp/denshijiti/code.html
上記URLより、「都道府県コード及び市区町村コード」のExcelファイルをダウンロードして下さい。このExcelファイルを使って、新しくアプリを作成し、これをマスターとします。
まず、2019年5月の時点のファイルには、不要な2列(FとG列)が含まれていますので、これを削除します。
次に、A列(団体コード)の書式を文字列に設定します。この手順をせずにCSV出力してしまうと、団体コードの先頭の0が失われ、結果的に「北海道」ではなく「群馬」が先頭に来る状態になってしまいます。ご注意ください。
最後に、ダウンロードしたExcelファイルの「R1.5.1現在の団体」というシートの1行目を編集して改行無しにします。
修正前
修正後
その後に、一旦文字エンコーディングUTF-8のCSVファイルで保存し直して下さい(Excelファイルの場合、1000行までの制限がありますのでこれを回避するためです)。
読み込む際には、以下のように全て文字列として読み込んでおきましょう。
アプリが完成したら、そのアプリの設定に進みます。アプリ名を「都道府県コード及び市区町村コード」などとわかりやすい名前に変更しておきましょう。
また、レコード取得の際に利用するので、フィールドコードをフィールド名と合わせるなど、分かりやすいものに変更しておきましょう。ここでは「団体コード」「都道府県名」「市区町村名」の3つのフィールドを設定しておきました。
事前準備:kintoneアプリ側の設定
用意した住所マスターを使ってプルダウンを生成するために、kintoneアプリ側に必要なフィールドを設定しておきます。
以下のようなフォームをあらかじめ用意しておきます。今回は2つのプルダウンを作成しますので「pref」「city」という2つのスペースと、選択した結果の都道府県と市区町村名を入れておくフィールド、そしておまけですが団体コードを入れておくフィールドを用意しました。
Customineの設定:都道府県のレコード取得
このアプリに対して、Customineを使ってプルダウンを作成していきます。まずは都道府県のプルダウンを作成するためのレコードを取得します。
「都道府県コード及び市区町村コード」のデータを見ると、都道府県をあらわす行は市区町村名が空白になっていますので、そのようなデータを取得すると良さそうです。以下のように設定します。
「やること」にカテゴリー:レコードから「クエリで条件を指定してレコードを取得する」を選択します
「取得先アプリ」には先程追加した「都道府県コード及び市区町村コード」のアプリを選択します。もし追加したばかりで一覧になければ「追加」をクリックしてアプリを追加して下さい
「検索条件」には「市区町村名 = "" order by 団体コード asc」のように指定します。検索条件パラメータの記述については、こちらをご覧下さい。
やることの設定はこれで完了です。「条件」には、「追加画面・編集画面を表示した時」を選択しておきましょう。「一覧画面の鉛筆を押した時」は「含めない」を選択しておきましょう。
都道府県のプルダウンの作成
次に、このレコードを利用して都道府県のプルダウンを作成します。
「やること」にカテゴリー:その他のUIから「フィールド値をレコードから選択するプルダウンを作成する」を選択します
「データ保存フィールド」には「都道府県」を選択します
「スペース」には「pref」を選択します
「レコード」には先程設定したレコード取得のアクションを選択します
「表示するフィールド」と「値となるフィールド」にはそれぞれ「都道府県名」を選択します
これで取得したレコードでプルダウンが作成されます。
「条件」は「他のアクションが完了した時」で、アクションには先程設定したレコード取得のアクションを選択しておきます。
全体の設定としてはこのような形になります。
ここまでで一旦、「kintoneアプリへ登録」して動きを確認してみてください。
以下のようなプルダウンが作成されましたでしょうか?
もし何かエラーが出た場合、JavaScriptコンソールを開いてログを確認してみて下さい。
のように、実際に発行されている検索条件を確認することが出来ますので、この部分に誤りがないかを確認して下さい。
市区町村名のプルダウンの作成
続いて、選択された都道府県に基づいて、市区町村名のプルダウンを作成します。「クエリで条件を指定してレコードを取得する」を利用するのですが、少し検索条件が変わってきます。以下のように設定します。
「やること」にカテゴリー:レコードから「クエリで条件を指定してレコードを取得する」を選択します
「取得先アプリ」には先程と同じく「都道府県コード及び市区町村コード」のアプリを選択します
「検索条件」にはフィールドの値を使った式を書きますので、少し複雑になります。都道府県名に選択された都道府県を入れて、市区町村名は空以外のレコードを取得するための条件を書きます。
ここでは「都道府県名 = "${都道府県}" and 市区町村名 != "" order by 団体コード asc」のように指定します。
やることの設定はこれで完了です。
これを都道府県の選択に基づいてレコード取得するようにしたいので、「条件」には、「フィールドの値を編集して値が変わった時」を選択します。「フィールド」には「都道府県」を選択します。「一覧画面の鉛筆を押した時」は「含めない」を選択しておきましょう。
設定は以下のようになります。
続いて、このレコードを元にプルダウンを作成します。先ほどとほぼ同じですね。
「やること」にカテゴリー:その他のUIから「フィールド値をレコードから選択するプルダウンを作成する」を選択します
「データ保存フィールド」には「市区町村」を選択します
「スペース」には「city」を選択します
「レコード」には先程設定した市区町村のレコード取得のアクションを選択します
「表示するフィールド」と「値となるフィールド」にはそれぞれ「市区町村名」を選択します
これで取得したレコードでプルダウンが作成されます。
「条件」は「他のアクションが完了した時」で、アクションには先程設定した市区町村名のレコード取得のアクションを選択しておきます。
設定は以下のようになります。
これでプルダウンの作成は完成です。「kintoneアプリへ登録」して動きを確認してみてください。
選択した都道府県に対応したプルダウンが作成されましたでしょうか?
編集画面での対応
ここまでで、新規の追加画面で思ったように動きましたね。
あとは、これを編集画面でも動作するようにしたいと思います。編集画面を表示したときは初期値が既に入っていますので、「値が変わった時」にプルダウンのデータを用意するのではなく、表示した段階で用意するようにします。
具体的には以下の手順で行います。
まず、いま設定していたページを、コピーしてください。右上のアイコンからコピー可能です。
次に、やること「フィールド値をレコードから選択するプルダウンを作成する」の条件を、「他のアクションの実行が完了した時」に変更します。
【[テンプレート] 住所をプルダウンで入力】で新規に作成した場合には、コピーした2ページ目にあるアクション番号10番と12番の条件が変更する対象になります。
(記述が前後していますが、12番は後述の「おまけ」に含まれているアクションになります)
設定するアクションは、それぞれ1つ上のアクション番号を指定してください。
コピーしたページの変更した設定は、以下の部分になります。
おまけ:団体コードの取得
これはおまけですが、最後にこのマスタに含まれる団体コードを利用して、住所データを管理することを考えてみましょう。これは、検索条件の書き方の練習にもなりますので、ぜひやってみて下さい。
選択された都道府県と市区町村を元に、団体コードを持つレコードを取得します。そのレコードの値をフィールドにセットします。そして、団体コードは入力できないように無効化しておくと良いでしょう。
こちらは皆さんで考えていただくとして、詳細の手順は記述しません。おそらく、以下のようになるかと思いますので参考にして下さい。
最終的には、以下のような入力支援画面が完成しました。
まとめ
マスターアプリのデータを元に、プルダウンを作成するカスタマイズは以上になります。プルダウンを分類ごとに分けてどんどん絞り込んでいくようなカスタマイズも、簡単に実装できることがお分かりいただけたのではないでしょうか。
マスターを元にプルダウンを作成することで、例えばカラムの並び順や日付によるマスターデータの差し替え(例えば季節ごとに更新されるマスターデータの適切な参照)なども、検索条件を工夫することで柔軟に対応することが可能になります。
この例ではマスターアプリは1つですが、複数のアプリであっても問題なく実行できますので、ぜひお試しください。