MYARM AI

投稿者: kabubu

  • ADHDの未完をAIが解消してくれる可能性

    ADHDの未完をAIが解消してくれる可能性

    アイデアを「未完」で終わらせないために。AIが拡張する「実行力」と認知的特性の可能性

    イノベーションを阻む「実装の壁」

    新規事業やクリエイティブな現場において、多くの担当者が直面する共通の課題があります。それは「アイデアは無数に湧き出るが、それを最後まで形にできない」というジレンマです。

    着想した瞬間の熱量は非常に高いものの、いざ実行フェーズに移ると、技術的な制約、事務的な作業、あるいはリソースの不足といった「現実の壁」に直面します。そこに「妥協したくない」という完璧主義が作用することで、プロジェクトの進行は停滞し、当初の熱意は失われてしまいます。

    その結果、多くの優れたアイデアが、日の目を見ることなく「未完」のまま埋もれていく──。これは個人の資質の問題ではなく、創造と実装のプロセスにおける構造的な課題と言えます。

    AIは「障壁」を取り除くアクセラレーター

    昨今、急速に進化する生成AIは、この課題に対する強力なソリューションとなりつつあります。

    AIの本質的な価値は、単なる業務効率化だけではありません。創造的なプロセスにおいて、人のモチベーションを低下させる「初期の障壁」を瞬時に取り除く点にあります。

    • 構成案の作成やリサーチといった「着手時の負荷」を軽減する。
    • コードのエラーや専門的な技術課題に対し、即座に解決策を提示する。
    • 漠然としたイメージを、数秒で「たたき台」として可視化する。

    これまで人の手で数日を要していた「実装の第一歩」をAIが担うことで、プロジェクトが頓挫する最大のリスクである「熱の冷却」を防ぐことが可能になります。

    「AI × ADHD」に見る、テクノロジーと特性の親和性

    この「着想と実装のギャップ」を埋めるAIの役割は、特定の認知的特性を持つ人々にとって、より顕著なメリットをもたらす可能性があります。

    近年、ビジネスの現場でも注目される「ADHD（注意欠如・多動症）」的な特性──次々と新しい興味関心が湧く一方で、定型的なタスクの継続や完遂にハードルを感じやすい傾向──を持つ人々にとって、AIは「外付けの実行機能」として作用します。

    苦手とする「構造化」や「詳細の詰め」をAIに委ねることで、本来の強みである「発想力」や「瞬発力」を最大限に活かすことができる。AI技術の普及は、多様な特性を持つ人々が、その能力を社会で発揮するための重要なインフラになり得ると考えられます。

    「完璧」ではなく「完了」を重ねる

    AIをワークフローに組み込むことで、ビジネスのスピード感は「完璧を目指して止まる」ことから「プロトタイプ（試作）を高速で回す」ことへとシフトします。

    当社では、AI技術を単なるツールとしてではなく、人間の創造性を拡張し、アイデアを現実の価値へと変換するためのパートナーとして捉えています。今後も、実際の検証を通じて得られた「AI活用による実行力の変革」や、多様な働き方の可能性について、継続的に発信を行っていく予定です。

  • WordPressとCursorをFTP連携！トップページをAIで「デザインコーディング」する方法

    WordPressとCursorをFTP連携！トップページをAIで「デザインコーディング」する方法

    「WordPressのブロックテーマ、使いにくい…」 「AIにコードを書いてもらっても、テーマの仕様で反映されない…」

    そんな壁にぶつかったことはありませんか？ 最新のブロックテーマ（Twenty Twenty-Fiveなど）は便利な反面、コードで自由にカスタマイズしようとすると「CSSが効かない」「レイアウトが崩れる」といったトラブルが多発します。

    しかし、**AIエディタ「Cursor」と「ある特殊な手法」**を組み合わせれば、これらの制約をすべて突破し、プロ級のデザインを爆速で実装できます。

    この記事では、実際に私が検証して確立した**「WordPress × Cursor FTP連携」による最強のトップページ構築フロー**を公開します。

    1. なぜ「普通にやる」と失敗するのか？

    通常、WordPressのカスタマイズは style.css や functions.php を編集します。 しかし、AIにコードを書かせてそこに貼り付けても、多くの場合うまくいきません。

    • 読み込み順序の罠： テーマのデフォルトCSSが強すぎて、自作のデザインが上書きされる。
    • 構造の複雑さ： ブロックテーマはHTML構造が特殊で、AIが書いた一般的なHTML/CSSが適用されない。
    • キャッシュ地獄： 変更したはずなのに、画面には古いデザインが残り続ける。

    結果、「AIはすごいコードを書いたのに、サイトは崩れたまま」という悲劇が起こります。

    2. 解決策：ファイルを「完全独立」させる

    この問題を解決する唯一にして最強の方法。 それが、トップページを**「完全独立型（All-in-One）」の1ファイルで作る**ことです。

    テーマのルール（ヘッダーやフッターの呼び出し）に依存せず、**「このページのデザインは、このファイルに書いたことが全て！」**という状態を強制的に作ります。

    必要な環境

    • Cursor： コード生成AIエディタ
    • FTPソフト： Dreamweaver, FileZilla, Cyberduckなど（サーバーとPCを繋ぐもの）
    • WordPress： 子テーマを用意しておくこと

    3. 実践！爆速構築の3ステップ

    STEP 1：Cursorとサーバーを繋ぐ

    まず、FTPソフトを使ってサーバー上のテーマフォルダ（/wp-content/themes/子テーマ名/）をPCにダウンロードし、そのフォルダをCursorで開きます。

    これで、**「Cursorでファイルを保存 → 即座にサーバーへ反映」**という環境が整います。

    STEP 2：魔法のファイル「front-page.php」を作成

    ここが最大のポイントです。 子テーマの中に front-page.php というファイルを作成し、以下の「完全独立型テンプレート」をコピペしてください。

    これ一つで、HTML構造からデザイン（CSS）、WordPress機能の呼び出しまで完結します。

    PHP

    <?php
