管理人がみんなに伝えたい!!と思った知識や学びを気ままに書いています(^^)

【初心者でも簡単】appsheetでTODOリストを作成する方法

【初心者でも簡単】appsheetでTODOリストを作成する方法

本記事はノーコードアプリ開発について全く知らなかった管理人が独学で勉強し、ここ大事!と感じた部分を記事にまとめています。

本ブログでは新UI画面で内容をまとめています。

新旧画面への切り替えは、下図を参考に該当アイコンをクリックしてください(^^)

新UI画面の説明

まずはじめに

本記事はこんな人におすすめ!!
  • appsheetでアプリ開発をした経験が少なく基礎を学びたい
本記事を読んで出来るようになること
  • アプリ開発手順の基本がわかる
  • 編集画面における各項目の名称がわかる

appsheetでのアプリ開発は、以下のステップが基本となります。

同期させる参照データを作成する

当ブログ記事では、主にGoogleスプレッドシートを参照データとして用います。

基本的にはこれ一択と考えて問題ありません!

カラムのデータタイプの設定をする

入力されている数字を文字列として扱うか? 数字として扱うか?を決めるようなものだと思ってください。

アクションボタンを作成する

あらかじめセットしていた登録値にデータを更新したり、外部サイトのURLにユーザーを誘導したりと「アプリでこういう機能が欲しい」は、全てこのアクションボタンで実装が可能です。

逆にここで仕組みを構築できないなら、appsheet以外の管理方法を検討するほうがいいです。

スライスを作成する

スライスとは、アプリで表示させるデータの対象範囲を決めるものだと思ってください。

ここを使いこなせるようになると、とても便利なアプリを作成することが可能です(^^)

Viewを作成する

実際のアプリに表示させる画面の設定です。

追加機能の検討(本記事では省略)
  • その日入力されたデータのログを残す
  • ある特定の条件を満たしたときに連絡を自動送信する

などの設定は、Automationで実装が可能です。

appsheetでの基本的なアプリ開発は、この流れに沿って行われます。

本記事の内容は、appsheetでアプリ開発をした経験が少ない人には丁度いい難易度だと思いますので、ぜひ参考にしてみてください。

それでは勉強していきましょう(^^)

appsheetでアプリ開発をしたことがない人は、まずこちらの記事を参考にしてください

参考記事

appsheetに取り込むデータを用意する

今回は下図の2つのテーブルを用意しました。

この記事ではかなり細かく手順を説明していますので、一つずつクリアしていってください(^^)

テーブル説明

まずは、スプレッドシートの1行目カラム値を入力してください。

下のタブをクリックすることで、それぞれのテーブルの説明に切り替わります。

TODOリストのデータシート

TODOリストのカラム(列)情報です。それぞれのカラムの意味するところ下図にまとめました。

TODOリストのカラム説明
アプリユーザーのデータシート

アプリユーザーのカラム(列)情報で、こちらはダミーデータを登録しています。

このシートには実際にアプリを使用する人のメールアドレスを入力します。

appsheetでアプリ開発を行うなら、Googleスプレッドシートを強く推奨します。
これを選んでおけば間違いはありません!

スプレッドシートの拡張機能からアプリを作成する

スプレッドシートからappsheetにデータを移行

スプレッドシートの場合は、拡張機能を使えば楽にアプリ作成画面に推移することが可能です。

データ読み込みの手順

もし拡張機能の項目がない場合は、アドオンを取得しておきましょう。

アドオンを取得する方法

拡張機能 → アドオン → アドオンを取得をクリックします。

AppSheetインストール方法

検索バーにAppsheetと入力し、赤枠と同じカードを選択します。


カラムのデータタイプの設定

appsheetにデータを取り込んだら毎回必ずやることが、カラムのデータタイプの設定です。
カラム名から推測してくれますが、手動での修正を強く推奨します。

必要なスプレッドシートの情報を渡す

テーブル情報をappsheetへ送る

appsheetに読み込ませたいデータシートが2つ以上ある場合

下図のような手順で、スプレッドシートのテーブル情報を取り込みます。

データ取得の方法1
データ取得の方法2

この手順はどのアプリでも必要になるので、必ず覚えておきましょう(^^)

データタイプの設定を行う

カラムのデータタイプ設定

データシートの読み込みが終わったら、各カラムのデータタイプの修正を行います。

ここの設定を間違えると実装したいアプリの動作が出来ないので、注意しましょう。

