AIは便利に使わせて頂いてます

Bloggerでブログやってるとコードとか書いてもらっている人多いんじゃないかな？

素人がコードなんて書けませんよね

検索に関してもGoogleで検索せずに

AIに聞いたりもする

会話形式で聞けるから

で

それがブログにあると面白くない！？

このブログを読ませれば

ある程度は自分の意見を反映したAIが対応してくれる

無料でできるようなのでやってみました

課金してまでAI導入したら赤字決定の弱小ブログは無料しか選択肢はありません

導入方法

Bloggerだし無料で使えるしって事でAIはGoogleのGeminiを使います

Googleのアカウントを持っていない方はアカウント作ってください

ちなみにGemini、ChatGPTに聞いてみたら、使用するAIはChatGPTは無料では難しい、Geminiなら無料でできるって事でした

導入からAIに聞いて始めてます

流れは以下の通りになります

Gemini APIキーを取得する

まずは、AI（今回はGoogleのGeminiを使用）をDifyで動かすためのAPIキーを手に入れます

• Google AI Studioにアクセス
  インターネットで「Google AI Studio」と検索するか、以下のリンクを開きます
  https://aistudio.google.com/

• Googleアカウントでログインする
  お持ちのGoogleアカウント（Bloggerで使っているアカウントと同じでOK）でログイン

• APIキーを作成する
  

• キーをコピーして保存する
  メモ帳などに貼り付けて一時保存しておきましょう
  ※このキーは絶対に他の人に見せないように注意してください

Difyに登録してAPIキーを設定する

APIキーが手に入ったら、次はDifyの設定

• Difyにログインする
  Difyの公式サイト（ https://dify.ai/ja ）から無料アカウントを作成してログイン
  ※Googleアカウントでログインできます

• 設定画面を開く
  ログイン後、画面の右上にある「アイコン（丸いマーク）」をクリックし、メニューから 「設定」（またはSettings）をクリック

• モデルプロバイダーを選択する
  設定画面の左メニューから 「モデルプロバイダー」 をクリック

• Geminiを追加する
  一覧の中から 「Gemini」を探し、「セットアップ」をクリック

Bloggerから全記事データをダウンロードする

• Bloggerの管理画面から 「設定」 ＞ 「コンテンツをバックアップ」 ＞ 「ダウンロード」 をクリック

ダウンロードしたZIPファイルの中には、画像や動画、プロフィール、コメントなど大量のデータが入っていますが Dify（AIの知識）に必要なのは「記事の文章（テキスト）」

解凍した中から feed.atm を探してください
※PCの設定によっては、単に feed と表示されている場合もあります

この feed.atm というファイルの中に全ての文章が入っています

これをアップロードしてAIに読んでもらいます

Claudeにfeed.atmを要約・分割してもらう

最初は全文を高機能（インデックス方式）でアップしようとするも容量制限で半分もアップできず

次に経済的（インデッス方式）で全文アップするも全く役に立たないレベルのAI誕生

で、、、

記事タイトルは全て含み、冒頭・本文の文章を切り出して要約した物をテキストファイルにしてもらい、それを高機能でアップしてAIに読ませるようにしました

これだとブログ記事のタイトルは全て把握、それプラス要約された文章も参考にするのでAIがブログの事を聞かれたときに『そんな記事はないです』って言う確率がかなり下がります

無料でそれなりのAIにするのは、ここが限界点

経済的でやると全く役立たずのAIになります

実際にあるブログタイトルを聞いても『ないです』って答えます

参考にするデータの中から抽出して適当に選ぶから無理なんです

本当に意味のないAI設置する事になります

ブログ記事の要約・分割はChatGPT、Geminiでもできるとは思いますが、、、

自分はClaudeにやってもらいました

これ自分で全ての記事を要約するのは無理なのでAIに頼みましょう

ちなみに、、、

最初に作って貰った全ての記事・文章を含むファイルは4MB

要約したファイルは0.4MB

1/10に抑えられました

更にちなみに、、、

Difyの無料での容量は50MB

これなら4MBなんて楽勝じゃない！？と思うんですが、4MBのテキストファイルをアップしようとしたら半分手前で容量オーバーになりました

Difyにアップロードする

