PR

ブログに飽きさせない仕掛け！スプレッドシートとGASで訪問者ごとに変わる（ランダム）メッセージを表示

Google Workspace
2025.06.03
う～む...

ウェブサイトに訪れるたびにセリフが変わる吹き出しがあったら楽しいと思いませんか？

GoogleスプレッドシートとGoogle Apps Script (GAS) を使えば、これが簡単に実現できます。

この方法では、スプレッドシートに用意した語句の中から、アクセスするたびにランダムな語句をウェブサイトに表示させます。

スポンサーリンク

実現するための3つの要素

この仕組みは、以下の3つの要素で構成されます。

  1. Googleスプレッドシート: WordPressに表示させたい語句のリストを格納します。
  2. Google Appsスクリプト (GAS): スプレッドシートとWordPressの間をつなぐ「橋渡し役」です。WordPressからのリクエストに応じて、スプレッドシートからランダムに語句を選び、WordPressに渡します。
  3. WordPressのスクリプト: GASから受け取った語句をWordPressの記事内の任意の場所に表示します。

1️⃣ Googleスプレッドシートの準備

まず、WordPressに表示させたい語句を管理するためのGoogleスプレッドシートを用意します。

このシートに、以下のようにデータを入力してください。

  • A列: 1から始まる連番を入力します。
    これは、後でスクリプトがどの語句を選ぶかのインデックスとして使われます。
  • B列: WordPressで表示させたい語句のリストを書き込みます。

このリストより、GASがA列の数字を使ってランダムに1つの行を選び、その行のB列にある語句を取り出してWordPressに表示できるようになります。

2️⃣ Google Appsスクリプト(GAS) の準備

次に、WordPressとスプレッドシートをつなぐGASを設定します。

  1. 語句を管理するスプレッドシートのメニューから「拡張機能」→「Apps Script」を選択し、エディタを開きます。

次のGASをコピーしてエディタに貼り付けます。

function doGet() {
  const quoteSheet = SpreadsheetApp.getActiveSpreadsheet().getSheets()[0];
  const headerRow = 1; // もし1行目が見出しなら1、見出しがなければ0
  const lastRow = quoteSheet.getLastRow();
  // 範囲内の全データを取得 (A列=1, B列=2)
  const quates = quoteSheet.getRange(headerRow + 1, 1, lastRow - headerRow, 2).getValues(); 
  // ランダムに選んだ行のB列（インデックス1）を取得
  const quote = quates[Math.floor(Math.random() * quates.length)][1]; 
  // JSON形式でquote（ランダムに選んだ語句）を返す
  return ContentService.createTextOutput(JSON.stringify({ value: quote }))
    .setMimeType(ContentService.MimeType.JSON);
}

　　↓　　↓　　コピペ　　↓　　↓

GASのデプロイ

登録したGASをウェブアプリとしてデプロイし、WordPressからアクセスできるようにします。

  1. GASエディタの右上にある「デプロイ」ボタンをクリックし、「新しいデプロイ」を選択します。
  1. 以下の設定を行います。
    • 説明：「語句取得Webアプリ」など、分かりやすい説明を入力します。（省略可）
    • 次のユーザーとして実行：「自分（オーナーのGoogleアカウント名）」を選択します。
    • アクセスできるユーザー：「全員」を選択します。
    • 「デプロイ」ボタンをクリックします。
  1. 初回デプロイ時、Googleからアクセス承認を求められます。Googleアカウントを選択して権限を許可してください。

※承認を求められたら、「Advanced」、あるいは「詳細」→「Go to ～(Unsafe)」、あるいは「～に移動」→「Allow」、あるいは「許可」

  1. デプロイが成功すると、「ウェブアプリのURL」が発行されます。このURLをコピーして控えておきます。
    このURLは後でWordPress側のスクリプトで使います。

3️⃣ WordPressの準備

最後に、WordPressにGASから語句を受け取って表示するスクリプトを設定します。

  1. WordPressの記事の編集画面を開きます。
  2. 任意の箇所に「カスタムHTML」ブロックを追加します。
  3. 以下のスクリプトを「カスタムHTML」に貼り付けます。
  4. gasWebAppUrlの値をデプロイで発行された「ウェブアプリのURL」に置き換えます。
<div id="ss-data">う～む...</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
  // ★ここに↓、デプロイで発行された「ウェブアプリのURL」を貼り付けてください★
  const gasWebAppUrl = 'コピーしたウェブアプリのURL'; 
  
  fetch(gasWebAppUrl)
    .then(res => res.json())
    .then(data => {
      const container = document.getElementById('ss-data');
      container.textContent = data.value;
    })
    .catch(error => {
      console.error('データ取得エラー:', error);
    });
});
</script>

完成

以上で設定が終わりました。

私は、カスタムHTMLブロックを吹き出しに設置してみました。

カスタムHTMLのプレビューでも確認できます。

おわりに

個人的に、これまでもスプレッドシートからWordPressへのデータ連携はずっと以前から活用していました。

以前は、他のサイトから情報をスクレイピングして自分の記事に転記するといった非公開の用途で利用していました。たとえば、株価や天気予報といったリアルタイムの情報を集約するといった形です。しかし、今日ではそうした情報の取得・表示に関しては、より手軽で詳細なツールやAPIが豊富に存在するため、個人的なスクレイピング技術の必要性は薄れています。

しかし今回ご紹介した、スプレッドシートとGASを連携させて動的なコンテンツを表示する手法は、単なる情報収集とは異なり、ブログに遊び心を加えるアイデアとして面白いと思い、公開してみました。

また、今回のような方法は、スプレッドシートから少量のデータを取得する場合に有効だと感じています。

一般的に、スプレッドシートのデータを転写するにはiframeを使う方法がよく使われていますが、データ量が少ない場合でも処理が重く感じられることがあります。また、iframeでは表のデザインに柔軟性がなく、カスタマイズの自由度がありません。

一方で、HTMLの知識があれば、今回のような方法でスプレッドシートからデータを取得し、<table>タグを使って自分で表を生成することが可能です。

少ないデータを軽量かつ自由に表示したい場合には、こちらの方法のほうが適しているのではないでしょうか。（実際に計測していないので不確実ですが…）

ところで、毎回アクセスする度に、違った言葉を表示するとしたら、何がいいのでしょうか？

私は今回「名言集」を使いましたが、「ダジャレ」「百人一首」「豆知識」「つまらないつぶやき」など、テーマを工夫すればいろいろな応用ができますよね。

コメント

タイトルとURLをコピーしました