どもども平社員の龍ちゃんです。今回も「Google Apps Script」第4弾！です。今回は、これまでの集大成ともいえる窓口づくりになります。簡単にAPIを構築する手法を紹介します。今回も登場「以下の図」です。こちらでAPIを構築することで、開発の幅が広がります。今回も初心者向けの記事になっています。それでは初めて行きましょう。

前提知識

まずは、Google Apps ScriptでAPIを公開するにあたって必要となる前提知識についてお話します。ここでのお話は読み飛ばしていただいてもかまいません。結論としては、「ウェブアプリでAPIを作ると、協力な制限が付くがお手軽でAPI作成ができる」ということになります。

ウェブアプリ・実行可能APIとの比較

さて！突然ですがGASでAPIを公開する方法は2通りあります。「ウェブアプリ」と「実行可能API」です。実行可能APIという名前のほうがAPIっぽいですよね。確かに世間でいうAPIの概念と近いです。比較した図を以下に出しておきます。

さて、比較を行うと実行可能APIに軍配が上がります。今回は、お手軽という利点だけで「ウェブアプリ」でのAPI公開について解説していきます。今回解説する方法では、セキュリティが皆無に等しいため、実業務や情報漏洩の危険があるデータの取り扱いでは使用しないことをお勧めします。

「実行可能API」では、Google Cloud Platformからの設定などが必要なので、ネクストステップアップとしてトライしてみてください。

ウェブアプリでの公開における制限

ウェブアプリでAPIを公開する場合での制限としては、大きく2つです。

HTTPメソッドというものを知っていますか？よく使うメソッドとしては「GET・POST・PUT・DELETE」というものがあります。これは、REST APIという設計思想でも使います。REST APIの説明はこちらからどうぞ。ウェブアプリでの公開では、「GET・POST」の2つのメソッドしか受け付けません。なので、完全なREST APIを作成することができません。

次にステータスコードというものを知っていますか？これはAPIの実行が成功・失敗をコードで表現したものです。ステータスコードの簡単な説明も作成しているので、「初めて聞いたよ」という方は是非ご一読ください。ウェブアプリでの公開では、200番と500番台のエラーしか使用することができません。これは、僕がネットの記事を探しに探し回った結果ですので元の記事を張っておきます。記事といいますか、GASの開発者リクエストの中に「できるようになってほしい」という想いのこもったIssueがあったのですが、2013年に作成されたIsuueで現在2022年ですので、実現はほぼないと思います。

前提条件

では、実際に簡単なAPIを作成するにあたっての条件を詰めていこうと思います。実際は、API仕様書を作成するのですが、超簡単なAPIのため作成しません。データのやり取りは「JSON形式」でやり取りを行います。使用するHTTPメソッドはGETとPOSTです。J「SONってなに？」という方のために、JSONについての記事を置いておきますね。

最低限のラインとして、JSON形式で名前と年を受け取り、文章を作成しJSON形式で返答するというAPIをGETとPOSTそれぞれで作成していきます。

コード解説

全体のコード

function doGet(e) {
  // 受け取り
  let name = e.parameter.name;
  let age = e.parameter.age;

  let value = "データがありません";
  if (name && age) {
    value = "あなたの名前は" + name + "さんで" + age + "歳なのですね。よろしくお願いします"
  }
  const result = {
    message: value
  }
  // 返信作成用定数
  const output = ContentService.createTextOutput();
  //Mime TypeをJSONに設定
  output.setMimeType(ContentService.MimeType.JSON);
  //JSONテキストをセットする
  output.setContent(JSON.stringify(result));
  return output;
}

function doPost(e) {
  // PostData受け取り
  const data = JSON.parse(e.postData.contents);
  const name = data["name"];
  const age = data["age"];

  let value = "データがありません";
  if (name && age) {
    value = `あなたの名前は${name}さんなんやぁ～。${age}歳なんやね～`
  }
  const result = {
    message: value
  }

  // 返信作成用定数
  const output = ContentService.createTextOutput();
  //Mime TypeをJSONに設定
  output.setMimeType(ContentService.MimeType.JSON);
  //JSONテキストをセットする
  output.setContent(JSON.stringify(result));
  return output
}

さきに、全体のコードを置いておきます。GASではGETを受け取る際は「doGet」、POSTを受け取る際は「doPost」と名前が決まっています。これは決まり事だと思って覚えましょう。

それでは、GETとPOSTそれぞれ分割して解説していきます。

GETメソッド

