GAS+スプレッドシートで簡易DBを作る

GASとスプレッドシートで簡易DBを作る話です

Transcript

1. GAS + スプレッドシート で簡易DBを作る @kanchan-1996
2. １．概要(読み飛ばし可) ▪ スペック：新卒サーバサイドエンジニアプログラマー ▪ よく使うのはJava + Oracle or PHP + SQLite ▪ BootStrapは使っていた ▪ 勉強会で初めてフロントエンド開発を学ぶ 〇テーマ ▪ Fire Baseで公開する ▪ Googleスプレッドシートを簡易DBとして使ってみる
3. ２．成果物 ▪ 自分の歌える曲リストを作成 ▪ https://kanchan-c7adc.firebaseapp.com/ ▪ Git Lab : https://gitlab.com/k_horiuchi/music_list ▪ 現役でデュエット誘うのに活用中 ▪ データはスプレッドシートから取得 ▪ 【衝撃】SQL Java PHPは使ってない
4. ３．仕組み ▪ Googleスプレッドシートに曲名、歌手名、ジャンルなどの情報を入れる ▪ Google Apps Script(GAS)でシートの情報を取得し、JSONP形式で出力 ▪ JSONPをHTMLに表示(つまりWeb API) ▪ jQueryで検索等の実装が可能 ▪ 登録、編集、削除はGASに投げることで実行 →実質、CRUDできるDB！！
5. 無料レンタルサーバー Fire Base 有料レンタルサーバー Google スプレッドシート GAS jQuery + HTML + UIKit データベース サーバサイド SQL jQuery + HTML + Bootstrap 従来の個人開発 今回
6. ４．ハマったこと(教訓) ▪ 最初はJSON形式出力したが、CORSになって死亡(先人がいた) ▪ https://www.koreyome.com/web/make-spreadsheet-to-json-at-google-apps-script/ ▪ http://komaken.me/blog/2013/04/11/google%E3%82%B9%E3%83%97%E3%83%AC%E3%83%83%E3 %83%89%E3%82%B7%E3%83%BC%E3%83%88%E3%81%A7%E7%B0%A1%E5%8D%98jsonp-api/ ▪ GAS更新したらプロジェクトバージョンを上げないと最新コードで動かない ▪ GASをウェブアプリケーションとして実行するURLはブラウザ毎にアクセスして 承認させる必要がある(そのせいで最初はChromeしか動かなかった) ▪ スプレッドシートに日付(YYYY/MM/DD)を入れて取り出すとタイムスタンプ型 ▪ GASってめんどくさい(手のひら返し) ▪ 参考にさせて頂いたGASの入門記事 ▪ https://qiita.com/mandbjp505/items/5d5137a40d3730bb7823
7. ５．よかったこと ▪ フロントエンド開発の基礎を学ぶことができました ▪ UIKit信者になりました ▪ 公式がわかりやすい ＋ 使いやすい ＋ リッチなデザイン + 幅広いサポート → BootStrapは飽きていた。バイバイBootStrap → MDLも考えたが、まさかの公式がセレクトボックスをサポートしていない ▪ UIKitはSwitch(トグルボタン)がないのが残念（画像はMDL公式) ▪ セレクトボックスをMDLが導入したらきっと浮気する
8. ６．課題 ▪ 今回はWebアプリだが、Webサービスではない (ここ重要) ▪ LiveDAMのAPIとかもあるらしい。もっと曲のリクエストを簡単にしたい ▪ Fire Baseのいろんな機能使いたい ▪ UI(使いやすさ)は拘ったが、もっと良くしたい ▪ 0.5人月もかかってしまった ▪ ちなみにデュエットをするお店の女の子からは大変好評だった
9. 以上です(´◉◞౪◟◉) 最後までありがとうございました。