<p>Gemini CLIにPlaywrightを使ったリダイレクトチェッカーを生成させるために作成したGEMINI.mdの指示書記録です。</p><p>実装コードではなくGEMINI.mdにどんな指示を書き、どのような流れで完成させたかをまとめています。</p><h2 id="h31fc5cbc4a">事前準備</h2><ul><li><strong>GEMINI.md</strong>：実装に必要な指示をまとめる</li><li><strong>CSVデータ</strong>：リダイレクト元とリダイレクト先のURL一覧</li><li><strong>.env</strong>：リダイレクト元ドメインとリダイレクト先ドメインの設定</li><li><strong>要件整理</strong>：<ul><li>一度にテスト可能な実行ファイル</li><li>成功・失敗をログとして出力</li><li>ドメインが変わっても使い回し可能</li></ul></li></ul><h2 id="heb08db12e3">期待する成果物</h2><ul><li>一気にテストできる実行ファイル</li><li>成功・失敗のログ</li><li>ドメインが変わっても使いまわし可能</li></ul><h2 id="h7921b37509">試した流れ</h2><ol><li>Gemini CLIにGEMINI.mdを読み込ませ、実装を依頼</li><li>出来上がったコードをテスト実行</li><li>わざと失敗するデータを入れて再実行</li><li>失敗が検出されなかったため、失敗時の処理を追加指示</li><li>再テストし、失敗も正しく判定されることを確認</li><li>追加・変更した内容をGEMINI.mdに反映するよう指示</li><li>完成</li></ol>

# Basic rule
- デフォルトの言語を日本語とする。

# 301リダイレクトチェッカー

## 1. プロジェクト概要

このプロジェクトは、`list/redirect.csv` に定義されたURLリストに基づき、Webサイトの301リダイレクトが正しく設定されているかを自動で検証します。

Playwrightを利用して実際にブラウザで各URLにアクセスし、リダイレクト先が期待通りであるかを確認します。

## 2. 必要な設定

テストを実行する前に、以下の2つのファイルを設定する必要があります。

### a. `.env` ファイル (環境変数)

リダイレクト元とリダイレクト先のドメインを指定します。このファイルが存在しない場合、またはドメインが設定されていない場合は、テストは実行されません。

**例:**
```
SOURCE_DOMAIN=https://example.com
TARGET_DOMAIN=https://new-example.com
```

### b. `list/redirect.csv` ファイル (チェック対象リスト)

チェックしたいURLのパスをCSV形式で記述します。

- **1列目:** リダイレクト元のパス
- **2列目:** 期待されるリダイレクト先のパス

**例:**
```csv
/old-page-1,/new-page-1/
/old-page-2,/new-page-2/
```

## 3. 実行方法

プロジェクトのルートディレクトリで以下のコマンドを実行すると、リダイレクトチェックが開始されます。

```bash
node check-redirects.js
```

## 4. 処理の流れ

1.  `npm install` で `playwright` と `dotenv` パッケージをインストールします。(初回のみ)
2.  `.env` ファイルから `SOURCE_DOMAIN` と `TARGET_DOMAIN` を読み込みます。
3.  `list/redirect.csv` からリダイレクトのリストを1行ずつ読み取ります。
4.  各行について、以下の処理を順に実行します。
    - **リダイレクト元URL:** `${SOURCE_DOMAIN}` + `(CSVの1列目のパス)`
    - **期待されるリダイレクト先URL:** `${TARGET_DOMAIN}` + `(CSVの2列目のパス)`
5.  Playwrightを使い、ヘッドレスブラウザでリダイレクト元URLにアクセスします。
6.  実際に遷移した先のURLと、期待されるリダイレクト先URLを比較し、成否を判定します。

## 5. 結果の確認

実行結果は、コンソールに出力されると同時に `result.txt` ファイルに保存されます。

- **[成功]**: リダイレクトが期待通りに機能した場合。
- **[失敗]**: リダイレクト先が期待と異なった場合。
- **[エラー]**: URLへのアクセス中に問題が発生した場合。

### 停止条件

テスト中に **3件連続で** `[失敗]` または `[エラー]` が発生した場合、サーバー側の設定に問題がある可能性が高いと判断し、テストは自動的に中断されます。

