【kintone】Chobiitで条件分岐カスタマイズを実装しよう！【プラグイン活用法#8】

ノベルワークスが提供しているChobiit for kintoneという製品があります。
kintoneアプリをWebフォーム上に共有・公開できるサービスなのですが、
標準機能には条件分岐の機能はありません。

そこで今回の記事では、条件分岐のJavascriptカスタマイズ実装方法をご紹介したいと思います✨

「Javascript？そんなのわからないよ～(;o;)💦」と思われた方、どうかご安心ください。
実は当記事の執筆者も、開発メンバーではなく普段プログラミングを業務で使うことはありません。
そんな私だからこそ、当記事はプログラミングの知見がなくても理解しやすい内容になっているかと思います。

ぜひ一度、Chobiitでのカスタマイズ実装にチャレンジしてみてください！

この記事は、こんな時に役に立ちます

・Chobiitで条件に応じてフィールドを非表示にしたい
・Chobiitで条件に応じて表示しているフィールドを変えたい
・Chobiitカスタマイズを実装してみたい

カスタマイズ適用したChobiitフォームを触ってみよう

まずは、今回の「条件分岐カスタマイズ」を適用しているChobiitフォームを触ってみましょう！
選んだ選択肢によって「文字列（1行）フィールド」が表示/非表示になります。
（フォームの表示に少しお時間がかかる場合があります）

今回の記事では、このような動きをカスタマイズで実装する方法をご紹介します☺

今回使用するkintoneアプリ＆カスタマイズファイル

画面右上のダウンロードアイコンから、ダウンロードいただけます。
・kintoneアプリ（テンプレート）
・Javascriptカスタマイズファイル

カスタマイズファイルの作り方＆適用する方法

カスタマイズファイルの新規作成・編集は、メモ帳などのテキストエディタを利用いただいても問題ございません。ただし、Visual Studio Codeなどのコーディングに適したエディタを利用いただくと、よりファイル編集がしやすくなります。

①上記に掲載しているJavascriptカスタマイズファイルをダウンロードします。コード内に存在するフィールドコード部分を、適用するkintoneアプリのフィールドコードと一致させる必要がありますのでご注意ください。

（例）

②Chobiit設定アプリ＞アプリ設定タブ＞適用対象のアプリ設定の編集ボタンを押下＞カスタマイズタブ＞JavaScript / CSSでカスタマイズに①のファイルを指定してください。

今回使用するkintoneアプリの構成

今回は以下のアプリを使います。フィールド名とフィールドコードは、全く同じ文字列で設定をしています。

【kintoneアプリ画面】

【Chobiitフォーム】

条件分岐カスタマイズ１：フィールドを非表示にする

画面を初期表示した際に特定のフィールドを非表示にします。今回のばあいは、ラジオボタンの選択肢Aだけは初期選択されているため、A以外のB～Fを非表示にします。

$(function () {

    //初期表示時は非表示にする
    $('#iframe').contents().find('.field-B').parent().hide();
    $('#iframe').contents().find('.field-C').parent().hide();
    $('#iframe').contents().find('.field-D').parent().hide();
    $('#iframe').contents().find('.field-E').parent().hide();
    $('#iframe').contents().find('.field-F').parent().hide();

});

上記の内容をファイルに反映し、Chobiit設定に適用すると、Chobiitフォームから指定したフィールドが非表示になりました！

条件分岐カスタマイズ２：選択肢によって、表示非表示を切り替える

今回ダウンロードしていただけるJavascriptカスタマイズの中身はこのようになっております。実際に利用する際に不要なコードは、エラーの基になってしまうため、コメントアウトまたは削除するようにしましょう！

カスタマイズ経験がない方にも、どのコードが何をしているかできるだけ分かりやすくコメントを書いてみました。ぜひ実装時の参考にしてみてくださいm(__)m（ブログ上だと黒文字のみで見づらいので、文頭で紹介していたようなコードエディターで開いてみていただけますと格段に見やすくなると思います！）

