MIT App InventorのWebコンポーネントでSpreadsheetに値を書き込む

#目次

• MIT App Invenrorとは
• AppSheetではダメ？
• Webコントロール
• Spreadsheetの下準備
• GetメソッドでSpreadsheetに値を書き込む
• PostメソッドでSpreadsheetに値を書き込む

#MIT App Invenrorとは
Scratchのようなビジュアルプログラミングで、Androidアプリ（最近、iOSアプリも！）を開発できるサービスです。

日本語化プロジェクトも有志の方でされています。
今回は日本語版で以下記載します。

#AppSheetではダメ？
今回はSpreadsheetに値を書き込みますが、ノーコードで一番簡単に行う方法はAppsheetでアプリを作成する方法です。

しかしAppSheetは無料プランだと10名しか利用できない制限があるため、無料で多人数に使ってもらうアプリを開発するのは不可能です。

#Webコンポーネント
AppInventorには様々なコンポーネントがありますが、今回はSpreadsheetにアクセスするのに、Webコンポーネントを使用します。

#Spreadsheetの下準備
今回はSpreadsheetに書き込む処理自体はGoogle Apps Script（以降「gas」）で行い、App Inventorからはそれを呼び出す構成にします。
そのため、Spreadsheetを新規作成し、gasでdoGet関数とdoPost関数を作成します。

function doGet(e) {

  // パラメータを取得
  var param1 = e.parameter.pParam1;
  var param2 = e.parameter.pParam2;
  var param3 = e.parameter.pParam3;
  
  // スプレッドシートに書き込み
  WriteParamSpreadsheet(param1, param2, param3);
  
  return ContentService.createTextOutput("書き込み完了");
}

function WriteParamSpreadsheet(param1, param2, param3) {
  // スプレッドシートのIDを指定して変数に格納。
  var InfoSpreadsheet = SpreadsheetApp.openById('xxxxxxxxxxxxxx');
  
  // シート名を指定して変数に格納。
  var InfoSheet = InfoSpreadsheet.getSheetByName("シート1");
  
  // セルに書き込み
  InfoSheet.getRange("A1").setValue(param1);
  InfoSheet.getRange("A2").setValue(param2);
  InfoSheet.getRange("A3").setValue(param3);
 
}

function doPost(e) {

  // パラメータを取得
  var param1 = e.parameter.pParam1;
  var param2 = e.parameter.pParam2;
  var param3 = e.parameter.pParam3;
  
  // スプレッドシートに書き込み
  WriteParamSpreadsheet(param1, param2, param3);

  return ContentService.createTextOutput("書き込み完了");
}

gasが作成出来たら、「ウェブアプリケーションとして導入」します。

URLはApp Inventorで使用するので、コピーしておきます。

#GetメソッドでSpreadsheetに値を書き込む
ここからはApp Inventor側です。
下図のようなデザインにします。

ブロックは下図のようにします（ボタン１が「Getテスト」ボタンです。）。

URLには先ほど「ウェブアプリケーションとして導入」した際のURLの末尾に「?pParam1=書き込み１だよ&pParam2=書き込み２だよ&pParam3=書き込み３だよ」を付与しました。

#PostメソッドでSpreadsheetに値を書き込む
ブロックを下図のようにします（ボタン２が「Postテスト」ボタンです。）。

Getメソッドとは違い、Postメソッドのパラメータ値に日本語を使うときは、URIエンコードをしないとうまくいきませんでした。
【訂正】
（そのため、gasのdoPost関数でURIデコードしています。）
勝手にデコードするようです。
@youtoy さん　ご指摘＆多大なアドバイスおよび検証までありがとうございました！

実際の動きは下のようになります（デザインが若干違いますが）。

MIT App InventorでSpreadsheetに値を書き込むAndroidアプリを作ってみたけど、すごい簡単に出来る！#MITAppInventor pic.twitter.com/5TLXfRVcHK

— 福村浩治 (@fukumura_kaigo) March 10, 2021

このように、MIT App Inventorは簡単にスマホアプリを開発することができます。