Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
kintoneとMakeを使用したワークショップ U22プログラミングコンテスト2022
Search
kintoneGeeks
September 08, 2022
Programming
0
2.2k
kintoneとMakeを使用したワークショップ U22プログラミングコンテスト2022
U22プログラミングコンテスト2022のワークショップで使用した資料です。
ノーコードツールMakeを使用して、kintoneとLINEの連携ワークショップを紹介しています。
kintoneGeeks
September 08, 2022
Tweet
Share
More Decks by kintoneGeeks
See All by kintoneGeeks
kintoneの紹介
kintonegeeks
0
26
TechSeekerハッカソン kintone紹介
kintonegeeks
0
650
Webサービスの必須スキル:HTTPリクエスト入門
kintonegeeks
1
830
kintone APIの紹介
kintonegeeks
0
1.9k
kintoneの紹介
kintonegeeks
0
8.4k
Other Decks in Programming
See All in Programming
SwiftUI, Jetpack Composeの導入で変化した「家族アルバム みてね」のアプリ開発体験
hicka04
6
400
Ruby製社内ツールのGo移行
bgpat
2
260
Cloud RunとCloud PubSubでサーバレスなデータ基盤2024 with Terraform / Cloud Run and PubSub with Terraform
shinyorke
7
1.9k
object-oriented-conference-2024
fuwasegu
6
1.9k
受託開発でGitLab CI を活用していく
xiombatsg
1
130
WasmOS: Wasmを実行する自作Microkernel
riru
0
370
App Router への移行は「改善」となり得るのか?/ Can migration to App Router be an improvement
takefumiyoshii
1
130
Open Source Swift Workshop - Foundation and first party libraries
ikesyo
0
270
PHPerKaigi 2024〜10年以上動いているレガシーなバッチシステムを Kubernetes(Amazon EKS) に移行する取り組み〜
tshinowpub
1
220
CircleCIを活用して AWSへの継続的デリバリーを 実践する
coconala_engineer
1
110
Open Source Swiftc Workshop
kitasuke
1
290
導入から5年が経って見えた Datadog APM 運用の課題
bgpat
2
540
Featured
See All Featured
RailsConf 2023
tenderlove
0
510
What’s in a name? Adding method to the madness
productmarketing
PRO
14
2.6k
A Tale of Four Properties
chriscoyier
150
22k
Build your cross-platform service in a week with App Engine
jlugia
223
17k
Stop Working from a Prison Cell
hatefulcrawdad
265
19k
Imperfection Machines: The Place of Print at Facebook
scottboms
257
12k
Keith and Marios Guide to Fast Websites
keithpitt
407
22k
Large-scale JavaScript Application Architecture
addyosmani
501
110k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
28
5.9k
Being A Developer After 40
akosma
56
580k
Music & Morning Musume
bryan
39
5.5k
Git: the NoSQL Database
bkeepers
PRO
421
63k
Transcript
kintoneとMakeを使⽤した ワークショップ ©2022 Cybozu Inc. 〜⽇々使⽤してるWebサービス同⼠を繋げて 便利なソリューションを作ってみよう〜
もくじ ©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)
1. 会社紹介 - サイボウズとは? - ©2022 Cybozu Inc.
サイボウズ株式会社とは 名称 サイボウズ株式会社(東証⼀部上場 4776) 事業内容 チームの情報共有サービス 「グループウェア」 の開発・販売・運⽤ チームワーク強化メソッドの開発・普及 創業
1997年8⽉(創業:愛媛県松⼭市) 所在地 東京都中央区⽇本橋2-7-1 東京⽇本橋タワー 拠点 東京, ⼤阪, 松⼭, 名古屋, 福岡, 仙台, 広島、札幌 上海, 深圳, 台北, ホーチミン, サンフランシスコ, シドニー, バンコク 資本⾦ 613百万円 業績 連結売上 15,642百万円 ※2020年12⽉期:業績予想 従業員数 連結 1,012名 (有期契約149名含む) ※2020年12⽉末時点 平均年齢 34.5歳 (単体・無期雇⽤) ©2022 Cybozu Inc.
サイボウズの企業理念 チームワークあふれる社会を創る Purpose (存在意義) ©2022 Cybozu Inc.
グループウェア事業(ツール) ⼤企業向けグループウェア 業務アプリ構築クラウド 中⼩企業向けグループウェア メール共有システム ©2022 Cybozu Inc.
グループウェア事業(ツール) ⼤企業向けグループウェア 業務アプリ構築クラウド 中⼩企業向けグループウェア メール共有システム ©2022 Cybozu Inc. 今回はkintoneを使⽤して
ワークショップをしていきます!
2. kintoneとは? - キントーンのきほん - ©2022 Cybozu Inc.
kintoneとは チームで使うシステムを 簡単に作成できる クラウドデータベース ©2022 Cybozu Inc.
kintoneの特徴 ©2022 Cybozu Inc.
kintoneの特徴 ©2022 Cybozu Inc. データを貯めることが できる 誰でも簡単に 操作できる APIが豊富
データを貯めることが できる l 必要な情報を蓄積・共有できる データベース l kintone上では「アプリ」と呼ばれる ©2022 Cybozu Inc.
誰でも簡単に操作できる l 左側の項⽬から適切なフィールド を選択しドラッグ&ドロップでア プリが作成できる l 位置やサイズの変更もできる l 作成・変更をUI(画⾯)上でできる ©2022
Cybozu Inc.
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
3. kintone ハンズオン - キントーンをさわってみよう! - ©2022 Cybozu Inc.
ハンズオン内容 kintoneに「誕⽣⽇管理アプリ」を作成しよう! ©2022 Cybozu Inc.
ハンズオン内容 kintoneに「誕⽣⽇管理アプリ」を作成しよう! ©2022 Cybozu Inc. 誰が いつ
kintone ハンズオン⼿順 1. kintoneにログインしよう 2. アプリを作ってみよう l 誕⽣⽇管理アプリ l ⽇付:⽇付
l ⽂字列1⾏:タイトル 3. アプリにデータを登録しよう 4. データを更新しよう 5. アプリに項⽬を追加しよう l 設定 > フィールドを追加 l ⽂字列複数:メモ 6. [発展] l カレンダー形式の⼀覧を作ってみよう! ©2022 Cybozu Inc.
kintone ハンズオン ©2022 Cybozu Inc.
kintoneの基本⽤語 l ポータル l ログイン後に表⽰されるトップ画⾯ l アプリ l DB(データベース) l
フィールド l アプリを作成する際に、もともと⽤意されている選択項⽬ l ⽂字列1⾏ l 数値 l ラジオボタン l など l スペース l kintoneで⼤きな分類やカテゴリで分けたい時に使う l ポータルが⽞関なら、スペースは部屋 l スレッド l kintoneでコミュニケーションをとりたい時に使う ©2022 Cybozu Inc. kintone
ハンズオン発展内容 ©2022 Cybozu Inc. l 設定 > ⼀覧 >「+」
l カレンダー形式 l ⽇付:⽇付 l タイトル:タイトル
4. Make と kintone ハンズオン - 2つのサービスをれんけいさせよう! - ©2022 Cybozu
Inc.
課題 ©2022 Cybozu Inc. 家族や友⼈の誕⽣⽇を忘れてしまう
解決策 ©2022 Cybozu Inc. ⾃動で通知を受け取る仕組みを作る
完成全体像 ©2022 Cybozu Inc. 今⽇は何の⽇? 今⽇は Aさんの 誕⽣⽇です! ⾃
B Make 設定したメッセージをLINEに返す ⽂字・スタンプ などを検知
必要なもの ©2022 Cybozu Inc. 今⽇は何の⽇? 今⽇は Aさんの 誕⽣⽇です! ⾃
B Make 設定したメッセージをLINEに返す Make ⽂字・スタンプ などを検知
必要なもの ©2022 Cybozu Inc. 今⽇は何の⽇? 今⽇は Aさんの 誕⽣⽇です! ⾃
B Make 設定したメッセージをLINEに返す kintone アプリ LINE BOT LINE BOT LINE BOT ⽂字・スタンプ などを検知
Make とは? lノーコード、ビジュアルコー ドでWebサービスの 連携ができるツール l無料枠あり l 1,000回実⾏/⽉ l 1,000以上アプリと連携できる
l 最⼤2つアクティブなシナリオ を作成できる ©2022 Cybozu Inc. Make
Make の⽤語を確認しよう! l Scenarios(シナリオ) l アプリ同⼠の連携を1つに まとめたフロー l Module(モジュール) l
部品、他のものと組み合わせて使う l 1つのアプリ、1つの動作 (シナリオ上のアプリアンコンの数) ©2022 Cybozu Inc. シナリオ モジュール Make
LINEモジュール LINE操作ができる部品 l メッセージ操作 l イベント監視 l 返信メッセージ送信 l プッシュメッセージ送信
l ブロードキャスト送信 l 添付ファイルのダウンロード l 通知操作 l LINE Notify通知送信 l グループ/リスト操作 l Botが所属するグループのユーザーID 取得 l グループメンバーのプロフィール取得 l グループ/ルーム退出 l etc ©2022 Cybozu Inc. Make
LINEモジュール LINE操作ができる部品 l メッセージ操作 l ★イベント監視 l ★返信メッセージ送信 l プッシュメッセージ送信
l ブロードキャスト送信 l 添付ファイルのダウンロード l 通知操作 l LINE Notify通知送信 l グループ/リスト操作 l Botが所属するグループのユーザーID 取得 l グループメンバーのプロフィール取得 l グループ/ルーム退出 l etc ©2022 Cybozu Inc. Make
kintoneモジュール kintone操作ができる部品 l レコード操作 l レコード作成を監視する l レコード検索 l レコード取得
l レコード作成 l レコード更新 l レコードのステータス更新 l レコード削除 l コメント操作 l コメント検索 l コメント作成 l コメント削除 l ファイル操作 l ファイルアップロード l API操作 l APIを叩く ©2022 Cybozu Inc. Make
kintoneモジュール kintone操作ができる部品 l レコード操作 l レコード作成を監視する l ★レコード検索 l レコード取得
l レコード作成 l レコード更新 l レコードのステータス更新 l レコード削除 l コメント操作 l コメント検索 l コメント作成 l コメント削除 l ファイル操作 l ファイルアップロード l API操作 l APIを叩く ©2022 Cybozu Inc. Make
Make ハンズオン ©2022 Cybozu Inc.
完成全体像 ©2022 Cybozu Inc. 今⽇は何の⽇? 今⽇は Aさんの 誕⽣⽇です! ⾃
B Make ⽂字・スタンプ などを検知 設定したメッセージをLINEに返す
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.
Make にログインしよう 1. 検索バーに 「make.com」と 打ち込みアクセスする 2. ⽤意している Email・Passwordでログイン ©2022
Cybozu Inc. Make
シナリオを作成しよう 1. 左のメニューから Scenariosを選択 2. 右上の「Create a new scenario」をクリック 3.
左上の New scenario をク リックして名前「誕⽣⽇ BOT連携」をつけよう 4. 中央の「+ボタン」 をク リックしてシナリオを作成 5. 検索タブに「LINE」と⼊⼒ 6. LINEモジュールを選択 7. ⼀番上の「Watch Events」 を選択 ©2022 Cybozu Inc. Make
LINE Botを作成しよう 1. LINE Developer Consoleに ログインする l ⽤意しているEmail&Password 2.
プロバイダー作成 l プロバイダー名:「Make連携」 ©2022 Cybozu Inc. LINE
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
LINE Botを作成しよう 1. ログイン 2. プロバイダー作成 3. 新規チャネル作成 4. Botと友達になろう
l Messaging API設定の QRコードを表⽰ l BOTと友達になる l ※先に友達追加をしてお かないと、Make側でエ ラーになる場合がある ©2022 Cybozu Inc. LINE
LINE Botを作成しよう 1. ログイン 2. プロバイダー作成 3. 新規チャネル作成 4. Botと友達になろう
5. アクセストークンを発⾏ &コピーしよう l Messaging API l チャンネルアクセストークンを発⾏ l トークン:*************** コピー l ★Make側で使⽤します ©2022 Cybozu Inc. LINE
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
kintone モジュール追加 l kintoneモジュール追加 l Serch Recordsを選択 ©2022 Cybozu Inc.
Make
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
kintone SerchRecords の設定 lApp ID l 作成したアプリを選択 lFields l ⽇付
l タイトル lQuery l ⽇付 = TODAY() lLimit l 1 ©2022 Cybozu Inc. Make
LINE モジュール追加 l LINEモジュール追加 l Send a Reply Messageを選択 ©2022
Cybozu Inc. Make
LINE Send a Reply Message の設定 l Connection l 設定したコネクションを選択
l Reply Token l Events[]:Reply Token ©2022 Cybozu Inc. Make
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
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
LINE Webhookを設定しよう lLINE Watch Events l URLをコピー ©2022 Cybozu Inc.
Make
LINE Webhookを設定しよう lMessaging API設定 Webhook設定 l URL:コピーしたURL l Webhookの利⽤:✅オン ©2022
Cybozu Inc. LINE
LINE公式アカウント機能を編集しよう l 変更箇所 l 応答メッセージ:無効 l あいさつメッセージ:無効 ©2022 Cybozu Inc.
LINE
動作確認をしよう! ©2022 Cybozu Inc. l 左下の「Run once」をクリック l LINE
> BOTのトーク画⾯を表⽰ し、⽂字・スタンプを送信する Make
動作確認をしよう! ©2022 Cybozu Inc.
Make発展 ©2022 Cybozu Inc.
①エラーを確認してみよう! ©2022 Cybozu Inc. Make エラー内容 1つのパラメーターの検証に失敗しました。 必須パラメーター'text'の値がありません。 →kintoneからデータが取得できず、返信
メッセージのtextが存在しないためエラー。 l 今⽇の予定がkintoneに登録されていない場合、エラーになる l ⚠ マークが表⽰される
②フィルターをつけてみよう! ©2022 Cybozu Inc. Make lFilter(フィルター) l モジュール間の・・・を クリックすると設定できる
l 先のモジュールに進む前に 条件を設定することができる l フィルターで条件をつけるこ とでエラーを回避できる 設定内容 kintone[タイトル:value]がExists(存在 する)場合に、先のモジュールに進む
③Routerモジュールで条件分岐をしてみよう! ©2022 Cybozu Inc. Make lRouter(ルーター) l 値が存在しない場合の処理を追加 したい
l Routerとフィルターを使って条件 を分けてみる
③Routerモジュールで条件分岐をしてみよう! ©2022 Cybozu Inc. Make
④LINEでスタンプを返信してみよう! ©2022 Cybozu Inc. Make
④LINEでスタンプを返信してみよう! ©2022 Cybozu Inc. Make 正しく動作するとスタンプが表⽰される
5. kintone 発展編 ©2022 Cybozu Inc.
発展編 lkintoneはセンサーなどのハードウェアとの連携も簡単! ©2022 Cybozu Inc. lkintoneで部屋のCO2濃度、温 湿度を取得するシステム lRaspberry Piとセンサーを電
源用2本・通信用2本で接続 l CO2センサー l 温湿度センサー
発展編 lkintoneはセンサーなどのハードウェアとの連携も簡単! ©2022 Cybozu Inc. Node-RED(ハードウェア⽤ノーコードツール)で GUIでセンサーデータのフローを設定して完了!
発展編 lkintoneはセンサーなどのハードウェアとの連携も簡単! ©2022 Cybozu Inc. データも⾒やすく、グラフ化も簡単です!
発展編 l電気の知識とプログラミングができればこんなことも…! ©2022 Cybozu Inc. lTwitterからツイートを取得し て、ディスプレイに表⽰する システム lRaspberry
Piとディスプレイ を配線(ややこしい…!)
発展編 l電気の知識とプログラミングができればこんなことも…! ©2022 Cybozu Inc. lRPAの設定 lPythonで←こんな感じでコー ディング
発展編 l電気の知識とプログラミングができればこんなことも…! ©2022 Cybozu Inc. l取得したツイートをディスプ レイに表⽰できました!
休憩時間 - 10min- ©2022 Cybozu Inc.
6. ワークショップ - キントーンをもちいてシナリオをつくろう! - ©2022 Cybozu Inc.
ワークショップテーマ 学校⽣活の中で、⾃動でお知らせがあると嬉しいことを kintoneとMakeを使って解決してみよう! ©2022 Cybozu Inc.
ブレストしてみよう(5分) lアイディア出し lチームで1つ解決したい課題を決める ©2022 Cybozu Inc. 課題
課題解決のためのシナリオを考えてみよう(10分) lハンズオンの例 l LINEで⽂字列/スタンプを受け取った(〇〇〇)ときに、 kintoneから今⽇のレコードデータを1件取得( **)して、 LINEに取得したメッセージを返す(△△△) ©2022 Cybozu Inc.
課題 〇〇〇したときに、△△△する トリガー(動作を始めるきっかけ) 期待する処理
kintone アプリを作ろう(5分) lkintoneにどんなデータを保存しておくと良いか チームでkintoneのアプリを作ってみよう l アプリ名に必ずチーム名を⼊れてください ©2022 Cybozu Inc.
kintone
ワークフローを作ってみよう(30分) l考えた連携シナリオを、ワークフローにしてみよう ©2022 Cybozu Inc. Make
発表資料(10分) nスケッチブックor パワポ n チーム名 n タイトル n できること:何をどのように解決するのか n
こだわり:チームでこだわったこと (任意) n発表時間:1,2分程度 ©2022 Cybozu Inc. 資料
休憩時間 - 10min- ©2022 Cybozu Inc.
7. 発表 -20min- ©2022 Cybozu Inc.
発表 nスケッチブックor パワポ n チーム名 n タイトル n できること:何をどのように解決するのか n
こだわり:チームでこだわったこと (任意) n発表時間:1,2分程度 ©2022 Cybozu Inc.
8. コメント・まとめ - ふりかえり - ©2022 Cybozu Inc.
まとめ lkintone l データを貯めるデータベース l APIがあり、Webサービスやハードウェアと連携できる lノーコードツール l 簡単にサービス同⼠を連携できる l
複雑な処理やデバッグ(エラー対応)が難しい lプログラミング l ノーコードより時間がかかる可能性が⾼い l 柔軟にカスタマイズできる l 複雑な処理 l ハードウェア連携 ©2022 Cybozu Inc.
おまけ 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.
Enjoy Programming! ©2022 Cybozu Inc. ワークショプ、おつかれさまでした !