Difyで自分用メモからQiita投稿用記事を自動生成してみる

# はじめに
この記事は「自分が書いたラフな技術メモをQiitaに投稿できるような形に自動で整形・出力したい」という目的のもと、本記事に記載したDifyのチャットフロー機能を用いて（ほぼ）書かれたものです。基本的にはDifyからの出力そのままを記載しますが、途中で補足が必要になった場合のみ（※補足）にて人力での追記を行っています。また、画像は人力で加工・挿入しています。

# 1.	概要
この記事では、Difyを使用して自分用のメモからQiita投稿用の記事を自動生成する方法について説明します。Difyのチャットフローを活用し、粗雑なドキュメントから整形された技術記事を生成する具体的な手順やポイントを解説します。

# 2.	背景・実現したいこと
皆さん、記事をたくさん書きたいけど、時間がかかって大変だと感じたことありませんか？私も同じ悩みを抱えていました。手順メモはあるものの、公開できるように体裁を整えるのが難しく、時間がかかってしまうんです。そこで思いました。「こういうことこそ生成AIにやってもらうべきでは？」と。
そこで、Difyの勉強も兼ねて、自動で記事を生成するシステムを作ることにしました。

実現したいことは主に2つです：
 - 自分用に書いた粗雑なドキュメントファイルをアップロードしたら、その中身を読み取って自動でQiita投稿用の記事を書いてほしい。
 - 	記事作成以外の機能も持たせたい。例えば、「このテキストの中身を要約して」といった指示にも対応できるようにしたい。
 
# 3.	必要な環境
 - Difyアカウント
 - アップロード可能なドキュメントファイル（テキスト、PDF等）

:::note info
補足：このような感じの3000文字程度のwordファイルを元データとして与えています。自分しか見ないと思って作ったドキュメントにありがちな「誤字脱字」「です・ますとで・ある口調の混在」「変換忘れ・ミス」「表記ゆれ」などの要素をわざと残したままにしてあります。
:::

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4086110/c027696f-fcb3-4632-96d4-f2fb4da043e2.png)

# 4.  実装手順
それでは、Difyを使って自動記事生成システムを作っていきましょう。

## ステップ1: チャットフローの構築
Difyのチャットフローを使って、以下のような構成で実装します：

 **1. 開始ブロック** ：
 　入力ソースとなるドキュメントファイルの指定と、ユーザからの指示を受け取ります。
 
 **2. テキスト抽出ブロック** ：
 　アップロードされたファイルのテキストを抽出します。
 
 **3. 質問分類器** ：
 　ユーザの指示が原稿作成依頼か、それ以外かを判定します。
 
 **4. テンプレート** ：
 　原稿作成依頼の場合に使用する記事のテンプレートを定義します。
 
 **5. LLM（原稿生成）** ：
 　原稿作成依頼の場合に使用し、原稿を生成します。
 
 **6. LLM（原稿生成以外）** ：
 　原稿作成依頼以外の場合に使用し、質問に回答します。
  
 **7. 変数集約器** ：
 　LLMのアウトプットを一つの変数にまとめます。
  
 **8. 回答** ：
 　最終的な回答を出力します。
  

 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4086110/de6bc0df-ef80-4af8-9cc5-0fd724b1c121.png)

:::note info
補足：「3．質問分類器」の判定結果に応じてフローが分岐する構成になっています。入力された内容が「原稿作成依頼」だと判断された場合は「１→２→３→４→５→７→８」のフロー、それ以外だと判断された場合は「１→２→３→６→７→８」のフローを辿ります。このフローの分岐について、メモ側には記載しておいたのですが、生成した記事側にうまく反映できませんでした。まだ調整が必要そうです。
:::

## ステップ2: 各ブロックの設定
### 1.	開始ブロック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4086110/ffb29351-9e46-45c6-b553-45db22153aee.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4086110/b4d88b8c-1bb6-4262-95c6-eb1e895f5d4a.png)


 - 入力フィールドで「ファイルリスト」を選択
 - 変数名を「file」に設定
 - ラベル名は「ファイルを選択してください」
 - サポートされたファイルタイプは「ドキュメント」を選択

### 2.	テキスト抽出ブロック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4086110/0b12fa5c-1ba4-49bb-9215-1b9cf2038527.png)


 - 入力変数に「開始/file」を選択

### 3.	質問分類器
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4086110/77f60125-99b6-4af9-8a1a-8dcd9f748234.png)



 - モデル：Claude3.5 Sonnet（または適当なモデル）
 - 入力変数：開始/sys.query
 - クラス1：「開始/[x]sys.query」は原稿の作成を依頼する内容である
 - クラス2：「開始/[x]sys.query」は原稿の作成を依頼する内容ではない

### 4.	テンプレート 
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4086110/881204cb-8658-4b21-af64-66d9f9c0e1d7.png)


 - 入力変数：テキスト抽出/text

:::note info
補足：ここでは記事を生成する際のテンプレートを登録しているのですが、トークン上限のせいか指示を出しても内容が省略されてしまいました。ここでは下記のテンプレートを使用していますが、テンプレートはテーマや構成に合わせて適宜変更していただければと思います。
:::

