Google Appsheet Web

アプリ開発のデモ - 15倍速で Preview 03:19

どのようにアプリを開発していくのか15倍速で再現してみます。

Dynalistの使い方 Preview 02:57

このコースのレジメはDynalistというアプリで 作っています。

そのDynalistの使い方を簡単に紹介します。

AppSheetのメリット・デメリット Preview 03:38

アップシートを使ったアプリ開発のメリットデメリットを解説します。

AppSheetってなに？ Preview 07:27

そもそもアップシートとは一体何なのか?

• 何ができるのか

• お金がかかるのか

• どのようにアプリ開発を進めていくのか

• アプリの構造はどうなっているのか

といったことを解説いたします。

このコースで身に付くこと Preview 04:48

このコースで何が学べるかをお話しいたします。

AppSheet開発の流れ Preview 01:37

このコースでどのような機能を使ってアプリを開発していくのか、どのような流れで開発を進めていくのかを解説いたします。

体重データをスプレッドシートにインポートしよう Preview 05:51

Googleスプレッドシートに大樹のデータをインポートします。

このデータを使ってアップシート開発を進めていきます。

なお、このデータは私が7年間かけて実際に計測したリアルなデータです。

AppSheetのアカウント登録しよう Preview 01:25

まずはアップシートのアカウントを作りましょう。

無料で作ることができます。

拡張機能 Google翻訳を使ってアプリ開発をしよう Preview 01:24

アップシートの開発画面は全て英語です。

しかしGoogle翻訳を使えば問題なく開発できるようになります。

さっそくアプリを作ってみよう Preview 02:09

早速アプリを作ってみましょう。

ほぼマウスをクリックするだけで開発をスタートできます。

アップシート開発画面の見方を覚えよう Preview 06:34

アプリ開発画面の見方を解説いたします。

KEYとREQUIREの設定 Preview 04:34

KEYとは行を一意に特定するための値で、データベースには必須の概念です。

REQUIREは入力必須項目の設定です。設定しなくてもアプリを使えますが、設定することで適切にデータ管理できるようになります。

データ型の設定 Preview 06:48

データ型はアプリに「このデータはどういうデータ」を教えてアプリの動きを制御するための設定です。

適切に設定しないと希望どおりの動きにならないのでしっかり理解しておきましょう。

ラベルの設定 Preview 01:44

ラベルとはグラフ表示などユーザーが目にする部分で表示される目印のようなものです。

適切に設定することで使い勝手が良くなります。

書式設定 - 体重 Preview 10:24

• +-ボタンを押したときの増減値

• 入力できる最大・最小値の設定

• 初期値の設定

• 小数点何桁まで表示するか？

を設定します。

書式設定 - 日付 Preview 02:42

新規データを追加したときに「今日の日付」を初期値にしてみます。

入力の一手間を省けるようになるので使い勝手が良くなります。

_RowNumberとは Preview 02:44

_RowNumbeとは「何行目」を表す値です。

この値は使えば一つ前の体重を取得するなど、応用が効くようになります。

連携に適した表の作り方 Preview 06:23

グーグルスプレッドシートの表を適切な形にしないとAppSeetとうまく連携できません。

適した形、適さない形を学びましょう。

復習問題 小数点表示設定 Preview 02:09

UI開発イントロ Preview 02:51

UI開発はメインディッシュです。

「アプリ作ってるぜ」という感じになります。

一覧画面を作ろう Preview 08:58

表形式で全データを閲覧できる画面を作ります。

データの並び順、列幅などを設定します。

全期間の体重推移グラフを作ろう Preview 04:05

全期間のデータでグラフを作ります。マウスポチポチだけで作れます。

驚くほど簡単です。

ダッシュボード画面(一覧+グラフ)を作ろう Preview 02:14

ダッシュボードとは2つのUIを同時に表示する画面です。

これもマウスポチポチだけでできます。

カレンダービューを作ろう Preview 03:53

カレンダービューではその日に書いたメモを表示することができます。

最新30データを抜き出す式を入力してみよう Preview 12:59

_RowNumberとMAX関数を使って最新30データのみを抜き出す式をつくります。

理屈がわかれば簡単です。

スライスしたデータを どのように表示するか設定をしよう Preview 02:08

スライスしたデータをどのように表示するのかといった設定を行います。

スライスしたデータでグラフを作ろう Preview 02:50

グラフを作るときにスライスしたデータを指定すればそのデータでグラフを作れます。

アプリをスマホにインストールして 使ってみよう Preview 05:40

ここまで作ってきたアプリをスマホにインストールする手順を解説します

スマホにインストールするときの注意点 Preview 01:20

スマホにインストールするときにつまずきがちなポイントをいくつか紹介します

アプリ名とアプリの説明欄の設定をしよう Preview 04:28

ダークモード設定やテーマカラーを設定してみよう Preview 03:31

• テーマカラー

• アプリのアイコン

• ダークモード

• 読み込み画面

の設定をしてみましょう

フォント設定・シェアボタン・入力フォームの表示・テーブルの表示を設定してみよう Preview 05:57

• フォント設定

• シェアボタンの表示/非表示

• 入力フォームの表示設定

• テーブルビューの表示設定

といったアプリ全体に変わる設定をしてみましょう。

アプリのUIを日本語化しよう Preview 02:15

UIを日本語化してみましょう。

アップシートにはローカライズという項目が用意されており誰でも簡単に日本語化することができます。

入力データの反映(CRUD)を確認してみよう Preview 04:48

仮想列イントロ Preview 02:07

