導入と最初のプロジェクト・ChatGPTにグラフィックを書かせる

 導入

　2022年11月にOpenAIが公開した人工知能チャットボットは世界に衝撃を与えました。私もこれを使い始め、すぐにそのとりこになったものの一人です。

　細かい感想はさておき、このブログではChatGPTをより便利にマニアックに使った事例の紹介と、いろんなことを試してみた結果などを書いていきたいと思います。きっとあなたの思いもしなかった使い方を紹介できるものと自負しています。

　私はIT屋さんなんですが、2023年3月時点ですでに様々なプロジェクトでChatGPTを使っています。自分の考えるChatGPTを使う上での注意点は

こいつを信頼するな（分からないことを分からないといわない）

誤解のない指示を与えよ（きちんとしたプロンプトなしで作業をさせようとすると、だんだん結果が異なってくることがある）

という感じでしょうか。ChatGPTで調べたことは必ず裏を取りましょう。

作業をさせた場合は結果をキチンと確認しましょう。

最初のプロジェクト

　最初から重めの話をします。

　データベースのテーブル仕様書と、テーブルを作成するためのSQLスクリプトがあり、テーブル構成図を書く必要が出てきました。

　ChatGPTはテキストベースの会話を行うプログラムなので、図形の出力はできません。ただ、テキストベースで図形を書かせる方法が世の中にはあります。今後、絵を描かせたりする遊びなども掲載しようと思いますが、今回は「SVG」というファイル形式を使用してChatGPTにテーブル構成図を書く手伝いをしてもらおうと思います。

必要なもの

●ChatGPT

●テキストエディタ

●InkScape

InkScapeはフリーの図形描画ソフトで、いろんなことができます。InkScapeの標準的なファイル形式としてSVGを採用しており、多少強引なSVGファイルを放り込んでも図形を表示してくれます。

InkScapeは

https://inkscape.org/ja/

からダウンロードできます。

最初の一歩・プロンプトの作成のための準備

ChatGPTに具体的な作業指示を与えるテキストをプロンプトといいます。

プロンプトが明確に作成されていれば、ChatGPTはかなり正確な作業を行ってくれます。プロンプトはお遊びにも使えますね。「今後は全てギャル語で答えて」とか、「今後の受け答えは全て村上春樹風にして」とかいうと、その通りに書いてくれます。

さて、今回はテーブル仕様書やSQLスクリプトからのテーブル構成図の作成補助が目的なので、そのためのプロンプトを作成しましょう。

テーブル仕様書を使うのもいいですが、テーブル仕様書はエクセルで書かれているため、ChatGPTに正確な指示を与えるには不向きです。ここはSQLスクリプトを使用しましょう。

SQLテーブル作成スクリプト

create table mUserInfo

    ( vcUserId varchar(32) not null comment 'ユーザーID' 

     ,vcPassword varchar(32) not null comment 'パスワード'

     ,vcUserName varchar(50) not null comment 'ユーザー名'

     ,intOrganizationId int not null comment '所属組織ID'

     ,tiSysAdmin tinyint not null comment 'システム管理者権限'

     ,tiSessionLimit tinyint not null comment 'セッションリミット数'

     ,tiNotificationLevel tinyint comment '通知を送るアラートレベル'

     ,primary key( vcUserId)

 )comment='ユーザー情報';

このテーブル作成SQLスクリプトを使って、まずはChatGPTに表を作成させます。

ChatGPTへの指示

create table mUserInfo

    ( vcUserId varchar(32) not null comment 'ユーザーID' 

     ,vcPassword varchar(32) not null comment 'パスワード'

     ,vcUserName varchar(50) not null comment 'ユーザー名'

     ,intOrganizationId int not null comment '所属組織ID'

     ,tiSysAdmin tinyint not null comment 'システム管理者権限'

     ,tiSessionLimit tinyint not null comment 'セッションリミット数'

     ,tiNotificationLevel tinyint comment '通知を送るアラートレベル'

     ,primary key( vcUserId)

 )comment='ユーザー情報';