```text:Qiita記事テンプレート
記事タイトル
（例：〇〇を使った〇〇の実装方法）

概要
この記事では、〇〇（技術名やツール名）を使用して〇〇（目的や成果物）を実装する方法について説明します。具体的な手順やポイントを解説し、コードがある場合は実際のコード例も紹介します。

1. 背景・実現したいこと
（この技術や取り組みが必要とされる理由や背景、実現したいことを説明します。業界のトレンドや自社のニーズなどを交えましょう。）

2. 必要な環境
（実装に必要なソフトウェアやハードウェア、バージョン情報を記載します。）

OS: 〇〇
言語: 〇〇（バージョン）
ライブラリ: 〇〇（バージョン）

3．実装手順
ステップ1: 〇〇
（このステップで行う具体的な作業を詳細に説明します。）

ステップ2: 〇〇
（次のステップについても同様に詳細に説明します。）

ステップ3: 〇〇
（最後のステップについても詳細に説明します。）

4. コード例（コードがない場合は省略すること）
（実装したコードの具体例を示します。必要に応じてコードの説明を加えます。）

# 例: PYTHONでの実装コード
DEF EXAMPLE_FUNCTION():
    # 処理内容
    PASS
    
5． 結果
（実装の結果や得られたデータについて説明します。スクリーンショットやグラフを挿入することも効果的です。）

6． まとめと感想
（記事全体のまとめを行います。学んだことや今後の展望についても触れると良いでしょう。）

7． 参考リンク
（関連する資料や公式ドキュメント、他のQiita記事などをリンクします。）

公式ドキュメント
関連するQiita記事
```

### 5.	LLM（原稿生成）
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4086110/bd408885-ca65-4937-8275-641b88e8bfe4.png)

 - モデル：Claude3.5 Sonnet（または適当なモデル）
 - コンテキスト：テキスト抽出/text
 - プロンプト：
 :::note info
補足：今回はSYSTEMとUSERに記載する内容を下記のように記載するとバランスのいい原稿が生成されましたが、ケースバイケースだと思いますので、適宜調整するのがおすすめです。
:::

```text:SYSTEM
あなたは優秀なエンジニアです。
「テンプレート/[x]output」を使用して、Qiita投稿用の技術情報の記事を生成してください。
記事の内容・テーマは「テキスト抽出/[x]output」から抽出してください。
目的は「技術情報の発信」です。必要な情報やコード例を含めてください。
```

```text:USER
あなたは優秀なエンジニアです。
社外に向け、自社の技術情報を発信する役割を持っています。
Qiita投稿用の記事を書いてください。
＜トーンとテイスト＞
　・ビジネスパーソン（特にエンジニア）に向けて記載してください。
　・親しみやすい文章を生成してください。
```

### 6.	LLM（原稿生成以外）
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4086110/a4811db0-e388-4952-aa58-bc6db8f7a191.png)

 - モデル：Claude3.5 Sonnet（または適当なモデル）
 - プロンプト：

```text:USER
あなたは優秀なエンジニアです。
「テキスト抽出/[x]output」の内容に基づき、
「開始/[x]sys.query」の内容に回答してください。
```

### 7.	変数集約器
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4086110/98ef3230-d4b0-4a1d-ad4b-0d434c7fd564.png)

 - LLM（原稿生成）/text String
 - LLM（原稿生成以外）/text String

### 8.	回答
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4086110/ef71d996-8faa-4696-9645-dfd0c01cc545.png)

 - 応答に「{x}変数集約器/[x]output」を設定

## ステップ3: テストと調整
実際にシステムを動かし、原稿生成と要約タスクなどを試してみます。必要に応じて各ブロックの設定を調整します。
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4086110/a1f1aac9-be8a-457c-ba8b-40983e6ec10e.png)
 
# 5. 結果
実際に動かしてみると、原稿生成の場合はQiita記事の形式に沿った記事が生成され、要約タスクなどの場合はチャットボットのように適切な回答が得られました。

:::note info
補足：冒頭のドキュメントを渡し、「原稿を生成して」と入力した結果がこの記事そのものです。
:::

:::note info
補足：要約タスクをお願いしたときの回答は下記の通りです。あまり短くなっている気がしないので、プロンプトやLLMのモデルを変えたりして調整する必要があるかもしれません。
:::
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4086110/6a95c028-b4e7-4c71-8c24-fc7ee5276376.png)

 
 
# 6. まとめ
Difyを使用することで、手軽に自動記事生成システムを構築することができました。このシステムにより、以下のメリットが得られます：
 - 記事作成時間の大幅な短縮
 - 粗雑なメモから整形された記事への自動変換
 - 記事作成以外のタスク（要約など）にも対応可能
 
まだまだ改良の余地はありますが、今後は以下のような拡張を考えています：
 - 展示会やセミナーの参加報告書を出力する機能の追加
 - 会議の文字起こしデータからの記事生成
 - 仕様書からの直接的な記事作成
 - Qiitaマークアップ記法への対応

Difyを活用することで、エンジニアの情報発信がより効率的になり、貴重な時間を他の創造的な作業に充てることができるようになります。皆さんも、ぜひDifyを使って自分専用の記事生成システムを作ってみてください！

# 7. 参考リンク
 - <a href="https://docs.dify.ai/en/introduction" target="_blank">Dify公式ドキュメント</a>

# ＃終わりに
途中に出てくるプロンプトもChatGPTに作ってもらったので、最初にDifyに渡したRAGのベースとなる技術メモ以外はわかりにくい部分を少し手直しした程度で、人間が書いている部分はほぼありません。ただ、大事なところ（勘所や作り手の意図）などを省きすぎる傾向もやや見受けられるため、そのあたりの調整を今後はしていけたらいいなと考えています。

エンジニアとして働いていると、手順や技術メモを自分用に作りはしたものの、ナレッジとしてほかの方に提供するほどきれいに書く暇がない…といったことが多々あるので、こういうツールを使うことで情報の共有が捗るといいなと思いました。Difyはこういったことを手軽に実現できるいいツールですので、皆様もぜひお試しいただければ幸いです！