Googleスプレッドシートを無料でAPI化して、vue.js側で表示する。

どうも松井です。週4日をフリーランスとして働き、1日をwebサービス開発の時間に当てています。

データ量の小さなwebサービスを短期間でする場合には、Googleスプレッドシート,GAS,vue.jsなどを組み合わせて実装すると良さそうです。

なので、DatabaseもGoogleスプレッドシートでまかなうとサクッと実装が楽になります。

手順1:SteinでGoogleスプレッドシートをAPI化する

Googleスプレッドシートをapi化するには、僕は「Stein」というサービスを利用していますが、ドキュメントもあるので非常に便利でカンタンです。

流れとしては、スプレッドシートをURLをSteinで連携してapiのURLを発行するという感じです。

なので、まずはスプレッドシートを開きURLをコピーしておきましょう。

あとは、Steinの流れに沿って進行するだけ。

手順2：Steinの登録

それでは、Steinを登録しましょう。

こちらのurlから入れます。https://steinhq.com/

手順3:vue.js側でスプレッドシートを読み込ませる

さて、初めてプログラミングに挑戦するとAPI化できたけど、どこで読み込ませるの？って感じになるかと思いますが、ひとまずメインの処理をしているところで実行していきます。

axiosを使ってバックエンド間の処理を書きます。vue.jsのドキュメントにも書いてあるので読んでおくと良いです。https://jp.vuejs.org/v2/cookbook/using-axios-to-consume-apis.html

まず、インストールを行います。

$ npm install axios --save

vue.jsのドキュメント側にmounted ライフサイクルフックを使用し、と書かれているので、mounted内で処理を実行してみます。以下のような記述。

mounted () {
   axios
     .get('データベースのURL')
     .then(response => (this.info = response))
 }

あとは、HTML側に表示させる記述を書くだけで完了です。

<div id="app">
 {{ info }}
</div>

ほぼ、vue.jsのドキュメントのままなので、やりたい事によってカスタマイズしながら使う必要はあります。

おまけ

ちなみに、自分が実装したやり方をご紹介すると、

    data(){
       return{
           apiUrl:"databaseのapiのurl",
    
        }
   },

でapiのurlを定義してます。

次に、axiosの処理を書いてます。

 mounted(){
    axios.get(this.apiUrl).then(response => {
               response.data.forEach(item =>{
                   item.id = Number(item.id);
                   item.year = Number(item.year);
                   item.month = Number(item.month);
               this.list.push(item)
           })
       })

}

スプレッドシートから値を取得する場合、文字列になってしまっていたのでNumber()で数値に変換しています。item.idというのは、スプレッドシートのテーブル部内のid部分を参照しています。

item.id = Number(item.id);

そして、下記でitemを配列に追加といった具合です。

this.list.push(item)

つまずき

僕のつまずきは、axiosを実装した際に、apiのurlが違うという事で怒られてました。urlが違ったので、調整してあげて実際は、

axios.get(this.apiUrl　+ "スプレッドシート名").then(response => {

みたいな書き方を追加してあげています。

今回はここまです。ではでは！