220628 「Google AppSheet」タスク管理アプリをライブ作成 吉積情報伊藤さん

Transcript

1. Copyright(c) YOSHIDUMI Information, Inc. All Rights Reserved. 誰でもすぐに使える ノーコードツール 「Google AppSheet」 タスク管理アプリをライブ作成！
2. 2
 Copyright(c) YOSHIDUMI Information, Inc. All Rights Reserved. スピーカー詳細
 伊藤 勇斗 Ito Hayato 吉積情報株式会社 出身：多分千葉県 趣味：ゲーム全般 経歴：吉積情報株式会社にて、 Google Workspace関連の開発 業務に従事。Google Cloud Platformを活用したシステム開 発の他、Google Apps Scriptや AppSheet等を用いたアプリケー ション開発が得意。 sales@yoshidumi.co.jp https://www.yoshidumi.co.jp/ お問い合わせはこちらから AppSheetのライセンス販売や導入支援を行っています。 @ExistMikan
3. 3
 Googleが買収したノーコードアプリ作成ツール
 最速アプリ開発とタスク自動化を 可能とする強力なノーコードツール 自身で業務をスマート化 アプリ開発 タスク自動化 高度なインテグレーション 数多くのアプリケーション実績
4. 4
 アプリ作成の流れ
 1. データを接続します 2. アプリを編集します 3. アプリを展開します Copyright(c) YOSHIDUMI Information, Inc. All Rights Reserved.
5. 5
 アカウント作成は超簡単 (無料です)
 Copyright(c) YOSHIDUMI Information, Inc. All Rights Reserved. まずは https://www.appsheet.com/にアクセス。 右上のStart for freeをクリックします。 Google Driveのアイコンを クリックします。 appsheetで検索すると出てくる ↑からでもOKです
6. 6
 アカウント作成は超簡単 (無料です)
 Copyright(c) YOSHIDUMI Information, Inc. All Rights Reserved. Google ログインを促されるので、 お持ちのGoogleアカウント(gmail.com) でログインしてください。 AppSheetからのアクセスを許可すると 準備完了です！ 今日のデモを再現するために必要な準備もこ れだけです！
7. 7
 タスク管理アプリ デモ
 • 完成形の説明 • ゼロから作成 • 作成手順はスライドにもメモしてます 完了以外のタスクだけ出る画面 すべてのタスクが出る画面 ボタン一つでステータス切り替え
8. 8
 タスク管理アプリ 作成メモ
 • スプレッドシートを作成 ◦ 列名 : タスク名 / 詳細 / ステータス シート名 : タスク ◦ サンプル値 : リビングお掃除 / 掃除機を使って掃除する / 新規 • シートのメニューからアプリ化 • Data > Columns > ステータスを Enumに。Base typeはTextに。Input modeはButtonsに。選択肢は 新規, 処理中, 完了, 中止。initial valueを新規に • View > タスク > Summary column を ステータスに。 • Data > Slice > 完了以外 で作成し、conditionを [ステータス] <> “完了” に。 • UX > View > New View で残タスクを作成し、 For this data に 完了以外 (slice) を指定。deckビューとして positionをcenterに。Summary column をステータスに。 • UX > View > タスク の position を menu に。 • Behavior > Actions > New Action で 完了 で作成し、 Do this を Data: set the values of … にして ステータス = “完了” を設定する ◦ Appearance の Action icon を check-circle にする • UX > Brand で Primary color をオレンジに、 Header & Footer の Style を全面塗りに、 show view name..とshow logo..をONに。 • UX > Localize で Save を 保存に、 Cancel を キャンセルに • UX > Format Rules > New Format Rule で タスク名太字 を作成、 Format these … でタスク名のみにチェック、 Text Format で Text size : 1.5, Bold をチェック • UX > Format Rules > New Format Rule で ボタンの色かえるを作成、 Format these … で完了(action)のみにチェック、 Highlight colorで blueにチェック
9. 9
 タスク管理アプリ アドバンスデモ
 • 完成形の説明 • さっきの続きから作成 • 作成手順はスライドにもメモしてます フラグ付きのものだけ表示 期限日順に並べる 期限日をカレンダーで簡単表示 日時系データの自動登録
10. 10
 タスク管理アプリ アドバンス作成メモ
 • スプレッドシートに列追加 • 列名 : タスクID / 作成日時 / 更新日時 / 期限日 / 緊急 ◦ タスクIDはランダムな KEY列をつけるため。タスク名が変更できない点に対応。 ◦ 作成日時/更新日時は記録のため。自動的に記録される。 ◦ 期限日は並べ替えとカレンダービュー構築のため。 ◦ 緊急はYes/No形式と専用ビュー構築のため。 • Data > Columns > タスク > Regenerate Structure (列の変更を反映 ) ◦ タスクIDを Text, Show無し, search無し, initial value を uniqueId(), KEY列。 ◦ 作成日時を DateTime, initial value をnow(), editable無し ◦ 編集日時を ChangeTimestamp ◦ 期限日をDate, initial valueをtoday()+7 ◦ 緊急度をYes/No 期限周り • UX > Views > 残タスク > card, large, Title goes hereを期限日に , Subtitleをステータスに , Headerはタスク名, long pieceは詳細、右端のアイコンは完了 ◦ Sort by を 期限日 Ascending にする • UX > Views > NewViewで期限カレンダーを作成、 For this dataはタスク、view typeはcalendar、positionはright most、start date と end date を期限日に。 Iconをcalendarに。 • UX > Format Rules > New Format Ruleで期限切れを作成、 conditionは AND([期限日]<TODAY(),[ステータス]<>”完了”), Formatは全部, Text colorを赤に, Text Sizeは1.5でboldチェック 緊急周り • Data > Slices > New Sliceで 緊急を作成、 conditionはAND([緊急],[ステータス]<>"完了") • UX > Views > NewViewで緊急を作成、緊急 (slice)指定で、deckビュー。positionはleft most。Iconはexclamation-circle。