$(function () {

    //初期表示時は非表示にする
    $('#iframe').contents().find('.field-B').parent().hide();
    $('#iframe').contents().find('.field-C').parent().hide();
    $('#iframe').contents().find('.field-D').parent().hide();
    $('#iframe').contents().find('.field-E').parent().hide();
    $('#iframe').contents().find('.field-F').parent().hide();

    //↓↓↓　ラジオボタン　↓↓↓
    //ラジオボタンを操作したら発火
    $('#iframe').contents().find('input[name="radioButton"]').change(function () {

        //変数
        var radioButton = $('#iframe').contents().find('input[name="radioButton"]:checked').val();

        //Aを選択している場合
        if(radioButton == "A"){

            //Aをshowにする
            $('#iframe').contents().find('.field-A').parent().show();
            //Bをhideにする
            $('#iframe').contents().find('.field-B').parent().hide();

        //A以外を選択している場合
        }else{

            //Bをshowにする
            $('#iframe').contents().find('.field-B').parent().show();
            //Aをhideにする
            $('#iframe').contents().find('.field-A').parent().hide();
        }
        
    });
    //↑↑↑　ラジオボタン　↑↑↑

    //↓↓↓　チェックボックス　↓↓↓
    //チェックボックスを操作したら発火
    $('#iframe').contents().find('input[name="checkbox"]').change(function () {

        //変数
        var checkbox = $('#iframe').contents().find('input[name=checkbox]:checked').map(function(){
            return $(this).val();
          }).get();

        const checkboxC = $.inArray('C', checkbox);
        const checkboxD = $.inArray('D', checkbox);

        //Cがチェックされている場合
        if(checkboxC != -1){

            //Cをshowにする
            $('#iframe').contents().find('.field-C').parent().show();

        //Cがチェックされていない場合
        }else{

            //Cをhideにする
            $('#iframe').contents().find('.field-C').parent().hide();
        }

        //Dがチェックされている場合
        if(checkboxD != -1){

            //Dをshowにする
            $('#iframe').contents().find('.field-D').parent().show();

        //Dがチェックされていない場合
        }else{

            //Dをhideにする
            $('#iframe').contents().find('.field-D').parent().hide();
        }
        
    });
    //↑↑↑　チェックボックス　↑↑↑

    //↓↓↓　ドロップダウン　↓↓↓
    //ドロップダウンを操作したら発火
    $('#iframe').contents().find('#dropDown').change(function () {

        //変数
        var dropDown = $('#iframe').contents().find('#dropDown').val()

        //Eを選択している場合
        if(dropDown == "E"){

            //Eをshowにする
            $('#iframe').contents().find('.field-E').parent().show();
            //Fをhideにする
            $('#iframe').contents().find('.field-F').parent().hide();

        //Fを選択している場合
        }else if(dropDown == "F"){

            //Fをshowにする
            $('#iframe').contents().find('.field-F').parent().show();
            //Eをhideにする
            $('#iframe').contents().find('.field-E').parent().hide();

        //EとF以外を選択している場合
        }else{

            //Eをhideにする
            $('#iframe').contents().find('.field-E').parent().hide();
            //Fをhideにする
            $('#iframe').contents().find('.field-F').parent().hide();

        }
        
    });
    //↑↑↑　ドロップダウン　↑↑↑

});

Chobiitをカスタマイズしてより便利に使おう！

Chobiit公式HPにて、他のカスタマイズも多数ご紹介しております！Chobiitをカスタマイズして、さらに便利に活用してみましょう！！

ぜひ、お試しください！

Chobiit for kintoneは無料で30日間ご利用いただけます。
Webフォームを作りたい、外部のユーザーにkintoneの情報を公開したい、などのシーンで活躍する製品です！
従量課金制のため、気軽に利用を始めることができます。

こちらのプラグインに関するお問い合わせはコチラまでご不明な点があればお気軽にご相談下さい。
※Chobiitカスタマイズはユーザー様の任意で適用いただく機能となります。Chobiitカスタマイズに関するお問い合わせはサポート対象外となりますのでご了承ください※