2018/11/10 kintone Café JAPAN 2018 にて使用した、gusuku Customine のハンズオン資料です。

1. ノンコーディングで簡単実現
gusuku Customine で
はじめての画面カスタマイズ
(ハンズオン)
築山 春木

2. 本日持ち帰っていただ
きたいこと
• 画面カスタマイズをすると kintone は
更に便利になる
• 簡単にカスタマイズできる
gusuku Customine サイコー！！
• コードが書けなくても自分で業務改善
できる！

3. gusuku Customine
とは
• kintone の JavaScript による画面カスタマ
イズをノーコードで実現するサービス
（開発元：アールスリーインスティテュートさん）
• gusuku ブランドでは Deploit に次いで 2
つめのサービス
• 2018年9月3日 正式リリース
gusuku 公式キャラクター
瑞慶覧 みみが

4. gusuku Customine
の仕組み
（R3 さんの Web サイトより抜粋）

5. gusuku Customine 利用イメージ
やること 条件

6. 準備
本日使うファイル、URL などはすべてこちらから利用可能です。
http://bit.ly/kcj2018

7. kintone アカウントの確認
• kintone アカウント（管理者権限）を持っていない方
はお試しアカウントを取得してください
• 先ほどのページの 「kintone お試し」 のリンクから
飛べます

8. kintone アプリの作成
• 先程の kcj2018 のページにある「kintone アプリテンプレー
ト」と「ハンズオンインポート用データ」の添付ファイルをダ
ウンロードします。
• kintone アプリの新規作成で「テンプレートファイルを読み込
んで作成」を選択し、アプリを作成します。
• 作成したアプリにはレコードが含まれていないため、作成した
アプリで「ファイルから読み込む」を選び、CSV ファイルを読
み込みます。

9. gusuku Customine アカウントの取得
• 続いて、gusuku Cusotomine のアカウントを作ります
• メールに含まれる「確認コード」「パスワード」「組織名（gusuku
サービス内での識別用の組織名です）」を設定します。
• サインアップ完了後「フリープラン」を選択します。
フリープランでは 1 アプリ のみ利用可能です。
• kintone の利用ドメイン名を入れ、「利用開始」を押し、最後に
「サブドメイン」「kintone ユーザー名」「パスワード」を登録し
ます。

10. まずは、使い方を覚えるために一緒に作りましょう
•考え方としては
どんな時に
（gusuku Customine 上での「条件」）
何をしたいか？
（gusuku Customine 上での「やること」）
を考えます。（順番は逆でも良いと思います）

11. 1.検索ボックスの設置

12. 2.フィールドへの色付け

13. 2.フィールドへの色付け

14. 3.コメン
ト欄の非
表示

15. せっかくですからやりましょう

16. ここからは
実践的な演習です

17. ビジネスの背景（仮想）
• システムインテグレーションを生業とする アールフォーインスティ
ティート社（略称：R4 / 本社：大阪）が、クラウドサービス
ksks Customine (くすくす かすたまいん） ,ksks Deploit(くすく
す でぷろいっと)を開始
• 従来の社内システムがクラウドサービスの販売（期間契約）を想定
していなかったため、対応するための契約管理システム開発が急務

18. サービスラインナップイメージ
ksks Customine
•サービス概要
ノンコーディングで画面カス
タマイズができるサービス
•プランは 1 種類のみ
ksks Deploit
•サービス概要
アプリ配布、バックアップ
など運用を助けるサービス
•ベースのプランに 2 種類の
オプションを追加する形態
バックアップ
Excel 帳票プラグイン

19. 業務用件
• お客様ごとの契約情報
• 利用サービス、オプション
• サービス期間
を正しく把握したい
• 契約が切れる前にメールで案内したい

20. では、アプリを見てみましょう

21. 演習 - 1
• サービスの種類によって、オプションが選
択できる/できないがある
→選択結果によって、フィールドをグレー
アウトしたい
• 例：
ksks Customine はオプションは無い
ksks Deploit はオプションを選びたい

22. gusuku Customine で解決！！！
フィールドの値が特定の値の場合には
フィールドを無効化する

23. 注意点
この設定もセットで入れましょう

24. 演習 - 2
契約終了日を自動で入力したい
（通常は開始日の 1年後）
標準機能だと
手入力しないと・・・

25. ヒント
•ヒント 1
やること「日付を計算する」を使います

26. やってみた・・・けどなんか違う
2019-11-15 になってて欲しい

27. ヒント
• ヒント 2
1 つのアクションだけではできません
「他のアクションの実行が完了したとき」を
使います

28. gusuku Customine で解決！！！

29. 課題 - 3
• 契約更新前にメールを配信
したい
→メールワイズ 連携プラ
グイン

30. gusuku Cutomine で解決！！

31. できた人は
• 「時間が余ったらやること」のリンクを開いて、
そちらのカスタマイズも試してみましょう！

32. まとめ
• gusuku Customine とても便利！！
• 「最後に開くURL」を開いてください