台湾でのkintone x Open AI ワークショップのご案内

会場の様子
kintone x Open AI ワークショップの様子
kintone x Open AI ワークショップの内容
ワークショップを実施した感想
最後に

2024年7月3日に台湾で、様々な分野で活躍するIT企業が集うカンファレンス『Taiwan Cloud Summit 2024』が開催されました。

サイボウズ株式会社はこのカンファレンスでkintoneのブースを出展し、エンジニア向けのkintone x Open AI のワークショップも実施しました。本記事では、カンファレンスの様子、及びOpen AI連携ワークショップの内容について紹介します。このブログをなぞることで、生成AIとkintoneの連携を簡単に試せるようになっています。

会場の様子

Taiwan Cloud Summitは企業の情シスやIT専門家を対象としたカンファレンスです。基調講演、IT企業のブース展示、エンジニア向けワークショップなど、多彩なコンテンツが用意されており、当日は多くの参加者が訪れました。

サイボウズのブースは参加者の目に留まりやすい、カンファレンスの入口付近に設置されてました。ブースはサイボウズの台湾支店のメンバーが出展し、散らばっている会社の情報を集中管理されたプラットフォームに統合出来ることや、ファイルやドキュメントを管理しつつコメント機能で適切なコミュニケーションが可能であるという、kintoneならではのメリットを存分にアピールしていました。

kintone x Open AI ワークショップの様子

昼過ぎに、エンジニア向けのkintoneワークショップを会場の特設エリアで行いました。ほぼ満席の状態で参加者を迎え、立ち見を含めておおよそ30名に参加していただきました。

ワークショップでは、まずkintoneの基本的な紹介をし、続けてOpen AIとkintoneを組み合わせたカスタマイズのハンズオンを行いました。

参加者はAI関連のコンテンツやkintoneの可能性に強い関心を持っていただけたようで、ワークショップ終了後も何名かの方が質問をしに来てくださいました。

kintone x Open AI ワークショップの内容

このワークショップでは、ZoomやTeamsで生成されたトランスクリプトをkintoneで扱うことを想定して進めました。kintoneアプリ内に保存された議事録のテキストファイルをOpen AIのChatGPTに要約してもらい、要約データをアプリのフィールドに保存する方法を案内しました。

当日はこちらの資料を元に進めました。

speakerdeck.com

下記のレポジトリの内容通りにワークショップを進めました。 github.com

ワークショップは英語で行われましたが、本記事では日本語に翻訳して案内したいと思います。アプリの設定やデモの内容が英語になってることをご了承下さい。適宜自分の環境に合うように調整をお願いします。

では、kintone x Open AI の議事録要約ワークショップの手順をご案内します。

１．kintone環境を準備する

kintoneの環境にログインし、kintoneアプリを作成します。カスタマイズ用のkintoneテスト環境が必要な場合はkintoneの開発者ライセンス申し込みフォームから手に入れることが出来ます。

アプリのフィールドは下記のように設定します：

	フィールドの種類	フィールド名	フィールドコード
1	文字列(1行)	Title	title
2	文字列(複数行)	Summary	summary
3	添付ファイル	Full Transcript	transcript
4	ラジオボタン	Meeting Type	type
5	作成日時	Created datetime
6	更新日時	Updated Datetime

フォームの設定は下記のようになります：

２．アプリ用のデータを準備する

会話の文字起こしデータを準備します。下記は例として、Zoomの文字起こし機能を使って生成されたデータを準備してます。片方はビジネスよりの会話、もう片方はカジュアルよりの会話の内容です。会話の内容によって連携するAIが違う動きをします。

文字起こしファイルを１つ、レコードのFull Transcriptフィールドに添付します。Titleフィールドにも会議の適当なタイトル名を入れましょう。Summary と Meeting Type は後でAIが補完してくれるので、そのままにします。

３．APIトークンを生成する

kintoneヘルプのAPIトークンを生成する記事を参考に、レコード閲覧権限を持つAPIトークンをアプリを生成します。生成したらアプリの設定を更新します。

４．レポジトリを準備する

次の手順通りにレポジトリをクローンし、環境の準備をします。

git clone https://github.com/kintone-workshops/kintone-ai-meeting-minutes.git
cd kintone-ai-meeting-minutes
npm install
cp .env.example .env

５．秘匿情報を .envファイルに設定する

.envファイルを開きます。下記の表を参考に、必要な情報を入力します。

設定	値	手に入る場所
VITE_KINTONE_SUBDOMAIN	使用しているkintoneのサブドメイン	使用してるkintone環境のURLの中。{subdomain}.cybozu.com の {subdomain} 部分。
VITE_KINTONE_PART_ONE_APPID	kintoneアプリのアプリID	使用してるkintoneアプリのURLの中。{subdomain}.cybozu.com/k/{AppID} の {AppID} 部分。
VITE_KINTONE_PART_ONE_TOKEN	kintoneアプリから生成したAPIトークン	使用してるkintoneアプリの設定画面の中。
VITE_OPEN_AI_TOKEN	Open AI のトークン	Open API のAPI Key。こちらのドキュメントを参考に取得する。

例として、.envファイルは下記のようになります。

VITE_KINTONE_SUBDOMAIN="example"
VITE_KINTONE_PART_ONE_TOKEN="abcd2ef3g3hij2kl1"
VITE_KINTONE_PART_ONE_APPID="1"
VITE_OPEN_AI_TOKEN="1234567890"

６．kintone UI Component をアプリに設定する

kintone UI Component を使うと、kintoneらしいUIをカスタマイズで使うことが出来ます。

アプリの「JavaScriptやCSSでアプリをカスタマイズする」の設定に、下記のCDNのリンクを設定することによって、kintoneらしいデザインを実装出来ます。

https://unpkg.com/kintone-ui-component/umd/kuc.min.js

PC用のJavaScriptのオプションにKintone UI Componentのリンクを設定する

７．ビルドしたJavaScriptファイルをアプリに設定する

ターミナルでルートディレクトリまで移動し、npm run build を実行します。minifyされたコードが２つ入っているdistディレクトリが生成されます。

KintoneCustomization.mjs
KintoneCustomization.umd.js

アプリの「JavaScriptやCSSでアプリをカスタマイズする」の設定に、KintoneCustomization.umd.js を追加します。

PC用のJavaScriptのオプションにKintoneCustomization.umd.jsのファイルを添付する

kintoneアプリの設定を保存し、設定の更新をします。

８．動作確認をする

文字起こしファイルが添付されたレコードに移動します。レコードの詳細画面の上の方に青い「Generate Meeting Minutes」のボタンがカスタマイズによって表示されているはずです。

ボタンをクリックし、しばらくすると文字起こしファイル内のデータの要約がSummaryフィールドに出力されれば成功です。

ワークショップを実施した感想

今回のワークショップは、サイボウズ東京オフィスの筆者のチームが担当しましたが、現地の台湾オフィスのメンバーに多大なサポートをいただきました。当初、言語の壁や文化の違いに不安を感じていましたが、台湾メンバーとはすぐに打ち解け、素晴らしいチームワークを発揮することができました。我々が英語で発信した内容を、台湾メンバーが台湾語に通訳してくれたことで、参加者にしっかりと伝わり、多くの方々にkintoneの魅力を感じていただけたと思います。