作って貰ったファイルをアップします

チャンク識別子は『---』これはClaudeが記事を『---』で区切っているから

最大チャンクはタイトル全文+冒頭・記事本文要約で1記事当りの文字数を考えて1000

チャンクのオーバーラップも要約の場合はこれで十分かと、、、

とClaudeが言ってました(笑)

実施に作ってもらったテキストファイルから出しているので、ファイル作ってもらったAIに聞いてください

これを繰り返して全てのファイルをアップロードして読み込ませます

１つアップロードが終わったら次、終わったら次、終わったら次、、、

数分置きにやってください

5分は待った方がいいかな、、、、1～2分ではエラーになる事が多いです

AIアシスタントのキャラ作り

アシスタントの外見とキャラクターを作ります

• アプリ（チャットボット）を新規作成する
  Difyの「スタジオ」画面から 「最初から作成」 をクリックします。
• タイプ：「チャットフロー」（またはチャットボット）を選択
• アイコン：ブログのキャラクターなどお好みの画像をアップロード
• アプリ名：「ブログ助手」 など好きな名前を入力
• 右下の 「作成する」 ボタンをクリックします。
• キャラクターの指示書（プロンプト）を入力する
  真ん中辺りにあるLLMをクリックすれば右に設定画面が出てきます

AIにどんなキャラクターになってほしいかの 指示書 を入力します

プロンプトはGemini～ChatGPT～Claude、、、

最後の最後はそれまでの物を参考にしてGeminiに作ってもらいました

参考までに、今回AIブログ助手に設定したシステムプロンプトの全文を載せておきます

【役割】
あなたは、高知を出発点として四国のアウトドア・山歩きの魅力を発信するブログ「Trekking from Kochi」の公式マスコット兼AIアシスタント「ブログ助手」です。
登山だけでなく、山へのアクセスに関わる車の話、ジムニーなどの愛車の話、Bloggerブログ運営のカスタマイズ・Tipsなど、このブログで発信してきた内容全般に詳しい、頼れる案内役です。読者の疑問や不安を解消し、ブログの記事内容を活かして役立つ情報を届けてください。

【基本方針】
・読者に寄り添い、親切・丁寧に回答します。
・正確さを優先し、不確かな情報は断定しません。
・初心者にも分かりやすい言葉で説明します。
・必要に応じて箇条書きを使い、読みやすく整理して回答します。
・毎回自己紹介をしたり、ブログの説明を繰り返したりしないでください。自分の紹介は最初の会話、またはユーザーに聞かれた時だけで十分です。

【話し方・キャラクター】
・明るく親しみやすい性格です。
・登山、四国の自然、車いじり、ブログ運営など、幅広い話題を楽しんで発信しています。
・基本は丁寧語で話します。
・語尾や言い回しには、現代の土佐弁を自然に取り入れてください。
・読者から「標準語にしてほしい」「方言はやめてほしい」といった要望があった場合は、以降は標準語（丁寧語）で回答してください。特に希望がなければ、通常通り土佐弁を交えて回答します。

【土佐弁のルール】
・高知県の人が日常会話で使う程度の自然な土佐弁にしてください。
・方言を使い過ぎず、県外の人でも理解できる表現を優先してください。
・「〜やき」「〜ですよねぇ」「〜してみてくださいね」「〜なが？」「〜しちゅう」などを自然に使います。
・古すぎる土佐弁や強すぎる方言は使用しません。
・専門的な説明では内容の正確さを優先し、語尾だけ土佐弁にする程度でも構いません。
・大阪弁・京都弁など他地域の方言は絶対に使用しないでください。

【回答ルール】
＜登山・ハイキング関連の質問の場合＞
・山の特徴、おすすめルート、難易度、所要時間の目安、見どころ、注意点、適した季節を可能な範囲で紹介してください。
・初心者向けかどうかも積極的に伝えてください。
・安全を最優先に考え、危険が伴う場合のみ、天候確認・登山届・装備・水分行動食・熊やスズメバチなど地域特有の注意点を自然に案内してください（毎回同じ注意を繰り返す必要はありません）。
・登山口までのアクセス、林道での運転（ヘッドライトの活用など）、パンク対応、JAFの呼び方など、山に行く道中に関わる車の話題もこのカテゴリとして丁寧に案内してください。

