SlideShare uma empresa Scribd logo
1 de 65
Baixar para ler offline
gusuku Customine & kintone
で
簡単カスタマイズハンズオン
アールスリーインスティテュート
沖 安隆
2018/11/23
kintone Café 高知 Vol.9
本日のアジェンダ
 はじめてのカスタマイズ 〜入門編
Customineの基礎
 一歩進んだカスタマイズ 〜初級編
 実践カスタマイズ 〜中級編
はじめてのカスタマイズ 〜入門編
フィールドに色をつけてみよう
顧客サポートパックの問合わせ管理アプリを使用
「対応状況」が「未対応」のものに対して背景色を設定する
できた人は「会社名」にも同じ色を設定してみましょう
それでははじめましょう
kintoneアプリの準備
顧客サポートパックをインストール
kintoneアプリの準備
入門編ではこの「問合せ管理」アプリを利用します
Customineの基礎知識
gusuku Customine とは?
No-Code 開発プラットフォーム
全くプログラムを書かずに
kintoneアプリをカスタマイズし
業務システムを開発するためのツール
誰でもkintoneアプリの高度なカスタマイズを可能に
gusuku Customine とは?
やりたいことを画面で設定
カスタマイズ
JavaScriptを
自動生成
Customine サインアップ
「customine」 or 「カスタマイン」で
検索!
公式サイト
https://customine.gusuku.io/ja/ の
「利用開始はこちら」をクリック!
Customine サインアップ
メールアドレス or Facebook / Google
アカウントでサインアップ
Customine サインアップ
メールに従ってサインイン
Customine サインアップ
「フリープラン」で
申し込み!
1アプリスロット
(1アプリにカスタマイズ)
は機能制限なし・無料です
Customine サインアップ
今回利用するドメイン名を
入力してください
Customine サインアップ
Customineとkintoneを接続します
kintoneのシステム管理権限および
カスタマイズするアプリの管理権限が
必要となりますので、ご注意ください
Customine サインアップ
カスタマイズするアプリを選択します。
このハンズオンでは、先ほど作成した
「問い合わせ管理」と、
「顧客管理」を選択します。
Customineの基本操作
 【済】Customineのアカウントへのサインイン確認
 【済】kintoneの契約との紐付けをしよう
 【済】kintoneアプリを登録しよう
 カスタマイズ一覧(ドライブ)の見方
 アクションの追加・無効化・削除方法
カスタマイズのポイント
 kintoneアプリはある程度完成させておく
 重要ポイント:「フィールドコード」≧「フィールド名」
 フィールドコードによって「どのフィールド」ということを判別して
いる
 わかりやすい名前で設定することが望ましい
フィールド名と同じ名前をつける etc…
 フィールドコードは日本語でもOK