<h2 id="ha214098e44">まとめ</h2><ul><li>GEMINI.mdに要件をまとめておくと、再生成や修正時に同じ指示を使い回せる</li><li>成功例だけでなく、失敗例を含めた検証が品質向上に役立つ</li><li>指示書と修正履歴を残しておくと、次回同様の実装をするときに時間短縮できる</li></ul>

GEMINI.md指示書 × Gemini CLI × Playwrightで作るリダイレクトチェッカー

<p>シャドウ<br>https://getcssscan.com/css-box-shadow-examples<br>アイコン<br>https://iconoir.com/<br><br>cssを外部ファイル化する<br>https://tonari-it.com/gas-html-css/#toc4<br>https://qiita.com/dadadaiiiiiii/items/beb33b838d0516cade05</p>

<p>Google スプレッドシートやドキュメントを開いているとき、今開いている資料がドライブのどのフォルダに入っているのか知りたいことがあります。</p><p>毎回移動アイコンをクリックして現在の場所を新しいタブで開くのは面倒です・・。特に、フォルダのURLが共有されておらず、資料のURLだけが共有された場合や、同じフォルダに新たな資料を追加したい場合には不便です。</p><p>そこで、今開いている資料のディレクトリを簡単に見えるようにするGoogle Apps Script (GAS)を作成しました。</p><p><span class="txt-small">※このページで紹介しているスクリプトは自己責任でお使い下さい。</span></p><p><span class="txt-small">※CSSや（一部）見た目のための処理は記載のコードに含まれていません。</span></p>

<h2 id="h11dda479b2">完成したGAS</h2>

<h3 id="ha6ef7803ed">コード.gsの解説</h3><ul><li><code>doGet(e)</code><strong> 関数</strong>:<ul><li>HTTP GET リクエストを処理し、<code>index.html</code> ファイルを表示します。</li></ul></li><li><code>getParentFolders(url)</code><strong> 関数</strong>:<ul><li>渡されたURLから、Google Drive上のファイルまたはフォルダの親フォルダを取得します。</li><li>渡されたURLからファイルまたはフォルダのIDを抽出し、そのIDを使用して対象のファイルまたはフォルダを特定します。</li><li>対象のファイルまたはフォルダの親フォルダを取得し、それらの情報を配列に格納します。</li><li>最終的に、親フォルダの情報、ファイルまたはフォルダの名前、およびそのタイプ（ファイルまたはフォルダ）を含むオブジェクトを返します。</li><li>例外が発生した場合、エラーメッセージを含むオブジェクトを返します。</li></ul></li></ul>

<!DOCTYPE html>
<html>

<head>
  <base target="_top">
  <style>
    /* スタイル */
  </style>
</head>

<body>
  <div class="wrapper">
    <div class="form">
      <input type="text" id="url" name="url">
      <button onclick="getParentFolders()">実行</button>
    </div>
    <div id="result"></div>
  </div>

  <script>
    const getParentFolders = () => {
      const url = document.getElementById('url').value;
      google.script.run.withSuccessHandler(result => {
        const resultDiv = document.getElementById('result');
        resultDiv.innerHTML = '';

        if (result.error) {
          resultDiv.innerHTML = `<p class="error">Error: ${result.error}</p>`;
        } else {
          // ファイル名を表示
          const nameParagraph = document.createElement('p');
          nameParagraph.textContent = result.name;
          resultDiv.appendChild(nameParagraph);

          // 親フォルダのリストを表示
          const list = document.createElement('ul');
          result.parents.forEach(folder => {
            const listItem = document.createElement('li');
            const folderLink = document.createElement('a');
            folderLink.href = folder.url;
            folderLink.target = '_blank';
            folderLink.textContent = folder.name;
            listItem.appendChild(folderLink);
            list.appendChild(listItem);
          });
          resultDiv.appendChild(list);
        }
      }).getParentFolders(url);
    }
  </script>

</body>

</html>

