AppSheetでGoogleスプレッドシート用アプリを作る【GAS】

Googleが App Makerをあっさりシャットダウンすると共に買収したと公表した「AppSheet」。G Suiteの1アプリには未だになっていないものの、今後加わってくるだろうと思うこのアプリは、「ノーコードアプリ」と呼ばれる開発環境。ローコードではないので、一切スクリプトなどの記述は不要。

未だにUIが英語のままで現時点ではあくまでも他の会社のアプリそのもの。今後徐々に改良が加わっていくと思うこの環境を試しに使ってみました。現状ではGLIDEでの作成事例は日本語で割とあるものの、AppSheetに関しては僅かですね。

※雑感としてはこれは日本のIT企業じゃ作れないね、という程非常に細部に渡って開発に必要なものが用意されている印象でした。一番頑張ってるのは、Kintoneだけかな(結構な金額するけれど)。

※2023年7月25日より、Business Starter以上にCoreライセンスが付与され一定の制限の元無償で利用が可能になりました。

2023年アップデート Google Workspaceの新機能

今回使用するスプレッドシートとサンプル

※サンプルアプリは読み取り専用です。編集はできないようにしてあります。

また、AppSheetはAndroidアプリでも用意されていて、Public Appには既にいくつかのアプリがリリースされています。

図:アプリ版で見てみた様子

事前準備

AppSheetは、Google Spreadsheet、Box上のExcelファイル、DropBox、Salesforceなどに対応していて、ログインしたアカウントによって作れるものが決まるようです。今回は、G SuiteのアカウントでログインしてGoogle Driveのスプレッドシートを元に読み書きするアプリを構築します。

  1. AppSheetにアクセスして、「Start for Free」をクリックする(無料プランです)
  2. Start with your dataにて、何を土台に作るかを選ぶ。今回はGoogle Sheets & Formsを選びましょう。
  3. Googleアカウントでログインする
  4. アクセス権限を求められるので、許可をしてあげる。
  5. 事前に土台になるスプレッドシートにデータベースの設計とデータを入れておきましょう。

図:メジャーな環境に対応している

アプリを作ってみる

プロトタイプを作ってみる

まずは何も考えずに予め用意しておいたスプレッドシートを元にサクっと作ってみましょう。

  1. Quick Start画面に於いて、Make a New Appをクリックする
  2. Start with your Own dataをクリックする
  3. App Nameにアプリ名を入れる(但し現状日本語は入力できない)
  4. Categoryは近いものを選んでおく。なければOtherを選んでおく。
  5. Choose your dataをクリックする
  6. Google Driveのファイル選択画面になるので、用意しておいたスプレッドシートをselectする
  7. We're setting up your appの画面が出るので出来上がるまで待ってる
  8. Manage画面が開いて、これでもうアプリのプロトタイプは完成です。
  9. Chrome上で翻訳してる状態でも動作しました。。。なんか凄い

図:作成画面

アドオンから作ってみる

実は以前からGoogleスプレッドシートのアドオンとして提供されています。この方法は今後統合されていったらなくなってしまうと思いますが、記録の為に残しておきます。

  1. データの土台にするスプレッドシートを開く
  2. メニューより、「アドオン」⇒「アドオンを取得」をクリック
  3. G Suite Marketplaceが開くので、検索窓にAppsheetと入れて検索
  4. AppSheetが出てくるのでクリックする
  5. 通常は個別インストールを選ぶ。ドメイン全体に適用する場合には、ドメインインストールをクリック
  6. 権限要求されるので、続行をクリック
  7. ログインして、要求権限に対して「許可」を実行
  8. これで、スプレッドシートのアドインとしていつでも使えるようになりました。
  9. 再度「アドオン」⇒「AppSheet」⇒「Launch」を実行します。
  10. 右にサイドバーが出るので、Goボタンをクリックする
  11. 既に開発開始済みならその画面が出ます。そうでない場合には新規に作成する画面がスタートします。
  12. これでAppSheetでシームレスに開発が可能ですね。

図:G Suite Marketplaceで配布されている。

図:アドオンを実行した様子

各種設定

Info

