【SSSAPI】スプレッドシートをヘッドレスCMSにしたいなら早めに諦めたほうがいい

teto9/30/2022

Share this post

Reactでとあるサービスを作るのに、GoogleスプレッドシートをCMSにできたらすごいな？と思い検索をかけると、こんな記事が出てきました。

手順通りに進めるとちゃんとReactで取得ができ感動したのを覚えています。その節は本当にありがとうございました（？）

ちゃんと想定した挙動となって助かったのですが実務で活用する際に、以下のようなデメリットがありました…

Google API の登録がめちゃくちゃ手間
なぜかレンダリングが遅い
コードが複雑になる

とにかくお金をかけたくなかったので、上記の記事はありがたかったのですが、特にレンダリングが遅い件がどうやっても解決ができず、メンターサービスのMentaでも相談をさせていただきました。それでも解決に至らず、途方にくれていました。

レンダリングが遅いということは、サービスを使ってくれる方々の負担になってしまう…苦渋の決断でSSSAPIを使用することにしました。

結果、もっと早く使っておけばよかったと後悔したほど、よいサービスでした。

スプレッドシートをCMSにするなら『SSSAPI』

SSSAPI：https://sssapi.app/
実は『スプレッドシート CMS』等で検索すると上位に表示がされるため、存在は知っていました。すぐに飛びつかなかったのは、『自分でやる方がプログラミングの勉強になる』と思ったのと、『お金をかけたくなかった』からです。

今後Reactでスプレッドシートからデータを持ってきたい場合は、私は絶対SSSAPIを使います。

SSSAPIの良いところ

速い ... スプレッドシートのURLだけでJSON APIを作成することができ、導入に手間がかからず『早い』、またレスポンスも速く、GASの4倍高速（公式ページより）だそうです。
安い ... 無料プランもあり、有料プランも月額300円、900円などとにかく安い。
安心 ... 最低限の権限で済むのでセキュリティも安心。

データベースの専門知識が必要ないので、駆け出しのフロントエンド

エンジニアが開発に集中ができるようになるところが、個人的に良かったポイントです。

SSSAPIに登録する

スプレッドシートを使うのでGoogleアカウントで登録&ログインをします。

スプレッドシートと連携してAPIを作成する

右上の『Add API』からAPIを登録していきます。

API名... お好きな名前でOK
スプレッドシートのURL...連携したいスプレッドシートのURLをコピペします。
フォルダ... APIを管理しておくフォルダを選択します。あとからの移動も可能です。
閲覧権限... コピペしておき、スプレッドシート上で権限を追加します。

Googleスプレッドシートでの設定

今回はこちらのシートをAPIとして呼び出したいと思います。右上の『共有』ボタンをクリックしましょう。

先程コピーした閲覧権限のアカウントをここに貼り付けて『完了』をクリック。

右側のプルダウンを閲覧書に変更して『送信』ボタンをクリック。ここまで終わったらSSSAPIに戻りましょう。

SSSAPIで連携を確認する

API追加の画面に戻り『OK』ボタンを押すとAPIが呼び出せる状態になります。クリックして詳細設定を行いましょう。

APIの取得と設定を行う

APIが取得できるのは『API URL』からコピーができます。

お好みで構いませんが『自動更新』『行数をIDとして追加』をオンにしておくのをオススメします。

実際の環境で確認をしてみる

それではReactで確認していきましょう。スプレッドシートの初期設定をミスって見出しを日本語にしてしまっていましたが、本来は英数字が良いです。一応このままでも動きます。


import { useState, useEffect } from "react";

const ApiFetch = () => {
   const [data, setData] = useState([]);

   useEffect(() => {
      fetch("https://api.sssapi.app/XXXXXXXXXXXXXXXXXXXX")
         .then((response) => response.json())
         .then((json) => setData(json));
   }, []);

   return (
      <>
         {data.map((data) => (
            <div>
               <h2>{data.タイトル}</h2>
               <h3>{data.著者}</h3>
               <p>{data.本文}</p>
            </div>
         ))}
      </>
   );
};

export default ApiFetch;

実際の環境でも取得することでがきました！とても簡単でしたね。

公式のドキュメントには、フィルタリング機能など更に便利な使い方が載っていますので、参考にしてみてください。

まとめ

無料プランでも1APIにつき50行までは取得できますので、ブログのちょっとしたお知らせなどに今日からでも使えると思います。

データを管理するヘッドレスCMSとしてスプレッドシートを使いたいときは、ぜひ使ってみてください。

JavaScriptでAPIを取得し、より実用的なパーツの作り方を以下の記事で説明しています。

【GAS不要】スプレッドシートをデータベース化してWeb更新【無料】

Share this post