つぶやきブログ投稿システム、全サービス連携を図解！

ｷﾀ━━━━(ﾟ∀ﾟ)━━━━!!

皆さん、ついにやりました！長らく開発を進めておりました「つぶやきブログ投稿システム」が、ついに完成しましたー！🎉🎉🎉

いやー、ここまで来るのに本当に色々ありましたよ…。（遠い目）
まるで、RPGのラスボスを倒した時のような達成感…！😭

**どんなシステムなの？**

このシステム、一言で言うと「LINEでつぶやいた内容が、自動でブログ記事になる」という、夢のような（？）システムなんです！

例えば、

*   「今日のランチは〇〇だった！美味しかった😋」
*   「仕事で〇〇なことがあって、マジありえないんだけど…😠」
*   「〇〇の映画見てきた！めっちゃ感動した😭」

みたいな、日常のちょっとしたつぶやきを、LINEでポチポチ送るだけで、それが自動的にブログ記事として公開されちゃうんです！

**このシステムのすごいところ**

*   **手軽さ**: 思いついたことをLINEでつぶやくだけでOK！ブログを書くハードルが爆下がり！
*   **自動化**: 記事の生成から投稿まで、全部自動でやってくれる！めんどくさい作業は一切なし！
*   **自由度**: テキストだけでなく、画像も投稿可能！アイディア次第で色々なブログ記事が作れちゃう！

**開発秘話（ちょっとだけ）**

このシステムを作るにあたって、一番苦労したのは、LINEとブログを連携させる部分でしたね。
LINE Bot APIを使いこなすのに、結構時間かかったんですよ…。（汗）
でも、その分、完成した時の喜びはひとしおでした！

# システム

ざっくり説明すると、こんな感じ。

1.  LINEでメッセージや画像を送信
2.  ローカルサーバーにメッセージと画像を保存
3.  エージェントが新しいコンテンツを監視
4.  ブログ投稿をトリガー
5.  RAGサーバーでコンテンツ分析
6.  Gemini APIで記事生成
7.  はてなブログに投稿

はい、文字で書くと、結構ややこしいですね。😅

**実際のPlantUMLコード**

百聞は一見にしかず、ということで、実際に書いたPlantUMLのコードがこちらです！

```plantuml
@startuml
skinparam componentStyle uml2
skinparam backgroundColor white

cloud "LINE Platform" {
    [LINE Bot API]
}

node "Local Services" {
    package "LINE Webhook Server (Port 8083)" {
        [lineapp2.py] as line_app #LightBlue
        folder "line_uploads/" {
            [User Content] as content
        }
    }

    package "Blog Post Server (Port 8100)" {
        [hatena_post.py] as blog_app #LightGreen
    }

    package "RAG Server (Port 4999)" {
        [flaskapp.py] as rag_app #LightYellow
    }

    package "Agent Service (Port 8200)" {
        [line_to_blog_agent.py] as agent #LightPink
    }
}

cloud "External Services" {
    [Google Gemini API]
    [Hatena Blog API]
}

' フロー
[LINE Bot API] --> line_app : Webhook events
line_app --> content : Save messages/images
agent -right-> content : Monitor for new content
agent --> blog_app : Request blog post
blog_app --> rag_app : Request content analysis
blog_app --> [Google Gemini API] : Generate content
blog_app --> [Hatena Blog API] : Post article
rag_app --> content : Access stored content

' ポート情報
note right of line_app : Port 8083
note right of blog_app : Port 8100
note right of rag_app : Port 4999
note right of agent : Port 8200

' データフロー説明
note "1. LINE messages/images\n2. Save to local storage" as N1
note "3. Monitor content\n4. Trigger blog post" as N2
note "5. Generate article\n6. Post to Hatena" as N3

N1 .. line_app
N2 .. agent
N3 .. blog_app

@enduml
```

このコードをPlantUMLでレンダリングすると、記事冒頭のような図が出来上がります。

**図から読み解くシステム**

この図を見ると、各サービスの役割とデータの流れが一目瞭然！
具体的には、以下の点が明確になりました。

1.  **ポート割り当て**: 各サービスがどのポートで動いているかが明確になりました。（例：`lineapp2.py`が8083番ポート）
2.  **データフロー**: LINEから投稿までのデータの流れが矢印で表現されていて、視覚的に分かりやすい。
3.  **コンポーネントの役割**: 各コンポーネントの役割（例：`hatena_post.py`はブログ投稿の処理）が理解しやすい。

特に、データの流れを追うのがすごく楽になりました。
以前は、頭の中でごちゃごちゃしていたのが、図になったことでスッキリ！

**各コンポーネントの詳細**

各コンポーネントの役割をもう少し詳しく説明しますね。

*   **lineapp2.py**: LINEからのWebhookイベントを受信し、メッセージや画像をローカルストレージに保存する役割を担っています。Port 8083で稼働中。
*   **hatena_post.py**: ブログ投稿を処理する部分。RAGサーバーとの連携や、Gemini APIを呼び出して記事を生成したり、はてなブログAPIで投稿を行ったりします。Port 8100で稼働中。
*   **flaskapp.py**: RAG（Retrieval-Augmented Generation）処理を行うサーバー。過去のコンテンツにアクセスして、コンテンツ分析に使います。Port 4999で稼働中。
*   **line\_to\_blog\_agent.py**: 新規コンテンツを監視し、ブログ投稿をトリガーするエージェントです。Port 8200で稼働中。

**PlantUMLのメリット**

今回、PlantUMLを使ったことで、以下のメリットを実感しました！

*   **可視化**: システム全体を視覚的に把握できる。
*   **コミュニケーション**: 関係者とのコミュニケーションが円滑になる。
*   **ドキュメント**: システムのドキュメントとしても活用できる。
*   **修正が楽**: コードを修正するだけで、図も簡単に更新できる。