AppSheetを使ってアプリ製作【スプレッドシート編】

ノーコード開発ツールのAppSheet.

「AppSheetを使用して、アプリを作るにはどうしたらいいのか？」

ここでは、グーグルのスプレッドシートを読み込んでアプリを作成する流れを紹介します。

AppSheet

AppSheetは、ノーコードでアプリケーションを構築できる開発プラットフォームです。

2020年の1月にAppSheetをGoogleが買収し、Google Cloudのサービスの一つになりました。

コードを一切書かずにアプリが作れるノーコードアプリ開発ツールの一つが「AppSheet」です。

AppSheetの登録は別記事で解説していますので、参考にしてください。

⇒　AppSheetは無料で使える？登録方法

AppSheetでの、アプリ作業手順は、以下のようになります。

• スプレッドシートなどにデータを準備
• AppSheetがアプリを作成
• 改善、調整、アクション追加しカスタマイズ
• セキュリティー設定
• アプリのテスト
• アプリを共有

AppSheetを使用してノーコードでアプリを作り込んでいけるのが大きな特徴です。

AppSheetなら、プログラミング、コードを知らなくてもアプリを簡単に作ることができます。

ここでは、スプレッドシートを使用して、AppSheetでアプリを作成します。

AppSheetの使い方

AppSheetのMy Appsへ行きます。

ここではデータを呼び出します。

今回は、スプレッドシートを使用してアプリを製作します。

事前に作成したスプレッドシートを使用します。

作成した下記のシートをAppsheetに読み込んでアプリ化していきます。

今回作成するのは、「料理日記のアプリ」です。

作った料理の具材、レシピ、写真などをメモできるアプリです。

スプレッドシートの上部には項目を書き込み、２列目からデータを書き込みます。

作成したシートは、サンプルアプリのためデータ量は少なめで簡易的なものにしてあります。

AppSheetは、スプレッドシートを読み込むと、アプリを自動で作成してくれます。

アッという間に、シートがアプリに変わります。

このような画面が表示されました。

右側のスマホ画面には、地図が表示されアプリになっています。

このような流れで、簡単にアプリが作成できてしまいます。

アプリはエディタ画面で設定が行えます。

⇒　AppSheetの管理画面の詳細

Appsheetのアプリ

先ほど作成した同じデータをAppSheetで読み込んでみました。

何もせずに、シートを読み込んだだけの表示状態です。

白ベースでシンプルでスッキリした感じのアプリです。

アプリの詳細画面の表示

詳細画面もスッキリしていて見やすいです。

洗練された感じですが、少しさみしい感じもあるので、カラー調整をしてみます。

エディタの左サイドには、Info（情報）、Data（データ）、UX、Behavir（動作）、Security（セキュリティー）、Intelligence（知性）、User（ユーザー）、Manage（管理）があります。

画面の左側で切り替えて、設定・調整が行えます。

Data（データ）

Dataでは、テーブルの追加、プロパティの変更ができます。

• Tables：テーブル
• Columns：列
• Slices：スライス
• User Settings：ユーザー設定

UX

UXでは見た目、外観を変えれます。

UXには、ビュー、ブランド、書式ルール、オプション、ローカライズがあり、上部のタブで切り替えます。

ビューでは見え方を変えれます。

ビュータイプには、カレンダー、テーブル、マップ、チャートなどいろいろあります。

作りたいアプリに合わせて選択します。

ブランドでは、テーマ、カラー、アプリロゴ、起動時の画像、背景画像が変えれます。

カラーの変更など外観を決めることができます。

• Theme：テーマ
• Primary color：色
• App logo：アプリロゴ
• Launch image：起動画面
• Background image：背景画像

UXの一番下では、ヘッダーとフッダーの設定ができます。

カラーをイエロー系にして、画面の上部と下部も色付けしました。

このようなシンプルなアプリが完成しました。

アプリを公開するには、Manageを開いて、Deployチェックを行います。

問題なければ公開し、URLでアプリを確認できます。

今回は、Appsheetでスプレッドシートを使用してアプリの製作を行いました。

ノーコードツールのAppsheetを使用したアプリ作成の参考にしてください。

AppSheetの記事はこちら
⇒　AppSheetの登録方法
⇒　AppSheetの管理画面の使い方
⇒　GlideとAppSheetの比較