この記事は 【 iPhone のメッセンジャーもどきを Bubble で作ってみる(新レスポンシブ版) 】の第3回です。 本コンテンツの記事が初めての方は、以下の記事でコンテンツの説明をしていますので、ご確認くださいね。
今回作成するページ
今回は、前回作成した index(メッセージを送信する相手を選択する画面)から遷移する先のページとなる、メッセージ表示画面(room)を作成していきたいと思います。
↑上記画像のようなページを作成してきます!
- 今回作成するページ
- 1. メッセージ表示画面(room)の枠を作成する
- 2. index からメッセージ表示画面(room)へ遷移設定
- 3. メッセージ表示画面(room)の作り込み
- 4. プレビュー
- まとめ
- コンテンツ
1. メッセージ表示画面(room)の枠を作成する
では、まず index ページからの遷移先である room の枠組みから作成していきましょう。「Create a new page」で Page name を「room」で作成します。
PageのType of content に「Room」を選択します。
Layoutはこのように設定します。
※2022/10/27 修正 Min height を「250」に修正しました。
ひとまず枠組みが準備出来ました。では、次にメッセージの送信先を選択したら遷移するようにしていきましょう。
2. index からメッセージ表示画面(room)へ遷移設定
index に戻り、前回作成作成したGroup Roomにカーソルがホバーされた時の Conditional を設定していきます。
「Group Room」を選択し、Conditional タブから 条件の When を「This Gruop is hovered」、Select a property to change when true から「Background color」を選択し、色を #0091FF 、透過率を 10で設定ます。
では次にクリックイベントを作成していきます。Workflowタブの Click here to add an event... から Elementで「Group Room」を選択します。
Click here to add an action... から Navigation で「Go to page...」を選択し、Destination に「room」ページを選び、Data to send を「Current cell's Room」とします。ここで送信するデータを Room Type で設定しているのは、選択された Room のデータを遷移先に引継ぐためです。前項1の Type of content で Room を選択したと思うのですが、ここで データのTypeを一致させておく必要があります。
では、一度 index をプレビューして、room に遷移する確認しておきましょう。
3. メッセージ表示画面(room)の作り込み
遷移する事が確認できたら、room ページの中身を作成していきます。
3.1 ヘッダー部分の作成
では、room ページのヘッダー部分を作成していきます。
ヘッダーはスクロール時に固定しておきたいので、「FloatingGroup」を使用します。UI Builder の Containers から「FloatingGroup」を選択し、roomページの上部に配置します。
名前を「FloatingGroup User」としておきます。Vertically float relative to を「Top」とし、Horizontally の方を「Left」とします。
Type of content は「User」Type を選択して、Data source を「Current Page Room's Member:minus item Current User:first item」としておきます。データソースは、index から引き継いできた Room のメンバーから、自分を除いた1行目」という意味になりますが、これは メッセージをやり取りする相手のユーザー情報を取得しています。
Layoutは Container layout→Column
Max width→inf
Min height→56px
Max height →inf
Fit height to content →チェック
あとは Define each border independently のチェックをオンにして、 Border style-bottom の Widthを「1」に Color を「#F7F7F7」としておきましょう。
では、この FloatingGroup User にユーザー情報を表示するエレメントを配置していきます。Group エレメントを配置し名前を「Group User」とします。Type of content を「User」として「Data source」には FloatingGroup User から引き継いで「Parent group's User」とします。
Layoutはこの様に設定します。
次に IonicIcon を配置して、index に戻るアイコンを作成しておきます。色は「#0091FF 」とし、W32 H32 X8 Y12 にしておきます。
クリックした時に index ページへ戻るようにワークフローも合わせて設定しておきましょう。Click here to add an event... から IonicIcon を選択して、Click here to add an action... から Navigation で「Go to page...」を選択し、Destination に「index」ページを選びます。
次にユーザーのアイコンを表示します。Group エレメントの名前を「Group User Icon」として、Background style を「Image」、 Dynamic image を「Parent group's User's UserImage」、Background color if e に「#F7F7F7」とします。Roundness を「16」、エレメントの大きさを W32 H32 として丸くしておきましょう。
次にユーザーのアカウント名を表示しましょう。Text エレメントを「Parent group's User's Account」としてフォントカラーなども設定しておきます。
さあ、これで index ページからプレビューして room ページに遷移し表示を確認してみましょう!
3.2 再利用可能な reusable element を作成する
では、次にメッセージの入力エリアと、登録されたメッセージ一覧を 再利用が可能な reusable elemet で作成していきたいと思います。reusable elemet は、特定の機能を、気軽に再利用することができるようにエレメント群として保存することができます。
3.2.1 DBの準備
まずは、その前に Message テーブルに必要となるフィールドを2つ追加しておきましょう。
Data タブの Data types から 「Create a new field」で 1つ目の Field name 「MessageImage」、Field type 「image」を、同じように2つ目の Field name 「User」、Field type 「User」を作成します。
DBの追加はこれでOKです。
3.2.2 メッセージ入力用の reusable element
では、次に reusable element を作成していきます。Add a new reusable element... をクリックして、Element name に作成したいエレメント名を入力していきます。ここでは「Message_Send」としました。Clone from はコピーできそうな reusable element がある場合は、ここで指定することができます。
「Message_Send」が作成できたら、Type of content を 「Room」に設定しましょう。
Layoutはこの様に設定します。
Group エレメントを配置していきます。名前を「Group Input Message」としておきます。
LayoutはAlign to parent,
Max width 640px,
Fit width content,
Min height 56px,
Fit height to content にします。
次に IonicIcon でカメラを選択し、色を「#8C8C8C」で設定します。
Layoutはこんな感じです。
そして、このカメラアイコンに被せるように、PictureUploader エレメントを配置します。後ほどワークフローを設定します。
次にメッセージを入力するエレメントを作成していきます。今回は背景は白の角丸のエレメントを作成したいので、Groupエレメントを利用します。太さが「1」の「Solid」ボーダーに、Roundness を「16」とします。
Layout はこんな感じです。
Margins leftとright それぞれに20px入れると窮屈になり過ぎずぱっと見が良くなります。
次に作成したGroup 内に実際に文字を入力する Input エレメントを配置します。Placeholder を「iMessage」、Content formatを「Text」、フォントサイズを「16」、色を「#555555」とします。
LayoutでMargins Leftに20px設定します。
次に送信ボタンを作成します。今まで同様のテクニックで、背景をGroup で作成し、その中にアイコンを入れていきます。
layout で Margins Right 20pxいれます。
「Message_Send」これでエレメントの配置が完了です。
高さの調整をしておきましょう。
次にワークフローを作成していきます。Workflowタブの Click here to add an event... から Elementで「PictureUploader」のエレメントを選択します。(実際にクリックされているのは、PictureUploaderエレメントですが、エレメントの配置でユーザーにはカメラアイコンをクリックしているように見えます。)
では、カメラアイコン(実際にはPictureUploader)をクリックした時のアクションである、イメージをDBに登録していきましょう。Click here to add an action... から Data(Things) の Create a new thing... を選択し、 Typeで「Message」、登録するデータを「MessageImage = This PictureUploader's value」「User = Current User」とします。
Make changes to thing... で、このRoom の Message フィールドに、先ほど Create したデータを add していきます。Thing to change を「Message_Send's Room」とし、「Message add Result of step1(Create a new Mess...)」とします。
3つ目のステップで、Reset inputs をしておきましょう。これで、画像登録時のイベントが作成できました!
では次に、メッセージの送信ボタンをクリックした時のワークフローを設定していきましょう。Click here to add an event... から Elementで送信ボタンのエレメントを選択します。
先ほどの画像登録の時と同じように、Messageテーブルにデータを登録して、Room に add し、Input エレメントをリセットます。
4つ目のステップで Input エレメントに Set focus しておきます。
これで、メッセージ入力用の reusable element が作成できました!
3.2.3 登録済みメッセージ表示用の reusable element
では次に、登録済みのメッセージが表示される reusable element を作成していきます。「Message_Send」と同様、Add a new reusable element... から作成していきます。Type of content や Layoutも同様に設定していきましょう。
では、Room テーブルの情報を表示するエレメントを配置していきましょう。まずは、エレメントをまとめる Group エレメント(ここでは、Group Room)とし、このGroup 内に RepeatingGroupを配置していきます。
RepeatingGroup は Type of content を「Message」とし、Data source に「Parent group's Room's Message」とします。Layout style は「Ext. vertical scrolling」、Rows を「1」、Columns を「1」としておきます。
layoutはColumn
Max width→ inf
Min height →80px
Max height →inf
Fit height content →チェック
次に作成した RepeatingGroup 内に、メッセージ送信時(DBの Created Date フィールド)の時間を表示するようにしていきます。
LINE では、メッセージを送信した時間がメッセージ毎に表示されますが、今回は iMessage っぽくするために、5分以内に連続したメッセージの場合は 1回目しか送信時間を表示させないように設定していきましょう。
RepeatingGroup 内に Group エレメント(ここでは Group Message)を配置し、 Type of content を「Message」、Data source を「Current cell's Message」とします。
Layout はこの様な感じです。
時間を表示する Text エレメント には、親エレメントである Group Message のデータを引き継いで「Parent group's Message's Creation Date:formatted as 2020/03/17 16:00」とし、フォントサイズを「11」、フォントカラーを「#8E8E8E」とします。
次に、5分以内のメッセージかどうかを判定するための Input エレメントを一つ配置しておきます。 Placeholder は空欄、Initial content を「Current cell's index - 1」、Content format を「Integer」とします。
LayoutはWidthもHeight も1pxにしてユーザーからは見えないようにします。
では、メッセージの送信時間の表示非表示を切り替える Conditional を Group Message に設定していきましょう。「+ Define another condition」から Conditional を追加し、When に「Current cell's Message's Creation Date + (seconds): -300 < RepeatingGroup Message's List of Messages:item #Input's value's Creation Date」と登録します。これで、Current cell の日時が、一つ前のメッセージの日時より5分以内であれば、日時を表示しない設定になりました。
次に、テキストのメッセージを表示します。まずは、やり取りしている相手のメッセージだった場合のテキストを表示させます。
Group elementを置いてType of content を「Message」、Data source を「Current cell's Message」、 Background style を「Flat color」の「#F7F7F7」、Border style を「None」、Roundness を「8」とし、This element is visible on page load のチェックを外しておきます。
LayoutはAlign to parent にしてMargins のTopを20pxいれます。
これは受信したメッセージなので左寄せにします。
また、文字も見やすい様にpading でleft right それぞれ10px入れておきます。
Groupエレメント内に、メッセージを表示する Text エレメントを配置します。
Groupエレメントの Conditional を「Current cell's Message's User is not Current User and Current cell's Message's MessageImage is empty」と設定します。
では次に、メッセージが画像だった場合の設定を行います。
RepeatingGroup エレメント内に Image エレメントを配置し、Dynamic image を「Current cell's Message's MessageImage」とします。
Layout は
Keep element aspect ratio fixed でW160 H48で設定。
この画像を表示するのは、やり取りしている相手のメッセージだった場合にしたいので、「This element is visible on page load」のチェックをオフにしておき、Conditional で「Current cell's Message's MessageImage is not empty and Current cell's Message's User is not Current User」として「This element is visible」をチェックオンに設定します。
次に、自分のテキストメッセージが表示されるように設定していきます。先ほど作成したテキストメッセージの Groupエレメントをコピーして、Background color(#0091FF)と Conditionalを「Current cell's Message's User is Current User and Current cell's Message's MessageImage is empty」に変更します。
Layoutはこんな感じです。
Groupの中にテキストelementを置いてこのように設定します。
次に作成した Imageエレメントをコピーして、自分のメッセージだった場合の画像を表示するようにします。Conditional で 「Current cell's Message's MessageImage is not empty and Current cell's Message's User is Current User」とすればOKですね。
レイアウトは、コピーした Image エレメントが右側になるように配置したいので2つをGroup elemtns in Row containerでグループ化します。
そしてlayoutはこのように設定します。
conditionalも設定しましょう。
3.2.4 最新のメッセージが表示されるようにする
メッセージは RepeatingGroup を使って表示していますので、最新のメッセージまで画面をスクロールするには、Elementアクションである Scroll to entry を使用します。
また、Scroll to entry アクションを呼び出すイベントは Reusable elements の「Message」に追加していきます。
まずは、最新メッセージの unique id を保存する Custom states を作成します。Reusable elements の Message を選択し inspecter を利用して「last_messageId」という「text」型の Custom states を定義します。
次に、ワークフロータブでイベントを追加していきます。General の Do when condition is true を選択し、Run this を「Every time」、Only when を「Message's last_messageId is not RepeatingGroup Message's List of Messages:last time's unique id」として、先ほど作成した「last_messageId」Custom states が RepeatingGroup Message の最終行と一致しない場合を条件としてイベントを作成します。
次に、RepeatingGroup の Scroll to entry アクションを追加します。Element を「RepeatingGroup Message」、Entry to scroll to に「RepeatingGroup Message's List of Messages:last item」として、ヘッダーの高さ分を考慮して、Vertical offset を「60」としておきます。
次に、Set state で「last_messageId」Custom states の値を更新しておきます。Element で「Message」を選択して、Custom state で「last_messageId」を選択し、Value は「RepeatingGroup Message's List of Messages:last item's unique id」として、最新の unique id で更新しておきます。
そして最後に、もう一度最新のメッセージにスクロールされるように Step1 のアクションを Step3 にコピーします。
これで、メッセージを表示する際に、最新のメッセージまで、画面がスクロールされるようになりました!
3.3 フッター部分の作成
では、仕上げにフッター部分に作成した メッセージを入力する reusable element の「Message_Send」を配置します。「Message_Send」はフッター部分に固定して表示したいので、FloatingGroup を使用し、Vertically float relative to を「Bottom」、Horizontally を「Left」とします。 また、Define each border independently のチェックをオンにして、 Border style-top の Widthを「1」に Color を「#F7F7F7」としておきましょう。
では、この FloatingGroup 内に「Message_Send」を配置し、Data source を「Current Page Room」とします。
お疲れさまでした!以上で room ページの完成です!
4. プレビュー
では、index からプレビューして room へ遷移しメッセージを送信してみましょう!
まとめ
いかがでしたか?今回は【 iPhone のメッセンジャーもどきを Bubble で作ってみる(新レスポンシブ版) 】の第3回、メッセージ表示画面(room)を作成しました!次回は、プロフィール画面を作成していきたいと思います。では、次回もどうぞお楽しみに!