仮想列とは何か Preview 01:19

仮想列とはどのような機能なのか? 何をするために使うのか? を解説いたします

BMIを表示する仮想列を作ってみよう Preview 05:57

PMIを表示する仮想列を作り一覧画面に表示させましょう

仮想列を使った曜日表記① - TEXT関数 Preview 05:49

まずはテキスト関数の使い方から解説します。

テキスト関数を使って日付表記を少し変更してみましょう。

仮想列を使った曜日表記② - 英語で曜日表記 Preview 03:32

まずは英語で曜日を表記させてみます。

英語表記であればテキスト関数だけで実装することができます。

仮想列を使った曜日表記③ - 日本語で曜日表記 1 [WEEKDAY関数] Preview 02:54

日本語で曜日を表記するためには3つの関数を組み合わせる必要があります。

まずは 曜日を数値で返す関数、WEEKDAY関数の使い方を解説します。

仮想列を使った曜日表記④ - 日本語で曜日表記 2 [INDEX関数とLIST関数] Preview 05:09

WEEKDAY関数、INDEX関数、LIST関数を使って 日本語で曜日を表記させます。

少し複雑かもしれませんが、 関数を一つ一つ分解して理解し組み合わせれば理解が進むと思います。

曜日が併記された仮想列をラベルに設定してみよう Preview 02:24

ラベル設定するとグラフなどに曜日が併記された日付を表示することができてとても便利になります。

Enumを使って「今日の体調」を選択できるようにしてみよう Preview 05:31

Enumを使えばあらかじめ用意した選択肢からデータを選んで入力するという操作ができます。

この機能を使えば表記揺れを防いだり、入力の手間を省けたりと様々なメリットがあります。

月ごとにデータをグループ化して月ごとの平均体重を表示させてみよう Preview 04:14

グループ化機能を使えば月ごとの集計を行います。

月ごとに集計するために仮想列を使います。

脂肪の重量を表示する仮想列を作ってみよう Preview 05:21

体重と体脂肪率から脂肪の重量を計算して表示してみます。ここまでの知識を使えば簡単に実装できます。

Decimal関数と式Testの補足 Preview 02:15

式をテストしたときに表示される値とアプリで実際に表示される値が違うことがあります。

前回使ったデシマル関数も表記が違う場合に該当します。

前日比 - イントロ Preview 03:11

Lookup関数の使い方 Preview 04:34

ルックアップ関数はExcelのLookup関数とよく似ています。

この関数を使えば条件に合致したデータを取り出すことができます。

実際にLookup関数を入力してみよう Preview 05:24

実際にルックアップ関数をアップシートに入力し希望する値を取得できているかテストしてみます。

IF関数を使って前日比取得を微調整しよう Preview 05:28

AppSheetのIF関数はExcelのIF関数とよく似ています。

この関数を使って記録初日は前日比を0とし、それ以外は前日比を表示するようにします。

入力フォームのを微調整しよう Preview 04:40

ここまで作ってきた入力フォームは仮想列は入力フォームに表示する必要がないものがあります。

不要な仮想列を入力フォームから取り除くことですっきりします。

詳細画面を微調整しよう Preview 04:02

前回のレクチャーと同様に詳細画面も微調整します。

全データ用とスライスデータ用の2つを調整します。

体重を太字に、体調によって3種類の顔アイコンを設定しよう Preview 04:41

単純に掃除するだけなら非常に簡単です。

体調によって顔アイコンの表示を切り替えるには条件を指定する必要があります。どのように指定するか解説いたします。

BMIに応じた顔アイコンを設定してみよう Preview 05:16

BMIによって顔アイコンを切り替えるには不等号式とAND関数を使います。

AND関数を使ってどのように実装するか解説します。

前日より「増」か「減」か「同じ」か、でアイコンと色を切り替えて表示してみよう Preview 02:33

前日より増えたか減ったか同じかでアイコンと色を切り替え表示します。

ここまで学んできた知識を使えば実装できると思いますので復習問題とします。

画像アップロードイントロ Preview 02:08

画像アップロード機能の全体像 Preview 04:10

アップロードした写真はどこに保存され、どのように参照され表示されるのか全体の流れを解説します。

画像アップロード機能を実装しよう Preview 05:49

スプレッドシートに画像参照用の列を追加しアップシート側ではデータ型を設定します。

さらにアップロード時の画像サイズを設定します。

アップロードした画像をサムネイル表示してみよう Preview 08:02

サムネイル表示をアップギャラリービューと呼んでいます。簡単に実装できます。

画像と日付、体重、前日比、メモを同時に表示する「デッキビュー」を実装してみよう Preview 05:37

画像と一緒に同時に表示してみます。

何を食べたらどのぐらい体重は増えたか? 等データ分析に役立ちます。

画像アップロード時の説明文を日本語化してみよう Preview 01:34

目標設定UIイントロ Preview 02:53

スプレッドシートに目標設定用のシートを追加しよう Preview 04:15

目標設定シートとAppSheetを連携させよう Preview 06:38

目標閲覧画面と目標編集画面を実装しよう Preview 06:48

目標まであとどれくらい? グラフ実装しよう Preview 05:00

ハンバーガーメニューの並び順設定 Preview 01:28

デプロイとは何か Preview 02:12

デプロイとはアプリを公開することです。

より多くのユーザに使ってもらうための手続きです。

実際にデプロイしてみよう Preview 04:52

無料版ではいくつか制限があるので即デプロイ、というわけにはいきません。

どこに設定を加えればよいか解説します。

おわりに Preview 03:52