[ChattyTone] kintoneプラグイン開発が誰でも可能になるChatGPTのノーコード・パワー（初期設定編）
こんにちは、キン担ラボの本橋です。kintoneの可能性を信じてプラグインを作る日々を過ごしています。
kintoneアプリはドラッグアンドドロップで作ることができます。ところが、kintoneプラグイン開発となると環境構築から必要となってなかなか厄介です。
そんな厄介なkintoneプラグイン開発を、ChatGPTのプロンプトを書き換えることで済ませてしまおう、というのがChatGPT連携プラグインの主な機能です。そんな超便利プラグインのインストール方法をステップ・バイ・ステップで紹介したいと思います。
書いたこと、書くこと
このnoteでは、ChatGPT連携プラグインの設定方法（前編）と、こんな発想でプラグインを開発できますよ（後編）、と現時点の成果を共有をしたいと思います。今読んでいる記事は前編です。
まずはkintoneにChatGPT連携プラグインをインストールするところから始めます。
長いですがお付き合いください。
※2023/8/16追記：プラグイン名を「ChattyToneプラグイン」と変更しました。この記事内では「ChatGPT連携プラグイン」と旧来の名称を使っています。
はじめに
最近はkintoneプラグイン開発も開発環境が充実してきてだいぶ手軽になりました。手軽になった、とはいってもそれは開発者にとっての話であって、本当に誰でもが気軽に作れるといったところまでは来ていません。
一方でChatGPTはというと、チャットに「こんなことして」と書いたらAIがその通りに翻訳や要約などを実行してくれます。スキルとしてはプロンプトさえ作文できれば、コードを書くことなくコンピューターが言うことを聞いてくれるノーコード環境です。十分に民主化されたプログラミングプラットフォームといえます。
javascriptを書いてkintoneプラグインを開発することに比べたら、プロンプトで済むChatGPTはほぼ誰でもアプリを作れる環境だといってもよいでしょう。
🤔『だったらChatGPTを埋め込めば誰でも作れるkintoneプラグインの爆誕では？』
という発想で作ったプラグインがこちらです。
ChatGPT連携プラグインをver.1としてリリースしました！ kintone上でAIとお話する（させる）用途であれば一通りのことができるかと思います。
— M橋D輔キン担ラボ (@motohasystem) June 9, 2023
どなたでもお使いいただけますので、よかったらお試しください。設定手順も README にまとめています。https://t.co/bmCoRtASdl
ところがこのChatGPT連携プラグイン、インストールしてChatGPTを設定して…とやることがなかなか多くて大変で、このままでは誰も使ってくれそうにない。自分の頭の中を整理する意味でも、インストラクションを書いておこうと思った次第です。
1. プラグインのインストール
プラグインを利用するには以下の3段階の手順を踏みます。
kintoneシステムにプラグインを読み込む（プラグインのインストール）
任意のkintoneアプリにプラグインを適用する（kintoneアプリを作成）
プラグインにプロンプトを書き込む（プラグインの動作設定）
プラグイン自体はgithubにMITライセンスでソースコードも公開しています。
プラグインzipのダウンロード
トップ画面右側の Releases リンクから最新版のzipファイルをダウンロードします。
現時点ではver.1.0.2が最新版です。
kintone全体にプラグインをインストール
kintoneの右上の歯車ボタンから、kintoneシステム管理を選びます。
システム管理画面の下の方、『⚙その他』グループに内にあります。『プラグイン』をクリック。プラグインの管理画面に入ります。
プラグイン管理画面の左上の方に「読み込む」ボタンがあるのでこちらをクリック。視線があっちこっちの四隅に飛ばされて混乱します。
プラグインの読み込みダイアログが開いたら、「参照」ボタンからgituhubからダウンロードしたzipファイルを指定して、読み込むボタンをクリック。
インストールに成功すると読み込んだプラグインの一番上に『ChatGPT連携プラグイン - キン担ラボ』と項目が増えています。
インストールはこれで完了です。次にkintoneアプリに適用していきます。
2. 任意のkintoneアプリにプラグインを適用する
新規作成したアプリを肉付けしていきます。
kintoneアプリを作成する
まっさらなアプリに、次の３つのフィールドを配置してください。
ChatGPTボタン配置用の『スペース』
入力用の『文字列（複数行）』
出力用の『文字列（複数行）』
『文字列（複数行）』は2つあって、入力用は『文字列（1行）』も使えます。
スペースはそのままだと要素IDが空になっています。スペースのフィールド設定を開いて、要素IDに"spacer_button"と入力してください（IDは何でもお好きなものを入力していただいて構いません）
ここまで設定できたら「フォームを保存」ボタンをクリックして一旦保存します。 続いてプラグインを設定しましょう。設定タブに移動します。
設定タブの上段中央、🔧カスタマイズ／サービス連携メニューの中にプラグインがあります。クリックするとアプリに適用するプラグインの管理画面に入ります。
作成したアプリにプラグインをインストール
プラグイン管理画面に入ると、新しく作成したアプリであれば「プラグインは追加されていません」とメッセージが出ているかと思います。『＋追加する』ボタンを押してプラグインを追加します。
追加するプラグインを選ぶ画面に入りました。ここにはkintoneシステム管理でインストールしたプラグインがずらりと並びます。この記事の冒頭で『まずkintoneシステムにプラグインを読み込んで』と書きましたが、システムに読み込まれているプラグインが並んでいます。
今回新しくインストールしたプラグインは最上段にあります。左のチェックボックスにチェックを入れて、右下の『追加』ボタンをクリックしてアプリに追加してください。
追加されました。初期状態では『必須項目が設定されていません。』と警告されてしまうので、プラグイン単体の設定画面に入っていきます。⚙アイコンをクリック。
今回設定画面のキャプチャを撮ってみて気づきましたが、あらゆる設定画面を行ったり来たりしてますね。これはわかりにくいはずだ。
長い長い設定の旅でしたが次の画面で設定画面は最後です（なおChatGPTの設定画面はまだある）
3. ChatGPT連携プラグインの動作設定
いよいよここまでたどり着きました。入力が必要な設定項目は、API key、役割プロンプト、対話例プロンプトの３つです。順番に見ていきましょう。
API keyの指定
ChatGPTのAPIを呼び出すために重要なAPI keyです。secretのバッジが付いています。これはkintoneがサーバー側で使用する項目を表していて、kintoneを利用するブラウザには秘密にできますよ、という意味です。
ChatGPTのAPI利用については別の記事を紹介します。リンク先ではOpenAIの登録からAPIキーの入手までステップ・バイ・ステップでナビゲートしてくれています。
入手したAPIキーをフォームにコピペしたら、次に進みましょう。次で最後の設定です！
役割プロンプトと対話例プロンプト
ここではChatGPTに与えるプロンプトを入力します。役割プロンプトにはChatGPTに「こういう動きをしてください」という命令を与えます。
対話例プロンプトではあなたとChatGPTのコール・アンド・レスポンスが練習できます。「私がこう言ったら、あなたはこう返してくださいね」を入力するわけですね。
サンプルとして、画像生成プロンプトをいい感じに作ってくれる設定を入力してみたいと思います。このnoteのタイトルに使った画像もこのプロンプトで作りました。
あなたは優秀な翻訳家です。ユーザーが入力した文章をイメージする画像をDALL-E2に書かせる目的で、DALL-E2に与える英語のプロンプトをplain englishで書いてください。
芝生で寝転ぶ赤ちゃんビーバー、日本画
A baby beaver lying on the grass, Japanese-style painting.
すべて入力すると以下の画像のようになります。
上の画像のとおりになったら完成です。
対話例プロンプトの項目を追加したいときは、対話例プロンプトの各項目の右側にある➕アイコンをクリックしてください。
対話例プロンプトの「役割」も、userとassistantをプルダウンで指定することを忘れないでください。「役割」が被っていることに今気づきました。分かりにくくてすみません。
kintoneのフィールド設定
あと数クリックで本当に最後の設定です。入力フィールド、出力フィールド、実行ボタン配置スペースをそれぞれ下記のように選択してください。
最後にブラウザを一番下までスクロールさせます。他の項目は空欄のままで大丈夫です。
「適用」ボタンをクリックしてプラグイン設定を保存してください。
適用すると、プラグインの設定画面に移動して画面上部に緑色のダイアログが表示されます。ダイアログの「アプリの設定に戻る」をクリックしてアプリ設定画面に移動します。
最後に、「アプリを公開」ボタンをクリックでアプリを公開してください。オレンジ色の囲みは、アプリやプラグインの設定を変更しているときに表示して教えてくれる親切機能です。
少し待って更新が終わると、初期画面であるレコード一覧画面が表示されます。お待たせしました！ 右上の➕アイコンをクリックしてChatGPTに画像プロンプトを作ってもらいましょう。
画像を作ってみよう
入力テキストフィールドに、下記のように入力してみます。
AIを駆使しながらビルとビルの間を飛び回るスーツ姿のビジネスマン
「ChatGPTに聞く」ボタンをクリックしてしばらく待つと、出力フィールドに回答がありました。
A businessperson in a suit, utilizing AI to navigate and fly between buildings.
出力されたプロンプトをBing Image Creatorに放り込んでみると…
それっぽい画像が出力されました。あとは気に入った絵が出てくるまで「作成」を連打打打！
見事、ビルの間を飛び回るスーツ姿の男性が書き出されました。いま作成したkintoneアプリには、『画像プロンプト』みたいな名前をつけて保存しておいてください。画像を作りたいと思ったときにそのアプリを開けば、いつでも画像生成プロンプトを仕上げてくれます。
ちなみに、Bing Image Creatorは今では日本語も受け付けてくれるようになったので、わざわざ英語に翻訳しなくても使えるようです。plain englishだとこちらの意図がAIに伝わりやすいと聞いたことがあったので作ったプロンプトでした。
大漁サンプル編に続く
ここまでの手順で、あなたのkintoneにChatGPTがやってきました。このプラグインを使えば、あなたのkintoneアプリはプロンプト次第でアメーバのようにぐにゃぐにゃと形を変えていきます。
たとえばどんなアプリを作ることができるのか？
『kintoneプラグイン開発が誰でも可能になるChatGPTのノーコード・パワー（大漁サンプル編）』に続く！
この記事が気に入ったらサポートをしてみませんか？