Lesson 01

ツールの導入と基本設定

講座の最初のステップへようこそ。このページでは、「ハイブリッド記事＆LP作成ツール」をあなたのPCで動かすための全ての準備を整えます。ツールのダウンロードから、開発環境の構築、そしてGemini Canvasとの連携を可能にするための設定まで、順番に進めていきましょう。

1. Git/GitHubによるツールの導入

本講座では、プロの開発現場で標準的に使われているバージョン管理システム「Git」と、そのプラットフォームである「GitHub」を利用してツールを導入します。これにより、今後のアップデートがコマンド一つで安全かつ簡単に行えるようになります。

Step 1: GitHubチームへの参加

まず、あなたのGitHubアカウントを開発チームに招待します。以下の手順で進めてください。

  1. まだお持ちでない場合は、GitHub公式サイトからアカウントを作成してください。
  2. OKIHIROのプライベートチャットにて、あなたのGitHubアカウント名を講師までご連絡ください。開発チームへの招待をお送りします。

また、ツールのアップデート情報は以下の専用Chatworkグループでアナウンスされますので、こちらも必ずご参加ください。

  1. GitHubから届く招待メールを開き、「View invitation」ボタンをクリックして招待を承認してください。これでリポジトリへのアクセスが可能になります。

Step 2: アクセス認証の準備 (初回のみ)

プライベートリポジトリの操作には認証が必要です。今後のパスワード入力を不要にするため、PCとGitHubアカウントを安全に連携させる「SSHキー」の設定を行います。

SSHキーの基本的な設定手順
  1. キーを生成する: PCのターミナル（WindowsならGit BashやPowerShell）で以下のコマンドを実行します。メールアドレスはご自身のGitHub登録メールアドレスに置き換えてください。「Enter a file...」と聞かれたら、何も入力せずEnterキーを押します。「Enter passphrase...」と「Enter same passphrase again...」と続けて聞かれますが、どちらも何も入力せずEnterキーを押してください。これでパスワードなしのキーが作成されます。
    ssh-keygen -t ed25519 -C "your_email@example.com"
  2. 公開キーをコピーする: 生成された公開キー（通常は ~/.ssh/id_ed25519.pub）の中身を全てコピーします。
  3. GitHubに登録する: GitHubのSSHキー設定ページを開き、「New SSH key」ボタンからコピーしたキーを貼り付けて保存します。

より詳しい手順やトラブルシューティングはGitHub公式ドキュメントをご確認ください。

Step 3: ツールのダウンロード (Clone)

コマンドプロンプト（またはターミナル）でツールを保存したい場所（例: デスクトップ）に移動し、以下のコマンドを実行してツール一式をPCにダウンロードします。

git clone git@github.com:okihiro-ai-creative/Hybrid-Article-Generator.git

2. 開発環境のインストール

次に、ツールを動かしたり、ファイルを編集したりするための基本的なソフトウェアをPCにインストールします。

2-1. Google Chrome ブラウザ

この講座で導入する連携機能は、Google Chromeブラウザ（またはMicrosoft Edge）を基準に設計されています。

公式サイトからインストール →

2-2. Visual Studio Code (VSC)（推奨）

この講座で扱うファイル（HTML, CSS, Markdownなど）を快適に編集するための、プロフェッショナルなテキストエディタです。

公式サイトからインストール →

2-3. Pythonのインストール（最重要）

【最重要：Pythonのバージョンについて】
このツールは、Python 3.11 または 3.10 での動作が保証されています。

Python 3.12以降の新しいバージョンでは、互換性の問題でツールが正常に動作しないため、必ず3.11以下のバージョンをインストールしてください。

▼ Windows ユーザー

既存の新しいバージョンはアンインストールしてください。
以下のリンクから Python 3.11.x をダウンロードし、「Add python.exe to PATH」にチェックを入れてインストールします。

Python 3.11.9 公式ダウンロードページ

▼ macOS ユーザー

ターミナルで以下のコマンドを実行するのが最も簡単です。
brew install python@3.11

2-4. Node.jsのインストール

▼ Windows ユーザー

ダウンロードページから「LTS（推奨版）」の「Windows インストーラー (.msi)」をインストールします。

▼ macOS ユーザー

ターミナルで以下のコマンドを実行します。
brew install node

3. ツールのセットアップと連携機能の有効化

3-1. 基本セットアップ

まず、ツール本体に必要なライブラリをインストールします。

  • Windows: ツールフォルダ内の「_setup.bat」をダブルクリックして実行します。
  • macOS: ターミナルで chmod +x *.sh cli/*.sh を実行後、./_setup.sh を実行します。

3-2. ヘッドレスブラウザのセットアップ（重要）

ツールが design.css を自動生成するために必要な、専用のブラウザをインストールします。初回の一度だけ実行してください。

コマンドプロンプト（またはターミナル）でツールフォルダに移動し、以下のコマンドを実行します。

▼ Windows:

system\.\venv\Scripts\playwright.exe install

▼ macOS:

system/.venv/bin/playwright install

3-3. Chrome拡張機能のインストール

Gemini Canvasで作成したデザインをワンクリックでツールに転送するための拡張機能です。

  1. Chromeのアドレスバーに chrome://extensions と入力して開きます。
  2. 右上の「デベロッパーモード」をオンにします。
  3. 「パッケージ化されていない拡張機能を読み込む」をクリックします。
  4. ツールフォルダ内の extensionフォルダ を選択します。
  5. 「Hybrid Article Tool Connector」が追加されれば完了です。

3-4. APIキーとGoogle Cloudの設定

ツールが高度な機能を利用するための設定です。

1. Google Cloudプロジェクトの準備
  • Google Cloud コンソールでプロジェクトを作成します。
  • 以下のAPIを「有効」にします: Vertex AI API, PageSpeed Insights API, Google Search Console API
  • 【最重要】左メニューの「課金」から、請求先アカウントを作成し、プロジェクトにリンク（紐づけ）してください。
2. ファイルへの設定

以下の情報を取得し、ツールフォルダ内の指定ファイルに書き込んでください。

設定項目 編集ファイル (system/内)
プロジェクトID secrets.ini
Gemini APIキー api_keys_gemini.txt
PageSpeed Insights APIキー api_key_psi.txt

※その他、SerpApiキーやGSC設定も必要に応じて行ってください。

4. ツールのアップデート方法

Gitを導入したおかげで、アップデートは非常に簡単です。

推奨手順 (git pull)

  1. コマンドプロンプトでツールフォルダに移動します。
  2. 以下のコマンドを実行します。
    git pull

これだけで最新版に更新されます。設定ファイルはそのまま保持されます。

5. 料金について（重要）

本ツールのAPI利用料金は、Google Cloudでお支払い情報を有効にする必要がありますが、非常に低価格な体系になっています。

  • 料金が発生する唯一の機能：GUIの「メイン実行」タブ内にある【6H】画像生成 (High) のみです。料金は画像を1枚生成するごとに約3円です。
  • ほぼ無料の機能：記事のHTML生成、SEO情報生成、画像分析、そして【6F】画像生成 (Fast)など、【6H】以外の全ての機能は、現在の料金体系では無料または無視できるほど低料金の範囲で利用できます。

意図せず高品質画像生成（【6H】）を実行しない限り、料金はほとんど発生しませんのでご安心ください。

お疲れ様でした！以上で全ての準備が完了です。次のレッスンでは、WordPressとの連携設定について詳しく解説します。