このテーブルを表形式で表示して

優秀ですね。次に以下の指示を与えます。

ChatGPTへの指示

項目からデータ型を消して

これも難なくクリアです。

ここからがちょっと面倒。

ChatGPTへの指示

この表をSVG形式でテキスト出力してください。

機嫌がいいと（？）、一発でいけるんですが、何回か試していると、うまくいかず、以下のように表示されることもあります。

めげずに以下のようにお願いしてみます。

ChatGPTへの指示

SVG形式画像のテキストをコードで表示してほしい

今度はちゃんと出してくれました。以下、ChatGPTはSVGコードを出力するので、そのコードをコピーして、テキストファイルに出力⇒テキストファイルの拡張子をSVGに変更→InkScapeで開くという動作を繰り返します。このやり方が流行れば、そんなWebサイトを作ってもいいかもしれませんね（時間があったら作ります）

　上記のSVGをInkScapeで開くと以下のようになります。

ChatGPTへの指示

縦線と横線は消してください。全体を外枠線で囲ってください。

ChatGPTへの指示

外枠線が最後の項目まで覆われていません。外枠線の下端をもっと下に下げてください。

無視されたので、指示変更

ChatGPTへの指示

外枠線の高さを320にしてください。

ChatGPTへの指示

一番下の「ユーザー情報」は削除してください。枠線高さを290に変更してください。

ChatGPTへの指示

背景色を黄色にしてください

ChatGPTへの指示

枠線の角を丸くしてください。

とりあえず、画像は上記で完了としました。かなり果てしない。
最終的に作成したSVGは以下の通りとなります。

ChatGPTが作成したSVG
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="290"> <rect x="0" y="0" width="500" height="290" fill="#ffff99" rx="10" ry="10"/> <rect x="0" y="0" width="500" height="290" fill="none" stroke="#000000" stroke-width="1" rx="10" ry="10"/> <text x="50" y="30" font-size="16" font-weight="bold">列名</text> <text x="200" y="30" font-size="16" font-weight="bold">コメント</text> <text x="20" y="80" font-size="14">user_id</text> <text x="20" y="110" font-size="14">password</text> <text x="20" y="140" font-size="14">user_name</text> <text x="20" y="170" font-size="14">organization_id</text> <text x="20" y="200" font-size="14">sys_admin</text> <text x="20" y="230" font-size="14">session_limit</text> <text x="20" y="260" font-size="14">notification_level</text> <text x="150" y="80" font-size="14">ユーザーID</text> <text x="150" y="110" font-size="14">パスワード</text> <text x="150" y="140" font-size="14">ユーザー名</text> <text x="150" y="170" font-size="14">所属組織ID</text> <text x="150" y="200" font-size="14">システム管理者権限</text> <text x="150" y="230" font-size="14">セッションリミット数</text> <text x="150" y="260" font-size="14">通知を送るアラートレベル</text> </svg>

これでプロンプトの準備ができました。

プロンプトの投入

プロンプトの効果を確かめるために「NewChat」を選択して、新しいチャットにします。
プロンプトは簡単で、以下の通りにします。このプロンプトをコピペして、ChatGPTに教え込むことになります

プロンプト

テーブル作成用のSQLスクリプト

create table mUserInfo( 

vcUserId varchar(32) not null comment 'ユーザーID' 

,vcPassword varchar(32) not null comment 'パスワード' 

,vcUserName varchar(50) not null comment 'ユーザー名' 

,intOrganizationId int not null comment '所属組織ID' 

,tiSysAdmin tinyint not null comment 'システム管理者権限' 

,tiSessionLimit tinyint not null comment 'セッションリミット数' 

,tiNotificationLevel tinyint comment '通知を送るアラートレベル' 

,primary key( vcUserId)

)comment='ユーザー情報';

