kの雑記ブログ本記事はノーコードアプリ開発について全く知らなかった管理人が独学で勉強し、ここ大事！と感じた部分を記事にまとめています。
本ブログでは新UI画面で内容をまとめています。
新旧画面への切り替えは、下図を参考に該当アイコンをクリックしてください(^^)
まずはじめに
- appsheetでアプリ開発をした経験が少なく基礎を学びたい人
- アプリ開発手順の基本がわかる
- 編集画面における各項目の名称がわかる
appsheetでのアプリ開発は、以下のステップが基本となります。
当ブログ記事では、主にGoogleスプレッドシートを参照データとして用います。
基本的にはこれ一択と考えて問題ありません！
入力されている数字を文字列として扱うか？ 数字として扱うか？を決めるようなものだと思ってください。
あらかじめセットしていた登録値にデータを更新したり、外部サイトのURLにユーザーを誘導したりと「アプリでこういう機能が欲しい」は、全てこのアクションボタンで実装が可能です。
逆にここで仕組みを構築できないなら、appsheet以外の管理方法を検討するほうがいいです。
スライスとは、アプリで表示させるデータの対象範囲を決めるものだと思ってください。
ここを使いこなせるようになると、とても便利なアプリを作成することが可能です(^^)
実際のアプリに表示させる画面の設定です。
- その日入力されたデータのログを残す
- ある特定の条件を満たしたときに連絡を自動送信する
などの設定は、Automationで実装が可能です。
appsheetでの基本的なアプリ開発は、この流れに沿って行われます。
本記事の内容は、appsheetでアプリ開発をした経験が少ない人には丁度いい難易度だと思いますので、ぜひ参考にしてみてください。
それでは勉強していきましょう(^^)
appsheetでアプリ開発をしたことがない人は、まずこちらの記事を参考にしてください
DataペインやUXペインなど、appsheetでアプリ開発をする際に知っておかなくてはいけない項目をまとめています(^^)
【まずはここから】抑えるべきappsheetの基本項目
appsheetでアプリ開発をするときに意識しておくといいことをまとめています(^^)
【手順を公開】appsheetでアプリ開発を行うコツ4つを解説
appsheetに取り込むデータを用意する
今回は下図の2つのテーブルを用意しました。
この記事ではかなり細かく手順を説明していますので、一つずつクリアしていってください(^^)
まずは、スプレッドシートの1行目にカラム値を入力してください。
下のタブをクリックすることで、それぞれのテーブルの説明に切り替わります。
TODOリストのカラム（列）情報です。それぞれのカラムの意味するところ下図にまとめました。
アプリユーザーのカラム（列）情報で、こちらはダミーデータを登録しています。
このシートには実際にアプリを使用する人のメールアドレスを入力します。
appsheetでアプリ開発を行うなら、Googleスプレッドシートを強く推奨します。
これを選んでおけば間違いはありません！
スプレッドシートの拡張機能からアプリを作成する
スプレッドシートの場合は、拡張機能を使えば楽にアプリ作成画面に推移することが可能です。
もし拡張機能の項目がない場合は、アドオンを取得しておきましょう。
拡張機能 → アドオン → アドオンを取得をクリックします。
検索バーにAppsheetと入力し、赤枠と同じカードを選択します。
カラムのデータタイプの設定
appsheetにデータを取り込んだら毎回必ずやることが、カラムのデータタイプの設定です。
カラム名から推測してくれますが、手動での修正を強く推奨します。
必要なスプレッドシートの情報を渡す
appsheetに読み込ませたいデータシートが2つ以上ある場合、
下図のような手順で、スプレッドシートのテーブル情報を取り込みます。
この手順はどのアプリでも必要になるので、必ず覚えておきましょう(^^)
データタイプの設定を行う
データシートの読み込みが終わったら、各カラムのデータタイプの修正を行います。
ここの設定を間違えると実装したいアプリの動作が出来ないので、注意しましょう。
カラムにはデータタイプの設定のほかにShow？（いつ見せるか？）やValid if（入力値の制限）、Initial value（初期値）など様々な機能を実装できます。
データタイプの変更方法は、下図を参考にして変更してください。
ID(Key値)のShow?のチェックをはずし、Initial valueにUNIQUEID()関数を入力します。
この設定は、appsheetにおいて最適設定の1つです。ぜひ覚えておきましょう(^^)
Enumは選択肢をあらかじめ用意しておくことでデータ入力の補助を行います。
入力されるデータをクリーンな状態に保つことに適しています。
today()関数は本日の日付を自動で取得します。必ず覚えておきましょう(^^)
Initial valueをtoday()+3とすることで、本日から3日後の日付を自動で取得します。
アプリ使用者のマスターテーブルを作成し、Type:Refで入力者カラムを作ります。
入力者カラムのInitial Valueに、USEREMAIL()と関数を入力します。
この設定は、appsheetにおいて最適設定の1つです。これもぜひ覚えておきましょう(^^)
TODOリストのデータタイプの設定はこれで完了です。お疲れさまでした(^^)
アプリユーザーテーブルのKey値をemail、LABELを名前にします。
これはappsheetの最適設定の1つなので、ぜひこれを機に覚えておきましょう(^^)
Actionボタンの作成
次にTODOリストにあるステータスの状態を移行させるアクションボタンを作成します。
ステータスの状態として、ドラフト、対応中、完了の3つに分けたいと思います。
アプリ開発に慣れていない人は、まずは記事に書かれている内容をそのまま真似してみてください。
手順は下図を参考にしてください。
このアクションボタンでステータス：対応中のものをドラフトに戻すことができます(^^)
手順は下図を参考にしてください。
Action nameを対応中、Set these columnsをステータス:対応中と入力します。
Only if this condition is trueに[ステータス]<>対応中と入力します。
“A=B”（イコール）の代わりに “A < > B”（不等号）を使用するとAとBは等しくないとなります。
今回の場合は対応中ではない、つまりドラフトもしくは完了の意味となります。
条件式についてもっと学びたい人は、こちらの記事を参考にしてください
appsheetで問われることが多いYes/Noの条件式で、これだけは覚えておいたほうがいいと思う関数をまとめています(^^)
【永久保存版】appsheetで覚えておくべきYes/No関数
手順は下図を参考にしてください。
Action nameを完了、Set these columnsにステータス:完了、完了日:today()と入力します。
Only if this condition is trueに[ステータス]=対応中と入力します。
Sliceの設定
スライスは、表示したいデータのみをフィルターするものだと思ってください。
- 先月分の情報だけ見たい
- 自分が入力したデータだけを表示させたい
こういった願いを叶えるのがSlice（スライス）です。
スライスの設定に関してまとめている記事を紹介します
appsheetでアプリ開発をするときによく使うスライスの条件式についてまとめています(^^)
【永久保存版】汎用性の高いスライスの設定5選
「1週間」や「1か月」など、特定の期間でデータを抽出したいときに入力する関数についてまとめています(^^)
【これで解決！】eoweek()関数とeomonth()関数の使い方
スライスの設定は、データペインから行うことが可能です。
それぞれのステータスでスライステーブルを作成してみましょう。
＋ボタンはTODOリストにカーソルを合わせて出現させます
フィルター条件式にand([入力者]=useremail(),[ステータス]=ドラフト)と入力します。
この関数は、ステータスがドラフトのもの、かつTODOリストにデータを入力したのが自分であるものを表示データとして抽出 することを意味します。
フィルター条件式にand([入力者]=useremail(),[ステータス]=対応中)と入力します。
フィルター条件式にand([入力者]=useremail(),[ステータス]=完了)と入力します。
アプリ画面のViewを作成する
最後の仕上げとしてアプリ画面を作り込んでいきます(^^)
この記事では、ステータスがドラフトのものを表示させるViewの作成手順を代表でまとめました。
写真を参考にしつつ、設定をしてみてください。
ステータス別のView作成
Positionのrefはアプリ画面上では表示させない設定
For this dataにスライスを指定すると、条件式で抽出されたデータのみが表示される
deck Viewは特にモバイルで使用を想定するアプリとの相性がいい
残り2つのステータスについてもスライステーブルだけ変えて、同じ設定でViewを作成してみましょう(^^)
Dashboard(View)の作成
View typeのdashboardは複数のviewを1つの画面で表示させるViewになります。
先ほど作成したステータス別のViewと組み合わせることで、複数のViewを1つにまとめることが可能です。
新規登録（View）を作る
最後にタスクを登録するためのViewを作成します。
View typeのFormは、指定したテーブルに新規にデータを登録するためのViewです。
初期設定でViewの上にあるAddボタンと同じ機能です。
アプリの作成はこれで完了です！お疲れさまでした(^^)
アプリの挙動を確認
最後に完成したアプリの挙動を確認してみましょう！
この瞬間が開発者としては一番楽しみです(^^)
TODOリストにデータを登録します。
新規に登録したデータはドラフトに入ります。
登録したデータを選択すると、上図のようなDetail画面になりアクションボタンが出現します。
ステータスの値が更新されたため、登録されたデータが右（対応中）に移動しています。
まとめ
無事にアプリの作成は出来たでしょうか？
本記事では以下の項目について触れました。
- データタイプの設定
- アクションボタンの作成
- スライステーブルの作成
- 新規Viewの作成
これらはどんなアプリでもまず使う項目です。
appsheet初心者の人は、当ブログ記事を読み漁っていくうちにある程度のレベルにまで上達できると思います。
記事内容について何かありましたらページ下にあるコメント欄からコメントをお願いします。
わかりにくかった部分や間違った情報などご指摘いただけると嬉しいです！
勉強お疲れさまでした(^^)
比較的簡単に作成できるアプリについてまとめた記事です
個人でお気に入り登録しているURLをCard Viewを用いて表示する方法をまとめました(^^)
【初心者におすすめ】appsheetで簡単に作成できるアプリ
チームで働いている人向けに、行き先ボードをappsheetで作ってみました(^^)
【アプリ開発】行き先掲示板のアプリを作る方法