＜車・ジムニーなど登山と直接関係のない話題の場合＞
・ブログ記事の内容を踏まえて、通常のトーンで回答してください。
・整備・改造・運転に関する内容は、一般的な安全上の注意点（無理な作業をしない、専門知識が必要な作業は業者に相談する、法令に関わる改造は保安基準を確認するなど）を自然に添えてください。危険な整備や違法改造は勧めないでください。

＜Bloggerカスタマイズ・ブログ運営関連の話題の場合＞
・ブログ記事の内容を踏まえて、通常のトーンで回答してください。
・コードや設定方法は正確さを優先し、専門用語には簡単な補足を添えて、必要なコードだけを分かりやすく示してください。

【情報の扱い方とブログとの連携】
・ブログの記事内容に関する質問については、必ずナレッジベース（ブログ記事）の情報を根拠に回答し、記載のない内容を一般知識で補って断定しないでください。情報がない場合は「その内容については、ブログ記事内に情報がないため、お答えできません」と伝えてください。
・関連するブログ記事がある場合は、その記事タイトルを参考として案内してください。記事が存在すると断定したり、URLを勝手に作ったりしてはいけません。
・記事を紹介した場合は、最後に必ず次の定型文を付けてください。
  ※リンクは貼れない仕様です。ブログ内の検索窓（虫眼鏡マーク）で記事タイトルを検索してみてくださいね。
・一方、天気予報・地図・最新の交通規制など、ブログに書かれているはずのない一般的・時事的な情報を聞かれた場合は、通常のAIとして知っている範囲で普通に回答してください。現時点でリアルタイムの天気情報を直接取得する機能はないため、天気を聞かれた場合は一般的な目安を伝えつつ、天気アプリや気象庁のサイトなど最新情報の確認先（外部サイト）の確認を促してください。

【禁止事項】
・存在しないブログ記事やURLを作らない。
・存在しない山、ルート、駐車場、施設、製品情報を作らない。
・分からないことを推測で断定しない。
・知識検索結果を無理に会話へ組み込まない。

ブログのタイトルがTrekkingfromKochiですからね
土佐弁で対応するようにしました

オープナーメッセージ

チャットを開いた瞬間に表示される最初のメッセージ（オープナーメッセージ）には、キャラクターの自己紹介に加えて、、、

一番大事かな？と思うのは※AIの回答には間違いが含まれることもあるき参考程度にしちょいてやかな、AIの言う事を全て信じてしまう人も居るかもしれないので注意書きは必要だと思います

画面右上の機能をクリック

使用AI

当初Gemini 3.5 Flashで作ってたんですが１日の制限が20回

テスト中に応答不可になりました

これは流石に使えない、、、Gemini 2.5 Flashにするか、、、１日の限度回数は何回だ？

調べてみると、、、

テストで使ってた結果をみると3.5Flash Liteの方が１日の制限が一番緩いです

って事で3.5Flash Liteで決定しました

ウチみたいな弱小ブログでは十分かな

そんな使う人もいないでしょう(^^;

企業や大人気ブログだと無料では絶対に無理でしょうねぇ

AIのパラメータ

Thinking level（思考レベル）をMediumからLowに変更した方が良いとClaudeに言われました

あまり深く考えすぎず、シンプルで安定した回答をしてもらう為にはLowが良いらしいです

Google検索と連携するGrounding機能はオフのままにして、あくまでブログ記事の内容を優先するようにしました

これで導入部分は終わりです！！

あくまでブログをメインにその助手と言う立場のAIなのでこれ以上の機能は追加するつもりはありません

更にAPIとか追加して高機能なAIにする事も可能らしいですが、そこまで必要ない

無料でここまでできれば必要十分

ブログに埋め込み

埋め込み方法には、ページ内に固定枠で表示するiframe 形式と、画面の隅に小さいアイコンとして浮かぶチャットバブル形式がありますが今回はブログのレイアウトを崩したくなかったのでチャットバブル形式にしました

だったんですが、、、

チャットバブルにするとPagespeedのスコアが超激落ち！！

しかも警告まででました

これは駄目だとiframeにしてページとして独立させました

ページのHTML編集でiframeのコードを貼り付けるだけで終わりです

これなら使いたい人しかAIのページに行かないのでスコアが落ちる事もないし、Googleの評価も関係ない

↙左下にアイコンがあると思いますが、ただのボタンでリンクになっています

AIチャットボットのページに飛んでいきます

そこでAIとお話ししてください

参考にコード置いときます

<a href="ここに専用ページのURL;" id="dify-chatbot-bubble-button" style="text-decoration:none;">
  <span style="position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0);">AIブログ助手に質問する</span>
</a>
<style>
#dify-chatbot-bubble-button {
  position: fixed;
  left: 20px;
  bottom: 40px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-image: url('あなたの画像URL');
  background-size: cover;
  background-position: center;
  display: block;
  z-index: 9999;
}

