Gemini DeepResearchとAWSを活用したWordPressへのデータ可視化記事の自動日次配信ガイド
本レポートでは、Gemini DeepResearchを活用して調査を行い、その結果を可視化したHTMLコンテンツを生成し、AWS上に構築されたWordPressサイトへ毎日記事として自動配信するための包括的な技術ガイドを提供します。
特に、最新のUIトレンドをWordPressで表現するためのGemini DeepResearchへのプロンプト作成方法についても詳述します。
対象読者: 本ガイドは、AWS、ウェブ開発(HTML、JavaScript、WordPress)、AI(特にGemini API)に関する技術的知識を有する開発者、アーキテクト、またはテクニカルプロジェクトマネージャーを対象としています。
Part 0: 基盤設定とセキュリティ
自動化システムを構築する前に、いくつかの基本的な設定とセキュリティ対策を講じる必要があります。これには、WordPressサイトの準備、認証情報の安全な保管、および各種APIへのアクセス設定が含まれます。
0.1. AWS上のWordPressサイト準備
本ガイドでは、既にAWS(例:EC2、Lightsail)上にWordPressサイトが構築・運用されていることを前提とします。以下の準備が整っているか確認してください。
- WordPress REST APIのアクセシビリティ: WordPress REST APIが外部からアクセス可能であることを確認します。これには、WordPressのパーマリンク設定が「基本」(Plain)以外(例:「投稿名」)に設定されている必要があります 1。WordPress 4.4以降では、REST APIはデフォルトで有効化されています 1。
- ユーザーロールと権限: 自動化プロセスが記事を公開するために使用するWordPressユーザーアカウント(例:「編集者」または「管理者」ロール)を作成または特定します。このユーザーは、後述するアプリケーションパスワードに関連付けられます 1。
0.2. 認証情報のためのAWS Secrets Manager設定
WordPressのアプリケーションパスワードやGemini APIキーのような機密情報をLambda関数内にハードコーディングするのではなく、AWS Secrets Managerを使用して安全に保管することが不可欠です。
- 重要性: 機密情報をコードから分離し、アクセス制御を一元管理することでセキュリティを強化します。
- プロセス:
- AWSマネジメントコンソールのSecrets Managerに移動します 2。
- 「新しいシークレットを保存する」を選択します。
- 「その他のシークレットのタイプ」を選択します。
- キーと値のペアでシークレットを作成します。例:
WORDPRESS_USER
、WORDPRESS_APP_PASSWORD
、GEMINI_API_KEY
。 - シークレット名(例:
WordPressAutomation/Credentials
)を指定します。 - 作成されたシークレットのARNを控えておきます。
- Lambda Extension 対 SDK: AWS Lambda関数からSecrets Managerにアクセスする方法として、AWS SDKを直接使用する方法 3 と、AWS Parameters and Secrets Lambda Extensionを使用する方法 7 があります。Lambda Extensionは、取得したシークレットをキャッシュする機能を提供するため、後続の呼び出しが高速になり、Secrets ManagerへのAPIコール数を削減できます。APIコール数の削減は、特にLambda関数が頻繁に実行される場合や多くのシークレットを処理する場合において、コスト削減に繋がる可能性があります。したがって、効率性と潜在的なコスト削減の観点から、Lambda Extensionの使用が推奨されます。
0.3. WordPressアプリケーションパスワードの生成
アプリケーションパスワードは、ユーザーのメインパスワードを公開することなく、REST APIアクセスを安全に認証するための手段です 1。
- 目的: REST API経由での安全な認証。
- 手順:
- WordPress管理画面で、「ユーザー」->「プロフィール」へ移動します。
- 「アプリケーションパスワード」セクションまでスクロールします。
- 新しいアプリケーション名(例:「DailyArticleLambda」)を入力します。
- 「新しいアプリケーションパスワードを追加」をクリックすると、パスワードが生成されます。このパスワードは一度しか表示されないため、直ちにコピーしてください 11。
- このアプリケーションパスワードと関連するWordPressユーザー名を、セクション0.2の手順に従ってAWS Secrets Managerに保存します。
- WordPress 5.6以降、この機能はコアに統合されています 9。
0.4. Gemini APIアクセス設定
- Google AI StudioまたはGoogle Cloud ConsoleからGemini APIキーを取得します 13。
- このAPIキーを、セクション0.2の手順に従ってAWS Secrets Managerに安全に保存します。
- Vertex AI Geminiモデルを使用する場合、関連するGoogle CloudプロジェクトでVertex AI APIが有効になっていることを確認します 14。
Part 1: Gemini DeepResearchによる可視化HTMLコンテンツの生成
このセクションでは、Gemini DeepResearchを使用して構造化された記事コンテンツと視覚化用データを生成し、それをHTML形式に変換する方法について説明します。
1.1. 構造化コンテンツとデータのためのGemini活用
Geminiは、テキストだけでなく、JSONのような構造化データも生成できるため、予測可能なHTMLの作成や視覚化用データの準備に非常に適しています 14。
- JSON出力のためのGemini設定:
- API呼び出し時に
generationConfig.response_mime_type: "application/json"
を指定します 15。 - 出力構造を制約するために
generationConfig.response_schema
(Pythonの型ヒントまたはJSONスキーマ形式)を定義します 15。これは、テキストプロンプト内でスキーマを提供するよりも信頼性が高いため、強く推奨されます 15。 - 記事のスキーマ例:タイトル、導入部、セクション(見出し、コンテンツ、チャートデータを含むオブジェクトの配列)、結論。
- API呼び出し時に
- 調査と記事構造のためのプロンプト:
- 日々のトピック(動的に生成されるか、事前定義されたリストから選択)に関する調査を行うようGeminiに指示するプロンプトを作成します。
- 調査結果を、明確なセクションを持つ一貫した記事に構成するよう依頼します。
- 関連セクション内で視覚化に適したデータポイントや要約を要求します。
- 自動化におけるスキーマの重要性: 自動化されたパイプラインにおいて、Geminiが一貫して特定のJSON構造を生成するためには、スキーマ定義が不可欠です。Lambda関数がGeminiの出力を確実に解析し、HTMLおよびWordPressの投稿データに変換できるようにするため、明確に定義された
response_schema
15 は、日次公開パイプライン全体の安定性にとって極めて重要です。
表1.1: Gemini API – 構造化JSON出力のための主要パラメータ
パラメータ名 | 説明 | 例 |
model | 使用するGeminiモデルのID。 | gemini-1.5-flash |
contents | プロンプトとコンテキストを含む入力コンテンツ。 | [{ "role": "user", "parts": [{ "text": "..." }] }] |
generationConfig.response_mime_type | 期待するレスポンスのMIMEタイプ。JSON出力には application/json を指定。 | application/json |
generationConfig.response_schema | 出力JSONの構造を定義するスキーマ(Pythonの型またはJSON Schema)。 | {"type": "object", "properties": {"title": {"type": "string"}, "content": {"type": "string"}}} |
1.2. HTMLおよびモダンUI要素のためのプロンプト設計
「モダンUI」という要望を具体的なプロンプトに落とし込むには、UI/UXのベストプラクティスと最新のウェブデザイントレンドを考慮する必要があります。
- 「モダンUI」のプロンプトへの変換:
- UI/UXのベストプラクティス(シンプルさ、一貫性、視覚的階層)をプロンプトに反映させます 17。
- モダンデザイントレンド(例:予期せぬ浮遊オブジェクト、フリーフォームフィニッシュ、フォントの強調、コラージュ、キャンディカラーポップ、スクローリーテリング)を参考に、Geminiが生成するHTML/CSS構造がこれらのトレンドを促進するように指示します 18。
- プロンプト例:「記事セクションのHTMLを生成してください。見出しには
<h2>
、本文には<p>
タグを使用します。視覚化のためにクラス名chart-container
を持つ<div>
を含めてください。CSSクラスarticle-section
、main-heading
、body-text
を使用して、クリーンでミニマルなスタイルにしてください。要素間の余白を十分に確保し、可読性を高めてください。」
- HTML/CSSのためのプロンプトエンジニアリング技法:
- Few-Shotプロンプティング: 望ましいHTML構造とCSSクラス使用法の例を提示します 19。
- ロールプレイング: 「魅力的なブログ投稿を作成するエキスパートウェブデザイナーとして振る舞ってください」20。
- 具体性: タグ、属性、望ましいCSSクラスを明確に定義します 21。
- 反復的な改良: Geminiの出力に基づいてプロンプトをテストし、改良します 20。
- コンテキストプロンプト: 「調査データ[データ]を基に、それを要約するHTMLセクションと棒グラフのプレースホルダーを生成してください」21。
- HTML構造の生成:
- 主要な記事コンテンツを適切なHTMLタグ(例:
<article>
、<h1>
、<h2>
、<p>
、<ul>
、<li>
)で囲むようGeminiに指示します。 - チャートのキャンバス要素(
<canvas id="chart1" data-chart-type="bar"...>
)を配置する場所を指定します。
- 主要な記事コンテンツを適切なHTMLタグ(例:
- CSSの生成(インラインまたはクラス):
- Geminiは基本的なスタイリングのためのインラインCSSやCSSクラスを提案できます。しかし、WordPressサイトの場合、テーマのスタイルシートに依存し、Geminiにはテーマが提供する可能性のある適切なセマンティックHTMLとユーティリティCSSクラスを使用するよう促す方が一般的に優れています。新しいツール「Stitch」24 はUIデザインと対応するHTML/CSSを生成でき、これはGeminiへのプロンプト作成のヒントになるかもしれません。
- WordPressにおけるCSSの役割 – インラインスタイルよりクラス: GeminiはインラインCSSを生成できますが、これはコンテンツの保守性を低下させ、WordPressテーマのスタイリングとの一貫性を損ないます。Geminiには、WordPressテーマによってスタイリング可能なセマンティックHTMLと事前定義された(または提案された)CSSクラスを使用するようプロンプトで指示する方が望ましいです。これにより、サイト全体の視覚的な一貫性が保たれます。
表1.2: GeminiによるHTML/UIのためのプロンプトエンジニアリング技法
技法 | 説明 | HTML/UI向けプロンプト例(一部) |
Few-Shot(少数例提示) | 望ましい出力形式の例をいくつか示すことで、モデルの出力を誘導する。 | 例: <div class="card"><h3 class="card-title">タイトル</h3><p class="card-text">内容</p></div> |
ロールプレイング | モデルに特定の役割(例:専門家)を演じさせ、その視点からの出力を促す。 | あなたは経験豊富なUIデザイナーです。以下の情報を基に、ユーザーフレンドリーなHTML構造を提案してください。 |
具体性 | 曖昧さを排除し、具体的な指示(タグ名、属性、クラス名など)を与える。 | リストは<ul>タグを使用し、各項目は<li>タグで囲んでください。各<li>には"list-item"クラスを付与してください。 |
コンテキストの提供 | 背景情報や目的を伝えることで、モデルがより適切な出力を生成するのを助ける。 | このセクションは製品の主要機能を紹介するものです。各機能を強調する視覚的なレイアウトを考慮してください。 |
反復的な改良 | 生成された出力を評価し、プロンプトを段階的に調整して望ましい結果に近づける。 | (初期プロンプト)→出力確認→(調整後プロンプト) |
1.3. Chart.jsによるデータ視覚化の統合
Geminiに調査結果のデータを生成させ、それをChart.jsを使用してHTML内で視覚化します。
- Geminiによるチャートデータ生成:
- GeminiのJSON出力の一部として、Chart.jsに適したデータ(例:データセット内の
labels
とdata
の配列)を抽出または生成するようプロンプトで指示します。 - 例:市場トレンドについて議論する場合、「棒グラフ用に、年(ラベル)と対応する市場シェア率(データ)のリストを要求する」。
- GeminiのJSON出力の一部として、Chart.jsに適したデータ(例:データセット内の
- HTMLへのChart.js埋め込み:
- Geminiが生成するHTMLには、チャートがレンダリングされる一意のIDを持つ
<canvas>
要素を含めるべきです。 - Chart.jsへのデータ受け渡し:
- 方法1: HTML
data-*
属性: JSON文字列化されたチャートデータ(ラベル、データセット、チャートタイプ)を<canvas>
要素のdata-*
属性に保存します 25。クライアントサイドのJavaScriptがこれらを解析します。- 例:
<canvas id="myBarChart" data-chart-type="bar" data-labels='["1月","2月","3月"]' data-values=''></canvas>
- 例:
- 方法2(代替/高度): 投稿メタ +
wp_localize_script
: よりテーマに統合されたアプローチ(Part 3.2参照)では、Geminiにチャートデータを生成させ、それを投稿メタフィールドに保存します。このデータは、wp_localize_script
を使用してエンキューされたJavaScriptファイルに渡すことができます 27。これは複雑なデータに対してより安全でクリーンな方法です。
- 方法1: HTML
- Geminiが生成するHTMLには、チャートがレンダリングされる一意のIDを持つ
- 基本的なChart.jsセットアップ(クライアントサイド):
- WordPressテーマ内(または、慎重に管理され許可されていればGeminiが生成するHTMLの一部として)汎用的なJavaScriptスニペットが必要になります。このスニペットは以下の処理を行います:
- チャート用に意図されたすべてのcanvas要素を検索します。
data-*
属性を読み取ります。- データとタイプを指定してChart.jsインスタンスを初期化します。
- 属性からのデータを使用した棒グラフ、折れ線グラフ、円グラフのChart.js初期化例 28。
- WordPressテーマ内(または、慎重に管理され許可されていればGeminiが生成するHTMLの一部として)汎用的なJavaScriptスニペットが必要になります。このスニペットは以下の処理を行います:
- チャートの外観カスタマイズ:
- 色、ツールチップ、ラベル、凡例はChart.jsのオプションオブジェクトで設定できます 32。
- Geminiにカラーパレットや基本的なスタイリングオプションを提案させ、それをChart.jsの設定に変換することができます。
- チャートデータ生成とチャートレンダリングロジックの分離: Geminiはチャートのデータと基本的なHTMLキャンバスプレースホルダーの生成に集中すべきです。実際のChart.jsレンダリングロジック(JavaScriptコード)は、理想的には標準化され、テーマの一部であるか、慎重に管理されたスクリプトであるべきです。Geminiに各チャート用の複雑なJavaScriptを生成させるのは避けるべきです。これにより、セキュリティ、保守性、一貫性が向上します。AIによるコンテンツ/データ生成とクライアントサイドのレンダリングロジックを分離することで、システムはよりモジュール化され、安全になります。
表1.3: Chart.js – 一般的なチャートタイプのコア設定
チャートタイプ | 主要なdataプロパティ | 主要なoptionsプロパティ |
棒グラフ (Bar) | labels , datasets: [{label, data, backgroundColor, borderColor,...}] | responsive , scales , plugins: {legend, tooltip,...} |
折れ線グラフ (Line) | labels , datasets: [{label, data, borderColor, fill, tension,...}] | responsive , scales , plugins: {legend, tooltip,...} |
円グラフ (Pie) | labels , datasets: [{data, backgroundColor, hoverOffset,...}] | responsive , cutout , plugins: {legend, tooltip,...} |
Part 2: WordPress公開のためのAWS自動化パイプライン構築
このセクションでは、生成されたHTMLコンテンツをWordPressに自動的に公開するためのAWS Lambda関数とAmazon EventBridgeスケジューラの設定について詳述します。
2.1. AWS Lambda関数の開発(PythonまたはNode.js)
Lambda関数は、この自動化ワークフローの中核を担います。Geminiからのコンテンツ取得、処理、WordPressへの投稿を実行します。
- ランタイムの選択: PythonとNode.jsはどちらもLambdaで十分にサポートされており、AWSサービス用のSDKやHTTPリクエスト用のライブラリが利用可能です。Python(
requests
、boto3
使用)とNode.js(axios
、aws-sdk
使用)の例を示します。 - コアロジック:
- シークレットの取得: AWS Secrets ManagerからGemini APIキー、WordPressユーザー名、アプリケーションパスワードを取得します。Lambda Extension 7 またはSDK 3 (Python)5 (Node.js) を使用します。
- 日次トピックの決定: (ユーザー定義ロジック – 例:リストから、外部APIから、またはトピックアイデアのための別のGeminiプロンプトから)。
- Gemini DeepResearchの呼び出し:
- 日次トピック、調査指示、記事構造、HTML形式、UIスタイリングのヒント、チャートデータ要件(Part 1で定義)を含むプロンプトを構築します。
- Gemini APIを呼び出します。
response_mime_type: "application/json"
と定義済みのresponse_schema
を指定します。
- Geminiレスポンスの処理:
- JSONレスポンスを解析します。
- 記事タイトル、HTMLコンテンツセクション、チャートデータを抽出します。
- チャートデータが別になっている場合、HTMLに埋め込みます(例:
<canvas>
要素のdata-*
属性として、または投稿メタ用に準備)。
- WordPress投稿データの準備:
- WordPress REST API用のペイロードを組み立てます:
title
、content
(最終的なHTML)、status
(例:「publish」または「draft」)、meta
(チャートデータや他の構造化情報を別途保存する場合 35)。
- WordPress REST API用のペイロードを組み立てます:
- REST API経由でWordPressに公開:
- エンドポイント:
YOUR_SITE_URL/wp-json/wp/v2/posts
40。 - 認証: WordPressユーザー名とアプリケーションパスワードによるBasic認証 10 (Python
requests
)11 (axios
)。 - HTTPメソッド:
POST
。 - ヘッダー:
Content-Type: application/json
、Authorization: Basic <base64_encoded_credentials>
。 - ボディ: 前のステップで準備したJSONペイロード。
- エンドポイント:
- APIレスポンスとエラーの処理: 成功または失敗をログに記録します。必要に応じて再試行を実装します。
- チャートデータのための投稿メタ構造化: 複雑なチャートデータをHTMLの
data-*
属性に直接格納すると、扱いにくくなったり属性長の制限に達したりする可能性があります。よりクリーンなアプローチは、チャートのJSON設定(または生データ)をWordPressのカスタムメタフィールドに保存することです 36。Lambda関数はREST API呼び出しでこのmeta
フィールドを移入します。テーマのJavaScriptは、スクリプトがサーバーサイドでエンキューされていれば、wp_localize_script
を介してこのデータにアクセスできます 27。この方法では、チャートデータは投稿の主要コンテンツから分離され、構造化された方法で管理されます。
表2.1: AWS Lambda – WordPress自動化のための設定例
設定項目 | 内容 |
ランタイム | Python 3.x または Node.js 18.x 以降 |
ハンドラ | (Python) lambda_function.lambda_handler <br> (Node.js) index.handler |
メモリ | 256MB – 512MB (処理内容に応じて調整) |
タイムアウト | 1分 – 5分 (API呼び出しのレイテンシを考慮) |
環境変数 | SECRETS_MANAGER_SECRET_NAME (例: WordPressAutomation/Credentials ) <br> WORDPRESS_API_URL (例: https://example.com/wp-json/wp/v2/posts ) <br> GEMINI_API_ENDPOINT (Gemini APIのエンドポイント) |
IAMロール権限 | AWSSecretsManagerReadOnlyAccess (またはより限定的なポリシー) <br> AWSLambdaBasicExecutionRole (CloudWatch Logsへの書き込み) <br> (WordPressがVPC内にある場合) AWSLambdaVPCAccessExecutionRole |
2.2. Amazon EventBridgeによる日次実行のスケジューリング
Amazon EventBridgeを使用して、作成したLambda関数を毎日自動的にトリガーします。
- 目的: Lambda関数を毎日定時に自動実行する。
- スケジュールルールの作成手順:
- Amazon EventBridgeコンソールを開きます 43。
- 新しいルールを作成します。
- スケジュールを定義します:cron式(例:毎日午前10時UTCなら
cron(0 10 * *? *)
)またはレート式(例:rate(1 day)
)を使用します 43。 - ターゲットを選択します:ステップ2.1で作成したAWS Lambda関数を選択します。
- 入力の設定(オプション):必要に応じてLambdaに静的なJSON入力を渡すことができますが、Lambda内で動的にトピックを生成する方が柔軟です。
- EventBridgeがLambda関数を呼び出す権限を付与します 43。
- スケジュールタスクにおける冪等性とエラー処理: 日次スケジュールタスクは、再試行や誤った複数回のトリガーの可能性がある場合、冪等(同じ入力で複数回実行しても同じ結果となり、副作用がない)に設計されるべきです。また、Lambdaは日次実行の問題を診断するために、堅牢なエラー処理とロギング(例:CloudWatch Logsへ)を備えている必要があります。例えば、その日/トピックの投稿が既に存在するかどうかを確認してから新しい投稿を作成するか、既存の下書きを更新するメカニズムを持つことで、操作の冪等性を確保できます。CloudWatchへのロギングは、日次実行の監視に不可欠です 43。
Part 3: 高度なテクニック、WordPress統合、およびベストプラクティス
このセクションでは、より高度なプロンプトエンジニアリング、WordPress内でのHTML、CSS、JavaScriptの管理方法、およびシステム全体の堅牢性を高めるためのベストプラクティスについて説明します。
3.1. UIとコンテンツニュアンスのための高度なプロンプトエンジニアリング
- マルチターン会話/プロンプト連鎖: 非常に複雑な記事やUIの場合、生成を段階的に行います。最初にアウトラインをプロンプトし、次に各セクション、そしてUIの詳細をプロンプトします 19。
- 否定的制約の提供: 「レイアウトにテーブルを使用しないでください。過度に明るい色は避けてください。」
- 特定のUIパターンの要求: 「全幅の背景画像と中央揃えのテキストオーバーレイを持つヒーローセクションを生成してください。」
- インタラクティビティの処理(概念的): Geminiは完全なJSイベントハンドラを記述しませんが、JSのインタラクティビティを容易にするHTML属性や構造(特定のIDを持つボタン、表示を切り替えるためのデータ属性など)を含めるよう促すことができます。
- 複雑なワークフローのためのVertex AI Pipelines(高度): コンテンツ生成前にMLタスクのより洗練されたオーケストレーションが必要なユーザー向けに、Vertex AI Pipelines 45 はHTMLアーティファクトを出力できます。これは「日次記事公開」の範囲を超える可能性がありますが、もし「調査」部分自体が複雑なMLパイプラインになる場合は高度なオプションとして言及する価値があります。Vertex AI Pipelinesは、このHTMLアーティファクトをWordPress公開Lambdaへの入力とすることができます。これは、調査フェーズが精巧な場合に、より複雑な代替アーキテクチャを示唆します。
3.2. WordPress投稿におけるHTML、CSS、JavaScriptの管理
WordPress投稿内でHTML、CSS、JavaScriptを安全かつ効果的に管理することは、サイトのセキュリティと保守性にとって非常に重要です。
- セキュリティ:
wp_kses
とスクリプト処理:- WordPressは、投稿コンテンツ内のHTMLをセキュリティのために
wp_kses_post()
(内部でwp_kses()
を'post'
コンテキストで使用)を用いてフィルタリングします 47。 - デフォルトでは、投稿コンテンツ内の
<script>
タグは許可されていません 47。 - AIが生成したコンテンツに対してこれらを許可する(例えば、
functions.php
でフィルタを介してwp_kses_allowed_html
を変更するなど 48)ことは、重大なセキュリティリスクを伴います。Geminiが誤って悪意のある、または脆弱なJavaScriptを生成する可能性があります。 - 推奨: AIが生成した
<script>
タグの直接埋め込みは避けてください。
- WordPressは、投稿コンテンツ内のHTMLをセキュリティのために
- Chart.jsとのより安全なJavaScript統合:
- スクリプトのエンキュー: WordPressで推奨される方法は、Chart.jsライブラリとカスタム初期化スクリプトを
functions.php
経由でwp_enqueue_script()
を使用してエンキューすることです 27。- Chart.jsをCDNまたはローカルコピーからロードします。
- チャートキャンバスを見つけて初期化するカスタムJSファイルをエンキューします。
- エンキューされたスクリプトへのデータ受け渡し:
wp_localize_script()
を使用して、PHPからエンキューされたJavaScriptファイルにデータ(例:投稿メタから取得したチャート設定やデータ)を渡します 27。Lambdaはこのデータを投稿メタに保存します。- データが十分に単純であれば、代わりに
<canvas>
要素のdata-*
属性からデータを読み取ります 25。このdata-*
属性アプローチは、wp_localize_script
による完全なテーマ統合が初期段階で複雑すぎる場合に良い中間策となります。Geminiはチャートデータ用のJSONを含むdata-*
属性を持つ<canvas>
タグを生成できます。単一のシンプルなJavaScriptファイル(絶対に必要で厳重にサニタイズされていれば生成されたHTMLに含めることも可能、またはエンキューすることが望ましい)がこれらの属性を解析してチャートをレンダリングできます。これにより、Geminiによる直接的なJS生成を最小限に抑えつつ、動的なチャートを可能にします。
- スクリプトのエンキュー: WordPressで推奨される方法は、Chart.jsライブラリとカスタム初期化スクリプトを
- CSSスタイリング:
- 主にアクティブなWordPressテーマのスタイルシートに依存します。
- Geminiには、テーマによってスタイリング可能なセマンティックHTMLと汎用的なCSSクラス(例:
.article-chart-container
、.highlighted-text
)を使用するよう促します。 - Geminiからの過度なインラインスタイルは避けてください。
表3.2: WordPress REST API – 主要な POST /wp/v2/posts
引数
引数 | データ型 | 説明 | 例 |
title | string | 投稿のタイトル。 | "最新技術トレンド分析" |
content | string | 投稿のHTMLコンテンツ。 | <p>この記事では...</p><canvas id="chart1"></canvas> |
status | string | 投稿のステータス (publish , future , draft , pending , private )。 | "publish" |
excerpt | string | 投稿の抜粋。 | "主要な発見についての簡単な要約..." |
author | integer | 投稿者のユーザーID。 | 1 |
categories | array | カテゴリーIDの配列。 | “ |
tags | array | タグIDの配列。 | “ |
meta | object | カスタムメタフィールドのキーと値のペア。 | {"chart_data_json": "{\"type\":\"bar\",...}"} |
3.3. WordPress投稿メタを介したチャートデータの保存とアクセス
複雑なチャートデータを投稿のメインコンテンツ(HTML)から分離し、構造化された方法で管理するために、WordPressの投稿メタを利用します。
- チャートデータに投稿メタを使用する理由:
- 複雑なデータをメインの
post_content
HTMLから分離します。 - チャート設定(タイプ、データ、オプション)の構造化された保存を可能にします。
- プログラムによる管理と更新が容易になります。
- 複雑なデータをメインの
- REST APIアクセスのためのメタフィールド登録:
functions.php
でregister_meta()
を使用し、'show_in_rest' => true
を指定します 36。- 例:
register_meta('post', 'chart_config_json', array('type' => 'string', 'single' => true, 'show_in_rest' => true));
- Lambda: メタフィールドの移入:
- Lambda関数で、WordPress REST APIを呼び出して投稿を作成する際に、JSONペイロードに
meta
オブジェクトを含めます 35。 - ペイロード例:
"meta": { "chart_config_json": "{\"type\":\"bar\",\"data\":{...}}" }
- Lambda関数で、WordPress REST APIを呼び出して投稿を作成する際に、JSONペイロードに
- テーマ: Chart.jsのためのメタデータアクセス:
functions.php
でチャート初期化スクリプトをエンキューする際に、get_post_meta()
を使用して現在の投稿のchart_config_json
を取得します。wp_localize_script()
を使用して、このJSON文字列(または解析済みオブジェクト)をJavaScriptファイルに渡します 27。- JavaScriptはこのデータを解析し、Chart.jsを初期化します。
- チャート用メタフィールドの単一対複数: すべてのチャート関連情報(タイプ、データ、オプション)を単一のメタフィールド(例:
chart_config_json
)にJSON文字列として保存するか、複数のメタフィールド(例:chart_type
、chart_labels_json
、chart_datasets_json
)を使用できます。単一のJSON文字列は、Lambdaが構築しやすく、Chart.jsが直接消費するのにしばしばより単純です。
3.4. エラー処理、ロギング、モニタリング
- Lambda: API呼び出し(Gemini、WordPress)、シークレット取得に対して包括的なtry-catchブロックを実装します。詳細なエラーメッセージと関連データをCloudWatch Logsに記録します 43。
- EventBridge: EventBridgeコンソールまたはCloudWatch経由で、ルール呼び出しと失敗を監視します。
- WordPress: APIエラーレスポンス(認証失敗、無効なデータなど)を確認します。
- Lambdaエラーや高い呼び出し回数に対してCloudWatchアラームを設定することを検討します。
3.5. システムの保守と更新
- Lambdaの依存関係(Python/Node.jsパッケージ)を定期的に確認し、更新します。
- Gemini APIの変更とモデルの更新を監視します。
- WordPressおよび関連プラグインを最新の状態に保ちます。
- セキュリティポリシーが要求する場合、アプリケーションパスワードを定期的に確認し、ローテーションします。
- Lambdaコードと設定をバックアップします。
Part 4: Gemini DeepResearchのためのプロンプト例
このセクションでは、Gemini DeepResearchに対して、調査、記事作成、HTML生成、およびチャートデータ生成を一度に行わせるための具体的なプロンプト例を示します。
4.1. 調査、記事、HTML、チャートデータ(JSON出力)のためのプロンプト
以下の要素を組み合わせた詳細なプロンプト例です。
- 特定トピックの調査。
- 導入部、複数のセクション、結論からなる記事の生成。
- 事前定義されたスキーマ(参照または記述)に従ったJSONとしての出力構造化。
- コンテンツフィールド内のフォーマットのための基本的なHTMLタグの包含。
- スタイリングのためのCSSクラス名の指定(WordPressテーマによって処理される)。
- セクションに関連する特定のチャートタイプ(例:棒グラフ)のデータ生成(ラベルとデータセットを含む)。
- モダンUIのヒントの要求(例:「レイアウトはクリーンで良好な読書体験を提供することを確認してください。チャート用に3つの補色からなるカラーパレットを提案してください。」)。
プロンプト例(概念):
JSON
{
"contents":,\n \"datasets\": [\n {\n \"label\": \"string\",\n \"data\": [\"number\"]\n }\n ]\n } | null\n }\n ],\n \"conclusion\": \"string (HTML形式)\"\n}\n\nHTMLコンテンツでは、セクション見出しに<h2>、段落に<p>を使用してください。\n太陽エネルギー成長に関するセクションでは、2015年から2024年までの年間設置量(GW単位)を示す棒グラフのデータを提供してください。\nそれぞれの要素にCSSクラス'article-title'、'intro-paragraph'、'section-heading'、'section-content'、'chart-container-div'を使用してください。\n全体のトーンは、テクノロジーブログに適した、有益で魅力的なものにしてください。\nチャート用にモダンでプロフェッショナルなカラーパレット(3つの16進数コード)を提案してください。\nHTML構造が読みやすさとモダンな美観を促進することを確認してください。"
}
]
}
],
"generationConfig": {
"response_mime_type": "application/json",
"response_schema": {
"type": "object",
"properties": {
"title": {"type": "string"},
"introduction": {"type": "string"},
"sections": {
"type": "array",
"items": {
"type": "object",
"properties": {
"heading": {"type": "string"},
"content": {"type": "string"},
"chart_data": {
"type": ["object", "null"],
"properties": {
"type": {"type": "string", "enum": ["bar", "line", "pie"]},
"title": {"type": "string"},
"labels": {"type": "array", "items": {"type": "string"}},
"datasets": {
"type": "array",
"items": {
"type": "object",
"properties": {
"label": {"type": "string"},
"data": {"type": "array", "items": {"type": "number"}}
},
"required": ["label", "data"]
}
}
},
"required": ["type", "title", "labels", "datasets"]
}
},
"required": ["heading", "content"]
}
},
"conclusion": {"type": "string"}
},
"required": ["title", "introduction", "sections", "conclusion"]
}
}
}
- プロンプト開発の反復性の重要性: このような複雑な出力に対する最初のプロンプトが完璧である可能性は低いです。ユーザーは、Geminiでプロンプトを反復的にテストし、出力を分析し、望ましいHTMLとデータ構造が一貫して達成されるまで、指示、スキーマ、および例を改良する必要があります 19。
Part 5: 結論: 自動化された視覚的にリッチなコンテンツ配信の実現
本ガイドで概説したステップに従うことで、Gemini DeepResearchとAWSサービスを組み合わせ、データに基づいた視覚化を含む記事をWordPressサイトへ毎日自動的に配信する強力なシステムを構築できます。
完全な自動化ワークフローの要約:
日次トピック選定 → Gemini(調査 + コンテンツ/データ/HTML生成)→ AWS Lambda(処理 + WordPress REST API呼び出し)→ 視覚化付きWordPress投稿。
利点:
- 時間節約: 手作業による記事作成と公開の時間を大幅に削減します。
- 一貫したコンテンツ配信: 毎日新しいコンテンツを確実に提供します。
- ユーザーエンゲージメントの向上: データ視覚化により、読者にとって魅力的で理解しやすいコンテンツを提供します。
潜在的な将来の機能強化:
- より洗練されたトピック生成メカニズムの実装。
- コンテンツバリエーションのA/Bテスト。
- 記事や視覚化に対するユーザーインタラクションの追跡と分析。
この自動化ソリューションは、コンテンツ戦略を強化し、ウェブサイトの価値を高めるための堅牢な基盤を提供します。適切な計画と実装により、高品質な情報を効率的に発信し続けることが可能になります。
コメント
Hi, this is a comment.
To get started with moderating, editing, and deleting comments, please visit the Comments screen in the dashboard.
Commenter avatars come from Gravatar.