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

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/


コメントを読む

新着ピック  











山本 聡山本 聡5時間前フリーランスWebフロントエンドエンジニア











新着ニュース

型ヒントでPython開発を加速 ~Microsoft、VS Code向けの拡張機能「Pylance」を発表/“IntelliSense”による強力な入力補完や型チェック、モジュールの自動インポートが利用可能に

アシスト、企業のアジャイル開発への取り組みを支援する「アジャイル価値共創サービス」提供

17歳のエンジニアが開発!スマホだけで履歴書や職務経歴書を作成できる「anata」 | Techable(テッカブル)

イーサリアム2.0ネットワークへの参加をサポート、リブラ加盟企業が発表

ポケモンGO:No.615 フリージオ入手方法・色違いと弱点・対策 (大人のポケモン再入門ガイド) - Engadget 日本版

なくしても音で探せる、紛失防止タグTile内蔵の完全無線イヤホン3機種。Skullcandyが日本発売 - Engadget 日本版

2020年7月2日 濃厚接触!?

2020年7月第1週 GMail以来の新しいメールサービス『Hey』(前編)

Facebookの新VRヘッドセット試作機がものすごくグラサン

Facebookが写真日記&ショートムービ作成アプリ「Hobbi」を半年足らずで終了 | TechCrunch Japan

Amazonの「Fireタブレット」を選ぶポイントとおすすめ3選【2020年最新版】

QLC SSDは第2世代でどう進化したか Samsung「870 QVO」を試す

  Cisco SD-WAN:シンプル、セキュア、スケーラブルなイノベーションで SASE を一気に実現

「未来の宿泊チケット」に、トラスト・ユーのクチコミ情報と「Cansell」特別買取を搭載 | Ledge.ai

NTT-ATとModis VSNが『WinActorシナリオセンタ』技術者育成で協業 | Ledge.ai

AGC、FRONTEOと共同でAI Q&Aシステム「匠KIBIT」を開発 | Ledge.ai

(株)AI Samuraiは、操作のコツをご紹介する『AI Samurai あんちょこ』を配信致します。【明日7/3開催記念セミナー 参加予定者200名突破!申込締切は本日午後3時まで!】 | Ledge.ai

コロナによる外出自粛女性のファッションも変化 外出の機会が減ったからこそ1回の外出でオシャレをしたい20代女子は約8割 | Ledge.ai

JCV、東急不動産が展開する会員制シェアオフィス「ビジネスエアポート」にてAI温度検知ソリューション「SenseThunder - Mini」が導入されたことを発表 | Ledge.ai

農業機械や建設機械、搬送ロボット向けの車両AI評価キットを共同開発

記事をPICKする
会員登録
Register
記事をPICKする

会員登録すると、もっと便利に利用できます。