glideで学ぶデータベース

はじめに…

Glideは「ノーコード」と言えども、データベースの知識が無いともったいない！！

ということでGlideでデータベースの使い方をまとめてみました。

目次

1. サンプルアプリの説明

2. Step1 テーブルを作ろう

   1. テーブルごとの役割
   2. 列の役割と型

3. Step2 データとレイアウトを繋げよう

   1. どこにどのデータがあるのか
   2. 複雑なデータの動き

4. Step3 テーブル同士を繋げよう

   1. 「繋げる」のイメージ
   2. なぜ繋げるのか

1. サンプルアプリの説明

• サンプルアプリ：https://planetdb.glide.page

• アプリの概要：太陽系の星の解説

  • トップページ
    太陽系の代表的な星が並んでいる。星が押せるようになっている。
    
  • 星を押した後（例：水星）
    星の情報が並んでいる。
    
  • 「画像を変更」を押した後
    画像をイラストと写真の交互に変更させることができる。
    
  • 「この星の種類を詳しく見る」を押した後
    星の種類についての説明とそれに区分される星が並んでいる。
    

Step1 テーブルを作ろう

1. どこにどのデータがあるのか

テーブルの種類

• Planetsテーブル：星それぞれに関するテーブル
• Categoriesテーブル：星の種類に関するテーブル

2. 列の役割と型

Planetsテーブル

列名	型	説明
planet_name	Text	星の名前
planet_english_name	Text	星の英名
planet_image_illustration	Image	星のイラスト
planet_image_photo	Image	星の写真
planet_category	Text	星の種類
planet_distance	Number	太陽からの距離（単位なし）
planet_distance_txt	Template	太陽からの距離（単位あり）
planet_weight	Number	重さ（単位なし）
planet_weight_txt	Template	重さ（単位あり）
planet_temperature	Number	表面温度（単位なし）
planet_temperature_txt	Template	表面温度（単位あり）
planet_size	Number	直径（単位なし）
planet_size_txt	Template	直径（単位あり）
categories_relation	Relation	Categoriesテーブルと繋げる
click_num	Number	クリック回数
tf_num	Math	クリック回数が偶数回か奇数回か
now_image	If→Then→Else	クリック回数が偶数回ならイラスト、奇数回なら写真

Categoriesテーブル

列名	型	説明
categories_name	Text	種類の名前
planet_english_name	Text	種類の英名
category_explanation	Text	種類の説明
planet_relation	Relation	Planetsテーブルと繋げる

Step2 データとレイアウトを繋げよう

1. どこにどのデータがあるのか

• トップページ
  
  それぞれの星のカードには日本語（planet_name）と英語（planet_english_name）の星の名前とイラスト（planet_image_illustration）の画像が表示される。
  

• 星を押した後（例：水星）
  

  • 星の名前：赤色の部分
    日本語（planet_name）と英語（planet_english_name）の星の名前と今のクリック数に応じた画像（now_image）を表示する。
    

  • 画像の変更：緑色の部分
    クリック数（click_num）に1加算する。
    

  • 星の種類：青色の部分
    左）星の種類（planet_category）を表示する。
    
    右）星の種類の情報（categories_relation）を表示する。
    

  • 星の情報：紫色の部分
    4つの情報を表示する。
    太陽までの距離：planet_distance_txt
    重さ：planet_weight_txt
    表面温度：planet_temperature_txt
    直径：planet_size_txt

• 「この星の種類を詳しく見る」を押した後
  

  • 星の種類の名前：赤色の部分
    日本語（category_name）と英語（category_english_name）の星の種類の名前を表示する。
    

  • 星の種類の説明：緑色の部分
    星の種類の説明（category_explanation）を表示する。

  • 同じ星の種類の星：青色の部分
    それぞれの星のリストには日本語（planet_name）と英語（planet_english_name）の星の名前とイラスト（planet_image_illustration）の画像が表示される。
    

2. 複雑なデータの動き

クリック数に応じて画像を動的に変更する　～偶数回の時はイラスト、奇数回の時は写真を表示する～

やり方

1. クリック数をカウントする
2. クリック数が偶数か奇数かを見る
3. 画像を分岐させる
4. 画像を表示する

1. クリック数をカウントする

「画像を変更」ボタンの設定

ボタンを押すと今表示中の行のclick_numに1加算する。

2. クリック数が偶数か奇数かを見る

tf_num列の設定

※click=click_numとする
mod(click,2)　→　clickを2で割った余りをtf_numに入れる。
= clickが偶数の時0、奇数の時1を入れる。

3. イラストを分岐させる

now_image列の設定

tf_numが0の時（=click_numが偶数の時） → planet_image_illustration（イラスト）を入れる。
tf_numが1の時（=click_numが奇数の時） → planet_image_photo（写真）を入れる。

4. 画像を表示する

画像の設定

now_imageを表示する。

Step3 テーブル同士を繋げよう

1. 「繋げる」のイメージ

一言で言うと…一括管理
情報の中で一括管理したほうが良い時は別のテーブルに分けてそれ同士を繋げたほうが良い

2. なぜ繋げるのか

サンプルアプリの例
例）やりたいこと：星の種類の説明を編集したい

• PlanetsテーブルとCategoriesテーブルを分けていない場合
  Planetsテーブル（category_explanationに誤字）

  planet_name	planet_category	category_explanation
  太陽	恒星	自ら光を発している星
  水星	地球型惑星	"恒星の周りをまわっている星 密度が大きい惑星"
  金星	地球型惑星	"公正の周りをまわっている星 密度が大きい惑星"
  木星	地球型惑星	"構成の周りをまわっている星 密度が大きい惑星"
  金星	地球型惑星	"後世の周りをまわっている星 密度が大きい惑星"
  …	…	…

  1. category_explanationの誤字を探す
  2. 1つずつ誤字を直す

→　誤字を直すのに手間がかかる＆また間違える可能性が大きい

• PlanetsテーブルとCategoriesテーブルを分けている場合
  Planetsテーブル

  planet_name	planet_category	category_explanation（Categoriesテーブルのcategory_explanationを参照）
  太陽	恒星	自ら光を発している星
  水星	地球型惑星	"公正の周りをまわっている星 密度が大きい惑星"
  金星	地球型惑星	"公正の周りをまわっている星 密度が大きい惑星"
  木星	地球型惑星	"公正の周りをまわっている星 密度が大きい惑星"
  金星	地球型惑星	"公正の周りをまわっている星 密度が大きい惑星"
  …	…	…

  Categoriesテーブル（category_explanationに誤字）

  category_name	category_explanation
  恒星	自ら光を発している星
  地球型惑星	"公正の周りをまわっている星 密度が大きい惑星"
  …	…

  1. Categoriesテーブルのcategory_explanationの誤字を探す
  2. 1列のみ誤字を直す

→　直す量が少ない＆また間違える可能性が少ない

これが（リレーショナル）データベースの良い所！
※「繋げる」ことができるデータベースを特にリレーショナルデータベースと言う。

終わりに…

【結論】これが無料でできるGlideはすごすぎる。