ここでは、アプリケーションの大まかな概要やアプリ名等などを設定します。主に使いそうな項目は

  • PropertiesタブおよびErrorタブ
  • アプリの名前やバージョン(バージョンはGoogle Spreadsheetのように版を重ねることが可能
  • ReadmeとなるようなPDFの指定
  • 個人利用かどうか?のチェック
  • Google Drive上の配置先フォルダのパス指定(デフォルトではルート直下にappsheetフォルダが作成されます)
  • プライバシーポリシーの設定(右サイドにもアプリが受け取る情報について、ACCEPTを求められます

図:アプリのプロパティ設定を行う

Data

この項目は、連結するデータに関しての細かな設定を行う場所です。プロトタイプまで作った場合には、細かな変更だけが必要だと思います。

  • Tablesタブでは接続するシートの選択、キャプチャ画像の保存先指定、共有設定が主に設定する部分
  • 但し多くはFreeプランでは変更ができない。G Suiteに含まれたらこの辺が変わるんじゃないかなぁと。
  • フィルタして表示可能。例えば、タスク完了チェックの入っていないものだけ表示する等
  • 更新許可では、今回は外部向けを考慮して、Read Onlyを選択しておきました。
  • Columnタブでは、列として表示するかどうか?データの型、自動計算、更新する基準となる列(IDなどのユニークな列)
  • IDなどの列の場合、バーコードおよびNFCの入力先に指定が可能
  • IDなどの列はKey設定Databaseで言うところの主キー)をセットしておく

図:フィルターするのにsliceという機能もある

図:Google Driveに自動作成された保存データ

UX

ここはアプリのGUIに大きく影響与える非常に重要な項目です。右サイドバーのプレビューを見ながらどんなスタイルのアプリに仕上げるかを調整する場所になります。

  1. Viewsはまさに画面の見てくれを設定するもので、レコードタイプ、ギャラリータイプ、マップの表示などを設定します。
  2. 細かな調整項目で、データの並び替え、各レコードで表示するPrimary Header, Secondary Header, Summary Columnの設定は必須と言えます。
  3. 画面下部のFooterのアイコンやフッターに表示する項目の設定も行えます。
  4. 行選択時のアクションなどのアクション設定もここで行なえます。
  5. 複数のビューを入れる事でマルチページアプリケーションが実現可能です。
  6. Brandでは、ダークモードの設定、アプリのロゴ、背景画像などを指定することが可能です。
  7. Format Ruleは条件付き書式設定のようなものになります。項目が特定条件にヒットしてたらテキストの色変えるなどなど
  8. Optionsはシート名をヘッダに表示などなど非常に多くの設定項目があります。ここは必ず一度は目を通してアプリの体裁を整えましょう。
  9. Localizeはシステムメッセージ類をここで指定できます。日本で使うならここのワードを日本語に書き換えておくと良いでしょう。

図:UIの良し悪しはユーザが使ってくれる一番の要素です

Behavior

この項目はアプリのアクションに対する設定になります。例えば1行追加したら「○○を行う」といったような自動化機能。

  • Actionsがまさにそれで、ユーザの作業に対して続けるアクションを指定。メールを飛ばしたり、指定URLを開いたり。
  • Workflowはまだ詳細に調べていませんが、作業内容に対する承認とトランザクション処理?のようなものだと思われます。
  • Reportsは毎週定期的にアプリの状況に関するサマリーを送る設定です。
  • Offline/Syncは、オフラインでも使えるようにするか?また同期する為の設定です。今熱いPWAに関する項目ですね。

図:連動して動作させるのに重要な項目

Security

ここはとても重要な項目です。主に利用制限に関わる項目があります。

  • Require Sign-inでは利用する為にサインインを必要とするか?を設定します。限定公開ならばONにしましょう。
  • ただサインインしてさえすれば誰でも使えるという設定もあります。
  • サインイン不要の場合には、Yes, I am authorized to set up an insecure appをONにしないとデプロイできません。
  • この設定は、Usersの公開許可設定と合わせて設定する必要があります。
  • Security Filterはユーザによって同じシートでも表示するしない行を制御することが可能みたい。
  • Access ModeはHTML Serviceと似ています。アプリ作成者の権限で動かすか?ユーザの権限で動かすかを決めます。
  • ドメイン認証はActive Directoryかな?
  • Optionは画像やデータの暗号化などに関する項目です。上位プランで有効ということは、将来G Suite BasicとBusiness以上でこの辺りの利用可否が出てくるかもしれません。

図:通常はサインインすべしにするべきでしょう。

Intelligence

ここはなんだか先進的な機能があります。主な項目は以下の通り。でも機械学習ってその元になるデータを事前準備するのが大変。しかし、手軽に機械学習を扱う入り口にはなるかもしれませんね。決して今のGoogle系APIは素人で使えるものじゃないので。

  • 音声コマンドでの操作を可能にする機能(今の所英語とスペイン語のみ。この辺りもGoogle Assistantと連結するようになるでしょうね)
  • Predictive Modelsは、機械学習で予測を行う機能。そのためのデータ群に既存のシートを指定可能。ここもGoogleの機械学習APIと連結すると思われます)
  • OCR Modelsは、画像からデータをどうこうする機械学習かな。Cloud Vision APIと連結していくのではないかと。