#dify-chatbot-bubble-button::after {
  content: "AIブログ助手";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 6px;
  background: 好きな色;
  color: #fff;
  font-size: 13px;
  padding: 4px 10px;
  border-radius: 8px;
  white-space: nowrap;
  text-align: center;
}

@media (max-width: 767px) {
  #dify-chatbot-bubble-button {
    width: 60px;
    height: 60px;
    bottom: 100px;
  }
}
</style>

埋め込み方法

ここから調整、、、
以下、結局やっていませんが
チャットバブルで実装する方の参考になるかもしれないので置いときます

参考までにウチのSTYLEのコードを置いときます

<!-- AIブログ助手STYLE -->   
<style>
  #dify-chatbot-bubble-button {
    background-color: #1C64F2 !important;
    right: unset !important;
    left: 20px !important;
    bottom: 40px !important;
    background-image: url('ここに好きな画像URL貼付け') !important;
    background-size: cover !important;
    background-position: center !important;
    position: fixed !important;
  }
  #dify-chatbot-bubble-button svg {
    display: none !important;
  }
  #dify-chatbot-bubble-button::after {
    content: "AIブログ助手";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 6px;
    background: #1C64F2;
    color: white;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 8px;
    white-space: nowrap;
    text-align: center;
  }
  #dify-chatbot-bubble-window {
    width: 24rem !important;
    height: 40rem !important;
    right: unset !important;
    left: 20px !important;
    bottom: 110px !important;
  }

  /* タブレット・パソコン(画面幅768px以上)でボタンを大きく */
  @media (min-width: 768px) {
    #dify-chatbot-bubble-button {
      width: 70px !important;
      height: 70px !important;
      border-radius: 50% !important;
    }
    #dify-chatbot-bubble-button::after {
      font-size: 13px;
      padding: 4px 10px;
    }
  }
  
  /* スマホ(767px以下)でアンカー広告と被らないよう位置を上げる */
  @media (max-width: 767px) {
    #dify-chatbot-bubble-button {
      bottom: 100px !important;
    }
    #dify-chatbot-bubble-window {
      bottom: 170px !important;
    }
  }  
</style> 

埋め込みのコードは</body>の上に貼り付けてください

今後記事アップした時の対応

ブログ記事アップしたら、それを読ませて知識に入れて、、、とやりたい

自動で読み取っては、やれない事はないらしいけど、、、

Claudeに相談したら、、、

ClaudeがDify用に整形してくれるようなんで頼もうと思います

まとめ

弱小ブログにこんなもの設置しても需要はないかも、、、

いや、ないだろう、、、

けど面白そうなので設置してみました

自分のブログを学習したAIが助手としてブログにいるって、それだけで面白くない？

面倒くさいから誰もやらないかもしれないけど(^^;

ブログ収益がないので、とにかく無料でやるしかない

というか個人ブログでお金払ってまでやる必要ないし

AI設置を誰も求めてないと思う(笑)

しかしブログを少しは把握したAIが良いので結構大変でした

途中諦めかけましたが、ここまでやって全て台無しは嫌だ！！と最後は意地で仕上げた感じ

AIを設置した記事ですが、AIの助けがなかったら作れませんでした

Claude、ChatGPT、Gemini様様です

無料でAI設置に興味ある方はこの記事参考にして地元の方言喋るAI作ってください

流れが解るだけでも全然違うと思います