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

Share this post

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

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

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

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

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

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

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

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

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

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

SSSAPIの良いところ

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

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

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

SSSAPIに登録する

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

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

sssapi-3.jpg
右上の『Add API』からAPIを登録していきます。


sssapi-4.jpg

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

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

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


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


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

SSSAPIで連携を確認する

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

APIの取得と設定を行う

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


sssapi-10.jpg
お好みで構いませんが『自動更新』『行数を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;


sssapi-11.jpg
実際の環境でも取得することでがきました!とても簡単でしたね。

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

まとめ

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

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

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

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

SSSAPI2-eyecatch.jpg

Share this post