【WordPress】GoogleスプレッドシートのデータをJavaScriptでfetchして取得する方法

WordPress(ワードプレス)

2022.06.01

この記事は約4分で読めます。

WordPressとJavaScriptとGoogle Apps ScriptとGoogleスプレッドシートを組み合わせてデータを取得してみます。

Googleスプレッドシートを準備する
GASで公開してJSONデータとして取得できるようにする
デプロイする
JacvaScriptで取り込む
まとめ

Googleスプレッドシートを準備する

まずはデータの取得元となるGoogleスプレッドシートを準備します。

このデータをWordPress側に取得してみます。

GASで公開してJSONデータとして取得できるようにする

このままだと、ただGoogleスプレッドシートのリストがあるだけですので、こちらをGASを使ってJSONデータで取得できるようにしてみます。

ひとまず、いつものような感じで、A列のデータを取得できるようにしてみます。

const SPREAD_SHEET_ID = '1gbcPzriHXSfX-34ePgxFg4-BxLvOobajKKT3m_BkQYU';
const SHEET_NAME = 'メッセージ';

function doGet(e) {
  let output = ContentService.createTextOutput();
  const spreadsheet = SpreadsheetApp.openById(SPREAD_SHEET_ID);
  const sheet = spreadsheet.getSheetByName(SHEET_NAME);

  let data = sheet.getRange("A:A").getValues();
  console.log(data);
}

ログでデータが取得できました。A列の情報をdataに格納してログで出力しています。

あとは、こちらをオブジェクトリストに格納します。方法が分からなかったので、他の先人達が作られていた方法を参考にさせていただきました。

  let value = data;
  let result = {data: value};
  let callback = e.parameter.callback;
  let responseText = callback + "(" + JSON.stringify(result) + ")";
  output.setMimeType(ContentService.MimeType.JAVASCRIPT);
  output.setContent(responseText);
 return output;
}

ContentServiceを利用して、responseを作成しています。

デプロイする

外部のサービスからデータ取得できるように、デプロイします。「新しいデプロイ」を選択します。

種類の選択「ウェブアプリ」＞アクセスできるユーザーは「全員」として公開します。

これでWEBアプリとして公開されました！

JacvaScriptで取り込む

これでデータが取得できるようになったので、JacvaScriptでデータを取り込みます。こちらがJavaScript側の設定です。

[rml_read_more]

JSONP（パディングを持つJSON）で返却されたデータにアクセスします。あとは成功かどうかで条件分岐しています。

<script>
function getSheetData(){
    $.ajax({
        type: 'GET',
        url: 'https://script.google.com/macros/s/AKfycbySpU88b1FzvLK8mDr5MRAHLkFQd2zWfUH4JBqJg2zS2sOlzjDvGhDbitEJTqUOGNFg/exec',
        dataType: 'jsonp',
    })
    .done(function(out){
        console.log(out.data);
    })
    .fail(function() {
        console.log('エラー');            
    })
}
getSheetData()
</script>

これで、HTML側でGoogleスプレッドシートのデータが取得できるようになります！