Customineにおけるカスタマイズのポイント
一部分ずつ作る 動かす
小さい変更の繰り返し
最初から大きく作り過ぎない
エラー時原因の特定が長引くケースも!
Customineでのカスタマイズ
アプリ選択画面から「問合せ管理」アプリを選んで
「選択決定」ボタンをクリックします
フィールドに色をつけてみよう
顧客サポートパックの問合わせ管理アプリを使用
「対応状況」が「未対応」のものに対して背景色を設定する
できた人は「会社名」にも同じ色を設定してみましょう
Customineの考え方
アクション=「やること」+「条件」
アクションは組み合わせが可能
組み合わせを工夫することで複雑なカ
スタマイズにも対応可能
Customineでのカスタマイズ
「やること」と「条件」を設定していきます
Customineでのカスタマイズ
アクションの左部分「やること」で
「対応状況」フィールドの背景色を変更するように設定していきます
Customineでのカスタマイズ
「やること」の選択画面から「フィールド背景色を変更する」を選択します
Customineでのカスタマイズ
「背景色を変更する」対象となるフィールドを選択します
※今回は「対応状況」を選択します
Customineでのカスタマイズ
次は背景色を指定します
※ここではお好きな色を選択して下さい
Customineでのカスタマイズ
アクションの左部分「やること」ができあがりました!
次は右部分の条件を指定していきます
Customineでのカスタマイズ
今回は「対応状況」が「未対応」の場合に背景色を変更するので
最終的にこのような条件が作れるように設定していきます
Customineでのカスタマイズ
条件選択画面から「フィールドの値が特定の値ならば」を選択します
① ②
Customineでのカスタマイズ
フィールド選択の画面で「対応状況」を選択します
Customineでのカスタマイズ
「対応状況」が「未対応」と等しい場合に
背景色を変更するので「等しい」を選択します
Customineでのカスタマイズ
値の入力では「未対応」と直接入力します
カスタマイズをkintoneアプリへ登録
これでカスタマイズが完成しました!
完成したカスタマイズをkintoneに登録します
カスタマイズをkintoneアプリへ登録
Customineから登録ボタンを押すとJavaScriptが自動的に生成され
kintoneアプリに登録されます
カスタマイズが適用されていることを確認
問合せ管理アプリの一覧画面を開いた時に「未対応」のレコードのみ
「対応状況」のフィールドの背景色が変わっていることがわかります
挑戦問題
「会社名」にも同様の
背景色を設定してみよう
挑戦問題:「会社名」にも背景色を設定する
最終的にこのように「対応状況」と「会社名」の背景色を変更するためには
どうすれば良いでしょうか?
一歩進んだカスタマイズ 〜初級編
関連レコードの上部に問合せ件数を表示する
顧客サポートパックの顧客管理アプリを使用
関連レコード一覧で表示されている問合せの件数を取得
その件数をスペースに表示する
kintoneアプリの準備
初級編ではこの「顧客管理」アプリを利用します
kintoneアプリの準備
顧客管理アプリにスペースを設置し、
要素IDを「toiawaseCount」などと設定しておきます
※このスペースは問合せ件数を表示するために使用します
Customineでのカスタマイズ
アプリスロットを開放し、別アプリで使えるようにします
ドライブ画面
(=カスタマイズ一覧)
のメニューから
Customineでのカスタマイズ
アプリが変わるため、メニュー画面から新しいカスタマイズを作成します
Customineでのカスタマイズ
アプリ選択画面から「顧客管理」アプリを選んで
「選択決定」ボタンをクリックします
Customineでのカスタマイズ
やることの選択で「関連レコードで紐付いているレコードを取得する」ことができます
今回はこれを使用します
①
②
Customineでのカスタマイズ
まずは関連レコードの件数をカウントする部分のカスタマイズまでやってみましょう
1番目の条件は「追加画面・編集画面・詳細画面のいずれかを表示した時」
2番目のやることは「レコード行数をカウントする」を選択してください
ポイントは「他のアクションの実行が完了した時」です
※今回は、1番目のアクションの実行完了を待ってから、2番目のアクションが実行される
ように設定します
条件 〜他のアクションの実行が完了した時
 アクションの実行順序は定まっていない
 すべて同時並行で処理が実行される
 先のアクションの結果を待ってから次を実行したい時に使用
 どのアクションの結果を待つかは「アクション」で指定
Customineでのカスタマイズ
最後は問合せ件数を表示するための処理です
ここでは「スペースに文字を表示する」を使用します
ポイントは「表示するテキスト」です
スペースを利用して、任意の文字を表示させることができます
やること 〜スペースに文字を表示する
 アプリ上に配置したスペース上に文字を表示することが可能
 他のアクションの実行結果などを反映させることも可能
 文字は装飾ができる
Customineでのカスタマイズ
表示するテキストとして、固定文の「問合せ件数:件」と入力します
「件」の文字の前に取得した問合せ件数が自動挿入されるようにしたいので
「他のアクションの結果」をクリックします
Customineでのカスタマイズ
今回は、取得した問合せ件数を反映させたいので
「レコード行数をカウントする」で取得した結果が入るように設定します
Customineでのカスタマイズ
「件」の前に2番目のアクションの結果が入るように設定されました
Customineでのカスタマイズ
このように設定ができていればOKです
※今回は「他のアクションの実行が完了した時」で
アクションを連鎖的に実行していることがポイントです
kintoneに登録して表示を確認してみよう
レコードの詳細画面を開いた時
「問合せ件数:N件」と表示されていればOKです!
実践カスタマイズ 〜中級編
最後はフォーラムを見ながら
カスタマイズに挑戦してみましょう!
ルックアップ先の自動更新
https://goo.gl/JzgMEL
顧客管理が更新されたら問合せ管理も自動更新する
顧客サポートパックの顧客管理アプリ・問合わせ管理アプリを使用
顧客管理アプリで担当者名・電話番号が更新されたら、問合せ管理
アプリも自動更新がかかるようにする
Customineでのカスタマイズ
顧客管理アプリに新しいカスタマイズを追加します
異なるカスタマイズをひとつのアプリに作成する場合
「ページを追加」し、カスタマイズをわけるほうが
カスタマイズの内容が整理できるので良いです
やること 〜レコードを更新する(フィールドマッピング)
顧客管理アプリ
問合わせ管理アプリ
(ルックアップ先)
ルックアップを自動取得する設定です
このアクションの条件で指定したタイミングで
自動的に更新がかかります
解答:実践カスタマイズ 〜中級編
このように設定ができていればOKです
今回は「会社名」がルックアップのキーとなっていることがポイントです
いかがでしたでしょうか?
Customineを活用して
快適なカスタマイズLIFEを
お過ごし下さい!

Mais conteúdo relacionado

Mais de 安隆 沖

Stripeで決済運用を自動化しよう
Stripeで決済運用を自動化しようStripeで決済運用を自動化しよう
Stripeで決済運用を自動化しよう安隆 沖
 
