photo credit: Johan Larsson Angry Birds Adventskalender via photopin (license)
みなさん、こんにちは！
タカハシ(@ntakahashi0505)です。
Googleが提供するノーコードアプリ開発プラットフォーム「AppSheet」。本シリーズでは、超初心者向けのはじめてのアプリ作りについてお伝えしています。
前回の記事はこちら。
AppSheetで作成したアプリをスマホにシェアする方法をお伝えしました。
今回はその続きということで、スマホ版のAppSheetアプリからデータの編集と追加をする方法についてお伝えします。
では、行ってみましょう！
これまでのおさらい
まず、どのようなアプリを作ったかをおさらいしておきましょう。
今回のアプリは、以下のスプレッドシート「従業員データ」をもとに、AppSheetで自動作成したものそのまんまです。
このアプリ、スマホからはどんな操作ができるのでしょうか…？
というのを今回みていきましょう。
ちなみに、本記事ではiPhoneを例にしていますが、Androidでもほぼ同様で進められるはずです。
スマホでAppSheetアプリのデータを編集する
ではまず、スマホでAppSheetアプリのデータを編集する方法について見てみましょう。
「従業員データ」アプリを立ち上げた画面から開始します。
スプレッドシート上のデータがdeck view、つまりデッキ形式で表示されていますので、Bobさんのデータをタップしてみましょう。
すると、Bobさんのデータの詳細を表示するdetail viewに入るので、「編集」ボタンをタップしてみましょう。
フォーム入力が可能なform viewが開き、そこで編集を行うことができます。
EmailやHireDate、Activeと変更してみましょう。
日付型のデータはちゃんとカレンダー入力が可能ですね。便利。
編集が終わったら「Save」をタップします。
画面右上の「更新」アイコンにバッジがつき、データを同期中というのがわかります。
今、スプレッドシートのデータを変更しにいっているわけですね。
同期が完了すると「更新」アイコンのバッジが消えます。
スプレッドシートを確認してみると、ちゃんと編集した内容が反映されていることがわかりますね。
スマホでAppSheetアプリのデータを新規追加する
続いて、スマホのAppSheetでのデータ追加方法について見てみましょう。
ナビゲーションメニューの「シート1」から最初の画面に戻れます。
「＋」ボタンをタップして、データの新規追加をはじめましょう。
form viewが開きますので、Name、Email、HireDate、Activeを入力します。
画面の通り、Emailはちゃんとメールアドレスの形式で入力しないと「This entry is invalid」と弾かれてしまいますね。
入力制限も自動で付与されているわけです。有能。
「Save」をして保存をすると、「更新」アイコンにバッジがつきます。
しばらくすると消えて、同期が完了すると以下のようにスプレッドシートにも反映されます。
その他、検索や音声入力などの操作も、最初に触った人でも悩むことがないような易しい操作感で行えます。
残念なのは、「メール」アイコンをタップするとApple純正の「メール」を開こうとするといところ…Gmailがデフォルトになるのでしょうけど、早くお願いしたい。
まとめ
以上、スマホ版のAppSheetアプリからデータの編集と追加をする方法をお伝えしました。
AppSheetはUIもそもそもスマホ向け前提のようですし、モバイルファーストという感じしますね。
ちなみに本記事はiPhoneを使っていますが、Androidでもほぼ同様の操作で使用できるはずです。
次回は、アプリギャラリーやホーム画面への追加についてお伝えします。
どうぞお楽しみに！
連載目次：超初心者向け！はじめてのApp Sheetでアプリ作り
Googleが提供するノーコードアプリ開発プラットフォーム「AppSheet」。コードを一切書かずにアプリが作れる…ノンプログラマー的にはそんな素晴らしい技術は使わない手はないでしょう！本シリーズでは、その第一歩として超初心者向けのチュートリアルということで、AppSheetによるアプリ開発を体験していきます！- AppSheetとは何か？そしてそれを学ぶメリットと注意すべきポイントは？
- ノーコード開発プラットフォームAppSheetに無料でサインアップしよう
- AppSheetでスプレッドシートのデータから自動でプロトタイプアプリを作る手順
- AppSheetで自動作成されたアプリのデータ閲覧機能を眺めてみよう
- AppSheetで自動作成されたアプリのデータ追加＆編集機能を使ってみよう
- AppSheetで自動作成されたプロトタイプアプリのメニューを眺めてみよう
- AppSheetで無料で作成したアプリを初めてデプロイする手順
- AppSheetで無料＆自動で作成したアプリをスマホにシェアしよう！
- スマホ版のAppSheetアプリからデータの編集と追加をする方法
- スマホ版AppSheetのアプリギャラリーとホーム画面への追加方法
- AppSheetでプロトタイプアプリを作成する３つの方法
- AppSheetでアイデアを入力しながらプロトタイプを作る手順
- AppSheetでアイデアから作成したアプリのテーブルやカラムを眺めてみよう！