<h3 id="hdd96d86586">index.htmlの解説</h3><ul><li><strong>実行ボタンのクリック時の処理</strong>:<ul><li>ユーザーが実行ボタンをクリックすると、<code>getParentFolders()</code> 関数が呼び出されます。</li></ul></li><li><code>getParentFolders()</code><strong> 関数の処理</strong>:<ul><li>入力されたURLを取得します。</li><li>Google Apps Scriptの <code>getParentFolders()</code> 関数を呼び出します。これは、指定されたURLの親フォルダを取得するサーバー側の関数です。</li><li><code>withSuccessHandler()</code> メソッドを使用して、サーバーからのレスポンスを処理します。</li><li>レスポンスがエラーを含む場合は、エラーメッセージを表示します。</li><li>エラーがない場合は、次の処理を行います：<ul><li>取得したファイルの名前を表示します。</li><li>ファイルの親フォルダのリンクをリスト表示します。リンクは新しいタブで開きます。</li></ul></li></ul></li></ul>

<h2 id="h5342a01a7e">完成までの流れ</h2><h3 id="h84cc25af71">Google Apps Scriptファイルの作成</h3><ol><li>Google Apps Scriptにアクセス</li><li>新しいプロジェクトをクリック</li><li>コード.gsの画面が開く<ol><li>コード.gsに処理を書く</li></ol></li><li>ファイルを追加で「HTML」を選択<ol><li>名前をindexにする（別のファイル名でもOK）</li><li>URLを入力する&lt;input&gt;と実行する&lt;button&gt;を書く</li><li>実行結果を出力する処理を書く</li><li>CSSで見た目を調整</li></ol></li></ol>

<h3 id="hbcdff16b33">OAuthのScopeの設定</h3><p>作成したGASには、スコープによる承認が必要なメソッドが含まれています。ここではスコープを設定するためのマニュフェストの編集手順を記載します。</p><h4 id="hf909dc458f">スコープによる承認が必要なメソッド</h4><ul><li><a href="https://developers.google.com/apps-script/reference/drive/file?hl=ja#getname" target="_blank" rel="noopener noreferrer nofollow">getName()</a></li><li><a href="https://developers.google.com/apps-script/reference/drive/file?hl=ja#getparents" target="_blank" rel="noopener noreferrer nofollow">getParents()</a></li><li><a href="https://developers.google.com/apps-script/reference/drive/folder?hl=ja#getid" target="_blank" rel="noopener noreferrer nofollow">getId()</a></li><li><a href="https://developers.google.com/apps-script/reference/drive/folder?hl=ja#geturl" target="_blank" rel="noopener noreferrer nofollow">getUrl()</a></li><li><a href="https://developers.google.com/apps-script/reference/drive/drive-app?hl=ja#getfolderbyidid" target="_blank" rel="noopener noreferrer nofollow">getFolderById()</a></li></ul><blockquote><p>この方法を使用するスクリプトには、次の 1 つ以上のスコープによる承認が必要です。<br>https://www.googleapis.com/auth/drive.readonly<br>https://www.googleapis.com/auth/drive</p><p><span class="txt-small">引用元：</span><a href="https://developers.google.com/apps-script/reference/drive/file?hl=ja" target="_blank" rel="noopener noreferrer nofollow"><span class="txt-small">https://developers.google.com/apps-script/reference/drive/file?hl=ja</span></a></p></blockquote><p>「<a href="https://developers.google.com/drive/api/guides/api-specific-auth?hl=ja" target="_blank" rel="noopener noreferrer nofollow">Google Drive API のスコープを選択する</a>」ページにスコープの説明が記載されています。今回はドライブのディレクトリを辿りたいだけなので、<strong>drive.readonly</strong>のスコープを指定します。</p><table><tbody><tr><th colspan="1" rowspan="1"><p>スコープコード（省略）</p></th><th colspan="1" rowspan="1"><p>説明</p></th><th colspan="1" rowspan="1"><p>使用量</p></th></tr><tr><td colspan="1" rowspan="1"><p>drive.readonly</p></td><td colspan="1" rowspan="1"><p>ドライブのファイルを表示、ダウンロードする。</p></td><td colspan="1" rowspan="1"><p>制限付き</p></td></tr><tr><td colspan="1" rowspan="1"><p>drive</p></td><td colspan="1" rowspan="1"><p>ドライブのファイルの表示と管理を行います。</p></td><td colspan="1" rowspan="1"><p>制限付き</p></td></tr></tbody></table><ol><li>編集画面の左にあるプロジェクト設定（⚙アイコン）に移動</li><li>全般設定の「「appsscript.json」マニフェスト ファイルをエディタで表示する」を有効にする</li><li>エディタに移動<ol><li>appsscript.jsonに移動</li><li>oauthScopesを追記</li></ol></li></ol><pre><code>&quot;oauthScopes&quot;: [
  &quot;https://www.googleapis.com/auth/drive.readonly&quot;
]</code></pre><h4 id="hb40d397465">使用量：制限付きとは？</h4><blockquote><p>「使用量」列は、各スコープの機密性を示しています。定義は次のとおりです。</p><p><strong>制限付き</strong>: このスコープでは、Google ユーザーデータに幅広くアクセスできます。制限付きのスコープの検証プロセスを行う必要があります。この要件については、<a href="https://developers.google.com/terms/api-services-user-data-policy?hl=ja" target="_blank" rel="noopener noreferrer nofollow">Google API サービスのユーザーデータに関するポリシー</a>と<a href="https://developers.google.com/terms/api-services-user-data-policy?hl=ja#additional_requirements_for_specific_api_scopes" target="_blank" rel="noopener noreferrer nofollow">特定の API スコープの追加要件</a>をご覧ください。制限付きのスコープのデータをサーバーに保存（または送信）する場合は、セキュリティ評価を行う必要があります。: このスコープでは、Google ユーザーデータに幅広くアクセスできます。制限付きのスコープの検証プロセスを行う必要があります。この要件については、Google API サービスのユーザーデータに関するポリシーと特定の API スコープの追加要件をご覧ください。制限付きのスコープのデータをサーバーに保存（または送信）する場合は、セキュリティ評価を行う必要があります。</p><p><span class="txt-small">引用元：</span><a href="https://developers.google.com/drive/api/guides/api-specific-auth?hl=ja#drive-scopes" target="_blank" rel="noopener noreferrer nofollow"><span class="txt-small">https://developers.google.com/drive/api/guides/api-specific-auth?hl=ja#drive-scopes</span></a></p></blockquote><h4 id="hde6b25aa3e">drive.readonlyとdriveの認証画面はどう違う？</h4><p>初回実行時に、このアプリがあなたのGoogleアカウントのデータにアクセスすることを許可するかどうかを確認する認証・承認画面が表示されます。スコープの設定によって、リクエストされるアクセス権の内容が変わります。</p>

