前回に引き続き、今回もノーコードでkintoneをカスタマイズできる連携サービス「gusuku Customine」の使い方を紹介していこう。前回に「gusuku Customine」の基本的な使い方を説明したので、今回は、タブグループの作成、日時の重複チェック、一覧と詳細の複合表示といったカスタマイズを例に、「gusuku Customine」の具体的な設定手順を紹介しよう。

「gusuku Customine」を使ったカスタマイズ

「gusuku Customine」は、「やること」と「条件」を指定することにより、さまざまなカスタマイズを実現できるようになっている。複数の「やること」を組み合わせて、より複雑な動作を実現することも可能である。このため、「実現可能なカスタマイズは無限にある」といっても過言ではない。

もちろん、簡単な設定を行うだけで実現できるカスタマイズもたくさんある。「gusuku Customine」を初めて使う方は、こういった簡単なカスタマイズから試してみるとよいだろう。ということで、今回は「簡単に設定できるカスタマイズ」に挑戦してみよう。

  • 「gusuku Customine」を使ったアプリのカスタマイズ例

タブグループの作成　～カスタマイズ例(1)～

最初に紹介するのは、フォーム画面に「タブグループ」を作成するカスタマイズの例だ。ここでは「会員名簿」というkintoneアプリを例に、カスタマイズの手順を紹介する。

  • 「会員名簿」のkintoneアプリ

このアプリは、ある自動車整備会社が顧客(会員)の情報を管理するために作成したもので、各会員の氏名やメールアドレス、電話番号、住所といった基本情報だけでなく、その人が所有している自動車の情報、車検・整備の履歴といった情報も1つのアプリにまとめて記録されている。このため、入力項目の多い、縦長のフォーム画面になっている。

  • 「会員名簿」のkintoneアプリ(続き)

このフォーム画面に「タブグループ」を設置し、各フィールドを分類別に表示できるようにカスタマイズしてみよう。なお、このカスタマイズを行うときは、タブを表示するための領域として、フォーム画面の先頭に横長の「スペース」フィールドを配置し、要素IDを指定しておく必要がある。

それでは、具体的なカスタマイズ手順を紹介していこう。「gusuku Customine」のWebサイトを開き、「会員名簿」アプリのカスタマイズを再開する。すると、以下の図のような画面が表示される。この画面にある1番目のアクションは「フリガナの自動入力」を実現するための設定となる(詳しくは前回の連載を参照)。ここに「タブグループ」を設置する設定を追加していこう。2番目のアクションにある「やることを追加してください」をクリックする。

  • 「やること」の追加

「やること」を選択する画面が表示される。ただし、膨大な数の「やること」が一覧表示されるため、目的の「やること」を探し出すのに手間取るかもしれない。

このような場合は、キーワードで一覧を絞り込むとよい。右上のテキストボックスに「タブ」と入力して「Enter」キーを押す。すると、「タブ」の文字が含まれる項目だけが一覧表示される。この中から「タブグループを作成する」を選択し、「選択決定」ボタンをクリックする。

  • タブグループの作成(1)

2番目のアクションに「タブグループを作成する」が設定される。続いて、「どこにタブグループを配置するか？」を指定する。「場所」のテキストボックスをクリックする。

  • タブグループの作成(2)

フォーム画面に配置されている「スペース」フィールドが一覧表示されるので、この中から「タブグループを配置するフィールド」を選択する。今回の例の場合、「スペース」フィールドは1個しか配置されていないので、それを選択して「選択決定」ボタンをクリックすればよい。

  • タブグループの作成(3)

以上で、タブグループの作成は完了。続いて、このタブグループの中に「タブ」を追加していく。3番目のアクションにある「やることを追加してください」をクリックする。

  • 「1つ目のタブ」の追加(1)

「タブ」のキーワードで一覧を絞り込み、「タブグループにタブを追加する」を選択して「選択決定」ボタンをクリックする。

  • 「1つ目のタブ」の追加(2)

3番目のアクションに、「タブグループにタブを追加する」が設定される。これが「1つ目のタブ」を設定する項目となる。まずは、タブに表示する文字(ラベル)から指定していこう。「ラベル」のテキストボックスをクリックし、ラベルの文字を入力してから「OK」ボタンをクリックする。

  • 「1つ目のタブ」の追加(3)

続いて、このタブに収録するフィールドを指定する。「タブに入れるフィールド」のテキストボックスをクリックし、このタブに収録するフィールドをすべて選択してから「選択決定」ボタンをクリックする。

  • 「1つ目のタブ」の追加(4)

