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

220906_誰でもすぐに使えるノーコードツール「Google AppSheet」タスク管理アプリをライブ作成!rev2_吉積情報_伊藤

comucal
September 06, 2022

220906_誰でもすぐに使えるノーコードツール「Google AppSheet」タスク管理アプリをライブ作成!rev2_吉積情報_伊藤

220906_誰でもすぐに使えるノーコードツール「Google AppSheet」タスク管理アプリをライブ作成!rev2_吉積情報_伊藤

comucal

September 06, 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. Copyright(c) YOSHIDUMI Information, Inc. All Rights Reserved.
    誰でもすぐに使える
    ノーコードツール
    「Google AppSheet」
    タスク管理アプリをライブ作成!
    Rev.2

    View full-size slide

  10. 10

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

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

    View full-size slide

  11. 11

    タスク管理アプリ アドバンス作成メモ

    ● スプレッドシートに列追加
    ● 列名 : タスクID / 作成日時 / 更新日時 / 期限日 / 緊急
    ○ タスクIDはランダムな KEY列をつけるため。タスク名が変更できない点に対応。
    ○ 作成日時/更新日時は記録のため。自動的に記録される。
    ○ 期限日は並べ替えとカレンダービュー構築のため。
    ○ 緊急はYes/No形式と専用ビュー構築のため。
    ● Data > Columns > タスク > Regenerate Structure (列の変更を反映 )
    ○ タスクIDを Text, Show無し, search無し, initial value を uniqueId(), KEY列, require?をon
    ○ 作成日時を 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 にする。subheader, action1,action2,ハートマークは Noneにする。
    ● 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