GoogleSpreadSheetでWebサイトのチェックをできるようにしてとお願いしました【ChatGPT】

ChatGPTにGoogleSpreadSheetでWebサイトのチェックをできるようにしてとお願いしました 生成AI

ChatGPT-4を使ってGoogle SpreadSheetとGoogle Apps Script (GAS)を利用して、Webページのチェックを行う業務改善を実現できます。以下に解説とGASのサンプルコードを提供します。

解説

Google Apps Script (GAS)は、Google SpreadSheetと連携してWebページのチェックを行うためのプログラムを作成できます。サンプルコードでは、指定されたURLのTitleやMeta情報を取得して、Google SpreadSheetに出力する機能を提供します。

GASのサンプルコード

まず、新しいGoogle SpreadSheetを作成し、スクリプトエディタを開いてください。

  1. Google SpreadSheetを開く
  2. “拡張機能” メニューから “Apps Script” を選択

以下のコードをコピーし、コード.gsファイルに貼り付けてください。

function checkWebPages() {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  const urls = sheet.getRange("A2:A").getValues().filter(url => url[0]);

  const limit = 50;
  const startRow = parseInt(PropertiesService.getScriptProperties().getProperty("startRow") || "2");

  for (let i = startRow - 2; i < Math.min(urls.length, startRow - 2 + limit); i++) {
    const url = urls[i][0];
    const response = UrlFetchApp.fetch(url, { muteHttpExceptions: true });
    const contentText = response.getContentText() || '';  // Add an empty string as a fallback
    const parsedData = parseHtmlData(contentText);
    
    for (const [key, value] of Object.entries(parsedData)) {
      sheet.getRange(i + 2, getColumnIndex(key)).setValue(value);
    }
  }

  if (startRow - 2 + limit < urls.length) {
    PropertiesService.getScriptProperties().setProperty("startRow", startRow + limit);
    Utilities.sleep(5000);
    checkWebPages();
  } else {
    PropertiesService.getScriptProperties().deleteProperty("startRow");
  }
}

function getColumnIndex(columnName) {
  const columnNames = ['URL', 'Title', 'Keywords', 'Description', 'H1', 'Lang', 'Charset', 'Telephone', 'Viewport', 'og:title', 'og:description', 'og:type', 'og:url', 'og:image', 'og:site_name', 'fb:app_id', 'fb:pages', 'twitter:card', 'twitter:site', 'twitter:description', 'twitter:image'];
  return columnNames.indexOf(columnName) + 1;
}

function parseHtmlData(html) {
  const metadata = {};

  const titleMatch = html.match(/<title>(.*?)<\/title>/i);
  metadata['Title'] = titleMatch ? titleMatch[1] : '';

  const getMetaContent = (name) => {
    const regex = new RegExp(`<meta\\s+(?:name|property)="${name}"\\s+content="(.*?)"`, 'i');
    const match = html.match(regex);
    return match ? match[1] : '';
  };

  metadata['Keywords'] = getMetaContent('keywords');
  metadata['Description'] = getMetaContent('description');
  metadata['Charset'] = getMetaContent('charset');
  metadata['Telephone'] = getMetaContent('format-detection');
  metadata['Viewport'] = getMetaContent('viewport');

  const h1Match = html.match(/<h1[^>]*>(.*?)<\/h1>/i);
  metadata['H1'] = h1Match ? h1Match[1] : '';

  const langMatch = html.match(/<html[^>]+lang="([^"]+)"/i);
  metadata['Lang'] = langMatch ? langMatch[1] : '';

  const ogPrefix = 'og:';
  const fbPrefix = 'fb:';
  const twitterPrefix = 'twitter:';

  const metaTags = ['og:title', 'og:description', 'og:type', 'og:url', 'og:image', 'og:site_name',
                   'fb:app_id', 'fb:pages', 'twitter:card', 'twitter:site', 'twitter:description', 'twitter:image'];

  metaTags.forEach(tag => {
    metadata[tag] = getMetaContent(tag);
  });

  return metadata;
}

次に、スクリプトエディタの画面上部にあるディスクアイコンをクリックして、スクリプトを保存します。

Google SpreadSheetの設定

Google SpreadSheetの”Sheet1″に以下のヘッダーを追加してください。

  1. A列1行目に “URL” と入力
  2. A列2行目以降にチェックしたいURLを記述
  3. B列1行目から横列に以下を記入していく。
    タイトル キーワード ディスクリプション H1 lang属性 文字コード telephone viewport og:title og:description og:type og:url og:image og:site_name fb:app_id fb:pages twitter:card twitter:site twitter:description twitter:image

A列にチェックしたいWebページのURLを入力することでまとめてチェックをすることが可能です。

スクリプトの実行

  1. スクリプトエディタに戻り、画面上部にある再生ボタン(▶)をクリックして、checkWebPages関数を実行します。
  2. スクリプトが初めて実行される場合、認証画面が表示されるので、手順に従って認証を行ってください。

実行後、Google SpreadSheetの各URLに対応する情報が出力されます。これにより、簡単にまとめてWebページのチェックを行い、問題があるページを特定して修正することができます。

さらに、このスクリプトをカスタマイズして、他の要素をチェックしたり、定期的にチェックを行うようにスケジュール設定することも可能です。これにより、業務効率が向上し、より良いWebサイトの品質管理が実現できます。

ChatGPTやGoogle Apps Scriptの力を活用して、Google SpreadSheetを使った業務改善を実現できます。これにより、Webページのチェックが効率化され、品質管理が向上します。

まとめ

と、言うことでChatGPTに依頼すると解説付きでサンプルコードも含めて出力してくれます。今後はサンプルコードをベースに「こういう機能を追加して」などを伝えれば更に機能追加が可能になっていきます。

なお、このサンプルコードを使うことで数千ページの出力が可能とのことです。

           

お仕事・当サイトへ興味を持っていただいた方
お問い合わせはこちらから

ma-san(鈴木正行)
テクニカルディレクター / Webデザイナー

「ma-san」の中の人。東京都・千葉県・宮城県仙台市を中心に企業のWebデザイン/マーケティング/IT戦略のプランニングからWebサイト構築・運用をしています。
「Webサステナビリティ・Webアクセシビリティ」を中心に、「変わりゆくWebと共にサービス・サイトを改善していくこと」を重視します。
当サイトではお仕事のご相談からナレッジシェアを中心に活動していきます。

生成AI
スポンサーリンク
ma-sanをフォローする
ma-san blog
タイトルとURLをコピーしました