kintoneのUI改善!: フィールドに入力された名前のふりがなを自動的に補完する

インターネット通販のおかけで、沖縄のお店では売っていない売っていない便利なものが買えるいい時代に生まれてよかったと思っている、 沖縄生まれ沖縄育ちの與那城(「よなしろ」って読みます!)です。

インターネット通販をしてて、めんどくさいなーと思うことがいくつかあるのですが、その中の一つに購入者の情報を入力する。というものがあります。

もちろん、入力しないと送りようがないので入力するのですが…よくある入力内容として

• 名前(姓)
• 名前(名)
• 姓のふりがな
• 名のふりがな
• 住所
• 連絡先

あたりはよく入力する内容かと思います。 でもできるなら、入力する手間を少しでも省きたいじゃないですか…え?そうでもない?僕は省きたいんです!!!

この中で、フォームにすべて情報をいれつつ、入力する手間を省くとなると… 郵便番号を入れたら住所が補完されるように、名前 → ふりがなが自動的に補完されれればちょっとは楽に…なるんです!(多分)

今、例として通販のフォームの話をしましたが、kintoneアプリを使っていて、通常業務で使用する顧客管理アプリとかでもふりがなを入力することはあると思います。 その手間をすこし省く方法を紹介したいと思います。

今回はkintoneアプリと弊社の gusuku Customine を使ってkintoneアプリをカスタマイズをする方法です。gusuku Customine を使わなくてもJavaScriptでプログラムを書けば同じことが可能ですが、Customineを使ったほうが圧倒的に高速に実装できたのでその方法を紹介していきます。

こうなる!

姓のフィールドに「與那城」という文字を入れると、姓(がな)のフィールドに自動的に「よなしろ」という文字が入るものです。 名のフィールドに「雄」という文字を入れると、候補がいくつかあるので、候補を表示するダイアログを表示し、選択した「ゆう」という文字を入れるようにしています。

何をしているのか

人名辞書アプリを用意します。フィールドは、 「変換前の漢字」フィールドと、テーブルに、「読み方」と「姓・名・姓名」を登録します。

‍

人名辞書アプリはこちらからダウンロードできます。kintoneシステム管理の「アプリテンプレート」の画面で読み込んで使用してください。

また、このアプリで使用する辞書データをダウンロードできます。
zipファイルを展開したあとに「yomi.csv」ファイルをExcelやテキストエディタで開いたのち、32行目までを削除するとkintoneで取り込むことが可能になります。

(辞書データの再配布はyomi.csvに書かれている条件(GPL)に従ってください)

‍

補完したいアプリに入れるカスタマイズを紹介します。おおまかにやっていることを説明すると

1. 人名辞書アブリから変換前の漢字のレコードを取ってくる
2. レコードが存在した場合、読み方テーブルの中の内容を「姓」か「名」かでフィルタリングする
3. 2の結果、読み方の候補が1件だったらその読み方を入れる
4. 2の結果、読み方の候補が2件以上あったらダイアログボックスを出して選択させる
5. レコードが存在しなかったり、読み方の候補がなかったら何もしない

ということをしています。

やっていることは、顧客マスタアプリからルックアップするような感じのことを カスタマイズでやっています。

読みは複数あることもあるので、候補が複数あった場合はダイアログを表示するようにしています。

実際のCustomineでのカスタマイズはこのようになります(姓のみ。名も同じことをやっています)。 姓のみで9アクションでカスタマイズできています。

辞書はどうする…?

辞書はオープンソースで公開されているSKK辞書のうち、人名辞書と沖縄辞書を合成し、人名として使われていると示されているデータのみをkintoneのアプリで取り込めるように加工して取り込みました。

(そうじゃないと沖縄でしか使われてない僕の名前がどうしようもないので…)

この情報を元にして弊社のメンバーの名前を補完してみたところ…7割?8割くらい(ざっくり)はうまく補完できているように思えています。

ただ、辞書自体はkintoneアプリなので必要ならレコードを追加・編集すればどんどん補完ができていくようになります。 (逆に一般的ではない読みも登録されているので除外することを検討してもいいと思います)

他のアプリのレコードを使ってのkintoneでのUI/UXの改善もササっとできる gusuku Customine

gusuku Customineを使ってのカスタマイズの強さと僕が勝手に思っているところの一つに 「他のアプリのレコードを使って行なうカスタマイズ」がすごく楽に実装できるところです。

JavaScript書くにしても、どのアプリからデータを取ってくるか…とか、レコード取ってくるJavaScriptのコードを書くこと自体が若干億劫(個人の感想)だったりします。

Customineでサクっとレコード取ってきて、サクっと利用する。というようなkintoneアプリのカスタマイズでkintoneを使いやすくしてみてください!

この記事にいたるまでの話

長くなるので別の記事で紹介したいと思います。