LoginSignup
9

More than 3 years have passed since last update.

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

Last updated at Posted at 2021-03-13

目次

  • 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コンポーネントを使用します。

image.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

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

image.png

GetメソッドでSpreadsheetに値を書き込む

ここからはApp Inventor側です。
下図のようなデザインにします。
image.png

ブロックは下図のようにします(ボタン1が「Getテスト」ボタンです。)。
image.png

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

PostメソッドでSpreadsheetに値を書き込む

ブロックを下図のようにします(ボタン2が「Postテスト」ボタンです。)。
image.png

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

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

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9