図:先進的なAI的機能まで備わっているとは・・・

Users

ここは公開にあたってのURLや公開範囲の指定を行う場所です。個別メールアドレスやドメイン単位での公開許可を行うことが可能です。また、公開するアプリのURLをLinksで取得することが可能です。

  • Broadcast Notificationでは通知を送るときのタイトルや本文を指定可能
  • 今回は外部へ全公開予定ですが、Add entire Domainにて自分のドメインを追加しておきました。

図:社内で使うならドメイン単位で許可をしておくと良いですね

Manage

ここは初期に表示されるページですね。バージョン管理、アプリのオーナー移譲などが出来るようです。

  1. Team Workでは同僚と共同開発を出来るようにするかどうかを決められます。この辺りは、G Suiteとの相性が良さそうですね。
  2. Transferでアプリを他の人間にオーナー権限を移譲出来るみたい。
  3. VersionではGASの版を重ねて切り分けが可能になっています。
  4. IntegrationではタスクランナーサービスであるZapierとの連携設定があります。
  5. Deployは公開する為の事前チェック、テストの自動化、Whilte Label(ストアで公開するためのものらしい)
  6. Monitorではアプリの監査や利用状況などをモニタリング出来るようになっています。

図:充実した開発サービスが用意されてるのが凄い

公開する

HTML Service同様作っても公開しなければアプリとして使えません。アプリ自体はタブレットやスマートフォンにも最適化されているので、そのまま使えるようになっています。公開URLにアクセスするだけで利用が可能です。公開手順は以下の通り。

  1. Manageを開く
  2. Deployを開く
  3. Deployment Checkを開いて、Run Deployment Checkを実行
  4. PASSEDは問題なし。Warningはなるべく直したほうがいいよ。Errorは危険性あるよという項目になります。Errorとなっていても公開できないわけじゃありません。
  5. 一番下にある「More App to Deployed state despite errors」をクリックする
  6. Your App xxxx is deployedが出たら成功。
  7. UsersLinksに於いて、Browser Linkが公開URLになるので、これをお知らせしてあげたりする。

※最新版にしてるのになぜか反映しない・・・その場合以下の手順をもう一度実行してみましょう。

  1. ManageのDeployをやり直す
  2. VersionsのStable VersionにてShow all users the lastest versionをクリックする
  3. 改めてUsersのBrowser LinkのURLを開いてみる
  4. それでも駄目な場合、ブラウザのキャッシュが悪さをしていると思います。
  5. AndroidのChromeならば、右上の「︙」をクリック
  6. 「設定」⇒「プライバシー」の中にある「閲覧履歴データの削除」をクリック
  7. Cookieとサイトデータだけチェックをいれてデータを削除
  8. 再度URLにアクセスするとACCEPT要求されるのでクリック
  9. これで最新版になってるはずです。

図:テストを実施して状況確認

実際に使ってみる

公開URLにアクセスすると、プレビューと同じような感じで使えるようになっています。iframeでGoogle Sitesなどに埋め込むといった使い方もアリでしょう。現時点では複雑な挙動はまだまだできないようですが、主な使い方としては

  • Google Formsの吐き出すスプレッドシートにタスク管理の列追加してアプリ化
  • 連絡掲示板的なアプリを作って、Google Sitesに貼り付け

特に後者の場合これまでは、GASでしっかり作らなければいけなかった部分が殆どノーコーディングで実現できちゃうのが大きい。それをパーツで使えるので、ガジェット作成でまずは活躍できるんじゃなかろうか。前者は管理者がどんな申請が来ていて、まだ未完了なのか確認する為のビューアとして使えそうです。

また、ActionにてAppSheetから値を取得して、GAS側で用意したdoGetなどのURLを叩ければ、より高度なアプリが作れそうだなぁという印象。

元よりスマートフォン対応しているので、GPSやカメラ、QRコード、外部API実行などにも対応しているだけでなく、タップ以外にもスワイプでレコード移動や戻るボタンでのページ遷移、検索もきちんと対応してる。

今回、以前のGoogle Sitesの記事のサンプルに埋め込みで貼り付けてみました。こちらから確認することが可能です。モバイル向けの場合、埋め込む時の高さは気にする必要があります。

図:このGUI組むのって本当はとても大変です

図:一般ユーザは最初のアクセス時にポリシー承認表示が出ます。

関連リンク

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)