Edited at

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

More than 1 year has passed since last update.

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 はもっとすごいやり方があるかもしれないです。