はじめに：AIを「話し相手」から「仕事の相棒」へ
以前の記事は、AIチャットボットをWEBアプリとして生まれ変わらせることができるのか伝えていましたが、検証できましたのでお伝えします。結果は「これはいけるー」でした。
Difyを使ったAIチャットボットは十分便利でしたが、現場での実用を考えたときいくつかの「運用の壁」がありました。
- 「相関図を作るのに、コードをコピペして別サイトに行くのが面倒…」
- 「会話ログは残るけど、結局Wordにコピペして清書しないといけない…」
そこで今回は、Google Apps Script (GAS) を活用してDifyと連携させ、**「会話するだけで、相関図入りの指導計画書（Googleドキュメント）が完成するWEBアプリ」**へと進化させました。
本記事では、Dify単体版との違いや、開発における技術的な工夫、そして本アプリを使用する際のポイントについて解説します。
1. Dify標準チャット vs WEBアプリ版：何が変わった？
一番の変化は、**「ユーザー（先生）の手間を極限まで減らしたこと」**です。
これまでは人間が手作業でやっていたことを、プログラムが裏側で全て処理するようにしました。
| 機能 | Dify標準チャットボット (Before) | GAS連携 WEBアプリ (After) |
| 図解 (相関図) | 【手動・手間あり】 AIが出力したコードをコピーし、外部サイト(viz-js)に貼り付けて画像化する必要があった。 | 【全自動】 チャット画面に即座に画像として表示される。 （裏側で自動変換するためコピペ一切不要） |
| 最終成果物 | テキスト (会話ログのみ) | Googleドキュメントファイル 相関図も画像として埋め込み済み） |
| ファイル保存 | できない (コピペ作業必須) | ユーザー自身のGoogleドライブに自動保存 （ボタン一つでコピーを作成） |
| UI/UX | 既存のチャット画面のみ | 教育現場向けに最適化 (誤送信防止、長文入力対応など) |
2. 開発の工夫と技術的ブレイクスルー
「ただチャット画面を自作した」だけではありません。現場でストレスなく使えるよう、裏側では泥臭い工夫を積み重ねています。
① 「相関図」作成の完全自動化
Difyには「Graphviz（DOT言語）」という、相関関係をコードで出力する能力があります。
以前は「このコードをコピーして、変換サイトで図にしてください」と案内していましたが、忙しい業務の中でこの作業は大きな負担です。
- 解決策：
- WEBアプリがDifyから送られてくるコードを検知。
- 裏側で画像変換エンジン（QuickChart API）に渡し、チャット画面に「画像」として即座に表示させる仕組みを構築しました。
- さらに、図が重なって見づらくならないよう、レイアウトを階層型（dot）に指定し、高解像度でレンダリングすることで、印刷にも耐えうるクオリティを実現しました。
② 「自分のドライブ」への持ち帰り機能 (/copy)
WEBアプリで生成されたファイルは、通常「開発者のフォルダ」に保存されてしまいます。これでは、利用者が自分の手元にファイルを管理できません。
- 解決策：
- アプリがファイルを生成した後、そのURLの末尾を /edit から /copy に書き換えてユーザーに提示します。
- ユーザーがそのボタンを押すと、Googleの機能により**「ドキュメントのコピー：コピーを作成しますか？」**という画面が表示されます。
- これにより、作成された指導計画書が、ユーザー自身のGoogleドライブ（マイドライブ）に保存される仕組みを確立しました。
※マイドライブに保存されたドキュメントファイルをPDF変換して公開しています。
③ 学校現場のネットワーク環境への配慮
学校や自治体のネットワークはセキュリティが厳しく、外部のデザインファイル（CSSなど）の読み込みがブロックされ、画面が真っ白になることがありました。
- 解決策：
- 外部ファイルへの依存を排除し、すべてのデザイン情報をHTMLファイル内に直接記述する**「完全自立型」のコード**に書き換えました。これにより、セキュリティの厳しい環境でも安定して動作します。
- また、文字入力中に変換確定のエンターキーで誤送信されないよう、入力制御プログラムも組み込んでいます。
3. 【重要】WEBアプリを利用する際の注意点
このアプリは誰でも簡単に利用できますが、Googleのサービスと連携しているため、いくつか知っておくべきポイントがあります。
① Googleアカウントでのログインが必須です
最後に作成された指導計画書を**「あなたのGoogleドライブ」に保存するため**、ブラウザ（ChromeやSafariなど）でGoogleアカウントにログインしている必要があります。
- ※ログインしていない場合、最後の保存ボタンを押した際にログイン画面が表示されます。
② ポップアップブロックの許可
保存ボタンを押した際、新しいタブでGoogleドキュメントが開きますが、ブラウザの設定によっては**「ポップアップがブロックされました」**と表示されることがあります。
- その場合は、アドレスバー付近に出るアイコンをクリックし、**「このサイトのポップアップを常に許可する」**を選択してください。
③ 共有ドライブではなく「マイドライブ」へ
保存されるファイルは、基本的にはあなたの**「マイドライブ」**のルート（一番上の階層）や指定場所に保存されます。
組織の共有ドライブには直接コピーできない場合があるため、一度マイドライブに保存してから、必要な場所に移動させてください。
おわりに
今回の開発により、**「対話するだけで、提出レベルの書類が完成し、手元のドライブに保存される」**というワークフローが確立できました。
AIは「ただのおしゃべり相手」ではありません。
Dify（脳） と GAS（手足） を組み合わせることで、教員の時間を創出する強力な業務ツールになります。
今後も現場の声を聞きながら、「おげんまるNeo」をブラッシュアップしていきます。ぜひご活用ください！
これがおげんまるNEOだ！（会員限定）
チャットのサンプル動画です。
※会員サイトから使用できます（近日公開）
コメント