JavaScript
GoogleAppsScript
初心者
3分ハッキング
新人プログラマ応援

3分で API を作って世の中にデプロイするライブコーディング〜今日から君もスピードスターエンジニア〜

3分間でサーバーを用意し、APIを実装して世の中に公開するまでの手順を録画しました。(一発撮りなのでタイポ多くてすみません。。。)
一連の動画は以下からご笑覧いただけますと幸いです。
https://youtu.be/h1wuGsaJZa4

qiita では gif 動画だと 10MB 以上はアップできないっぽいので、4分割にしてそれぞれ何をしているか解説します。

ハッカソンやプロトタイプの作成、新規事業での仮実装...etc などの実装スピードが勝負の明暗を分けるシチュエーションにお役立て頂けますと幸いです。

しょっぱなからネタバレで大変恐縮ですが Google Apps Script を使います。。。

PART 1 Google Drive で SpreadSheet を新規作成(0秒~33秒)

  1. Drive を開いて
  2. SpreadSheet を新規作成
  3. 「ツール」 -> 「スクリプトエディタ」 より、 Google Apps Script を書く準備を行います 3分で api を作って世の中にデプロイする、その1.gif

PART 2 API のコードを書いてデプロイする(33秒~1分10秒)

  1. doGet 関数を作成。 組み込みの doGet 関数を使えばすぐさま API になります。 https://developers.google.com/apps-script/guides/web
  2. ContentService.createTextOutput() で文字列を出力。
  3. 「公開」 -> 「ウェブアプリケーションとして導入」 -> 「アプリケーションにアクセスできるユーザー」 -> 「全員(匿名ユーザーを含む)」 -> 「導入」 の順でクリックし、 API を世の中にデプロイ
  4. curl -L 表示されたエンドポイント で API からデータを取ってくることができました

実質ここまでならほぼ 1分でデプロイまでできました。

3分で api を作って世の中にデプロイする、その2.gif

PART 3 もうちょっと API っぽくデータベースからデータを取ってこれるようにする(1分10秒~2分17秒)

  1. SpreadSheet をデータベースに見立てて、データを入力します。このデータを API で返せるようにします。
  2. GoogleAppsScript 側で、 SpreadSheet のデータにアクセスするコードを書きます。
  3. SpreadsheetApp.getActiveSpreadsheet() でスプレッドシートのインスタンスを作成。
  4. getSheetByName('シート1') で取ってくるシートを指定。
  5. getRange('A1:A4').getValues() で取ってくるセルの範囲を指定してデータを取得。
  6. 取ってきた data を JSON.stringify(data) して、オブジェクトを文字列にして API のレスポンスデータとして返します。 3分で api を作って世の中にデプロイする、その3.gif

PART 4 データベースからとってきたデータをレスポンスにするため、 API を更新する(2分17秒~3分00秒)

  1. PRAT 2 の 6 の手順と同じように、更新します。 この時、バージョンを「新規作成」にしないと、更新されません
  2. SpreadSheet にアクセス許可を求められるので、許可してあげます
  3. 更新できたら curl -L 表示されたエンドポイント で API からスプレッドシートに入力したデータを取ってくることができました 3分で api を作って世の中にデプロイする、その4.gif

はい。できました。

「3分で API は作れる。」

あとはフロントエンドでなんとかしましょう。

一気通貫で見る場合は、以下の動画 URL からご覧ください。(qiita さん 動画とか貼れるようにならないですかね? もしかして、僕が知らないだけであるのかしら?
https://youtu.be/h1wuGsaJZa4

コメントで教えていただきました。
twitter に youtube のリンクを貼ったものを投稿し、 qiita に埋め込みすると、そのまま見れるそうです。

補足事項

  • 新規事業開発におけるエンジニアの心得〜失敗事例から学ぶツクラナイ開発〜 というタイトルで登壇した際に、早く作って早く出すにはどうするか?というポイントを解説する例として、ライブコーディングして見た時の内容です。
  • doGet があるように doPost もできるので、値を送ることもできますし、doGet でクエリパラメータを受け取ってスプレッドシートに書き込むとかもできます。
  • 需要がありそうなら doPost 編などまた書きます。

コピペ用にコードも貼っときますね

function doGet(e) {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getSheetByName('シート1');
  var data = sheet.getRange('A1:A4').getValues();
  return ContentService.createTextOutput(JSON.stringify(data))
}

注意事項

  • API のリクエスト制限や、レスポンスタイムは保証できないので、くれぐれも GAS を使うときは自己責任でお願いいたします。
  • 自分の GAS 知識は 2014 年くらいから進歩してないので、もしかしたら 2018 年の GAS はもっとすごいやり方があるかもしれないです。