Google スプレッドシートのデータをHPのお知らせとしてサイトTOPに表示する

前回、お問い合わせフォームをGoogle Formを使って構築しましたが、今回はお知らせ欄(ニュース、トピックス)をGoogle スプレッドシートを使って構築してみたいと思います。

 最近、すごく時代の流れを感じています。。。一昔前までは考えられなかったことが現実に起こっているな〜っと感心していました。 それは、G...

お問い合わせフォームの他に、お知らせ欄もWordpressなどのCMSを使って構築するのが一般化しています。

何でもかんでもWordpressで構築・・・楽だと言えば楽なのですが・・・

最近のレンタルサーバーでは、ボタン1発でWordpressが構築できるとはいえ、それでも設定が面倒です・・・。目的の機能を追加しようと思えば、各プラグインの設定が大変です。ある程度のPHPやMySQLの知識が必要です。

また、WordPress本体のアップデート、テーマやプラグインのアップデートが頻繁に発生するため、管理コストも馬鹿になりません。

近年では落ち着きましたが、いつセキュリティホールの発見でサイトが乗っ取られるか分からない不安もあります。クライアントによってはWordpressを利用しないでと言われることも増えたのでは無いのでしょうか?

そんな手間や不安を今後は無くしちゃいましょう!

Google スプレッドシートを使って!!!

仕様はこんな感じ

Google スプレッドシートに登録されているデータをjson形式でアウトプットし、情報を表示させたいサイトからJavascriptを使って表示させる。

まあ、REST APIを使ったお決まりの流れですが・・・

Google スプレッドシート データ

イメージとしてはこんな感じです。シンプルですね。これに、カテゴリーを増やしたりして最終的に完成へとバージョンアップできればと思います。

はじめは、Sheets APIを使ってGoogle スプレッドシートの読み書きができればと思っていたのですが、使い方が・・・情報、仕様が変わりすぎて・・・

短時間で理解することが不可能でした・・・20代の探究心が欲しい・・・

そこで、もう少し難易度を下げたGoogle Apps Script(GAS)を利用した開発へ切り替えることにしました。

ただ、これについても仕様がコロコロ変わっており、共有、公開の権限設定で四苦八苦してしまいました。

シートに情報を登録したので、次にGoogle Apps Scriptを使ってjson形式で出力する処理を作成します。


function doGet() {
const sheet = SpreadsheetApp.getActive().getSheetByName( 'Sheet1' );
const rows = sheet.getDataRange().getValues();
const keys = rows.splice( 0, 1 )[0];
let data = rows.map(
row => {
let obj = {};
row.map( ( item, index ) => { obj[ String( keys[ index ] ) ] = String( item ); } );
return obj;
} );
console.log( data );
return ContentService.createTextOutput( JSON.stringify( data, null, 2 ) ).setMimeType( ContentService.MimeType.JSON );
}

続いて、Apps Scriptをデプロイして外部から誰でも利用できるよう公開します。

Google スプレッドシート データ 2

ウェブアプリにして、アクセスできるユーザーを「全員」にすればOKです。

これで、発行されるURLにアクセスするとjson形式のデータを表示することが可能です。

これはとてもシンプルで簡単です。

Google スプレッドシートとApps Scriptの仕様が変わらない限り、APIを使うよりこの利用方法が1番ベストなのかもしれませんね。

データを取得して、表示するだけならAPIの制限も受けない?

今後は、Google Formを合わせた、CRUDに対応させてみたいと思います。

その他、Googleサイトを利用すればGoogle Form、Googleスプレッド、Google カレンダー、Google マップなどの機能と連携し、 将来的にホームページ制作のスタンダードになりそうな充実度にビックリしています。

サンプル的に利用してみたいと思います。

続く・・・