Help us understand the problem. What is going on with this article?

【簡単DB】Steinで超絶簡単にgoogle spreadsheetをDB化してみよう!

【簡単DB】Steinで超絶簡単にgoogle spreadsheetをDB化してみよう!

by masuraoProg
1 / 24

1,はじめに:Steinって何?

皆さんこんにちは。
ふくしま はやと(@MasuraoProg)と申します。

普段は営業として仕事をしている、非エンジニアのおじちゃんです。
今はサンデーエンジニアを自称して、興味あるものを作って挑戦しています。

さて、この度twitterにて
SteinというGooleSpreadSheetをそのままDB化できるシステムが
軽バズりしていました。


めちゃくちゃいいじゃん!
プロダクトを行う際に、まずは簡単に作ってみたいと言うときがあります。
そんなときに、このSteinはその願いを叶えてくれるサービスになりえます
まさに、MVP向けです。
また、初学者や非エンジニアにとってもめちゃくちゃとっつきやすくていい感じです。
ということで、利用方法等をまとめました。


2,Stein利用のための準備


2-1,先にGoogleSpreadSheetへDBを作成

練習用に以下のように、GoogleSpreadSheetに記載しました。
1行目に、項目名を記載して、それぞれ適当に記載しています。
また、このGoogleSpreadSheetのURLはあとで使います。


1行目に項目を記載、URLをメモ。
スクリーンショット 2019-07-20 16.00.20.png


2-2,Steinへ登録

まずはStein利用のために、登録が必要となります。

こちらから登録しましょう。
→ https://steinhq.com/


(1)サイトからここで登録
スクリーンショット 2019-07-18 9.42.04.png
説明に沿って登録をお願いします。


画像記載の説明文を参考にしてください。
555.png


用意したGoogleSpreadSheetを貼り付け!
url記載.png


gray.png


APIが発行されました!
API.png


3,Stein利用方

APIがあれば、あとはコードを書くだけです。
例えば、下記のように記載してみてください。


※なお、コード内に
・GoogleSpreadSheetのURL
・GoogleSpreadSheetの、どのシートを利用するかを記載する部分があります。
忘れがちなので、お気をつけください。

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>test document</title>
</head>
<body>
<script src="https://unpkg.com/stein-js-client"></script>
<script>
  const store = new SteinStore(
    "https://api.steinhq.com/v1/storages/*********"
  );

  store.read("シートの名前", { limit: 100, offset: 0 }).then(data => {
      console.dir(data);
      console.log(" - - - - - - - - - - - ");
      for (let i = 0; i < data.length; i++) {
            const element = data[i];
            console.log("title:"+element.text);
      }
  });

</script>
</body>
</html>

上記コード内の下記部分の説明です。

index.html
  store.read("sheet1", { limit: 100, offset: 0 }).then(data => {
      console.dir(data);
      console.log(" - - - - - - - - - - - ");
      for (let i = 0; i < data.length; i++) {
            const element = data[i];
            console.log("title:"+element.text);
      }
  });

※store.readの第一引数には、GoogleSpreadSheetのシート名を入れてください。
記載されている説明は以下のとおりです。

パラメータ 説明 タイプ
limit 何行のデータを記載するか 数(整数)
offset 取得を開始する行数(デフォルトは0) 数(整数)

とりあえず、全部の行を最初から取得したいので、
limitは100(何行でもいいのですが、適当に大きな数字を入れました),
offsetは0
と記載しています。

今回"data"というArrayオブジェクトがあるので、for文などで表示したい項目を指定しています。


それでは、ブラウザのデベロッパーツールで確認してみましょう。
スクリーンショット 2019-07-21 1.02.26.png


画像の通り、Arrayオブジェクトで取得できていると思います。
かんたんでしょ?


4,HTMLへの組み込み

Arrayオブジェクトとして取得できたので、このままJavaScriptをいじって、
HTMLと組み込んで、画面にデータを表示させることができます。
けど、もっと簡単な方法があります。


4-1

htmlの</body>タグの前に以下のコードを追加してください。

index.html
<script src="https://unpkg.com/stein-expedite@0.0.1/dist/index.js"></script>

次に以下の通り記載してください。

1.適当な<div>要素を作成する
2.作成したAPI URLをそのdata-stein-url属性として設定してください。
3.htmlに、記載したいDBの項目を{{ }}で囲ってください。


例えばこんなイメージです。

index.html
<div data-stein-url="https://api.steinhq.com/v1/storages/*********/'sheet名'" data-stein-limit="100">
  <div>
    <h3>{{id}}、{{time}},{{title}}、{{text}}</h3>
  </div>
</div>

※data-stein-limitを記載することで、取得したい行の最大数を提示できます。


やったーできましたー
スクリーンショット 2019-07-21 1.24.17.png


このように、簡単にDBを作成・利用することができます。
もちろん、なれたSQLを利用するのも結構ですが、
GoogleSpreadSheetでサクッと利用できるこのSteinにも
様々な利点があるのではないでしょうか。

以上、ありがとうございました。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした