ノーコード bubble 解説_SNS いいね 設置

SNSに欠かせない「いいね!」ボタンの設置方法です。

 

ハートマークを押すと色が着いて数字が1増える。1ユーザーにつき1回だけ「いいね」出来るようにするのもポイントです。

 

 

今回は「ノーコード bubble 解説_Twitterのようなアプリ制作 1〜3」の続きとなります。ワークフローの選択肢にこの解説だけでは出て来ない項目なども有りますので是非「Twitterのようなアプリ制作 1〜3」と併せてご覧ください◎

ノーコード bubble 解説_Twitterのようなアプリ制作1

 

では行きます。

アイコンとカウンター数字の設置

Iconで「いいね」を押される前(なのでアウトライン)のハートを設置します。好みの色、大きさにします。

 

次に「いいね」の数を表す数字をTextで設置します。こちらも文字の大きさ色など調整します。(数字は特に入れなくてもOKです)

 

Elements treeで構造を見るとハート(Icon)数字(Text)共にRepeatingGroup tweetの中のGroup tweetの中に入った状態です。

 

Previewで見ると今の段階はこんな感じです。

 

データベースの設計

データベースの設計をします。Dataタブを押します。

Data types>Tweet の Create a new fieldで項目を2つ増やします。

 

1は「誰が”いいね”したか」用の項目です。Field nameをLike UserとしField typeはUserです。This field is a listにチェックを入れ>CREATE

2は「何人が”いいね”したか」用の項目です。Field nameをLike CountとしField typeはnumberにし>CREATE

 

項目が2つ追加されました。This field is a listにチェックを入れたので後々データがこんなふうに残ります。Like Countのdefault初期設定には「0」を入れておきます。

ハートマークの横は最初0だからだね

データベース完了。次はハートマークのワークフローを設置します。

 

ハートのワークフロー

Click〜>Data>Make changes to thing(物事に変更を加える)

 

Thing to change(変更するもの)はParent group’s tweet、、ハートのアイコンが置いてあるグループ(親)のツイートです。

 

更に下の「+Change another field」で別のフィールドを変更するを追加します。変更するのはLike User、add(いいねしたユーザーを追加)、Current Userです。

いいねしたユーザーはCurrent User、現在の使用者(ログインユーザー)です

更に「+Change 〜」でカウントを追加する設定をします。Like Count、Parent group’s tweet、、

 

‘s Like Count、+、1。最後の「1」は手入力です◎

 

 

ハートマークの変化

押す前のハートはアウトラインの黒、押されたら塗りの赤にします。

デザインタブをクリック>ハートをクリック>Conditional>+Define another condition 別の条件(塗りの赤)を定義します。

 

Whenいつ、はParents group’s tweet、’s Like User、contains含む、Current Userです。カレント(ログイン)ユーザーの「いいね」が既に含まれている時、です。

更にSelect a property〜(true(Likeを押された)の場合に変更するプロパティを選択します)の中から

 

Icon>塗りつぶしのハートを選びます。

 

色も変更したいのでSelect a property〜>Icon colorを選び赤にしました。

 

「いいね」の数

ハートの横のTextをクリック>..edit me..>Insert dynamic data>Parent〜>’s Like Count 

 

Previewで実際の表示を確認します。

データベースのデフォルトで設定した0が無いよ?

そう、ここまでの投稿は設定前のものなので表示されないんだよ

 

今から新しく「投稿」してみます。

 

ワニの投稿のハートに0が表示されました◎ 以前の投稿も含めてハートを押すと赤くなり数字が追加されればここまでは成功です。

”ここまでは”?

 

今のままだと1つのツイートに1人のユーザーが何回も「いいね」を押せてしまいます。これを今から1つのツイートに1人1回と設定します。1度「いいね」してももう1度押して無しにしたい時もあります。

 

現状でもログインユーザーが押した「いいね」のハートは赤く表示されます。

例:現在ワニがログインしてワニの投稿に「いいね」しました。ガールsvgの投稿に「いいね」したのは別ユーザーです(データベースを見れば誰だかは分かります)。 ワニがログアウトして別ユーザーでログインするとワニが押した分のハートはアウトライン表示になります。もう一度ワニでログインするとワニが押した分のハートの赤はログアウト前と同じ赤いまま残っています。

 

 

「いいね」の条件

ハートをクリック>Start/Edit workflow

 

Only when>Click

 

条件:まだ「いいね」していない

〜の時だけ、と条件を付けます。Parent〜、’s Like User、doesn’t contain含まれていない、Current User。条件はLikeと言っているユーザーにカレント(ログイン)ユーザーが含まれていない時です。 グレーの四角の中も表示が変わりました。

 

(この画像はもう上で設定が済んだものです)まだ「いいね」していないログインユーザー、この人は既に設定したように今から「いいね」を「+1」出来ます。

 

その逆の含まれている時の設定もしないといけません。「いいね」を取り消す設定です。

 

条件:既に「いいね」している

今作ったワークフローを右クリック>コピーして使います。下の点線の四角内で同じく右クリック>ペーストします。横に同じ物が出来ましたのでこれをクリック、

 

(クリックすると左側に移動しました)Only whenのdoesn’t containをcontains含む、に変更します。すると上の濃い四角の表示も変わります。

 

Step1の中身も先程と逆にしないといけません。add追加はremove削除するに、「+」は「」に、これで完了です。Previewで動きを確認します。

 

 

いかがでしょうか◎1ユーザー1いいね。いいねの取り下げ可。

ボーイでログインしてボーイとワニの投稿に「いいね」してハートが赤に、、

 

次にガールでログインして先程のボーイとワニの投稿のハートの色が無くなって数字はそのまま、で成功です。

 

 

データベースにもLike Count、Like Userのデータが溜まってゆきます。

 

前の記事

2年ぶりのセンバツ