kintoneとMakeを使用したワークショップ U22プログラミングコンテスト2022

U22プログラミングコンテスト2022のワークショップで使用した資料です。
ノーコードツールMakeを使用して、kintoneとLINEの連携ワークショップを紹介しています。

Transcript

1. kintoneとMakeを使⽤した ワークショップ ©2022 Cybozu Inc.  〜⽇々使⽤してるWebサービス同⼠を繋げて 便利なソリューションを作ってみよう〜
2. もくじ ©2022 Cybozu Inc.  サイボウズ会社紹介 1 5min kintoneとは？ 2 5min kintoneハンズオン - 基本機能を使ってみよう！- 3 10min Make × kintoneを使って連携してみよう 4 20min ワークショップ ６ 60min 発表 ７ 20min 発展編 - kintone連携紹介 - ５ 10min 先⽣からのコメント・まとめ ８ 10min 休憩（10min） 休憩（10min）
3. 1. 会社紹介 - サイボウズとは？ - ©2022 Cybozu Inc. 
4. サイボウズ株式会社とは 名称 サイボウズ株式会社（東証⼀部上場 4776） 事業内容 チームの情報共有サービス 「グループウェア」 の開発・販売・運⽤ チームワーク強化メソッドの開発・普及 創業 1997年8⽉（創業：愛媛県松⼭市） 所在地 東京都中央区⽇本橋2-7-1 東京⽇本橋タワー 拠点 東京, ⼤阪, 松⼭, 名古屋, 福岡, 仙台, 広島、札幌 上海, 深圳, 台北, ホーチミン, サンフランシスコ, シドニー, バンコク 資本⾦ 613百万円 業績 連結売上 15,642百万円 ※2020年12⽉期:業績予想 従業員数 連結 1,012名 (有期契約149名含む) ※2020年12⽉末時点 平均年齢 34.5歳 (単体・無期雇⽤) ©2022 Cybozu Inc. 
5. サイボウズの企業理念 チームワークあふれる社会を創る Purpose （存在意義） ©2022 Cybozu Inc. 
6. グループウェア事業(ツール) ⼤企業向けグループウェア 業務アプリ構築クラウド 中⼩企業向けグループウェア メール共有システム ©2022 Cybozu Inc. 
7. グループウェア事業(ツール) ⼤企業向けグループウェア 業務アプリ構築クラウド 中⼩企業向けグループウェア メール共有システム ©2022 Cybozu Inc.  今回はkintoneを使⽤して ワークショップをしていきます！
8. 2. kintoneとは？ - キントーンのきほん - ©2022 Cybozu Inc. 
9. kintoneとは チームで使うシステムを 簡単に作成できる クラウドデータベース ©2022 Cybozu Inc. 
10. kintoneの特徴 ©2022 Cybozu Inc. 
11. kintoneの特徴 ©2022 Cybozu Inc.  データを貯めることが できる 誰でも簡単に 操作できる APIが豊富
12. データを貯めることが できる l 必要な情報を蓄積・共有できる データベース l kintone上では「アプリ」と呼ばれる ©2022 Cybozu Inc. 
13. 誰でも簡単に操作できる l 左側の項⽬から適切なフィールド を選択しドラッグ&ドロップでア プリが作成できる l 位置やサイズの変更もできる l 作成・変更をUI(画⾯)上でできる ©2022 Cybozu Inc. 
14. APIが豊富 l REST API l kintoneのデータ連携をすることができる l kintoneにデータが登録されたらLINEに通知する l Alexa(⾳声認識デバイス)からkintoneにデータを 登録する l JavaScript API l kintoneの画⾯の動作や、 ⾒た⽬を変えるカスタマイズができる l ⼀覧画⾯が表⽰されたときにボタンを表⽰ ©2022 Cybozu Inc.  APIとは？ API：Application Programming Interface ソフトウェアやプログラム、Webサービスを 連携させる仕組みのこと REST API
15. 3. kintone ハンズオン - キントーンをさわってみよう！ - ©2022 Cybozu Inc. 
16. ハンズオン内容 kintoneに「誕⽣⽇管理アプリ」を作成しよう！ ©2022 Cybozu Inc. 
17. ハンズオン内容 kintoneに「誕⽣⽇管理アプリ」を作成しよう！ ©2022 Cybozu Inc.  誰が いつ
18. kintone ハンズオン⼿順 1. kintoneにログインしよう 2. アプリを作ってみよう l 誕⽣⽇管理アプリ l ⽇付：⽇付 l ⽂字列1⾏：タイトル 3. アプリにデータを登録しよう 4. データを更新しよう 5. アプリに項⽬を追加しよう l 設定 > フィールドを追加 l ⽂字列複数：メモ 6. [発展] l カレンダー形式の⼀覧を作ってみよう！ ©2022 Cybozu Inc. 
19. kintone ハンズオン ©2022 Cybozu Inc. 
20. kintoneの基本⽤語 l ポータル l ログイン後に表⽰されるトップ画⾯ l アプリ l DB(データベース) l フィールド l アプリを作成する際に、もともと⽤意されている選択項⽬ l ⽂字列1⾏ l 数値 l ラジオボタン l など l スペース l kintoneで⼤きな分類やカテゴリで分けたい時に使う l ポータルが⽞関なら、スペースは部屋 l スレッド l kintoneでコミュニケーションをとりたい時に使う ©2022 Cybozu Inc.  kintone
21. ハンズオン発展内容 ©2022 Cybozu Inc.  l 設定 > ⼀覧 >「+」 l カレンダー形式 l ⽇付：⽇付 l タイトル：タイトル
22. 4. Make と kintone ハンズオン - 2つのサービスをれんけいさせよう！ - ©2022 Cybozu Inc. 
23. 課題 ©2022 Cybozu Inc.  家族や友⼈の誕⽣⽇を忘れてしまう
24. 解決策 ©2022 Cybozu Inc.  ⾃動で通知を受け取る仕組みを作る
25. 完成全体像 ©2022 Cybozu Inc.  今⽇は何の⽇？ 今⽇は Aさんの 誕⽣⽇です！ ⾃ B Make 設定したメッセージをLINEに返す ⽂字・スタンプ などを検知
26. 必要なもの ©2022 Cybozu Inc.  今⽇は何の⽇？ 今⽇は Aさんの 誕⽣⽇です！ ⾃ B Make 設定したメッセージをLINEに返す Make ⽂字・スタンプ などを検知
27. 必要なもの ©2022 Cybozu Inc.  今⽇は何の⽇？ 今⽇は Aさんの 誕⽣⽇です！ ⾃ B Make 設定したメッセージをLINEに返す kintone アプリ LINE BOT LINE BOT LINE BOT ⽂字・スタンプ などを検知
28. Make とは？ lノーコード、ビジュアルコー ドでWebサービスの 連携ができるツール l無料枠あり l 1,000回実⾏/⽉ l 1,000以上アプリと連携できる l 最⼤2つアクティブなシナリオ を作成できる ©2022 Cybozu Inc.  Make
29. Make の⽤語を確認しよう！ l Scenarios(シナリオ) l アプリ同⼠の連携を1つに まとめたフロー l Module(モジュール) l 部品、他のものと組み合わせて使う l 1つのアプリ、1つの動作 (シナリオ上のアプリアンコンの数) ©2022 Cybozu Inc.  シナリオ モジュール Make
30. LINEモジュール LINE操作ができる部品 l メッセージ操作 l イベント監視 l 返信メッセージ送信 l プッシュメッセージ送信 l ブロードキャスト送信 l 添付ファイルのダウンロード l 通知操作 l LINE Notify通知送信 l グループ/リスト操作 l Botが所属するグループのユーザーID 取得 l グループメンバーのプロフィール取得 l グループ/ルーム退出 l etc ©2022 Cybozu Inc.  Make
31. LINEモジュール LINE操作ができる部品 l メッセージ操作 l ★イベント監視 l ★返信メッセージ送信 l プッシュメッセージ送信 l ブロードキャスト送信 l 添付ファイルのダウンロード l 通知操作 l LINE Notify通知送信 l グループ/リスト操作 l Botが所属するグループのユーザーID 取得 l グループメンバーのプロフィール取得 l グループ/ルーム退出 l etc ©2022 Cybozu Inc.  Make
32. kintoneモジュール kintone操作ができる部品 l レコード操作 l レコード作成を監視する l レコード検索 l レコード取得 l レコード作成 l レコード更新 l レコードのステータス更新 l レコード削除 l コメント操作 l コメント検索 l コメント作成 l コメント削除 l ファイル操作 l ファイルアップロード l API操作 l APIを叩く ©2022 Cybozu Inc.  Make
33. kintoneモジュール kintone操作ができる部品 l レコード操作 l レコード作成を監視する l ★レコード検索 l レコード取得 l レコード作成 l レコード更新 l レコードのステータス更新 l レコード削除 l コメント操作 l コメント検索 l コメント作成 l コメント削除 l ファイル操作 l ファイルアップロード l API操作 l APIを叩く ©2022 Cybozu Inc.  Make
34. Make ハンズオン ©2022 Cybozu Inc. 
35. 完成全体像 ©2022 Cybozu Inc.  今⽇は何の⽇？ 今⽇は Aさんの 誕⽣⽇です！ ⾃ B Make ⽂字・スタンプ などを検知 設定したメッセージをLINEに返す
36. Make ハンズオン⼿順 1. Makeにログインしよう 2. シナリオを作成しよう l LINE l LINE BOT を作成しよう l Watch Events の設定 l kintone l Get Records の設定 l LINE l Send a Reply Message の設定 l LINE Webhhokの設定 3. シナリオを実⾏して動作を確認しよう ©2022 Cybozu Inc. 
37. Make にログインしよう 1. 検索バーに 「make.com」と 打ち込みアクセスする 2. ⽤意している Email・Passwordでログイン ©2022 Cybozu Inc.  Make
38. シナリオを作成しよう 1. 左のメニューから Scenariosを選択 2. 右上の「Create a new scenario」をクリック 3. 左上の New scenario をク リックして名前「誕⽣⽇ BOT連携」をつけよう 4. 中央の「+ボタン」 をク リックしてシナリオを作成 5. 検索タブに「LINE」と⼊⼒ 6. LINEモジュールを選択 7. ⼀番上の「Watch Events」 を選択 ©2022 Cybozu Inc.  Make
39. LINE Botを作成しよう 1. LINE Developer Consoleに ログインする l ⽤意しているEmail&Password 2. プロバイダー作成 l プロバイダー名：「Make連携」 ©2022 Cybozu Inc.  LINE
40. LINE Botを作成しよう 1. ログイン 2. プロバイダー作成 3. 新規チャネル作成 l Messaging API を選択 l 地域・国選択：⽇本 l アイコン（任意） l チャネル名：誕⽣⽇Bot l チャンネル説明：誕⽣⽇Bot l ⼤業種：個⼈ l ⼩業種：個⼈（その他） l メールアドレス： 「***@example.com」 l アカウント利⽤規約：✅ l API利⽤規約：✅ ©2022 Cybozu Inc.  LINE
41. LINE Botを作成しよう 1. ログイン 2. プロバイダー作成 3. 新規チャネル作成 4. Botと友達になろう l Messaging API設定の QRコードを表⽰ l BOTと友達になる l ※先に友達追加をしてお かないと、Make側でエ ラーになる場合がある ©2022 Cybozu Inc.  LINE
42. LINE Botを作成しよう 1. ログイン 2. プロバイダー作成 3. 新規チャネル作成 4. Botと友達になろう 5. アクセストークンを発⾏ &コピーしよう l Messaging API l チャンネルアクセストークンを発⾏ l トークン：*************** コピー l ★Make側で使⽤します ©2022 Cybozu Inc.  LINE
43. LINE Watch Events の設定 l Webhook Add l Webhook name: 「誕⽣⽇BOT」 l Connection Add l Connections Add l Connection name：「誕⽣⽇ BOT」 l Channel Access Token：コピー したLINEのアクセストークン l Save ©2022 Cybozu Inc.  Make
44. kintone モジュール追加 l kintoneモジュール追加 l Serch Recordsを選択 ©2022 Cybozu Inc.  Make
45. kintone SerchRecords の設定 l Connection Add l Conncection type l 「Kintone」を選択 l Connection name l 誕⽣⽇BOT l Sub domain l techpro2 l Username l ※kintoneのログイン名 l Password l ※kintoneのログインパスワード l Domain name l 「cybozu.com」 を選択 ©2022 Cybozu Inc.  Make
46. kintone SerchRecords の設定 lApp ID l 作成したアプリを選択 lFields l ⽇付 l タイトル lQuery l ⽇付 = TODAY() lLimit l 1 ©2022 Cybozu Inc.  Make
47. LINE モジュール追加 l LINEモジュール追加 l Send a Reply Messageを選択 ©2022 Cybozu Inc.  Make
48. LINE Send a Reply Message の設定 l Connection l 設定したコネクションを選択 l Reply Token l Events[]:Reply Token ©2022 Cybozu Inc.  Make
49. LINE Send a Reply Message の設定 l Connection l 設定したコネクションを選択 l Reply Token l Events[]:Reply Token l Messages l Type l Text l Text l タイトルのValue を選択 ©2022 Cybozu Inc.  Make
50. LINE Send a Reply Message の設定 l Connection l 設定したコネクションを選択 l Reply Token l Events[]:Reply Token l Messages l Type l Text l Text l タイトルのValue を選択 ©2022 Cybozu Inc.  Make
51. LINE Webhookを設定しよう lLINE Watch Events l URLをコピー ©2022 Cybozu Inc.  Make
52. LINE Webhookを設定しよう lMessaging API設定 Webhook設定 l URL：コピーしたURL l Webhookの利⽤：✅オン ©2022 Cybozu Inc.  LINE
53. LINE公式アカウント機能を編集しよう l 変更箇所 l 応答メッセージ：無効 l あいさつメッセージ：無効 ©2022 Cybozu Inc.  LINE
54. 動作確認をしよう！ ©2022 Cybozu Inc.  l 左下の「Run once」をクリック l LINE > BOTのトーク画⾯を表⽰ し、⽂字・スタンプを送信する Make
55. 動作確認をしよう！ ©2022 Cybozu Inc. 
56. Make発展 ©2022 Cybozu Inc. 
57. ①エラーを確認してみよう！ ©2022 Cybozu Inc.  Make エラー内容 1つのパラメーターの検証に失敗しました。 必須パラメーター'text'の値がありません。 →kintoneからデータが取得できず、返信 メッセージのtextが存在しないためエラー。 l 今⽇の予定がkintoneに登録されていない場合、エラーになる l ⚠ マークが表⽰される
58. ②フィルターをつけてみよう！ ©2022 Cybozu Inc.  Make lFilter(フィルター) l モジュール間の・・・を クリックすると設定できる l 先のモジュールに進む前に 条件を設定することができる l フィルターで条件をつけるこ とでエラーを回避できる 設定内容 kintone[タイトル：value]がExists（存在 する）場合に、先のモジュールに進む
59. ③Routerモジュールで条件分岐をしてみよう！ ©2022 Cybozu Inc.  Make lRouter(ルーター) l 値が存在しない場合の処理を追加 したい l Routerとフィルターを使って条件 を分けてみる
60. ③Routerモジュールで条件分岐をしてみよう！ ©2022 Cybozu Inc.  Make
61. ④LINEでスタンプを返信してみよう！ ©2022 Cybozu Inc.  Make
62. ④LINEでスタンプを返信してみよう！ ©2022 Cybozu Inc.  Make 正しく動作するとスタンプが表⽰される
63. 5. kintone 発展編 ©2022 Cybozu Inc. 
64. 発展編 lkintoneはセンサーなどのハードウェアとの連携も簡単！ ©2022 Cybozu Inc.  lkintoneで部屋のCO2濃度、温 湿度を取得するシステム lRaspberry Piとセンサーを電 源用2本・通信用2本で接続 l CO2センサー l 温湿度センサー
65. 発展編 lkintoneはセンサーなどのハードウェアとの連携も簡単！ ©2022 Cybozu Inc.  Node-RED(ハードウェア⽤ノーコードツール)で GUIでセンサーデータのフローを設定して完了！
66. 発展編 lkintoneはセンサーなどのハードウェアとの連携も簡単！ ©2022 Cybozu Inc.  データも⾒やすく、グラフ化も簡単です！
67. 発展編 l電気の知識とプログラミングができればこんなことも…！ ©2022 Cybozu Inc.  lTwitterからツイートを取得し て、ディスプレイに表⽰する システム lRaspberry Piとディスプレイ を配線(ややこしい…！)
68. 発展編 l電気の知識とプログラミングができればこんなことも…！ ©2022 Cybozu Inc.  lRPAの設定 lPythonで←こんな感じでコー ディング
69. 発展編 l電気の知識とプログラミングができればこんなことも…！ ©2022 Cybozu Inc.  l取得したツイートをディスプ レイに表⽰できました！
70. 休憩時間 - 10min- ©2022 Cybozu Inc. 
71. 6. ワークショップ - キントーンをもちいてシナリオをつくろう！ - ©2022 Cybozu Inc. 
72. ワークショップテーマ 学校⽣活の中で、⾃動でお知らせがあると嬉しいことを kintoneとMakeを使って解決してみよう！ ©2022 Cybozu Inc. 
73. ブレストしてみよう（5分） lアイディア出し lチームで1つ解決したい課題を決める ©2022 Cybozu Inc.  課題
74. 課題解決のためのシナリオを考えてみよう（10分） lハンズオンの例 l LINEで⽂字列/スタンプを受け取った（〇〇〇）ときに、 kintoneから今⽇のレコードデータを1件取得（ ＊＊）して、 LINEに取得したメッセージを返す（△△△） ©2022 Cybozu Inc.  課題 〇〇〇したときに、△△△する トリガー（動作を始めるきっかけ） 期待する処理
75. kintone アプリを作ろう（5分） lkintoneにどんなデータを保存しておくと良いか チームでkintoneのアプリを作ってみよう l アプリ名に必ずチーム名を⼊れてください ©2022 Cybozu Inc.  kintone
76. ワークフローを作ってみよう（30分） l考えた連携シナリオを、ワークフローにしてみよう ©2022 Cybozu Inc.  Make
77. 発表資料（10分） nスケッチブックor パワポ n チーム名 n タイトル n できること：何をどのように解決するのか n こだわり：チームでこだわったこと (任意) n発表時間：1,2分程度 ©2022 Cybozu Inc.  資料
78. 休憩時間 - 10min- ©2022 Cybozu Inc. 
79. 7. 発表 -20min- ©2022 Cybozu Inc. 
80. 発表 nスケッチブックor パワポ n チーム名 n タイトル n できること：何をどのように解決するのか n こだわり：チームでこだわったこと (任意) n発表時間：1,2分程度 ©2022 Cybozu Inc. 
81. 8. コメント・まとめ - ふりかえり - ©2022 Cybozu Inc. 
82. まとめ lkintone l データを貯めるデータベース l APIがあり、Webサービスやハードウェアと連携できる lノーコードツール l 簡単にサービス同⼠を連携できる l 複雑な処理やデバッグ（エラー対応）が難しい lプログラミング l ノーコードより時間がかかる可能性が⾼い l 柔軟にカスタマイズできる l 複雑な処理 l ハードウェア連携 ©2022 Cybozu Inc. 
83. おまけ lkintone開発者ライセンス l メールアドレスで取得可能 l https://developer.cybozu.io/hc/ja/articles/200720464 l 公式ドキュメント（チュートリアルやAPI情報を確認できます） l https://developer.cybozu.io/hc/ja lMakeアカウント l メールアドレスで取得可能 l https://www.make.com lLINE Developers l LINEアカウント or メールアドレスで取得可能 l https://account.line.biz/login ©2022 Cybozu Inc. 
84. Enjoy Programming! ©2022 Cybozu Inc.  ワークショプ、おつかれさまでした !