function doGet(e) {
  // 受け取り
  let name = e.parameter.name;
  let age = e.parameter.age;

  let value = "データがありません";
  if (name && age) {
    value = "あなたの名前は" + name + "さんで" + age + "歳なのですね。よろしくお願いします"
  }
  const result = {
    message: value
  }
  // 返信作成用定数
  const output = ContentService.createTextOutput();
  //Mime TypeをJSONに設定
  output.setMimeType(ContentService.MimeType.JSON);
  //JSONテキストをセットする
  output.setContent(JSON.stringify(result));
  return output;
}

GETメソッドでは、URLにパラメータを含めて送信します。そのパラメーターを取り出すのは、「e.parameter.****」部分になります。これは、GASでは決まり事なので要メモです。コメントの返信作成用定数からreturnまでは、決まっているのでこれも要メモです。コメントで補足はしていますが、何も考えずにコピーで問題ないと思います。

POSTメソッド

function doPost(e) {
  // PostData受け取り
  const data = JSON.parse(e.postData.contents);
  const name = data["name"];
  const age = data["age"];

  let value = "データがありません";
  if (name && age) {
    value = `あなたの名前は${name}さんなんやぁ～。${age}歳なんやね～`
  }
  const result = {
    message: value
  }

  // 返信作成用定数
  const output = ContentService.createTextOutput();
  //Mime TypeをJSONに設定
  output.setMimeType(ContentService.MimeType.JSON);
  //JSONテキストをセットする
  output.setContent(JSON.stringify(result));
  return output
}

POSTメソッドでは、URLはシンプルでデータをJSONに格納して送信します。そのパラメーターを取り出すのは、「JSON.parse(e.postData.contents)」です。これは、フロントエンド側がJSONとしてデータを送ってきた場合として有効な手です。昨今のAPIではJSONでデータをやり取りするのが主流ですので、この方法さえ覚えておけば問題ないと思います。要メモです！返信用のセクションに関しても、もう一度書いておきます。コメントの返信作成用定数からreturnまでは、決まっているので要メモです。コメントで補足はしていますが、何も考えずにコピーで問題ないと思います。

デプロイ

ここでは、デプロイをする方法を解説していきます。ここで注意点です。冒頭でもお話しましたが、セキュリティ的にとても弱いAPIを公開することになりますので、実際にサービスを運用する際は、検討に検討を重ねて検討士になってから公開してください。

では解説していきます。ステップとしては、3ステップで済みます。以下の図を示します。

• 右上のデプロイをクリック
• 歯車でウェブアプリのみを選択
• アクセスできるユーザーを「全員」に指定してデプロイをクリック

この手順でURLが発行されます。正しくデプロイが終了すると以下の画面が表示されると思います。このURLに対してGETとPOSTを送信するとAPIの挙動が確認できます。

APIの確認

さて、せっかく公開したAPIなので実際動くかの確認をしていこうと思います。便利なツールを使いましょう。今回使うツールは「Postman」です。インストールとログインが必要となりますので、インストールとログインをお願いします。使い方の説明は長くなってしまうので、別記事で解説しているものを用意します。こちらから。

GETの場合はKey-Valueを登録して送信、POSTの場合はJSONを含めて送信してください。参考のための図を置いておきます。URLは自分の発行したURLに変えて、パラメータは自由に変えてみてください。

GETの場合は以下の図を参考にしてください。

POSTの場合は以下の図を参考にしてください。

画面と同様の返信が返ってきた場合は、成功です。以上で全行程終了になります。お疲れ様でした。

終わりに

これにて、簡単なAPI構築が終了です。お疲れ様でした。「Google Apps Scriptシリーズ：初心者向け」は第4弾で終わりとなります。ここまでお付き合いいただいてありがとうございます。

「Google Apps Script」は、プログラミングを学び始めたときに使っていろいろ作った仲なのですが、お手軽にコードを書きたいときにもってこいですね。ネット環境さえあればどこでも書けるというのがポイントが高いところでもあります。これまでのシリーズを以下にまとめておきますね。

• Google Apps Script 導入 初心者向け
• Google Apps Script スプレッドシート編　初心者向け
• Google Apps Script 簡易データベース編　初心者向け
• Google Apps Script 簡易API編　初心者向け

これからも記事を書いていきますので、お付き合いよろしくお願いします。もし、僕に興味を持っていただけたら、ライトブログの方もご一読ください

About 龍：Ryu 107 Articles

2022年入社で主にフロントエンドの業務でTailwindと遊ぶ日々。お酒とうまいご飯が好きで、運動がちょっと嫌いなエンジニアです。しゃべれるエンジニアを目指しておしゃべりとブログ執筆に注力中（業務もね）//

Twitter YouTube