こちらの記事は2024/07/24に開催した[Hybrid]生成AI×LINE×kintoneでみんながハッピーになるAI施設予約アプリを作ろうで利用したハンズオンの資料になります。
ハンズオン時に判明した資料の不備を修正したものになります。
当日のハンズオンの動画はこちら
https://www.youtube.com/live/o4gRcKbfTTA?si=xJ0aR82M3EFOyvsP
LINE側のハンズオンの資料は以下になります。
https://specialman9999.github.io/20240724LINEkintone/
以下で作成するアプリテンプレート
構成図
今回作成する３つのアプリ
| アプリ名 | 説明 |
|---|---|
| 施設管理アプリ | 施設名や、収容人数などの施設の情報を管理するアプリです。 |
| 施設予約管理アプリ | LINEからの予約情報を保存するアプリです。利用日、施設名、LINE UID、利用時間などを管理します。 |
| 稼働率管理アプリ | 施設管理アプリ、施設予約管理アプリの情報をもとに稼働率の計算をして保存をします。 |
作成する機能
- 各施設の月の稼働率がグラフで可視化できるようにする
- 各施設の日の稼働率がグラフで可視化できるようにする
- 各施設の曜日の稼働率がグラフで可視化できるようにする
- 施設が予約された時にメールで通知されるようにする
kintoneの環境設定
組織を作成する
施設予約管理アプリにレコードが保存された時に個人ではなく、所属してる組織のメンバー全員に通知がいくようにするためにまず組織を作成します。
REST APIの通知をメールで送信できるようにする
個人の通知を設定する
アプリ作成
① 施設管理アプリ
| フィールドタイプ | フィールド名 | オプション | フィールドコード |
|---|---|---|---|
| 文字列（１行） | 施設名 | ・必須項目にする・値の重複を禁止する | 施設名 |
| 数値 | 収容人数 | 単位記号：名後ろに付ける | 収容人数 |
| 時刻 | 利用可能開始時間 | 利用可能開始時間 | |
| 時刻 | 利用可能終了時間 | 利用可能終了時間 | |
| 計算 | 利用可能時間 | 計算式：(利用可能終了時間 - 利用可能開始時間) / 60 / 60単位記号：時間後ろに付ける | 利用可能時間 |
| 添付ファイル | 施設の写真 | 施設の写真 |
<参考>
日付、時刻、日時の計算
https://jp.cybozu.help/k/ja/id/040502.html
※ 予約一覧のフィールドは時間があれば最後に説明
データを登録
施設の写真
https://drive.google.com/drive/folders/11DCaEhekCAumwwlLC-j2GjwFrlvjKgly?usp=sharing
② 施設予約管理アプリ
| フィールドタイプ | フィールド名 | オプション | フィールドコード |
|---|---|---|---|
| チェックボックス | キャンセル | ・フィールド名を表示しない 項目と順番：キャンセル | キャンセル |
| 日付 | 利用日 | 利用日 | |
| 時刻 | 開始時間 | 開始時間 | |
| 時刻 | 終了時間 | 終了時間 | |
| 計算 | 利用時間 | 単位記号：時間後ろにつける 計算式： (終了時間 - 開始時間) / 60 / 60 | 利用時間 |
| ルックアップ | 施設名 | 最後に設定※1参照 | 施設名 |
| 数値 | 予定人数 | 単位記号：名後ろに付ける | 予定人数 |
| 数値 | 収容人数 | 単位記号：名後ろに付ける | 収容人数 |
| 文字列（１行） | LINE UID | LINE_UID | |
| 文字列（１行） | レコードのタイトル | 自動計算する 計算式： DATE_FORMAT(利用日, "YYYY年MM月dd日", "Etc/GMT") & " " & DATE_FORMAT(開始時間, "HH:mm","Etc/GMT") & "〜" & DATE_FORMAT(終了時間, "HH:mm","Etc/GMT") & "@" & 施設名 | レコードのタイトル |
<参考>
[DATE_FORMAT関数]日付や時刻の表示形式を指定して表示する
https://jp.cybozu.help/k/ja/id/040501.html
※1
通知の設定をする
通知のメールのタイトルをわかりやすくする設定をする
③ 稼働率管理アプリ
| フィールドタイプ | フィールド名 | オプション | フィールドコード |
|---|---|---|---|
| ラジオボタン | 対象 | 項目と順番：日次月次 | 対象 |
| 文字列（１行） | 曜日 | ・自動計算する ※2 参照 | 曜日 |
| 文字列（１行） | 会議室名 | 会議室名 | |
| 日付 | 日付 | 日付 | |
| 数値 | 利用時間合計 | 利用時間合計 | |
| 数値 | 利用可能時間合計 | 利用可能時間合計 | |
| 計算 | 稼働率 | 計算式：(利用時間合計/利用可能時間合計)*100 | 稼働率 |
※2
IF( ( ( (日付 / 60 / 60 / 24) - 0) / 7 ) - ROUNDUP(( ( (日付 / 60 / 60 / 24) - 0) / 7 ) , 0) = 0 , "5.木曜",
IF( ( ( (日付 / 60 / 60 / 24) - 1) / 7 ) - ROUNDUP(( ( (日付 / 60 / 60 / 24) - 1) / 7 ) , 0) = 0 , "6.金曜",
IF( ( ( (日付 / 60 / 60 / 24) - 2) / 7 ) - ROUNDUP(( ( (日付 / 60 / 60 / 24) - 2) / 7 ) , 0) = 0 , "7.土曜",
IF( ( ( (日付 / 60 / 60 / 24) - 3) / 7 ) - ROUNDUP(( ( (日付 / 60 / 60 / 24) - 3) / 7 ) , 0) = 0 , "1.日曜",
IF( ( ( (日付 / 60 / 60 / 24) - 4) / 7 ) - ROUNDUP(( ( (日付 / 60 / 60 / 24) - 4) / 7 ) , 0) = 0 , "2.月曜",
IF( ( ( (日付 / 60 / 60 / 24) - 5) / 7 ) - ROUNDUP(( ( (日付 / 60 / 60 / 24) - 5) / 7 ) , 0) = 0 , "3.火曜",
IF( ( ( (日付 / 60 / 60 / 24) - 6) / 7 ) - ROUNDUP(( ( (日付 / 60 / 60 / 24) - 6) / 7 ) , 0) = 0 , "4.水曜","該当なし"
)
)
)
)
)
)
)<参考>
日付の値に応じて曜日を表示したい
https://jp.cybozu.help/k/ja/utility/app/elapsed_days.html
稼働率グラフを作成
日次の稼働率
曜日の稼働率
月次の稼働率
稼働率の計算するプログラムの設定
年月を入れて、作成するボタンを押すとその年月の稼働率が計算されて、稼働率管理アプリに保存される。
kintone上でコードを書けるプラグインをインストール
以下のURLからプラグインをダウンロードしてください。
上記プラグインの詳細ページ（後で参考にみておいてください。）
https://cybozu.dev/ja/kintone/tips/development/plugins/sample-plugin/jsedit-for-kintone-plugin/
先ほどダウンロードしたzipファイルを読み込む。
プラグインをアプリで使えるようにする
コードをコピペ
エディターに以下のコードを貼り付けをする。
https://gist.github.com/tkc49/becb670b0fc9c06940e999163143ec6a
全体を選択してコピー
ペーストする
各自アプリIDを書き換える
アプリIDの確認方法
各アプリを開いて、URLを確認する。「k/」の右横にある数字がアプリID
必要なモジュールを設定する
■ PC用のJavaScript / CSSファイル
・JavaScriptファイル
- https://js.cybozu.com/jquery/3.7.1/jquery.min.js
- https://js.cybozu.com/jqueryui/1.13.3/jquery-ui.min.js
- https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js
- https://cdn.jsdelivr.net/npm/dayjs@1/locale/ja.js
- https://js.cybozu.com/sweetalert2/v11.12.0/sweetalert2.min.js
■ CSSファイル
- https://js.cybozu.com/jqueryui/1.13.3/themes/smoothness/jquery-ui.css
- https://js.cybozu.com/sweetalert2/v11.12.0/sweetalert2.min.css
外部との接続のためにAPIトークンを作成
以下の２つのトークンを作成します。
- 施設管理アプリ
LINEから施設情報を表示するために必要 - 施設予約管理アプリ
LINEからの予約を登録するために必要
施設管理アプリ
APIトークンとアプリIDをメモ帳に保存しておいてください。（後半のLINEのハンズオンで使います。）
施設予約管理アプリ
APIトークンとアプリIDをメモ帳に保存しておいてください。（後半のLINEのハンズオンで使います。）
カスタマイズしたプログラムで利用した kintone JavaScript API
// 一覧画面が表示された時に実行される
kintone.events.on('app.record.index.show', () => {});// レコードの取得
kintone.api(kintone.api.url('/k/v1/records', true), 'GET', {});
// レコードの保存
kintone.api(kintone.api.url('/k/v1/records', true), 'POST', {});
// レコードの削除
kintone.api(kintone.api.url('/k/v1/records', true), 'DELETE', {});// メニューの上側の要素を取得する
kintone.app.getHeaderMenuSpaceElement();
コメント