これで「1つ目のタブ」の設定は完了。次は「2つ目のタブ」を設定していこう。画面の最下部にある「アクションを追加」をクリックする。

  • 新しいアクションの追加

4番目のアクションが追加されるので、先ほどと同様の手順で「タブグループにタブを追加する」を設定し、ラベルとフィールドを指定する。なお、2つ目以降のタブは「条件」が自動指定されないため、自分で指定してあげる必要がる。1つ目のタブと同様に、「他のアクションの実行が完了した時」を選択し、直前のアクション番号となる「3」を指定する。

  • 2つ目のタブの追加

これで「2つ目のタブ」の設定は完了。同様の手順で、5番目のアクションに「3つ目のタブ」を設定する。これで、すべてのタブを設定できたことになる。

  • 3つ目のタブの追加

最後に、各タブの色を指定していこう。「アクションを追加」をクリックし、6番目のアクションに「タブの色を変更する」を設定する。続いて、「どのタブの色を指定するか？」を指定する。「タブ」のテキストボックスをクリックし、色を指定するタブを選択する。通常は、すべてのタブ(アクション)を選択した状態で「選択決定」ボタンをクリックすればよい。

  • タブの色指定(1)

あとは、選択時／非選択時におけるタブの「背景色」と「文字色」を指定するだけ。条件には「他のアクションの実行が完了した時」を指定し、直前のアクション番号となる「5」を指定しておけばよい。

  • タブの色指定(2)

以上で、タブグループの設定は完了だ。「kintoneアプリへ登録」をクリックし、カスタマイズ内容をkintoneアプリに反映させる。

正しくカスタマイズできているか、実際に確認してみよう。kintoneを開き、「会員名簿」アプリの詳細画面を表示する。すると、タブに分類した形で各フィールドが表示されるのを確認できる。以下の図は「基本情報」のタブを選択した様子だ。

  • タブで分割したフォーム画面(1)

同様に、「車両情報」タブを選択すると、車両情報に関連するフィールドだけが表示される。以下の図は「整備履歴」タブを選択した様子だ。この場合、「車検」と「修理・整備」のテーブルだけが表示される。

  • タブで分割したフォーム画面(2)

もちろん、このタブ表示は「新しくデータを入力する場合」や「既存のデータを修正する場合」にも対応している。

このように、フィールド数の多いフォーム画面を「タブに分類して管理する」といったカスタマイズを「gusuku Customine」で実現することも可能である。前回で紹介した「フリガナの自動入力」よりも少しだけ設定が複雑になるが、自分でJavaScriptを記述するよりは格段に簡単といえるだろう。

日時の重複チェック　～カスタマイズ例(2)～

続いては、「gusuku Customine」でエラーチェックを実現する場合のカスタマイズ例を紹介していこう。

今度は「会議室予約」アプリを例にカスタマイズの操作手順を紹介していく。このアプリは、日付ごとのレコードを作成し、「会議室A」と「会議室B」の各テーブルに各自が予約情報を入力していく仕組みになっている。

  • 「会議室予約」のkinotoneアプリ

ただし、時間範囲の重複に関するエラーチェック機能は設けられていない。「開始時刻」と「終了時刻」は自由に入力できるため、このままではダブルブッキングが発生してしまう恐れがある。この問題を「gusuku Customine」で解決してみよう。

「gusuku Customine」のWebサイトを開き、「会議室予約」アプリのカスタマイズを開始する。今回、例にしているエラーチェックは「テーブル内の時間範囲に重なりがないかチェックする」で実現できる。これを1番目のアクションの「やること」に指定する。

  • 時間の重複チェックの指定(1)

続いて、「やること」の各項目を指定していく。「開始時刻」と「終了時刻」に該当するフィールドを指定し、エラー時(時間範囲が重複しているとき)に表示するメッセージを入力する。ちなみに、このアクションの条件には「レコードを保存する直前(削除時は除く)」が自動指定されている(条件を変更することも可能)。

  • 時間の重複チェックの指定(2)

今回の例の場合、フォーム画面に「会議室A」と「会議室B」の2つのテーブルが配置されている。先ほど設定したエラーチェックは、「会議室A」のテーブルについて時間範囲の重複をチェックするものだ。同様の手順で「会議室B」のテーブルについてもエラーチェックを設定する。

  • 時間の重複チェックの指定(3)