/**
 * Template Name: トップページ（完全独立LP版）
 */
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php wp_title('|', true, 'right'); ?><?php bloginfo('name'); ?></title>
    <?php wp_head(); ?>
    
    <style>
        body { margin: 0; padding: 0; background: #000; color: #fff; font-family: sans-serif; }
        .hero { height: 100vh; display: flex; align-items: center; justify-content: center; }
        /* 以降、自由自在にデザイン可能 */
    </style>
</head>
<body>
    
    <header>...</header>

    <main>
        <section class="hero">
            <h1>AIを、実務の現場へ。</h1>
        </section>
        
        <section class="news">
            <?php
            $the_query = new WP_Query( array('posts_per_page' => 3) );
            // ループ処理...
            ?>
        </section>
    </main>

    <footer>...</footer>

    <?php wp_footer(); ?>
</body>
</html>

    STEP 3：AI（Cursor）に指示を出す

    土台ができたら、あとはCursor（Ctrl + K）に指示を出すだけです。 CSSファイルが分かれていないので、AIも迷わず完璧なコードを書いてくれます。

    【プロンプト例】

    「この front-page.php を編集して。 デザインは『テック企業のLP風』にしたい。

    1. 背景は濃いネイビーから黒へのグラデーション。
    2. サービス一覧は『カード型』にして、横並びの3カラムにする。
    3. 最新記事を自動で3件表示するPHPコードを含める。」

    たったこれだけで、数秒後にはプロ級のデザインが出来上がります。

    4. トラブルシューティング

    作業中に「あれ？」と思ったらここを確認してください。

    • Q. ファイルをアップロードしたのにデザインが変わらない！
      • A. ブラウザの強力なキャッシュが原因です。Ctrl + F5（スーパーリロード）を押してください。
    • Q. 画面が真っ白になった！
      • A. PHPの記述ミスです。FTPソフトで、編集前のファイルをアップロードし直せばすぐに復旧できます。

    まとめ：Web制作は「AIとの共創」へ

    この「FTP連携 × 完全独立型ファイル」の手法を使えば、ブロックテーマの制約に悩まされることはもうありません。

    • デザイン: 自由自在（AIにお任せ）
    • 機能: WordPressの強み（記事管理など）はそのまま
    • スピード: 爆速

    「TOMARU」では、こうした**「現場で使えるAI実装ノウハウ」**をこれからも発信していきます。 Web制作のスピードを劇的に上げたい方は、ぜひこの環境を試してみてください！

  • ブログ記事自動生成ツール開発記録：AI活用で効率的なコンテンツ制作を実現

    ブログ記事自動生成ツール開発記録：AI活用で効率的なコンテンツ制作を実現

    こんにちは。今回、OpenAI APIとWordPressを活用したブログ記事自動生成ツールの開発に取り組みました。SEOを意識した高品質な記事を自動生成するシステムを構築しましたので、開発の経緯と実装内容をまとめます。

    プロジェクトの背景と目的

    本プロジェクトは、多数のキーワードに対して、地域別の専門記事を自動生成することを目的としていました。手動で記事を作成すると膨大な時間がかかるため、AIを活用した自動化システムの開発が必要でした。しかし、単純な自動生成では誤情報が発生するリスクがあり、信頼性の高い情報を提供する仕組みの構築が課題でした。

    技術スタック

    以下の技術を採用しました：

    言語・フレームワーク
    – Python 3
    – OpenAI API (GPT-3.5-turbo) を使用した記事生成
    – Google Sheets API (gspread) によるスプレッドシート連携
    – WordPress REST API による自動投稿

    主要ライブラリ
    – openai: AI APIクライアント
    – gspread: Googleスプレッドシート連携
    – requests: HTTP通信
    – beautifulsoup4: Webスクレイピング
    – python-dotenv: 環境変数管理

    実装した主要機能

    1. Googleスプレッドシート連携によるキーワード管理

    CSVファイルではなく、Googleスプレッドシートを使用することで、リアルタイムでのデータ管理と進捗状況の把握を実現しました。スプレッドシートには以下の項目を設定：

    – id: WordPress投稿ID（自動保存）
    – keyword: 記事のキーワード
    – slug: WordPressのURLスラッグ
    – category: カテゴリ名
    – city: 地域名（市区町村名）
    – type: 記事の種類分類
    – reference_text: 公式情報テキスト
    – reference_url: 公式サイトURL
    – status: 処理状況（完了/更新）

    2. AIによる記事タイプ自動判定

    各キーワードについて、AIが複数のカテゴリに自動分類します。分類結果に応じて、記事のタイトルと内容が適切に生成される仕組みを実装しました。

    3. 公式URL自動検索機能

    誤情報を防ぐため、公式サイトから公式情報を取得する機能を実装。Google検索とBeautifulSoupを活用し、実際に存在する公式ページのURLを自動検索します。見つかったURLはスプレッドシートに自動保存され、記事生成時の参照情報として活用されます。

    4. WordPress自動投稿機能

    生成された記事を自動的にWordPressに投稿する機能を実装。既存記事がある場合は更新、ない場合は新規作成を行います。カテゴリも自動的に設定され、存在しないカテゴリは自動生成されます。また、H1タグの重複を防ぐため、H1の内容をタイトルに使用し、本文からはH1タグを削除する処理を追加しました。

    5. HTML形式での出力

    Markdownではなく、HTML形式で直接出力することで、WordPressへの貼り付けが容易になりました。適切なHTMLタグ（h1, h2, p）を使用し、SEOに配慮した構造化されたコンテンツを生成します。

    開発過程で直面した課題と解決策

    課題1: プレースホルダー（○○）が記事に残る問題

    問題: AIが生成する記事に「〇〇市」「〇〇袋」「〇〇曜日」などのプレースホルダーが残ってしまう

    解決策: プロンプトを改善し、以下の対策を実施：

    – プロンプトから「〇〇市」の例文を削除
    – 公式情報がない場合は、具体的な数値や手順を書かずに「最新情報を確認してください」とだけ書くよう明確に指示
    – Systemメッセージにもプレースホルダー禁止を明記

    課題2: 誤情報の発生

    問題: 公式情報がない場合、AIが一般的な知識に基づいて誤った情報を生成してしまう

    解決策: 以下のルールを設定：

    – 公式情報がない場合は、具体的な方法について断言しない
    – 公式情報に基づいた内容のみを事実として扱う
    – 公式情報がない項目は「最新情報を確認してください」とだけ記載

    課題3: 参考URLが返ってこない

    問題: 公式サイトのURLを推測するだけで、実際に存在するか確認していなかった

    解決策: Google検索とBeautifulSoupを活用したWeb検索を実装。検索結果から公式サイトのURLを抽出し、実際にアクセス可能か確認する機能を追加しました。

    課題4: タイトルが短すぎる・不自然

    問題: タイトルが地域名とキーワードのみになり、SEO的に不十分

    解決策: タイトルは40-60文字程度とし、「方法」「ガイド」「解説」「注意点」などの単語を含めるよう指示。また、記事タイプに応じて検索意図を反映したタイトルを生成するように改善しました。

    プロンプトエンジニアリングの重要性

    本プロジェクトでは、プロンプトの設計が成果の質に大きく影響することが分かりました。特に以下の点が重要でした：

    – 明確な制約条件の設定: 「絶対に守ること」を明確に記載
    – ネガティブな指示の明示: 「〇〇を使わない」「断言しない」などの禁止事項を明確に
    – フォールバック処理の定義: 公式情報がない場合の対応方法を詳細に指示
    – 段階的な指示: システムメッセージとユーザーメッセージで異なる角度から指示

    今後の改善予定

    現在のシステムで基本的な機能は実装できましたが、以下の改善を検討しています：

    – 複数地域への対応（現在は1つの地域を想定）
    – 参考URLから実際の公式情報をスクレイピングしてreference_textに自動入力
    – 生成された記事の品質チェック機能
    – エラーハンドリングの強化
    – バッチ処理の最適化による処理速度向上

    まとめ

    AIを活用したブログ記事自動生成ツールの開発を通じて、以下の知見が得られました：

    1. 信頼性の確保が最重要: 自動生成であっても、誤情報を防ぐ仕組みが不可欠
    2. プロンプト設計の重要性: 詳細で明確な指示が、高品質な出力につながる
    3. 公式情報の活用: 公式サイトから正確な情報を取得する仕組みが必須
    4. 段階的な改善: 問題が発生するたびにプロンプトを改善し、品質を向上させるアプローチが効果的

    今後も、信頼性と効率性の両立を目指し、システムを継続的に改善していく予定です。同じような課題に取り組む方の参考になれば幸いです。

  • 【WP解決】WordPressで一括削除時に「414 Request-URI Too Large」エラーが出た時の対処法

    【WP解決】WordPressで一括削除時に「414 Request-URI Too Large」エラーが出た時の対処法

    事構成案

    1. はじめに（問題の発生）

    WordPressで不要な記事やコメントを整理しようと思い、一括削除ボタンを押したところ、見たこともない黒い画面に**「414 Request-URI Too Large」**という文字が……。 「壊れた！？」と焦りましたが、実はこれ、壊れたわけではなく「URLが長すぎる」という単純なエラーでした。

    2. 「414 Request-URI Too Large」エラーの原因

    このエラーは、ブラウザがサーバーに送るリクエスト（URL）が長すぎるときに発生します。 WordPressで「一括削除」を行う際、裏側では「ID=1&ID=2&ID=3…」といった具合に、選択したすべての項目のIDをURLに含めて送信しています。

    今回、707件を一気に削除しようとしたため、このIDリストが限界を超えてしまい、サーバーが「そんなに長いURLは受け取れません！」と拒否してしまったのが原因です。

    3. 【解決策】表示件数を調整する

    解決策は非常にシンプルで、**「一度に送るデータ量を減らす」**ことでした。

    手順：

    1. 投稿一覧（またはコメント一覧）画面の右上にある**「表示オプション」**をクリック。
    2. 「ページごとに表示する項目数」がデフォルト（20件）より多くなっているはずです。
    3. ここを**「500」**（あるいはそれ以下）に変更して「適用」をクリック。
    4. この状態で一括削除を実行する。

    4. まとめ（検証結果）

    私の環境では、707件ではエラーになりましたが、500件に絞ることで無事に削除できました。

    もし1000件、2000件と大量にある場合は、少し手間ですが500件ずつ数回に分けて行うのが、プラグインを入れずに解決できる最も安全な方法です。同じエラーで困っている方は、まずは「表示オプション」の数字を疑ってみてください！

  • 【開発録】Gemini APIの無料枠制限で詰んだので、OpenAIに乗り換えてブログ自動生成システムを構築した話

    【開発録】Gemini APIの無料枠制限で詰んだので、OpenAIに乗り換えてブログ自動生成システムを構築した話

    ご指定のタイトルで、コンテンツの具体的な内容（ゴミ分別など）は伏せつつ、**「地域特化型メディアの構築」**という抽象度で技術的な知見をまとめた記事を作成しました。

    そのままWordPressに貼り付けて使える形式です。

    記事タイトル

    【開発録】Gemini APIの無料枠制限で詰んだので、OpenAIに乗り換えてブログ自動生成システムを構築した話

    記事本文

    特定の地域情報に特化したWebメディアを立ち上げるため、Pythonと生成AIを活用した「記事執筆完全自動化システム」の開発を行いました。

    本日は、開発初日に直面した**「Gemini APIのレート制限（Quota Exceeded）」の壁と、それを突破するために行った「OpenAI (gpt-4o-mini) へのピボット」**、そしてAI特有のハルシネーション（嘘）を防ぐ技術設計について、開発ログとして記録を残します。

    1. 開発の背景と当初の技術スタック

    開発には、AI搭載コードエディタであるCursor（Agentモード）を使用し、コーディングの大部分をAIに任せるスタイルで進行しました。

    • 言語: Python 3.x
    • エディタ: Cursor (Composer / Agent)
    • 当初のモデル: Gemini API (Flashモデル / Free Tier)
    • 目的: CSVリストからキーワードを読み込み、SEO記事を大量生成する

    2. 壁：Gemini APIの「見えない上限」

    ランニングコストを抑えるため、最初はGoogleのGemini API（無料枠）を採用しました。

    しかし、スクリプトのテスト走行を始めると、すぐに 429 Too Many Requests エラーが発生し、開発が強制ストップしました。

    当初は「1分間のリクエスト過多（RPM）」を疑い、コード側に待機時間（time.sleep）を設ける実装を行いました。しかし、エラーは解消されず、ダッシュボードを解析した結果、以下の事実が判明しました。

    • 原因: 短期間のテスト実行とエラー再試行で、「1日あたりのリクエスト上限（RPD）」を使い切っていた。
    • 教訓: 開発フェーズでは試行錯誤を繰り返すため、1日の回数制限が厳しい無料枠はボトルネックになりやすい。「明日まで待たないと開発できない」状況は致命的でした。

    3. 解決策：OpenAI API (gpt-4o-mini) への移行

    開発スピードを優先し、バックエンドをOpenAI APIへ切り替える決断をしました。

    • 採用モデル: gpt-4o-mini
    • 選定理由: 圧倒的なコストパフォーマンスと、安定した応答速度

    .env ファイルのキーを差し替え、わずかなコード修正を行うだけで移行は完了。結果として、API制限に怯えることなくスムーズな連続生成が可能になりました。

    衝撃のコスト試算

    実際の生成ログからコストを計算したところ、以下の結果となりました。

    • 2記事作成: 約 $0.01（約1.5円）
    • 1記事単価: 約 0.75円

    単純計算で 1,000記事生成しても約750円（$5.00） 程度です。

    Geminiの無料枠にこだわって開発時間を浪費するより、安価で安定している gpt-4o-mini を使う方が、精神衛生上もプロジェクト進行上も正解でした。

    4. 品質担保：地域情報のハルシネーション対策

    今回扱うテーマは「自治体や地域によってルールが異なる情報」です。

    一般的なLLM（大規模言語モデル）は、こうしたローカル情報の詳細までは学習していないため、もっともらしい嘘（ハルシネーション）をつくリスクが高い領域です。

    これを防ぐため、以下のRAG（検索拡張生成）的な実装を行いました。

    1. 参照データの注入:CSVリストに「キーワード」だけでなく、**「公式サイトの正解テキスト」**をセットで持たせるカラムを追加。
    2. プロンプトによる制約:AIに対し、「学習済みの知識」ではなく、「与えられた参照テキストのみ」を事実として扱うよう厳格に指示。

    Python

    # プロンプトの一部抜粋
f"""
## 参照する公式情報
{reference_text}
※ 上記にない具体的な数値やルールについては、創作せず「公式サイトをご確認ください」と記述すること。
"""

    これにより、情報の正確性を担保しつつ、SEOライティングの構成力というAIの強みを活かすシステムが完成しました。

    5. まとめと今後の展望

    今回の開発での学びは以下の3点です。

    1. 開発時は「従量課金」が吉: 無料枠の制限による手戻りは、コスト以上の時間を奪う。
    2. gpt-4o-mini の実用性: ブログ記事生成において、速度・質・コストのバランスが非常に優秀。
    3. 参照データの重要性: 地域特化情報は、必ず「正解データ」を渡して書かせる必要がある。

    現在はMarkdown形式でのファイル出力まで自動化できています。

    次のステップとして、WordPressのREST APIを利用し、**「生成 → 下書き保存」**までの完全無人化フローを構築する予定です。

  • STUDIOで作成したフォームにzapierを使用して自動返信機能をつける

    STUDIOで作成したフォームにzapierを使用して自動返信機能をつける

    STUDIOにはデフォで自動返信機能が付いていないのでzapierを使用して自動返信機能を実装します。

    zapierのアカウントを作成

    https://zapier.com
    メインで使用しているgoogleアカウントで登録をしておくと楽チン

    英語が苦手な方はgoogle翻訳で日本語化して進めるのもありかと思います。

    zapierメニューから【Create】クリック後【Zaps】をクリック

    トリガーの設定

    App&eventで【Google Sheets】を選択
    Eventに【New or Updated Spreadsheet Row】を選択
    ※新しく最後の行が更新されたらトリガー＝STUDIOから新しく問い合わせがあったら

    Accountでgoogleアカウントのログインを求められてる場合は連携するログインを行いzapierと連携をする（STUDIOのフォームから問い合わせの情報がたまるスプレッドシートが見れるgoogleアカウント）

    Triggerの【Spredsheet】でStudioと連携しているスプレッドシートを選択、【work sheet】はデフォのシート1を選択

    接続テストをクリックをしてテストを行います。

    テスト後に下記画像が出た場合はスプレッドシート内に何も情報が入っていないために起こっている可能性があるので、一度STUDIOフォームからテスト送信を行い、スプレッドシートに情報を入れ込んでから再度テストを行う。

    下記画像のようなページに遷移すればOKなので、下部の【Continue with selected record】をクリック

    アクション設定　gmailから自動返信

    次にこのスプレッドシートに新規顧客が書き込まれたらその顧客にメールを送るアクションを設定します
    【Action】をクリック（または追加）

    gmailを選択

    EVENTは【Send Email】を選択

    Accountは送信元のgmailアカウントを選択
    独自ドメインで送信をしたい場合は、あらかじめgmailに登録を行っておけば可能

    Actionの【To】にスプレッドシートのメールアドレス項目を選択して、後は転送先や送り元のアドレスやメールの内容などをお好みで記入をしていき【Continue】をクリック

    再度にtestボタンをクリックして、エラーが起きなければpublishをクリックしてOKです

    実際にStudioのフォームで自身が確認できるアドレスでテスト送信を行い、実際に自動返信メールが届けは作業終了です。

    この方法を使えばスプレッドシートを使用したメール配信などに応用したりする事ができます。