【保存版】初心者向け実務で使うためのApp Maker完全マニュアル

みなさん、こんにちは！
タカハシ(@ntakahashi0505)です。

App MakerはGoogleが提供をするとっても簡単にWebアプリケーションを開発することができるプラットフォームです。

ドラッグ＆ドロップとちょっとした操作で、データベースと連携したWebアプリケーションを作ることができます。

ベースはGoogle Apps Script（GAS）ですが、GASが苦手としていたUIとデータベースのところを、それはもう上手に補完するツールです。

このページは【初心者がApp Makerを使って便利なツールやアプリケーションを作れるようになる】ためのまとめ記事です。

このページをブックマークしつつ、App Makerでアプリケーション作成をするスキルを上げていくためのマイルストーンとしてご活用ください。

App Makerとは何か

準備として、App Makerとは何かについて知っておきましょう。以下記事にてまとめています。

• App Makerとは何か、またその超簡単なアプリケーション開発のイメージをお伝えします
• App MakerとGoogle Apps Scriptがアプリケーション開発の民主化を加速する

連載目次：はじめてのApp Maker～初心者向けチュートリアル～

Googleが提供するWebアプリケーション開発プラットフォーム「App Maker」。ドラッグ＆ドロップやクリック操作でページやデータベースを作成できます。この連載は、App Makerの操作感やアプリの作成イメージをつけていただくための、App Maker初心者向けのチュートリアルです。

1. 超初心者向けApp Makerでとっても簡単な初めてのWebアプリケーションを作ってみよう
2. 【初心者向けApp Maker】作成したアプリを開いてカスタマイズをしてみよう
3. 【App Maker】アラート表示を例にスクリプトの最初の一歩について解説します
4. App Makerでウィジェットの文字列を変更するスクリプトを解説します

連載目次：Cloud SQL＆App Makerアプリ開発のはじめかた

App Makerを使うならデータベースはGCPのCloud SQLが第一の選択肢になりました。そこで、ノンプログラマー向けにCloud SQLのはじめかた＆それによるApp Makerアプリの作り方を易しく丁寧にお伝えしていきます。

1. はじめてのCloud SQLによるApp Makerアプリ開発、その概要と経緯と道筋
2. Google Cloud Platform（GCP）に無料トライアル登録をする方法
3. G Suite管理コンソールからApp Makerのデータベース設定を行う方法
4. ノンプログラマー向けApp Maker用のCloud SQLのインスタンスを作成する方法
5. App Makerのデータベースとして作成したCloud SQLのインスタンスを設定する方法
6. App MakerではじめてのCloud SQLのモデルを作成する方法
7. App MakerでCloud SQLをデータベースとしたテーブルをページに配置する方法
8. App MakerでCloud SQLデータベースにデータ追加するフォーム作成する方法
9. App Makerがなぜ簡単にアプリを開発できるのか、その秘密を紐解く
10. はじめてのCloud SQLをデータベースとしたApp Makerアプリを公開する方法
11. App Makerで使い回しパーツを作るPage Fragmentを作成するはじめの一歩
12. App MakerでPage Fragmentによるヘッダーを各ページに配置する手順
13. App MakerのPopupページでナビゲーションメニューを作成する方法
14. App Makerでアプリを再公開して修正内容を反映する手順
15. App Makerでテストアプリを作成したらCloud SQLはいくらの課金が発生するのか？

連載目次：App Makerでスプレッドシートをデータベースとして使う

Googleが提供する社内アプリケーションを簡単に構築できるプラットフォームApp Maker。このシリーズでは、スプレッドシートをデータベースとして簡単なアプリケーションを作る方法をお伝えします。

1. App Makerでスプレッドシートをベースにモデルを作成する方法
2. App Makerでクエリスクリプトでスプレッドシートのデータを取得する方法
3. App Makerでスプレッドシートからデータを取得するクエリスクリプトを丁寧に解説
4. App Makerで新しいページとフォームウィジェットを配置する方法
5. App Makerでテーブル行をクリックしたらフォームを表示するイベントを設定する方法
6. App Makerでボタンウィジェットを設置してクリックで動作させる方法
7. App Makerでボタンクリックで独自のスクリプトを動作させる方法
8. App Makerでクライアントスクリプトからサーバースクリプトを呼び出す方法
9. App Makerのボタンクリックでスプレッドシートにアクセスする方法
10. App MakerでフォームウィジェットでLabelウィジェットを入力可能なウィジェットに差し替える
11. App Makerでフォーム上のデータを取得してサーバースクリプトに渡す方法
12. App Makerでフォームからデータベースとしてのスプレッドシートを更新する方法
13. App Makerで確認用のポップアップダイアログを作成する方法
14. App Makerでポップアップダイアログの表示の変更とバインディング式について
15. App Makerでポップアップのボタンクリックによるイベントを設定する
16. App Makerでポップアップダイアログのボタンで動作するレコード削除のスクリプト
17. App Makerでデータ追加用のポップアップを作成してその表示の動作確認をする
18. App Makerでデータベースにレコードを追加するスクリプトを作成する

連載目次：はじめてのモデル～AppMaker初心者向けチュートリアル～

初心者向けチュートリアルの第２弾。このシリーズではApp Makerで「モデル」を作成してデータベースと連携したフォームやテーブルの設置の仕方について体験をします。

1. App Makerでデータベースを作成する「モデル」への最初の一歩
2. App Makerでアプリに簡単なフォームとテーブルを設置する
3. App Makerのウィジェットにデフォルトで仕込まれているバインディングとアクションが超ありがたい

連載目次：はじめてのスタイル～AppMaker初心者向けチュートリアル

初心者向けチュートリアルの第３弾。このシリーズではApp Makerで作成したアプリのウィジェットに、好みのスタイルを設定する方法についてお伝えしていきます。

1. App Makerのスタイルの基本とテーマを使って全体のスタイルを変更する方法
2. App Makerでウィジェットごとにバリアントを設定してスタイルを変更する方法
3. App MakerのスタイルエディタでCSSを記述してスタイルを変更する方法
4. App Makerでウィジェットのスタイルを変更するいくつかの方法をまとめて紹介します
5. App Makerで外部CSSファイルでスタイルを設定する方法と適用の優先順位

連載目次：初心者向けApp Makerチュートリアル【スクリプト編】

初心者向けチュートリアルの第４弾。このシリーズではメール送信アプリを題材に、App Makerでクライアントスクリプトとサーバースクリプトの使い方をお伝えしていきます。

1. App Makerでメール送信するアプリを作成する最初の手順
2. App Makerのスクリプトエディタにクライアントスクリプトを入力する
3. App Makerでクライアントスクリプトからサーバースクリプトを呼び出す方法
4. App Makerでサーバースクリプトを仕込んでメールを送信する

連載目次：初心者向けApp Makerチュートリアル【リレーション編】

初心者向けチュートリアルの第５弾。このシリーズでは従業員データ管理アプリを題材に、App Makerのデータモデル間のリレーションについて、またそれを作成をお伝えしていきます。

1. App Makerでデータモデル間のリレーションを作成する
2. App Makerでデータモデルへのデータ入力用のページとフォームを作成する
3. App Makerでリレーションをデータソースとしたテーブルの設置方法
4. App Makerでクエリフィルタを使ってデータソースにフィルタをかける方法