CRUD Lab. Tech Blog

ギークス株式会社の沖縄開発拠点CRUDLab. (クラッドラボ)のIT技術(テック)ブログ。kintoneやAngularJSによる開発を行っています。

【kintone】全角カタカナ名をイニシャルで表示しよう

0. 目次

1. 概要

ギークス株式会社CRUD Lab.のKUNISADAです!

全角カタカナ名をイニシャルで表示しよう

ということで、今回は全角カタカナの名前をイニシャルに変換するシンプルな方法をまとめます。

2. イメージ図

例)グシケン ミリコ

→G・M

f:id:crud_lab_editor:20160216143640g:plain

3. 準備

3-1 フィールド

フィールド名 フィールドコード 初期値 その他
セイ lastname_kana
メイ firstname_kana
イニシャル表示 initial_name

f:id:crud_lab_editor:20160216144056p:plain

3-2 必要fileの読み込み

//カスタム用のjsファイル
test.js

f:id:crud_lab_editor:20160216144101p:plain

4. 実装

(function () {

    'use strict';

    /*--全角カタカナをチェックする関数--*/
    function checkKana(kanaName){
        var pattern = /^[ァ-ン]+$/;
        if (kanaName !== undefined){
            //定義したパターンにマッチするか確認
            if (kanaName.match(pattern)) return true; //マッチする場合(チェックOK)
        }
        return false;
    }

    /*--イニシャル作成の関数--*/
    function initialCheck(initialName){
        switch(initialName){
            case 'ア':return 'A';break;
            case 'イ':return 'I';break;
            case 'ウ':return 'U';break;
            case 'エ':return 'E';break;
            case 'オ':return 'O';break;
            case 'カ':case 'キ':case 'ク':case 'ケ':case 'コ':return 'K';break;
            case 'サ':case 'シ':case 'ス':case 'セ':case 'ソ':return 'S';break;
            case 'タ':case 'チ':case 'ツ':case 'テ':case 'ト':return 'T';break;
            case 'ナ':case 'ニ':case 'ヌ':case 'ネ':case 'ノ':return 'N';break;
            case 'ハ':case 'ヒ':case 'フ':case 'ヘ':case 'ホ':return 'H';break;
            case 'マ':case 'ミ':case 'ム':case 'メ':case 'モ':return 'M';break;
            case 'ヤ':case 'ヰ':case 'ユ':case 'ヱ':case 'ヨ':return 'Y';break;
            case 'ラ':case 'リ':case 'ル':case 'レ':case 'ロ':return 'R';break;
            case 'ワ':return 'W';break;
            case 'ガ':case 'ギ':case 'グ':case 'ゲ':case 'ゴ':return 'G';break;
            case 'ザ':case 'ジ':case 'ズ':case 'ゼ':case 'ゾ':return 'Z';break;
            case 'ダ':case 'ヂ':case 'ヅ':case 'デ':case 'ド':return 'D';break;
            case 'バ':case 'ビ':case 'ブ':case 'ベ':case 'ボ':return 'B';break;
            case 'パ':case 'ピ':case 'プ':case 'ペ':case 'ポ':return 'P';break;
            default: //(ァ、ィ、ゥ、ェ、ォ、ャ、ュ、ョ、ッ、ヮ、ヴ、ヲ、ン)は除外
            break;
        }
    }

    //新規レコード作成のイベントハンドラー
    kintone.events.on(['app.record.create.submit'], function(event){

        /*--全角カタカナフィールドの値取得--*/
        var rec           = event.record,
            last_name    = rec['lastname_kana'].value,
            first_name   = rec['firstname_kana'].value,
            full_name    = last_name + first_name;

        //全角カナのチェック
        if(checkKana(full_name)){ //trueだった場合の処理
            return new kintone.Promise(function(resolve, reject){
                //イニシャル作成関数を使用 
                rec['initial_name'].value = initialCheck(last_name.charAt(0)) + '・' + initialCheck(first_name.charAt(0));
                resolve(event);
            });
        }else{ //falseだった場合の処理
            event.error = '全角カタカナで入力してください';
        }

        return event;

    });

})();

5. まとめ

新規レコード追加のsubmitイベントが完了するまではレコードの実態が実質的に無い為、 レコード登録を確実に実行するためにPromiseでの処理を行っています。 今回は、全角カタカナのバリデーションのみを入れて、 入力したカタカナ姓名をイニシャルに変換するシンプルな方法で実装しました。 アンケートなどを匿名で外部公開したい場合などに使えるかもしれませんね!

※ フィールドが空欄だった場合のバリデーションは実装していませんが、フィールドの設定で「必須項目」に設定することで 解決することができます。