以上で、カスタマイズの設定は完了。「開始時刻」と「終了時刻」がそれぞれ2個ずつあるため、それぞれに指定するフィールドを間違えないように注意すれば、問題なく設定を完了できるだろう。あらかじめ、kintoneで適切なフィールドコードを指定しておけば、スムーズに作業を進められると思われる。あとは「kintoneアプリへ登録」をクリックして、カスタマイズ内容をkintoneアプリに反映させるだけ。

エラーチェックが正しく機能するか、実際に確認してみよう。「会議室予約」アプリを開き、他の予約と時間が重なるようにデータを入力して「保存」ボタンをクリックする。

  • 時間の重複チェックの動作(1)

すると、時間が重複している部分にエラーメッセージが表示され、データの保存がキャンセルされる。

  • 時間の重複チェックの動作(2)

つまり、時間の範囲が重複している状態ではデータを保存できなくなるわけだ。これでダブルブッキングを回避できるようになる。

このように、kintoneアプリを適切に運用していくためのエラーチェック機能を「gusuku Customine」で設置することも可能である。

一覧と詳細の複合表示　～カスタマイズ例(3)～

最後に、「一覧画面」と「詳細画面」を組み合わせた表示方法を実現するカスタマイズ例を紹介しておこう。

このカスタマイズを行うときは、あらかじめkintoneで「一覧」を作成しておく必要がある。具体的には、以下の設定で「新しい一覧」を作成すればよい。

・一覧名；(各自の好きな名前)
・レコード一覧の表示形式:カスタマイズ
・表示する範囲:PC版でのみ表示する
・HTML:(空白のままでよい)
・ページネーションを表示する:ON

また、一覧IDの番号を「Ctrl」＋「C」キーでコピーしておく。

  • 「カスタマイズ」形式の一覧を作成

上記の準備作業が済んだら、「gusuku Customine」のWebサイトを開き、アプリのカスタマイズを設定していく。今回は、先ほどと同じ「会議室予約」アプリを例にカスタマイズ手順を紹介していこう。

新しいアクションの「やること」に「一覧画面と詳細画面の複合画面を作成する」を設定する。続いて、この「やること」の各項目を指定していく。「一覧のID」には、先ほどコピーした番号を「Ctrl」＋「V」キーで貼り付ければよい。「固定表示するフィールド」には、常に表示しておくフィールドを指定する。「固定しないフィールド」には、複合画面にしたときに非表示にするフィールドを指定すればよい。「固定列の幅」には、とりあえず適当な数値(幅のピクセル数)を指定しておけばよい。

  • 「gusuku Customine」の設定

以上で、カスタマイズの設定は完了。「kintoneアプリへ登録」をクリックする。

どのような画面表示になるのか、実際に確認してみよう。kintoneを開き、「会議室予約」アプリの一覧画面を表示する。続いて、先ほど複合表示用に作成した「一覧」を選択する。あとは、好きなレコードをクリックするだけ。すると、左側に「レコードの一覧」(日付の一覧)、右側に「選択したレコードの詳細画面」が表示される。

  • 一覧と詳細を複合表示した様子(1)

この画面表示のまま、別のレコード表示に切り替えることも可能だ。例えば、「2025-05-20」の日付をクリックすると、そのレコードの詳細画面に切り替えられる。

  • 一覧と詳細を複合表示した様子(2)

このように「一覧画面と詳細画面の複合画面を作成する」を利用すると、各レコードの「キーとなるフィールド」だけを左側に一覧表示し、クリックひとつで詳細画面を切り替えられる画面表示を実現できる。

もちろん、左側に一覧表示するデータは「日付」でなくても構わない。「氏名」や「商品名」など、用途に応じて好きなフィールドを配置することが可能だ。幅広いアプリで便利に活用できる表示方法なので、ぜひ使い方を覚えておくとよいだろう。

ということで、2回にわたって「gusuku Customine」の使い方を紹介してきたが、これらのほかにも「gusuku Customine」には数多くの「やること」(カスタマイズ)が用意されている。それらをすべて紹介していくと、一冊の本でも足りないくらいの分量になってしまうので、本稿ではイントロ的な紹介にとどめておこう。

もっと詳しく学びたい方は、このページに掲載されている「やること一覧」などを参照してみるとよい。それぞれの「やること」で実現できる機能や設定方法が詳しく紹介されている。これを参考にしながら実際に試していくのが、「gusuku Customine」を学ぶ一番の近道になると思われる。気になる方は、ぜひ挑戦してみるとよいだろう。