Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

comucal

June 28, 2022
Tweet

More Decks by comucal

Other Decks in Technology

Transcript

  1. Copyright(c) YOSHIDUMI Information, Inc. All Rights Reserved.
    誰でもすぐに使える
    ノーコードツール
    「Google AppSheet」
    タスク管理アプリをライブ作成!

    View full-size slide

  2. 2

    Copyright(c) YOSHIDUMI Information, Inc. All Rights Reserved.
    スピーカー詳細

    伊藤 勇斗 Ito Hayato
    吉積情報株式会社
    出身:多分千葉県
    趣味:ゲーム全般
    経歴:吉積情報株式会社にて、
    Google Workspace関連の開発
    業務に従事。Google Cloud
    Platformを活用したシステム開
    発の他、Google Apps Scriptや
    AppSheet等を用いたアプリケー
    ション開発が得意。
    [email protected]
    https://www.yoshidumi.co.jp/
    お問い合わせはこちらから
    AppSheetのライセンス販売や導入支援を行っています。
    @ExistMikan

    View full-size slide

  3. 3

    Googleが買収したノーコードアプリ作成ツール

    最速アプリ開発とタスク自動化を
    可能とする強力なノーコードツール
    自身で業務をスマート化
    アプリ開発 タスク自動化 高度なインテグレーション
    数多くのアプリケーション実績

    View full-size slide

  4. 4

    アプリ作成の流れ

    1. データを接続します 2. アプリを編集します 3. アプリを展開します
    Copyright(c) YOSHIDUMI Information, Inc. All Rights Reserved.

    View full-size slide

  5. 5

    アカウント作成は超簡単 (無料です)

    Copyright(c) YOSHIDUMI Information, Inc. All Rights Reserved.
    まずは https://www.appsheet.com/にアクセス。
    右上のStart for freeをクリックします。
    Google Driveのアイコンを
    クリックします。
    appsheetで検索すると出てくる ↑からでもOKです

    View full-size slide

  6. 6

    アカウント作成は超簡単 (無料です)

    Copyright(c) YOSHIDUMI Information, Inc. All Rights Reserved.
    Google ログインを促されるので、
    お持ちのGoogleアカウント(gmail.com)
    でログインしてください。
    AppSheetからのアクセスを許可すると
    準備完了です!
    今日のデモを再現するために必要な準備もこ
    れだけです!

    View full-size slide

  7. 7

    タスク管理アプリ デモ

    ● 完成形の説明
    ● ゼロから作成
    ● 作成手順はスライドにもメモしてます
    完了以外のタスクだけ出る画面 すべてのタスクが出る画面 ボタン一つでステータス切り替え

    View full-size slide

  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にチェック

    View full-size slide

  9. 9

    タスク管理アプリ アドバンスデモ

    ● 完成形の説明
    ● さっきの続きから作成
    ● 作成手順はスライドにもメモしてます
    フラグ付きのものだけ表示 期限日順に並べる 期限日をカレンダーで簡単表示
    日時系データの自動登録

    View full-size slide

  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([期限日]”完了”), 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。

    View full-size slide