データを作る
データベース「Cards」をGlideのデータエディタで作る
カラム名 | カラムタイプ | 解説 |
---|---|---|
カード | Text | カードの名前 |
イメージ画像 | Text | カードの画像URL |
チェック | Boolean | すでに引いたカードかどうかのチェック用 |
今回はGlideのデータエディタで作ってみたけど、後々のことを考えるとスプレッドシートでデータを作った方が良いかも(そうするとこの記事の最後の「カードをリセットする機能」をGASで使って実装できるため)
レイアウト画面を作る
タブ作成
Screan from data から先ほどのデータベース(Cards)を選ぶ
Collectionコンポーネントの編集
Generalタブ
- STYLE
- Card を選択(お好みで)
- ITEMS DATA
- Title に「カード」
- Image に「イメージ画像」
- DESIGN
- Size を「XL」
- ほか、お好みで
- OPTIONS
- Limit number of items にチェックを入れて「1」
Optionsタブ
- FILTER DATA
- チェック is not checked
- SORT DATA
- Randomly
カードを次々に引いていく機能を作る
- 画面上のカードをクリックして詳細表示画面に移動
- COMPONENTSの全削除
- 「button」コンポーネントの追加
ボタンコンポーネントの編集
- ACTION
- Title に「次のカードを引く」
- 「Show notification」とかかているところで「Actions for cards」>「Create new action...」
アクションの編集画面に移動するので、ここで2つのアクションを作る。
- データのチェックカラムにチェックをいれる
- 前の画面に戻る
まず1つめのアクション。すでにできているアクションをクリックして、「Data」>「Set column values」を選び、次のように設定
- Row に 「Tis item」
- チェック に 「true」
次に2つめのアクション。1つめのアクションにカーソルを合わせると+マークが出てくるので、そこから「Navigation」>「Go back」を選ぶ
下図のようにアクションが完成したら、右上の「Done」
実行してみる
カードの詳細表示画面で「次のカードを引く」ボタンをクリックすると、先ほどのアクションが実行!
データベース上ではそのカードの「チェック」カラムにチェックが入り、Glide画面は自動で一覧表示画面に戻る。
一覧表示画面では、レイアウトで設定したことが効いていて、まだ引いていないカードがランダムで一枚表示されている。
- レイアウトで設定したこと
- 表示を1枚に制限している
- ランダムにソート
- 「チェック」カラムでのフィルター
全てのカードを引き終える(=全てのカードにチェックが入る)と表示するものがなくなる
カードをリセットする機能を作りたい
データをスプレッドシートで作っておけば、「ボタンを押すとGASが動いてチェックを外す」という処理も実現できる…?