大和ノ畢生載録

ヤマトノヒッセイサイロク

トップ > はてなブログ > 【はてなブログ】Google Apps Scriptを用いてお知らせ欄を作成してみた

【はてなブログ】Google Apps Scriptを用いてお知らせ欄を作成してみた

はてなブログ はてなブログカスタマイズ 備忘録 日記 プログラミング Google Apps Script

どうもこんにちは～！

はじめに

今回はタイトルの通り，Google Apps Scriptを用いてスプレッドシートに記述したお知らせをブログやホームページなどのお知らせ欄として表示してみたので，やり方を軽くメモしておきたいと思います。

やったこと

まず，Googleドライブにこのようなスプレッドシートを作成します。
ここに書いてあるお知らせをブログのお知らせ欄に表示されるようにしたいと思います。

シートの名前は「通知」にしておきました。

今思うと「通知」じゃなくて「お知らせ」のほうが良かったかも，，，

スプレッドシート内に「色」という列がありますが，これはお知らせの背景色です。お知らせのジャンルによって色分けしたかったのでこのようにしました。

実際にお知らせを表示させたときの様子

その後，「拡張機能」から「Apps Script」を選択し，Google Apps Script（以下GASと表記）を開きます。

開いたら以下のコードを入力します

function doGet() {
  let notificationSheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('通知');
  let notification = notificationSheet.getRange(2, 1, notificationSheet.getLastRow() - 1, notificationSheet.getLastColumn()).getValues();
  //Date型の日付をStirng型に
  for(let i =0; i < notification.length; i++){
    let dt = notification[i][0];
    let y = dt.getFullYear();
    let m = ("00" + (dt.getMonth()+1)).slice(-2);
    let d = ("00" + dt.getDate()).slice(-2);
    let result = y + "/" + m + "/" + d;
    notification[i][0] = result;
  }
  //最新のお知らせを上にしたいので配列を逆に
  notification = notification.reverse();
  let html = HtmlService.createTemplateFromFile("index");
  //htmlに通知データを与える
  html.notificationData = notification;
  let resurt = html.evaluate()
  resurt.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
  return resurt;
}

左のファイルビューから「+」ボタンを押し，「HTML」を選択。 名前は「index」にしておきます。

作成したHTMLは以下のようにしました。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>お知らせ</title>
</head>
<body>
  <? notificationData.forEach(function(option) { ?>
    <div  style="background:<?= option[2] ?>"><strong><?= option[0] ?></strong>
    <br/>
    <?!= option[1] ?></div>
  <? }); ?>
</body>
</html>

<?= option[0] ?>には日付，<?= option[1] ?>にはメッセージの本文，<?= option[2] ?>にはカラーコードが入っています。

この情報は，先ほどのコードの17行目で与えられています。

試しに実行し，エラーが出ないことを確認しましょう。実行時にファイルのアクセス権限を求められる場合があります。

HTMLに記述したら保存し，デプロイを行います。 右上の「デプロイ」から「新しいデプロイ」ボタンを押します。

「種類の選択」を「ウェブアプリ」にします。

「アクセスできるユーザー」を「全員」に変更し，デプロイします。

デプロイが完了すると，URLを取得することができるので，そのURLを控えておいてください。

完了したら以下のHTMLを張り付けることによってお知らせ欄を表示させることができます。

<iframe src="先ほど控えたURL" width=100% height="200px"></iframe>

はてなブログで表示させた場合

これでスプレッドシートにお知らせを追加すると，自動的にそこから情報を取得し，表示してくれます！

お疲れ様でした～

まとめ

スプレッドシートを用いてデータを取得し，表示させることに成功しました。
今回はお知らせ欄を作成しましたが，ほかのことにも使えそうです！

あと，このお知らせ欄は私のブログのトップページでも使用しているので，よろしければ見てみてくださいね♪

最後までお読みいただきありがとうございました。

本記事を書いた時のメモ

scrapbox.io