メディア表現 VI 14.ノーコード開発III
目次
本日の内容
前回,前々回に引き続き
- 【第14回】ノーコード開発III
をやっていきましょう。
前回,前々回のおさらい
.bubbleを利用して、
- Tweetを入力すると表示される
- サインアップ・ログイン・ログアウトできる
- プロフィール登録できる
- ログイン時にアイコンが表示される
の部分まで制作しました。
前回,前々回休みの人は、そこから始めましょう。 残念ながらお金を払わないと本番環境にデプロイ(実際に使える状態にする)ができませんが、その手前までやってみましょう。
機能重視で、あまり見た目にはこだわりません。
今日の流れ
現在、
誰がツイートしているかわからない
状態となります。
- データベースで誰がツイートしているかを扱えるように拡張
- 誰でもUserデータにアクセスできるように処理
- 画面にそれを実装
の流れで行ってみましょう。
TweetとUserのデータベースを紐付けよう
データベースの拡張
Tweetにユーザ情報を書き込む項目を追加しましょう。
- DataタブをクリックしてTweetテーブルを選択
- Create new Field
- Field name: User, Field Type: UserでCreate
ユーザ情報とは？
email, passwordを入力して登録しましたが、どうやってシステムではユーザ情報を管理し、他とは異なる、ということを管理しているのでしょうか？
- DataタブのApp dataタブを開く
- All Usersを選択して項目を確認しても、「これが唯一」とわかる項目は見つからない
- 一つのレコード(データ)の鉛筆をクリックすると「Unique id」が表示されている。これは選択可能だが、編集できない。これがこのデータを唯一のものとしているidとなる。データベースにおいてはこのユニークIDというのを持つことが多い。
emailで個人を特定できる、という考え方もありますが、(今回実装しませんが)emailの変更に対応できなくなるためUnique id(唯一のID)が必要となります。
ですが、この拡張をした時にはデフォルトではemailをさしているようです。
TweetテーブルのUser項目に情報を付加
- All Tweetsで鉛筆をクリックして、Created byの中身をUserにそれぞれペーストする
紐付けによる修正
Tweetボタンの処理の変更
Tweetした時にUser情報を書き込むように変更仕様
- Page: indexのWorkflowタブにて「When Button Tweet is clickedのstep1「Create a new Tweet」をクリック
- 「+ set another field」で User = Current User
これで、自動的にログインしているUserのUnique idがTweetのUser項目に入ります。
プライバシールール
最初、自分自信の作成したUserデータ以外見れない設定になっているため(名前・画像など)、それを解除しておきましょう。
- DataタブのPrivacyタブ。Userを選んでName「User’s own data」のルールの右上のゴミ箱をクリックして消去しましょう。
index画面の変更
Repeating Groupのメッセージにメッセージだけでなく、Tweet者のアイコン・名前・メッセージを表示させましょう。
構造は現在、 Repeting Group Tweet - Group Tweet - Text Parent group’s Tweet になっているので、Group Tweetの中にアイコン・名前を表示するようにそれぞれ追加してみましょう。
最後くらい自力でできるかな…
previewして動作を確認してみましょう。
その他
ヘッダーに機能してない項目あるので、消したりして最終系を目指しましょう。
きちんとやるには、Designタブで、Responsiveを選び、画面幅が少ない時のも正しく設定する必要があります。
まとめ
- コーディングを行わずにアプリ開発をできる環境ができていることが理解できたでしょうか？
- 仕様を決めずに柔軟に機能追加をしながら(アジャイル)開発を進めていることも理解できたでしょうか？
- Wordpressもホームページのノーコードツールと言えます。
- でも、ツールがあっても結局人の頭が考えなくてはいけないところがあります。
何が問題か？
どう解決するか？
これを実際に形にするのが開発であり、ノーコードツールなのですが、この問題自体を解決するものでない、ということは意識しましょう。
来週はこの授業についてまとめて、期末レポート(manabaに掲載済みだけど)を行います。