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

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

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

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

AppSheet

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

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

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

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

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


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

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


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

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

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

AppSheetの使い方

AppSheetのMy Appsへ行きます。

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

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

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

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


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

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

スプレッドシートに記入

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

使用した項目は、使用したのは、料理名、画像、材料、作り方、日付です。

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


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の比較

スポンサードリンク



コメントを残す

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