Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Customine handson-for-kintonecafekochi9

129 Aufrufe

Veröffentlicht am

gusuku Customine
HandsOn

Veröffentlicht in: Internet
  • Als Erste(r) kommentieren

Customine handson-for-kintonecafekochi9

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

×