JSクライアントも完備!GoogleスプレッドシートでAPIが作れる「Stein」

2019/07/19 07:43

SheetDBSheetsonなど、Googleスプレッドシートを使ってAPIが作れるプロダクトは過去にいくつかご紹介してきました。今回の「Stein」もその1つですが、さらに公式のJSクライアントまで準備されており、今までより手軽にフロントエンドを構築することができます。

◆ JSクライアントも完備!GoogleスプレッドシートでAPIが作れる「Stein」
https://steinhq.com/

紹介

Googleスプレッドシートに接続して、簡単にデータ管理ができます。

はじめに、APIとして利用するGoogleスプレッドシートを準備します。なお、スプレッドシートのURLは後ほど設定で使うので書き留めておきます。

アカウント登録

Googleドライブ/スプレッドシートへの連携を許可します。

2つのアンケートに回答して進みます。

続いて、先程書き留めておいたGoogleスプレッドシートのURLを入力します。

ダッシュボードが表示されたら、登録完了です。

使ってみる

APIのURLを確認

こちらが先程登録したGoogleスプレッドシートです。クリックすると

スプレッドシートやAPIのURLを確認できます。

APIにアクセスする

https://api.steinhq.com/v1/storages/5d2fe24c490adc53ef5c2e1b/シート1

「API URL」+「シート名」がリクエストのフォーマットになっています。

アクセスすると、結果をJSONで返してくれます。

ベーシック認証をかける

Steinでは、ベーシック認証をかけることができます。ユーザーネームとパスワードをAuthenticationで設定します。

これで先程と同じURLでアクセスすると、「Unauthroized」の結果が返ってきます。

curl https://api.steinhq.com/v1/storages/5d2fe24c490adc53ef5c2e1b/シート1 -u "test:afsdfaeew1vsdfadfaer1aasdfa"

今度は、"Username:Password" の形式でパラメータをつけてアクセスすると、先程と同じ結果がJSONで受け取れます。

JSクライアントを使ったフロントエンド開発

JS-Client

Steinでは専用のJSクライアントが公開されています。これを組み合わせることで非常に手軽にフロントエンドを構築することができます。

<html>
  <head>
    <script src="https://unpkg.com/stein-js-client"></script>
  </head>
  <body>
    <table id="result" border="1">
    </table>
    <script>
      const store = new SteinStore(
        "https://api.steinhq.com/v1/storages/5d2fe24c490adc53ef5c2e1b/"
      );
      store
      .read("シート1", { limit: 2 })
      .then(data => {
          let ele = document.getElementById('result');
          ele.innerHTML="<tr><td>" + data[0]['title'] + "</td><td>" + data[0]['author'] + "</td></tr>";
        console.log(data);
      });
    </script>
  </body>
</html> 

このようにJSファイルをコールするだけで、簡単にAPI接続を実装できます。

まとめ

SheetDBSheetsonもAPIが作れる点では同じ機能を提供していますが、Steinは、それに加えてデータ取得処理まで整備してくれている点が特徴です。

ぜひ、簡単なWebサイトを構築したいときは使ってみてください。

◆ JSクライアントも完備!GoogleスプレッドシートでAPIが作れる「Stein」
https://steinhq.com/

appstore
googleplay
会員登録

会員登録して、もっと便利に利用しよう

  • 1.

    記事をストックできる
    気になる記事をピックして、いつでも読み返すことができます。
  • 2.

    新着ニュースをカスタマイズできます
    好きなニュースフィードをフォローすると、新着ニュースが受け取れます。