Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

kintoneGeeks
September 08, 2022

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

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

kintoneGeeks

September 08, 2022
Tweet

More Decks by kintoneGeeks

Other Decks in Programming

Transcript

  1. kintoneとMakeを使⽤した ワークショップ ©2022 Cybozu Inc.  〜⽇々使⽤してるWebサービス同⼠を繋げて 便利なソリューションを作ってみよう〜

  2. もくじ ©2022 Cybozu Inc.  サイボウズ会社紹介 1 5min kintoneとは? 2

    5min kintoneハンズオン - 基本機能を使ってみよう!- 3 10min Make × kintoneを使って連携してみよう 4 20min ワークショップ 6 60min 発表 7 20min 発展編 - kintone連携紹介 - 5 10min 先⽣からのコメント・まとめ 8 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.  ワークショプ、おつかれさまでした !