<p>左）drive.readonly・・・表示、ダウンロード<br>右）drive・・・表示、編集、作成、削除</p>

<h3 id="h9dcc071ccd">デプロイ</h3><ol><li>デプロイボタンをクリックして「新しいデプロイ」を選択<ol><li>種類の選択で「ウェブアプリ」を選択</li><li>説明（任意）、次のユーザーとして実行を「ウェブアプリケーションにアクセスしているユーザー」、アクセスできるユーザー「自分のみ」を設定する</li></ol></li><li>デプロイ</li><li>ウェブアプリのURLが発行される</li><li>URLにアクセスすると、作成したindex.htmlの内容が表示される</li></ol><p><span class="txt-small">※制限付きのスコープのため、アクセスできるユーザーは自分のみにしておくのが安心かと思います。不安な点がある場合は、ご自身で詳細を調べて設定してください。</span></p>

<h2 id="ha214098e44">まとめ</h2><p>今回Googleフォルダに関するGASを作成し、数多くのメソッドが用意されているということを知ることができました。</p><p>またスコープの設定について学んで、データへのアクセスと許可について考えさせられました。特に制限付きスコープを扱う際は、データの適切な使用や第三者への転送制限、広告目的でのデータ使用の禁止などに留意する必要があります。これらのポイントを考えると、作成者としてはデータの取り扱いに慎重さが求められることがわかります。</p><p>同時に、実行者としても、自身のデータにアクセスされる範囲を理解し、プライバシーを守るために注意が必要だと感じました。個人情報や機密データが含まれる場合には、特に慎重にならなければなりません。情報を守るために、正確な設定と適切なリクエスト許可が重要だと感じました。</p><p>アイコンは、<a href="https://iconoir.com/" target="_blank" rel="noopener noreferrer nofollow">Iconoir | Free Icons</a>のSVGを利用しました。</p>