を「テーブル構成SVG」で変換すると

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="290">

  <rect x="0" y="0" width="500" height="290" fill="#ffff99" rx="10" ry="10"/>

  <rect x="0" y="0" width="500" height="290" fill="none" stroke="#000000" stroke-width="1" rx="10" ry="10"/>

  <text x="50" y="30" font-size="16" font-weight="bold">列名</text>

  <text x="200" y="30" font-size="16" font-weight="bold">コメント</text>

  <text x="20" y="80" font-size="14">user_id</text>

  <text x="20" y="110" font-size="14">password</text>

  <text x="20" y="140" font-size="14">user_name</text>

  <text x="20" y="170" font-size="14">organization_id</text>

  <text x="20" y="200" font-size="14">sys_admin</text>

  <text x="20" y="230" font-size="14">session_limit</text>

  <text x="20" y="260" font-size="14">notification_level</text>

  <text x="150" y="80" font-size="14">ユーザーID</text>

  <text x="150" y="110" font-size="14">パスワード</text>

  <text x="150" y="140" font-size="14">ユーザー名</text>

  <text x="150" y="170" font-size="14">所属組織ID</text>

  <text x="150" y="200" font-size="14">システム管理者権限</text>

  <text x="150" y="230" font-size="14">セッションリミット数</text>

  <text x="150" y="260" font-size="14">通知を送るアラートレベル</text>

</svg>

となる。以降テーブル作成用SQLを指示した場合には「テーブル構成SVG」で変換した内容を表示せよ。

作業の実行

プロンプトの投入が終われば、あとはひたすらテーブル作成用SQLスクリプトをChatGPTへ投入→作成されたSVGをテキストファイルに保存→テキストファイルの拡張子をSVGに変更を繰り返します。

 

ChatGPTへの指示

create table mUserAuth( 

vcUserId varchar(32) not null comment 'ユーザーID' 

,intOrganizationId int not null comment '組織ID' 

,bitsAuth bit(32) not null comment '権限' 

,primary key( vcUserId,intOrganizationId)

)comment='ユーザー権限';

ChatGPTへの指示

create table tUserSession( 

vcUserId varchar(32) not null comment 'ユーザーID' 

,vcSessionString varchar(50) not null comment 'セッション文字列' 

,dtFirstTime datetime not null comment 'アクセス開始時間' 

,dtLastTime datetime comment '最終アクセス時間' 

,tiDeleteFlag tinyint comment '削除フラグ' 

,primary key( vcUserId,vcSessionString)

)comment='ユーザーセッション情報';

ChatGPTへの指示

create table mUserNotification( 

vcUserId varchar(32) not null comment 'ユーザーID' 

,tiNotificationType tinyint not null comment '通知種類' 

,vcAddress varchar(50) not null comment '通知先' 

,tiOrder tinyint comment '通知種類内連番' 

,primary key( vcUserId,tiNotificationType,vcAddress)

)comment='ユーザー通知先';

上記の動作で、以下のSVGファイルが出来上がります。

InkScapeを起動し、これらの４つのファイルをドロップすると...

こんな感じで、テーブル構成図のベースが出来上がります。右側が余白が多いのはご愛敬。必要があれば、プロンプトで調整して今後に生かすこともできます。大量のテーブルデータなどがあると、それらを構成図を書くために画像化するのがとても大変なのですが、ChatGPTの助けを借りて、作業を簡略化できると思います

あとがき

　いかがでしたか？ChatGPTは仕事でかなり使えます。特にIT系の現場でフォーマットの変換などを行うためには強力な武器になるのではないでしょうか？

　ChatGPTはテキストベースの会話しかできないので、画像をいじったりなどは少し難しいかと思っていましたが、SVGという形式を使うことによって、ビジュアル的なインタフェースも扱えることが分かりました。

　これからも作業で面白い使い方をするたびにブログにアップしていきたいと思います。

　そのうち、連携用の外部ツールを作ったりしたいともいますので、今後ともよろしくお願いします。

　え？文章がまとまってない？ChatGPTに校正してもらおうかな...