2024年5月に新しい やること「OpenAI を画像付きで呼び出してテキストを生成する」が増えました。
こちらの「やること」を利用すると、OpenAIが開発した生成AIのChatGPTを使用して、画像からテキストを生成することが可能です。
言語モデルは現時点で GPT-4o / GPT-4 Turbo に対応しています。
この記事では、このやること「OpenAI を画像付きで呼び出してテキストを生成する」を使って、画像の内容を解析してもらうカスタマイズを実現します。
アプリを動かしてみた例は次のようになります。
やること「OpenAI を画像付きで呼び出してテキストを生成する」を使うために
やること「OpenAI を画像付きで呼び出してテキストを生成する」はOpenAIのサービスを使って、画像を元にOpenAIにテキストを生成してもらう「やること」です。
このため、この「やること」を使うためには、OpenAIのサービスのAPIキーが必要となります。
APIキーについては
Overview - OpenAI API
から取得する事ができます。
また、OpenAI が生成したテキストについては、その内容の正確性などをご自身にて判断のうえ、ご自身の責任にてご利用ください。
やること「OpenAI を画像付きで呼び出してテキストを生成する」を使ってOpenAIに画像を元に文章を考えてもらう
一番簡単なやること「OpenAI を画像付きで呼び出してテキストを生成する」の使い方は、次のようにレコードをなんらかの「やること」で取得し、その後「OpenAI を画像付きで呼び出してテキストを生成する」を用いて画像からテキストを生成してもらうことです。
上の形で簡単に使っていただく事もできますが、このカスタマイズをより良くするポイントが何点かあります。
1つ目のポイントは、OpenAIのサービスは利用ごとに課金されるため、本当に実行するか確認ダイアログで確認してから動くようにカスタマイズしておくのが望ましいです。
2つ目のポイントは、やること「OpenAI を画像付きで呼び出してテキストを生成する」は「やること」が動き、OpenAIにメッセージを送信し、メッセージが処理され、gusukuサーバーにテキストが返ってきて初めてアクションが終わる動きとなるため、ある程度の待ち時間が発生します。
ですので、やること「読み込み中画面を表示する」を併せて使って頂くのがおすすめです。
3つ目のポイントは、この「やること」はメッセージを入力して、それに応じたテキストを生成するものですが、この作り方だと定型のメッセージでしかOpenAIを動かせません。メッセージをkintone上で変えられるようにした方がより柔軟に使えそうです。
こういった場合、やること「テンプレートをもとにテキストを生成する」を使うといい感じのテキストを準備する事ができます。
この記事ではこれらのポイントを踏まえた実際のカスタマイズ例をご紹介します。
カスタマイズ例の前提となるアプリ
このカスタマイズでは、アプリを2つ用意します。
・テキスト生成テンプレートマスタ アプリ
・画像をOpenAIでテキストにする アプリ
テキスト生成テンプレートマスタ アプリを準備する
このアプリは、やること「テンプレートをもとにテキストを生成する」のために用意します。
次のフィールドを持つアプリを作成してください。
※フィールド名とフィールドコードは同じ物を指定します
画像をOpenAIでテキストにする アプリを準備する
このアプリにカスタマイズを作成します。
次のフィールドを持つアプリを作成してください。
※フィールド名とフィールドコードは同じ物を指定します
画像をOpenAIでテキストにする アプリをカスタマイズする
前述の３つのポイントを踏まえた形でのカスタマイズについて、ここでは説明します。
ボタンを作成する
やること「ボタンをスペースに配置する」、条件「詳細画面を表示した時」でボタンを作ります。
「やること」のパラメータは
場所：image_toText
ラベル：画像の要約文を作成する
上下位置合わせ：指定なし
とします。
「テンプレートをもとにテキストを生成する」に使うためのテンプレートレコードを取得
やること「キーを指定してレコードを取得する」、条件「ボタンを押した時」を使い、ボタンを押した時に、まずテンプレートレコードを取得します。
「やること」のパラメータは
取得先アプリ：テキスト生成テンプレートマスタ
キーとなるフィールド：テンプレートID
キーの値：2
とします。
この時、テンプレートとなるレコードは次のように設定しておきます。
レコードの「文字列複数行」フィールドに格納している内容は次のようなものです。
# 命令書
${解析指示}
やること「テンプレートをもとにテキストを生成する」では、文字列複数行や添付ファイルフィールドに格納したテキストでテキストを生成する事ができ、その際「${【フィールドコード】}」とした箇所の値を、レコードのフィールドの値に置き換える事ができます。
このやること「テンプレートをもとにテキストを生成する」で設定する、テンプレートの詳しい仕様については
テキストテンプレートの記述方法 :: gusuku Customine ドキュメント
も併せてご確認下さい。
「テンプレートをもとにテキストを生成する」でOpenAIに渡すメッセージテキストを生成する
やること「テンプレートをもとにテキストを生成する」を使い、OpenAIに渡すメッセージテキストを生成します。
「やること」のパラメータは
データレコード：選択しない（現在表示しているレコードを対象とするため）
テンプレートレコード：2(先ほど取得したレコード)
テンプレートフィールド：文字列複数行
セット先フィールド：指定しない
とします。
なおテンプレートフィールドには文字列(複数行)フィールドか、添付ファイルフィールドが指定できます。
※添付ファイルフィールドを使う場合はテキストファイルを格納しておきます。
実行してよいかダイアログで確認する
やること「確認ダイアログを表示する」を使い、確認ダイアログを表示します。
「やること」のパラメータは
メッセージ入力：
以下の内容でOpenAIを呼び出しますがよろしいですか？
${$3}
OKボタンの名前：OK
キャンセルボタンの名前：キャンセル
とします。
読み込み中画面を表示する
ダイアログでOpenAIを呼び出して良いことを確認できたので、やること「読み込み中画面を表示する」、条件「確認・入力ダイアログで「OK」を押した時」で読み込み中画面を表示します。
※やること「読み込み中画面を終了する」は今回使いません。詳しくは後述しますが、その代わりにやること「画面をリロードする」を用います。
レコードを取得する
やること「OpenAI を画像付きで呼び出してテキストを生成する」を使う前提として、レコードを取得する必要があるので、現在のレコードを取得します。
やること「条件を組み立ててレコードを取得する」を使い、検索条件はレコード番号が一致している事を条件にします。
OpenAIを呼び出す
やること「OpenAI を画像付きで呼び出してテキストを生成する」を使い、画像を用いてテキストを生成します。
「やること」のパラメータは
OpenAI API キー：予め取得しておいたAPIキーを設定します。
言語モデル：利用したい言語モデルを選んでください。なお(2024/5時点で)最新のGPT-4oにも対応しています。今回はGPT-4oを用います。
メッセージ：やること「テンプレートをもとにテキストを生成する」の結果をメッセージに使うので、「${$3}」を設定します。
画像を持つレコード：１つ前のアクションでレコードを取得したものを使います。今回の例だと6番アクションを指定します。
画像：読み込む画像ファイルのフィールドを指定します。今回だと「添付ファイル」となります。
セット先フィールド（省略可）：省略します。
値が返ってきたらフィールドに値をセットする
テキストが生成されたので、やること「フィールドに値をセットする」で値をセットします。
「やること」のパラメータは
フィールド：出力結果テキスト
値：やること「OpenAI を画像付きで呼び出してテキストを生成する」の結果をフィールドに反映するので、「= $7」を設定します。
フィールドに値をセットしたので、画面をリロードして再表示する
全ての処理が終わったので、やること「画面をリロードする」でリロードし、画面を再表示します。
動かしてみると、次のような例となるはずです。どうでしたか？
（なお、AIによって都度文章が生成されるので、出力結果は毎回少しずつ異なるものが出てきます。）
また「解析指示」の内容を変えると、同じ画像でも出力結果のテキストが大きく変わります。
上の例は簡単なものですが、様々な応用ができそうです！
うまく動かない時は？
OpenAIから出力したテキストにエラーメッセージが出た場合
OpenAIから出力したテキスト(今回の例だと「出力結果テキスト」フィールド)に、「Hello! It seems like your message is a bit unclear. How can I assist you today?」というメッセージが出てきた場合は、やること「テンプレートをもとにテキストを生成する」の出力結果が空になっている可能性があります。この「やること」の結果としてどういうテキストが出力されているか、ダイアログを表示する「やること」などで確認してみてください。
おわりに
今回はやること「OpenAI を画像付きで呼び出してテキストを生成する」を使い、OpenAIに画像を解析してもらうカスタマイズを実現しました。
この記事では一例を示していますが、OpenAIはこれ以外にも様々な形で応用が効くものです。
インターネット上にもOpenAIやChatGPTの利活用については様々な情報がありますが、一つサンプルを挙げるとすれば、東京都デジタルサービス局 が作成した、「都職員のアイデアが詰まった文章生成AI活用事例集 (tokyo.lg.jp)」という資料がわかりやすくおすすめです。
ぜひ、さまざまなメッセージをOpenAIに渡してみて動きを試し、あなたのkintoneにOpenAIのChatGPTをうまく組み込んでみてください。
ご不明点等ございましたら、チャットにてご質問ください。
Customineドキュメントやサポートページもぜひご活用ください。