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

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

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

https://appinventor.mit.edu/

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

https://appinventor.tmsoftwareinc.com/

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

https://www.appsheet.com/

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

https://solutions.appsheet.com/pricing

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112682/1419cf9d-43a5-3ef4-73ae-2683985e08c9.png)

#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が作成出来たら、「ウェブアプリケーションとして導入」します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112682/0c951329-6bf8-17c2-32a2-e6bc63eca5bb.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112682/6040f5d2-28ca-68b2-e445-d260a64b381d.png)

#GetメソッドでSpreadsheetに値を書き込む
ここからはApp Inventor側です。
下図のようなデザインにします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112682/ec636be7-4036-f5cd-971b-c3db3c423b62.png)

ブロックは下図のようにします（ボタン１が「Getテスト」ボタンです。）。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112682/f94c90a4-223c-ff15-af06-93dd7fa877c5.png)

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

#PostメソッドでSpreadsheetに値を書き込む
ブロックを下図のようにします（ボタン２が「Postテスト」ボタンです。）。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112682/6cc2c4ce-e9c6-86f2-4005-8270651cbeed.png)

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

実際の動きは下のようになります（デザインが若干違いますが）。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">MIT App InventorでSpreadsheetに値を書き込むAndroidアプリを作ってみたけど、すごい簡単に出来る！<a href="https://twitter.com/hashtag/MITAppInventor?src=hash&amp;ref_src=twsrc%5Etfw">#MITAppInventor</a> <a href="https://t.co/5TLXfRVcHK">pic.twitter.com/5TLXfRVcHK</a></p>&mdash; 福村浩治 (@fukumura_kaigo) <a href="https://twitter.com/fukumura_kaigo/status/1369648642408124420?ref_src=twsrc%5Etfw">March 10, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

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