CJコラム

Googleスプレッドシートに書き込むだけでWebサイトを更新する方法

admin

突然ですが、
Googleスプレッドシートを書き換えるだけでWebサイトを更新できたら、超楽ちんじゃないですか？(結論)
と、この考えに至った理由は…
サイトのお知らせなどは担当者が直接更新できれば、スピード感を保って公開できますよね。しかしそのためには、HTML編集・サイトアップロードの知識、もしくはCMSの導入が必要となるかと思います。
当社でも、クライアント様から「自社で更新したい」という要望があった場合はCMSを導入することがほとんどですが、他ページはCMSを使う必要性がない場合、お知らせのためだけに導入するコストをちょっと考えてしまいます…。

そこで！Googleスプレッドシートにお知らせを書き込み、そのデータをサイトに引っ張って表示できるようにしよう！
これならだれでも更新できますよね。
ということで、手順をご紹介します。

 

手順1　Googleスプレッドシート側の設定

まず、サイトに表示させたい項目を、1記事1行としてシートに書き込みます。 お知らせによくありそうな項目を書いてみました。サイト掲載順を考慮して日付は新しいものを上にしました。
項目名は、あとでJS上に記述するので、半角英数字が無難です。

次に、メニューのツール＞スクリプトエディタ を開き、コードを貼り付けます。

＜コード＞

function getData() {
  var sheet = SpreadsheetApp.getActiveSheet();
  var rows = sheet.getDataRange().getValues();
  var keys = rows.splice(0, 1)[0];
  return rows.map(function(row) {
    var obj = {}
    row.map(function(item, index) {
      obj[keys[index]] = item;
    });
    return obj;
  });
}

function doGet(request) {
  var data = getData();
  return ContentService.createTextOutput( JSON.stringify(data, null, 2) )
  .setMimeType(ContentService.MimeType.JAVASCRIPT);
}

※コードはこちらの記事を参考にさせていただきました。
Googleスプレッドシートの内容をjsonデータとして利用する
https://www.koreyome.com/web/make-spreadsheet-to-json-at-google-apps-script/

シートのデータを1行ずつJSON形式にしていく、という処理です。
こちらのコードではIDやシートを指定せず、アクティブなシートを取得しているので、シートは1枚に(もしくは使いたいシートを一番左に)しておくと良いです。
プロジェクト名をつけて保存したら、メニューの公開＞ウェブアプリケーションとして導入を開き、設定を編集します。

Project version:
管理しやすいようにお好みで設定。

Execute the app as:
Me (自分)

Who has access to the app:
Anyone, even anonymous (匿名ユーザーを含む全員)

設定できたら「Deploy」を押して保存します。
初回はアクセスの許可を求められるので、自分のアカウントで許可します。
アクセス許可が完了したら、web appのURLが表示されるので、あとでJS内に貼り付ける用にコピーしておきます。

これで、データをサイトに反映させる準備ができました。
ちなみに、生成されたURLにアクセスすると、下記のようにJSON形式でデータが出力されます。

手順2　サイト側(JS)の作成

まずは完成形。

$(function(){
    //JSON読み込み
    var sheetData = '【web app URL】';
    $.getJSON(sheetData).done(function(data, textStatus, jqXHR){
        newsList(data);
    }).fail(function(jqXHR, textStatus, errorThrown){
        //エラー情報
        console.log(jqXHR);
        console.log(textStatus);
        console.log(errorThrown);
    });

    //データをページ上に表示させる
    function newsList(data){
        var sourceAll = []; //生成したソースを入れておく配列
        var num = 3; //一度に表示する件数
        for (var i = 0; i < num; i++) {
            var date = data[i]['date'];
            var category = data[i]['category'];
            var title = data[i]['title'];
            var link = data[i]['link'];
            var source = '\
            <dl>\
                <dt class="date">'+date+'</dt>\
                <dd class="category">'+category+'</dd>\
                <dd class="title"><a href="'+link+'" target="_blank">'+title+'</a></dd>\
            </dl>';
            sourceAll.push(source); //生成したソースを追加
        }
        $('#newsWrap').append(sourceAll); //ループが終了したらソースをまとめて挿入
    }
});

以下、ちょっとだけ詳しく説明です。

■JSONを取得

//JSON読み込み
var sheetData = '【web app URL】';
$.getJSON(sheetData).done(function(data, textStatus, jqXHR){
    newsList(data);
}).fail(function(jqXHR, textStatus, errorThrown){
    //エラー情報
    console.log(jqXHR);
    console.log(textStatus);
    console.log(errorThrown);
});

【web app URL】に先ほど取得したURLを貼り付けます。
データを読み込み、正常に取得できたら、フロント表示用の関数(newsList)に渡します。

■1件ずつデータを処理

var sourceAll = []; //生成したソースを入れておく配列
var num = 3; //一度に表示する件数
for (var i = 0; i < num; i++) {
    var date = data[i]['date'];
    var category = data[i]['category'];
    var title = data[i]['title'];
    var link = data[i]['link'];
    var source = '\
    <dl>\
        <dt class="date">'+date+'</dt>\
        <dd class="category">'+category+'</dd>\
        <dd class="title"><a href="'+link+'" target="_blank">'+title+'</a></dd>\
    </dl>';
    sourceAll.push(source); //生成したソースを追加
}

for以下で1件ずつデータを取得し、それをHTMLに組み込んで出力します。
data[i][‘category’]; の’category’部分は、先ほどシートの1行目に入力したタイトルです。

■HTMLに反映

$('#newsWrap').append(sourceAll); //ループが終了したらソースをまとめて挿入

全件のデータが処理できたら、生成したHTMLをまとめて挿入します。
今回は、あらかじめHTMLに<div id=”newsWrap”>を置いておき、その中に全件分のソースを入れます。

あとはCSSをお好みでいじって、ページ上で表示確認してください。
こんな感じになりました。

以上、スプレッドシートのデータをWebに反映する方法でした。お知らせや商品のデータなど、頻繁に更新される場所に導入すると、運用が楽になるかもしれません。

最新5件の記事