Googleスプレッドシート(GAS)とPHPでWebサイトのお知らせを更新する方法

GASとPHPでお知らせを更新

どのような企業のWebサイトでもお知らせ一覧が存在するがHTMLで作成されているページだとコーダー以外の非エンジニアが更新するのは手間がかかる。

しかし、Googleスプレッドシートに記載した内容をHTMLに反映できるようにすれば誰でも更新することが可能だ。

シートからお知らせを更新する方法

sheet.newからシートの新規作成画面を開く。

シートを開いたら以下のサンプルのようにid, date, category, title, urlを入力する。

編集しやすいよう行とidを追加するための「行追加」もGASで追加する。

function onOpen() {
  const ui = SpreadsheetApp.getUi()
  const menu = ui.createMenu('行追加')
  menu.addItem('実行', 'addRow')
  menu.addToUi()
}

function addRow() {
  var ss = SpreadsheetApp.getActiveSpreadsheet()
  var sheet = ss.getActiveSheet()
  sheet.insertRows(2)
  sheet.getRange('A3').copyTo(sheet.getRange('A2'))
  sheet.getRange('A2').setValue(sheet.getRange('A2').getValue() + 1)
}

Googleスプレッドシートの内容をPHPで表示させるサンプル

シートを作成したらファイル => ウェブに公開を選択してCSVで埋め込んでPHPで読み込めるようにする。

次にPHPファイル(scriptタグ)内に以下のコードを記載してCSVを扱いやすいJSON形式に変換してJavaScriptのconstで定義する。

$file_csv = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vRtoxh9wekGj1-PFIxE9ztpLlyI_hVsoHbT32oPpHOoE-3KiX7v4pSnbxusPTgyuzv8rUZR2fF3Fysd/pub?output=csv';
$file_handle = fopen($file_csv, "r");
$result = array();

if ($file_handle !== FALSE) {
  $column_headers = fgetcsv($file_handle);
  foreach ($column_headers as $header) {
    $result[$header] = array();
  }
  while (($data = fgetcsv($file_handle)) !== FALSE) {
    $i = 0;
    foreach ($result as &$column) {
      $column[] = $data[$i++];
    }
  }
  fclose($file_handle);
}

$json = json_encode($result);
echo "const data = ${json};";

あとはJavaScriptでデータをHTML内に挿入すれば完了。

let html = ''
data['id'].forEach((v, i) => {
  const target = /https:\/\/iwb\.jp\//.test(data['url'][i]) ?
    '' : ' target="_blank"'
  html += `
  <li>
    ${data['date'][i]}
    [${data['category'][i]}]
    <a href="${data['url'][i]}"${target}>${data['title'][i]}</a>
  </li>`
})
const news = document.getElementById('news')
news.innerHTML = html

サンプルではiwb.jpでなければtarget="_blank"を追加している。

以上のコードだけでシートを編集するたびにHTMLページを更新することができるようになる。

Googleスプレッドシートの内容をPHPで表示させるサンプルページ