効率アップ！GASで Google ドライブ 内の資料ディレクトリを見える化

<p>サーチコンソールから何度も来ている「ページがインデックスに登録されない新しい要因」にようやく・・向き合うことにしました。</p><p>今回対処したのは、「見つかりませんでした（404）」のリストに上がっているURLを対象に原因を探ってどのような対策を施したかをまとめました。<br>（対策は最適解が他にないか悩み中...）</p><h2 id="hc3277aa6ac">404が発生しているURLの確認</h2><p>サーチコンソールにログインして、サイドバーのインデックス作成＞ページもしくは、ヘッダー右にある🔔アイコンのメッセージを開きインデックス登録レポートを開く。</p><p>「ページがインデックスに登録されなかった理由」の「見つかりませんでした（404）」を開くとエラーが出ているページのURL一覧が表示されます。</p><h2 id="h34207032da">リンク元を探す</h2><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/523b39f6d97647f6a65a445bfef52b87/Group%20169.png?w=800&amp;h=467" alt="" width="800" height="467"></figure><p>エラーが出ているURLの虫眼鏡アイコンをクリックすると、URLの検査がはじまり完了すると参照元ページURLを含めた検出情報が表示されます。</p><h2 id="h11072d5cdc">原因を探る</h2><p>page/2/public/images　こんなパス指定した記憶がない・・</p><p>参照元ページにアクセスし、ページのソースを表示し「public/images」で検索したところ__NEXT_DATA__内のjsonで該当しました・・！</p><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/e594ea55656a4c94b2d4f23f87624fc9/Group%20170.png?w=800&amp;h=180" alt="" width="800" height="180"></figure><p>microCMSで投稿した記事の本文に記載していたサンプルコード「.--/--」の部分が表示しているページから相対パスとしてサーチコンソールが認識してしまったため、リンク先がない＝404として検知されていました。</p><h2 id="h1bb0e3b2b8">類似の状況や問題の解決方法を探す</h2><p>ありました・が、これだ！といった解決法はまだないようです😥</p><ul><li><a href="https://github.com/vercel/next.js/issues/40143" target="_blank" rel="noopener noreferrer nofollow">&quot;Paths&quot; in __NEXT_DATA__ are picked up by Google Search Console as internal links</a></li><li><a href="https://github.com/vercel/next.js/discussions/39377" target="_blank" rel="noopener noreferrer nofollow">google crawling link in __NEXT_DATA__</a></li></ul><h2 id="h9c1840cf1f">できる対策を施す</h2><h3 id="hf79a46c28b">一覧ページで取得するフィールドを制限する</h3><p>microCMSからコンテンツを取得する際、<a href="https://document.microcms.io/content-api/get-list-contents#h7462d83de4" target="_blank" rel="noopener noreferrer nofollow">フィールドの制限</a>をしていなかったので本文として定義しているフィールドを除いて必要なフィールドだけを取得するよう変更しました。</p><h3 id="h5074f40754">相対パスとして認識されないように本文に任意の文字を挿入する</h3><p>.と--/--の間、--/--の後ろにハイフンを2つ挿入し、出力時に置き換えています。</p><pre><code>sec.body.replace(/ハイフンハイフン/g, &quot;&quot;)</code></pre><p>※置き換えを施しているため、ハイフンと記載しています</p><p>これでjsonには、.ハイフンハイフン/ハイフンハイフンとなり、サイト表示では.--/--と表示されるようになりました。</p><h2 id="h4bef799bf1">サーチコンソールに修正報告</h2><p>「修正を検証」をクリックすると検証：開始に切り替わりました。</p><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/4aca5a4631dd41cbb292a92b34a97fa8/Group%20171.png" alt="" width="818" height="329"></figure><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/ced261566a394451a8c6ae9d51ecc8a8/image%2045.png" alt="" width="815" height="98"></figure><h2 id="haac29bf251">経過観察中...👀</h2><p>2024/8/29 効果が見られないので置換処理をやめました</p>