ちょっと仕事とは関係ないのですがGoogleさんが提供しているノーコード開発ツール「AppSheet（アップシート）」を触る機会があったのでスプレッドシート作成〜スマホにアプリをインストールまでの手順を残しておきます。
Googleスプレッドシートからアプリをサクっと作ることができて、さらにクオリティが思ってたよりも高くて驚いてます！
■ スプレッドシート作成
■ スプレッドシートから作成されたアプリ
■ AppSheetでアプリを作成
■ テーブルやカラムの編集
■ 一覧の見た目を変更
■ 商品の詳細や編集画面の確認
■ スマホにインストール
■ アプリからデータ編集
■ さいごに
スプレッドシート作成
まずはスプレッドシートを作成。右上のGoogleアプリからスプレッドシートを選択し、空白のシートを作成。
今回は商品一覧のアプリを作ってみたいと思うので下記のような一覧を作成。画像は後から登録できるので今は空けておきます。
スプレッドシートから作成されたアプリ
先に完成したアプリ見せちゃいます。こんな一覧のアプリが作れちゃいます。そして追加や編集、削除ももちろんできますし、編集した内容は先ほど作成したスプレッドシートに反映されます。
いや、これ、すごくね！？。。。 AndroidとかiOSのネイティブアプリをKotlinとかSwift、.NET MAUIで作ろうと思ったらテストまで入れても1〜2週間は欲しいよw（え？かかりすぎ？まぁまぁ
それが5分とか10分でできちゃうとか。。。すごいです！
AppSheetでアプリを作成
ということで、作成手順に入りたいと思います。
最初に作成したスプレッドシートのメニュー 拡張機能 -> AppSheet -> アプリを作成と選んでいきます。
はい、これだけです。
ちょっと待つとAppSheetのHome画面が表示され、右側にアプリのイメージが表示されます。そして実際に動きも確認できます。
テーブルやカラムの編集
が、このままでは少し表示がおかしかったりするのでテーブルやカラムのタイプを変えていきましょう。
まぁテーブルは今回は更新、追加、削除すべてOKとするのでそのままにしておきますが許可するかはお好きなように変更できます。
デフォルトでは商品コードのタイプがPriceになっていたり、商品がキーとなっているのでその辺りを下記のように変更します。 画像もTextだったかな？になってるのでImageに変更しておきます。
これだけでそれっぽくなりました。
参考サイトは必須入力を外しておきます。カラム左の編集リンクをクリックして Data Validity -> Require? のチェックをOFFにします。
変更した内容は画面右上のSaveボタンで保存しておきましょう。
一覧の見た目を変更
左メニュー UX -> Views から gallery や card にタイプを変更してもいい感じででした。
商品の詳細や編集画面の確認
任意の行を選択します。
詳細画面が表示されます。
編集ボタンをクリックすると編集画面が表示されます。
あとは画像を登録して保存するだけ。今回は画像をアップロードしましたが、Web上にある画像のURLを指定しても問題なく表示されます。 その場合はわざわざ一つずつアップロードしなくてもあらかじめどこかにアップしておいてURLをスプレッドシートに最初から記入しておけばOKでラクですね。
スマホにインストール
さて、ここまで来たらあとは実機で確認したくなりますね。下記メールが届いていると思います。
このリンクからInstallするだけです。
インストールできました。
アプリからデータ編集
せっかくなのでアプリからもデータを編集してみましょう。
スプレッドシートを確認すると変更した内容が反映されています。
さいごに
いかがでしたか？プログラマーでなくてもアプリが作れちゃいますね。 ノーコード、思ってたよりもすごかった。。。 今回はGoogleスプレッドシートでしたがDB（SQL ServerやMySQL等）でもExcelでもできちゃうみたいです。 興味のある方はいろいろと触ってみてください。
以上、もりもりでした。
0 件のコメント:
コメントを投稿