TechSeeker Hackathon 2024 スピンアウト企画

TechSeeker Hackathon 2024 の スピンアウト企画でkintoneについて紹介をした時のスライド

1. ©️ 2024 Cybozu,inc 1 TechSeeker Hackathon 2024
2. kintoneをハッカソンで使う方法 ©️ 2024 Cybozu,inc 2 時間が無い方はこの記事を読みましょう！ https://kintone-geeks.hatenablog.com/entry/2023/06/23/114124
3. ©️ 2024 Cybozu,inc 3 • kintoneの紹介 • 無料のkintone開発者ライセンスの取得方法の案内 • ハッカソンでkintoneを活用する方法 • 自作アプリ、マイコンや他サービスとの連携方法 • kintoneを使ってみよう • Q & A 本日のご案内
4. ©️ 2024 Cybozu,inc 4 • kintoneの紹介 • 無料のkintone開発者ライセンスの取得方法の案内 • ハッカソンでkintoneを活用する方法 • 自作アプリ、マイコンや他サービスとの連携方法 • kintoneを使ってみよう • Q & A 本日のご案内
5. kintoneとは チームで使うシステムを簡単に作成 できるクラウドデータベース ©️ 2024 Cybozu,inc 5
6. kintoneの基本 ©️ 2024 Cybozu,inc 6 データを貯めることが できる GUIで誰でもかんたんに 操作できる コミュニケーションが 取れる
7. データを貯めることができる ©️ 2024 Cybozu,inc 7 レコード アプリ ⚫ 必要な情報を蓄積・共有できるデータベース ▲一覧画面
8. データを貯めることができる ⚫ 詳細画面：フォーム形式 ⚫ 一覧画面：表形式 ©️ 2024 Cybozu,inc 8 ▼詳細画面 ▼一覧画面
9. GUIで誰でもかんたんに操作できる ⚫ ドラッグ&ドロップでデータベース(アプリ)を作成 ⚫ 更新も画面操作で簡単 ©️ 2024 Cybozu,inc 9
10. GUIで誰でもかんたんに操作できる ⚫ 業務にマッチするアプリを作れる ©️ 2024 Cybozu,inc 10 顧客リスト
11. GUIで誰でもかんたんに操作できる ⚫ 業務にマッチするアプリを作れる ©️ 2024 Cybozu,inc 11 問い合わせ管理
12. ⚫ デモデータの登録も、UI操作で簡単に登録できる ⚫ データのグラフ化も簡単 ⚫ 管理画面としても使える ©️ 2024 Cybozu,inc 12 GUIで誰でもかんたんに操作できる
13. コミュニケーションが取れる ⚫ データに紐づくコメント(コミュニケーション)がアプリ(データベース)上でできる ©️ 2024 Cybozu,inc 13 ▼詳細画面
14. ©️ 2024 Cybozu,inc 14 • kintoneの紹介 • 無料のkintone開発者ライセンスの取得方法の案内 • ハッカソンでkintoneを活用する方法 • 自作アプリ、マイコンや他サービスとの連携方法 • kintoneを使ってみよう • Q & A 本日のご案内
15. 開発者ライセンス 無償のkintone環境を取得しよう ©️ 2024 Cybozu,inc 15 開発者ライセンスとは • 1年間無料で利用出来るkintoneの環境 • 1年後、利用延長も可能 • ハッカソン等で利用してもOK 申し込もう!
16. 開発者ライセンスの申込方法 無償のkintone環境を取得しよう ©️ 2024 Cybozu,inc 16 kintone 開発者ライセンス https://cybozu.dev/
17. 開発者ライセンスの申込方法 無償のkintone環境を取得しよう ©️ 2024 Cybozu,inc 17
18. 開発者ライセンスの申込方法 無償のkintone環境を取得しよう ©️ 2024 Cybozu,inc 18 会社名は『個人』と入れる 申し込みのきっかけは『その他』 を選び、『TechSeeker』と入れる
19. 開発者ライセンスの申込方法 無償のkintone環境を取得しよう ©️ 2024 Cybozu,inc 19 お申し込みいただきまたしたkintone開発者ライセンス が利用可能な状態になりました 以下のURLにアクセスしてサービスをご利用ください URL： https://SAMPLE.cybozu.com メール来た~ フォーム送信後、メールを待つ
20. ©️ 2024 Cybozu,inc 20 • kintoneの紹介 • 無料のkintone開発者ライセンスの取得方法の案内 • ハッカソンでkintoneを活用する方法 • 自作アプリ、マイコンや他サービスとの連携方法 • kintoneを使ってみよう • Q & A 本日のご案内
21. ハッカソンといえば アイディア出し コンセプト作成 設計 ©️ 2024 Cybozu,inc 21 開発 プレゼン
22. ハッカソンといえば アイディア出し コンセプト作成 設計 ©️ 2024 Cybozu,inc 22 開発 プレゼン スピード (時間との勝負) クオリティ (デモ・資料) ⚫ データベース爆速作成 ⚫ APIを用いてサービス連携 ⚫ デモデータの登録やデータの可視化が簡単 ⚫ 進捗管理やメンバーとの テキストコミュニケーションにも使える
23. ハッカソンでの使い方 ©️ 2024 Cybozu,inc 23 REST API経由でデータを記録する場所として使う • 部屋の温度や湿度のデータ • BOTのトークデータ • ゲームのセーブデータ • 飲食店の情報 • プレイヤーのランキング情報 • 遊び場の記録 • カメラ映像の記録 • 干し芋リスト • 備品管理 などなど データの登録 データの取得
24. プロトぺディアで作品例を見よう ©️ 2024 Cybozu,inc 24 引用： https://protopedia.net/material/180 #kintone
25. 作品紹介：ゆるアバター2023 ©️ 2024 Cybozu,inc 25 https://protopedia.net/prototype/3946 kintone賞 TechSeeker Hackathon 2023 感情や要求をノンバーバルコミュニケーションで表現した作品。 Spresenseでkintoneに記録された『状態』を取得し、NeoPixelを制御する作品。
26. 作品紹介：血縁 ©️ 2024 Cybozu,inc 26 https://protopedia.net/prototype/3562 kintone賞 IoTで業務改善コンテスト2022 血圧のSNSを実装した作品。 ユーザが記録した血圧や部屋の湿度・温度がkintoneに蓄積され、グラフで可視化される。
27. 作品紹介：射的2.0 ©️ 2024 Cybozu,inc 27 https://kintone-geeks.hatenablog.com/entry/mft2023_shooting2.0_GUI Maker Faire 2023 次世代の祭りの社的をイメージした作品。 射的で獲得した点数がkintoneにランキング化される。
28. ©️ 2024 Cybozu,inc 28 • kintoneの紹介 • 無料のkintone開発者ライセンスの取得方法の案内 • ハッカソンでkintoneを活用する方法 • 自作アプリ、マイコンや他サービスとの連携方法 • kintoneを使ってみよう • Q & A 本日のご案内
29. kintoneの連携の基本 ©️ 2024 Cybozu,inc 29 JavaScript API Webhook REST API
30. REST API ⚫ プログラミングやノーコードツール用いて外部サーバーやサービスと 連携してkintoneアプリのCRUD操作(登録・取得・更新・削除)ができる ⚫ 例： ▪ kintoneデータを1件取得する (GET) ▪ kintoneにデータを登録する (POST) ©️ 2024 Cybozu,inc 30 データ取得/追加 レスポンス 作品のデータをkintoneに蓄積したい場合
31. Webhook ⚫ kintoneにデータが登録・更新・削除されたタイミングで レコードデータ(1件)をPOSTする ⚫ 例：kintoneにデータが登録されたタイミングでLambdaにデータをPOSTする ©️ 2024 Cybozu,inc 31 Webhook kintone上の操作を作品の一部として取り入れたい場合
32. JavaScript API ⚫ kintone画面のカスタマイズができる ⚫ kintone画面操作をトリガーにJavaScriptコードを発火できる ⚫ 例： ▪ 一覧画面を表示した時に〇〇する ▪ 新規レコードを保存したときに〇〇する ©️ 2024 Cybozu,inc 32 作品のフロントエンドをkintoneで実装したい場合
33. 連携方法の例 ©️ 2024 Cybozu,inc 33 Webアプリ→kintone マイコン→kintone デスクトップアプリ→kintone 他サービス⇔kintone
34. 連携方法：デスクトップアプリ→kintone ©️ 2024 Cybozu,inc 34 データ取得/追加 レスポンス ⚫ 使用言語でHTTPリクエストを使い、kintoneのREST API経由でデータの 送受信を行う
35. 連携方法：Webアプリ→kintone ©️ 2024 Cybozu,inc 35 ⚫ フロントエンドからだとkintoneとの直接のやりとりは出来ない(CORSエラーになる) ⚫ バックエンドの中継サーバーを立てて、HTTP リクエストでそこを経由してkintoneのREST APIでデータの送受信を行う Flask (python) や Express (node.js) 等
36. 連携方法：マイコン→kintone ©️ 2024 Cybozu,inc 36 ⚫ 使用言語でHTTPリクエストを使い、kintoneのREST API経由でデータの送受信を行う ⚫ Node-REDのノードも使用出来る データ取得/追加 レスポンス
37. 連携方法：kintone⇔他サービス ©️ 2024 Cybozu,inc 37 webhook IFTTT、make.com、ZapierやPower Automateなどのサービスを使って、容易に他サービスと の連携が出来る レスポンス レスポンス リクエスト
38. 参考ページ ©️ 2024 Cybozu,inc 38 • 無料の開発者ライセンス https://cybozu.dev/ja/kintone/developer-license/ • APIトークンの生成方法 https://jp.cybozu.help/k/ja/id/040471.html • APIドキュメント o レコードの登録 https://cybozu.dev/ja/kintone/docs/rest-api/records/add-record/ o レコードの取得 https://cybozu.dev/ja/kintone/docs/rest-api/records/get-record/ o 複数のレコードの取得 https://cybozu.dev/ja/kintone/docs/rest-api/records/get-records/ • SDK o kintone JavaScript Client https://cybozu.dev/ja/kintone/sdk/rest-api-client/kintone-javascript-client/ o kintone Java Client https://cybozu.dev/ja/kintone/sdk/rest-api-client/kintone-java-client/ • ハッカソンでkintoneを使う方法 https://kintone-geeks.hatenablog.com/entry/2023/06/23/114124
39. ©️ 2024 Cybozu,inc 39 • kintoneの紹介 • 無料のkintone開発者ライセンスの取得方法の案内 • ハッカソンでkintoneを活用する方法 • 自作アプリ、マイコンや他サービスとの連携方法 • kintoneを使ってみよう • Q & A 本日のご案内
40. kintoneの開発者ライセンスにアクセスしよう ©️ 2024 Cybozu,inc 40 お申し込みいただきまたしたkintone開発者ライセンス が利用可能な状態になりました 以下のURLにアクセスしてサービスをご利用ください URL： https://SAMPLE.cybozu.com
41. kintoneの開発者ライセンスにアクセスしよう ©️ 2024 Cybozu,inc 41 アプリウィジェットの＋ボタンをクリック 『はじめから作成』をクリック
42. kintoneの開発者ライセンスにアクセスしよう ©️ 2024 Cybozu,inc 42 『アプリを公開/アプリを更新』で Webデータベースが 使えるようになる ドラッグ＆ドロップでアプリを作成する
43. kintoneの開発者ライセンスにアクセスしよう ©️ 2024 Cybozu,inc 43 フィールドごとに詳細な設定が決められる kintoneアプリ上の表示名 HTTP Requestでデータの送受信を 行う時のフィールドの固有名
44. kintoneの開発者ライセンスにアクセスしよう ©️ 2024 Cybozu,inc 44 設定画面からWebデータベース用の認証用のAPIトークンが生成できる ① ② ③ ④ ⑤
45. kintoneの開発者ライセンスにアクセスしよう ©️ 2024 Cybozu,inc プログラミング言語のコードからAPIトークンを使ってデータの送受信が出来る ⚫ 例：pythonのrequestsライブラリを使ってレコードを登録 import requests import json def add_record(): API_endpoint = "https://cy-hwg.cybozu.com/k/v1/record.json" app_id = "64" kintone_headers = { "X-Cybozu-API-Token": "ZgMXCbJZbgnxQ2Wh2YSZckpUSa6t4aBuTe0tKv9L", "Content-Type": "application/json" } bodydata = { "app": app_id, "record": { "name": { "value": "ギョウザドン" }, "points": { "value": "12000" } } } try: response = requests.post(API_endpoint, headers=kintone_headers, data=json.dumps(bodydata)) jsondata = response.json() print(jsondata) except requests.exceptions.RequestException as error: print(error) add_record() Name Points Miyuki 34000 Shin 4900 Koki 3000 ギョウザドン 12000 レコードの登録 APIトークン データ
46. ©️ 2024 Cybozu,inc 46 • kintoneの紹介 • 無料のkintone開発者ライセンスの取得方法の案内 • ハッカソンでkintoneを活用する方法 • 自作アプリ、マイコンや他サービスとの連携方法 • kintoneを使ってみよう • Q & A 本日のご案内
47. ©️ 2024 Cybozu,inc 47
48. いつでもご相談ください！ ©️ 2024 Cybozu,inc 48 6月8日～9日の大阪の会場で TechSeekerのDiscordの kintoneサポートチャンネルで