カラムにはデータタイプの設定のほかにShow?(いつ見せるか?)やValid if(入力値の制限)、Initial value(初期値)など様々な機能を実装できます。

データタイプの変更方法は、下図を参考にして変更してください。

データタイプの編集方法
IDカラム
IDカラムの設定
IDカラム初期値

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は等しくないとなります。
今回の場合は対応中ではない、つまりドラフトもしくは完了の意味となります。

条件式についてもっと学びたい人は、こちらの記事を参考にしてください

参考記事

手順は下図を参考にしてください。

完了アクションボタン作成

Action nameを完了Set these columnsにステータス:完了、完了日:today()と入力します。

完了アクションボタン発火条件

Only if this condition is trueに[ステータス]=対応中と入力します。


Sliceの設定

スライステーブルの説明

スライスは、表示したいデータのみをフィルターするものだと思ってください。

  • 先月分の情報だけ見たい
  • 自分が入力したデータだけを表示させたい

こういった願いを叶えるのがSlice(スライス)です。

スライスの設定に関してまとめている記事を紹介します

参考記事

スライスの設定は、データペインから行うことが可能です。

それぞれのステータスでスライステーブルを作成してみましょう。

新規スライス作成方法

+ボタンはTODOリストにカーソルを合わせて出現させます

スライス条件ードラフト

フィルター条件式にand([入力者]=useremail(),[ステータス]=ドラフト)と入力します。

この関数は、ステータスがドラフトのもの、かつTODOリストにデータを入力したのが自分であるものを表示データとして抽出 することを意味します。

スライス条件ー対応中

フィルター条件式にand([入力者]=useremail(),[ステータス]=対応中)と入力します。

スライス条件ー完了

フィルター条件式にand([入力者]=useremail(),[ステータス]=完了)と入力します。


アプリ画面のViewを作成する

view設定の説明

最後の仕上げとしてアプリ画面を作り込んでいきます(^^)

この記事では、ステータスがドラフトのものを表示させるViewの作成手順を代表でまとめました。

写真を参考にしつつ、設定をしてみてください。

ステータス別のView作成

ドラフトViewの作成
新規View作成方法
ドラフトViewの条件

Positionのrefはアプリ画面上では表示させない設定

For this dataにスライスを指定すると、条件式で抽出されたデータのみが表示される

deck Viewは特にモバイルで使用を想定するアプリとの相性がいい

ドラフトViewのオプション設定
ドラフトViewの詳細設定

残り2つのステータスについてもスライステーブルだけ変えて、同じ設定でViewを作成してみましょう(^^)

Dashboard(View)の作成

View typeのdashboardは複数のviewを1つの画面で表示させるViewになります。

dashboardの説明

先ほど作成したステータス別のViewと組み合わせることで、複数のViewを1つにまとめることが可能です。

Dashboard Viewの作成
ダッシュボードViewのオプション設定

新規登録(View)を作る

最後にタスクを登録するためのViewを作成します。

View typeのFormは、指定したテーブルに新規にデータを登録するためのViewです。
初期設定でViewの上にあるAddボタンと同じ機能です。

Form Viewの作成
フォームViewの作成方法

アプリの作成はこれで完了です!お疲れさまでした(^^)


アプリの挙動を確認

アプリ動作の検証

最後に完成したアプリの挙動を確認してみましょう!

この瞬間が開発者としては一番楽しみです(^^)

アプリの動作検証
データの新規登録

TODOリストにデータを登録します。

データの保存状態

新規に登録したデータはドラフトに入ります。

データ更新の説明

登録したデータを選択すると、上図のようなDetail画面になりアクションボタンが出現します。

ステータスの移行

ステータスの値が更新されたため、登録されたデータが右(対応中)に移動しています。


まとめ

無事にアプリの作成は出来たでしょうか?

本記事では以下の項目について触れました。

  • データタイプの設定
  • アクションボタンの作成
  • スライステーブルの作成
  • 新規Viewの作成

これらはどんなアプリでもまず使う項目です。

appsheet初心者の人は、当ブログ記事を読み漁っていくうちにある程度のレベルにまで上達できると思います。

記事内容について何かありましたらページ下にあるコメント欄からコメントをお願いします。

わかりにくかった部分や間違った情報などご指摘いただけると嬉しいです!

勉強お疲れさまでした(^^)

比較的簡単に作成できるアプリについてまとめた記事です

参考記事

コメントを残す

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

CAPTCHA