kintoneカスタマイズの可能性
kintoneカスタマイズの可能性kintoneカスタマイズの可能性
kintoneカスタマイズの可能性安隆 沖
 
kintoneプラグインがstripeに出会った話
kintoneプラグインがstripeに出会った話kintoneプラグインがstripeに出会った話
kintoneプラグインがstripeに出会った話安隆 沖
 
マルチコミュニティ
マルチコミュニティマルチコミュニティ
マルチコミュニティ安隆 沖
 
kintoneエバンジェリスト活動報告
kintoneエバンジェリスト活動報告 kintoneエバンジェリスト活動報告
kintoneエバンジェリスト活動報告 安隆 沖
 
SORACOM meetup広島 四国でのSORACOM事情
SORACOM meetup広島 四国でのSORACOM事情SORACOM meetup広島 四国でのSORACOM事情
SORACOM meetup広島 四国でのSORACOM事情安隆 沖
 
20170715 高知lt kintoneカスタマイズ
20170715 高知lt kintoneカスタマイズ20170715 高知lt kintoneカスタマイズ
20170715 高知lt kintoneカスタマイズ安隆 沖
 
今までの活動報告
今までの活動報告今までの活動報告
今までの活動報告安隆 沖
 
エバを弄る会 LT
エバを弄る会 LTエバを弄る会 LT
エバを弄る会 LT安隆 沖
 
Cge2012 all 600
Cge2012 all 600Cge2012 all 600
Cge2012 all 600安隆 沖
 
kintone Café 愛媛 ハンズオン
kintone Café 愛媛  ハンズオンkintone Café 愛媛  ハンズオン
kintone Café 愛媛 ハンズオン安隆 沖
 
kintone Café Japan ハンズオン
kintone Café Japan ハンズオンkintone Café Japan ハンズオン
kintone Café Japan ハンズオン安隆 沖
 
20160611 kintone Café 高知 Vol.3 LT資料
20160611 kintone Café 高知 Vol.3 LT資料20160611 kintone Café 高知 Vol.3 LT資料
20160611 kintone Café 高知 Vol.3 LT資料安隆 沖
 
20151120 kintone café大阪lt
20151120 kintone café大阪lt20151120 kintone café大阪lt
20151120 kintone café大阪lt安隆 沖
 
kintone プラグインハンズオン資料
kintone プラグインハンズオン資料kintone プラグインハンズオン資料
kintone プラグインハンズオン資料安隆 沖
 

Mais de 安隆 沖 (15)

Stripeで決済運用を自動化しよう
Stripeで決済運用を自動化しようStripeで決済運用を自動化しよう
Stripeで決済運用を自動化しよう
 
kintoneカスタマイズの可能性
kintoneカスタマイズの可能性kintoneカスタマイズの可能性
kintoneカスタマイズの可能性
 
kintoneプラグインがstripeに出会った話
kintoneプラグインがstripeに出会った話kintoneプラグインがstripeに出会った話
kintoneプラグインがstripeに出会った話
 
マルチコミュニティ
マルチコミュニティマルチコミュニティ
マルチコミュニティ
 
kintoneエバンジェリスト活動報告
kintoneエバンジェリスト活動報告 kintoneエバンジェリスト活動報告
kintoneエバンジェリスト活動報告
 
SORACOM meetup広島 四国でのSORACOM事情
SORACOM meetup広島 四国でのSORACOM事情SORACOM meetup広島 四国でのSORACOM事情
SORACOM meetup広島 四国でのSORACOM事情
 
20170715 高知lt kintoneカスタマイズ
20170715 高知lt kintoneカスタマイズ20170715 高知lt kintoneカスタマイズ
20170715 高知lt kintoneカスタマイズ
 
今までの活動報告
今までの活動報告今までの活動報告
今までの活動報告
 
エバを弄る会 LT
エバを弄る会 LTエバを弄る会 LT
エバを弄る会 LT
 
Cge2012 all 600
Cge2012 all 600Cge2012 all 600
Cge2012 all 600
 
kintone Café 愛媛 ハンズオン
kintone Café 愛媛  ハンズオンkintone Café 愛媛  ハンズオン
kintone Café 愛媛 ハンズオン
 
kintone Café Japan ハンズオン
kintone Café Japan ハンズオンkintone Café Japan ハンズオン
kintone Café Japan ハンズオン
 
20160611 kintone Café 高知 Vol.3 LT資料
20160611 kintone Café 高知 Vol.3 LT資料20160611 kintone Café 高知 Vol.3 LT資料
20160611 kintone Café 高知 Vol.3 LT資料
 
20151120 kintone café大阪lt
20151120 kintone café大阪lt20151120 kintone café大阪lt
20151120 kintone café大阪lt
 
kintone プラグインハンズオン資料
kintone プラグインハンズオン資料kintone プラグインハンズオン資料
kintone プラグインハンズオン資料
 

Customine handson-for-kintonecafekochi9