ノーコード ラボ

NoCode 関連のツールの紹介、使い方などをやさしく説明します。質問やご指摘大歓迎です。わからないことがあったら、コメントや Twitter などで聞いてください!

iPhone のメッセンジャーもどきを Bubble で作ってみる(新レスポンシブ版)5:初めてのユーザーにメッセージを送信する画面を作成する

この記事は 【 iPhone のメッセンジャーもどきを Bubble で作ってみる(新レスポンシブ版) 】の第5回です。本コンテンツの記事が初めての方は、以下の記事でコンテンツの説明をしていますので、ご確認ください。

blog.nocodelab.jp

今回作成するページ

今回は、初めてのユーザーにメッセージを送信する画面(createmessage)を作成していきます。

1. 初めてのユーザーにメッセージを送信する画面(createmessage)の枠を作成する

では、まずは枠組みとなる createmessage ページを作成します。「Create a new page」で Page name を「createmessage 」として CREATE ボタンをクリックします。

Page title を「yMessage」とし、Layout の Container layout を「Column」に設定します。

ひとまず枠組みが準備出来ました。では、次にメッセージの新規作成ボタンをクリックしたら遷移するようにしていきましょう。

2. index から遷移設定

index に戻り第2回で作成した「Group ion-compose」に遷移するワークフローを設定していきます。

Workflowタブの Click here to add an event... から Elementで「Group ion-compose」を選択します。Click here to add an action... から Navigation で「Go to page...」を選択、Destination で「createmessage」を選択します。

これで、index ページから createmessage ページへの遷移設定ができました。Preview して動作確認しておきましょう。

3. 初めてのユーザーにメッセージを送信する画面(createmessage)の作り込み

では、createmessage ページの中身を作成していきます!

3.1 ヘッダー部分の作成

Floating Group を配置していきます。名前を「FloatingGroup Header」として、Vertically float relative to を「Top」、Horizontally float relative to を「Left」にします。

この中に縦に二つのエレメントを配置したいので Layout の Container layout は「Column」にします。

配置した Floating Group 内に「新規メッセージ」テキストと「キャンセル」ボタンを配置し、Row のGroup でまとめておきます。Group は名前を「Group Title」として、背景を「Flat color」の「#F7F7F7」とします。

「Group Title」の Layout で Horizental alignment を Centered に、Max width を「640」、Fit width to content のチェックをオフにして、Min height を「56」にします。

「新規メッセージ」テキストの設定は、フォントサイズを「16」の太字、カラーを「#333333」、Center the text vertically のチェックをオンにします。Layout では、Vertical alignment を Centered にして、Fit width to content のチェックをオンにしています。

キャンセルのボタンは、新規で作成した「CancelButton」スタイルを適用します。フォントカラーを「0091FF」、サイズを「12」、背景色やボーダーは「None」としておきましょう。

Layout では「新規メッセージ」テキストと同様に Vertical alignment をCenteredにして、縦横のサイズを調整しておきます。

同じく Floating Group 内に「宛先:」ラベルと、「宛先の名前」テキスト、「+」ボタンを配置し、Row の Group にまとめておきます。Group は名前を「Group Address」として、背景を「Flat color」の「#FFFFFF」とします。

「Group Address」の Layout では、 Container aligment を Space around に、Horizental alignment を Centered、Fit width to content のチェックをオフにしてサイズを調整しておきます。

「宛先:」ラベルの設定は、テキストを「宛先:」として、フォントサイズを「14」、カラーを「#BDBDBD」と設定します。

Layout では、以下のように Vertical alignment を Centered にしてサイズを調整します。

「宛先の名前」テキストの設定は、テキストは後ほど設定するので空欄としておき、フォントサイズを「14」、カラーを「#333333」にします。Layout では Vertical alignment を Centered にして、Max width と Min height を調整しておきます。

「+」ボタンは、IonicIcon の「ion-ios-plus-outline」を選択し、カラーを「#0091FF」と設定し、大きさを縦横「24」とします。

以上で、ヘッダー部分が完成しました。

3.2 宛先選択のポップアップ作成と呼び出し

では、次に前項で作成した「+」ボタンをクリックされた場合に表示するポップアップを作成していきましょう。UI Builder の Containers から Popup を選択して配置し、名前を「Popup Address」とします。ここでは、背景を「Flat color」の「#FFFFFF」、 Grayout color を「#000000」「1」、Roundness を「8」、Shadow style で「Outset」を選択してポップアップの影を設定しています。

ヘッダー部分で作成した「新規メッセージ」テキストと「キャンセル」ボタンをまとめた Group をコピーして、Popup 内に配置します。

「新規メッセージ」を「連絡先」に変更し、「キャンセル」ボタンの名称を「Button キャンセル(ポップアップ)」などとして、先の「キャンセル」ボタンとは区別できるようにしておきます。

次に、宛先のユーザー一覧を表示できるように、Repeating Group を配置します。Layout で Horizontal alignment を「Centered」として、Make this element fixed-width のチェックをオフにします。ここでは Min height を「280」としておきました。

Appearance では Set fixed number of rows のチェックをオフ、Min height of row を「56」にしておきます。Separato を「Solid」とし、Color を「#F7F7F7」と設定します。

取得するデータを設定していきます。Type of content を「User」として、Data source で「Do a search for」を選択し、User Type を Name で並び替えします。さらに minus item で Current User として、取得した User から自分を除く一覧にしておきます。

では、次に RepeatingGroup の中身を作成していきます。Group を一つ作成し、Type of content を「User」として、Data source で「Current cell's User」とします。これで、Repeating group で取得した User の値を、この Group が表示できるようになりました。

Layout では Container layout を「Column」、Make this element fixed-width のチェックをオフにし、Min height を「56」にしておきます。Padding の Left と Right に「10px」としておきましょう。

さらに、この Group の中にテキストを2つ配置していきます。テキストの1つは 親エレメントである Group User からユーザーの名前を取得して「Parent group's User's Name」としておきます。フォントサイズは「14」、フォントカラーを「#333333」Center the text vertically のチェックをオンにします。

Layout では Make this element fixed-width のチェックをオフにし、Min height を「25」ぐらいにしておきます。

もう1つのテキストには「Parent group's User's email」を表示させフォントサイズを「11」、フォントカラーを「#BDBDBD」としておきます。

次にポップアップを表示させるワークフローを設定していきましょう。Workflowタブの Click here to add an event... から Elementで「+」ボタンを選択します。Click here to add an action... から Element Actions の「Animate」を選択して、Element で作成したポップアップを選択し、Animation を「Transition SlideUpBigIn」とします。

これで、「+」ボタンをクリックした時に、アニメーションでポップアップを表示することができました。

3.3 ポップアップ画面で宛先のユーザーを選択した時の動き

では、次にポップアップ画面で宛先のユーザーが選択された時の動きを設定していきましょう。

RepeatingGroup 内に配置した Group User にコンディションを設定します。Conditional タブに「This Group is hovered」の時、Background color を「#0091FF」の「30」とし、「This Group is pressed」の時、Background color を「#0091FF」の「40」としておきます。

次にクリックされた時のワークフローを設定します。

Click here to add an event... から Elementで「Group User」を選択します。 Room Type に自分と選択したユーザーのデータがない場合にのみ、新規で Room Type にデータを作成したいので、 Click here to add an action... の Data(Things) で「Create a new thing...」を選択して、Only when に Do a search for で Room Type から「自分と選択したユーザーのデータ」を意味する「Member contains Current User」と「Member contains Current cell's User」を条件にデータを取得し、count が1以下であることします。

Type で「Room」を選択して「Member add Current User」と「Member add Current cell's User」が登録されるようにしておきます。

次に、選択された宛先のユーザーの情報を Custom state を使って退避しておきましょう。Click here to add an action... の Element Actions で「Set state」を選択し、Element で「createmessage」を選択します。Create a new state 画面で State name を「selectedUser」、State type を「User」とした Custom state を作成し、Value を「Current cell's User」として、選択されたユーザーをセットします。

あとは、Room Type にデータ登録と選択したユーザーの退避ができたらポップアップを閉じましょう。Animation は「Transition SlideDownBigOut」を選択します。

Design タブに戻り、空欄にしておいた「宛先の名前」テキストの値に、Custom state 退避したユーザー情報を「createmessage's selectedUser's Name」として表示しておきます。Layout で Fit width to content にチェックを入れて、Max width を削除して横幅を調整しておきます。

Preview して動作確認してみましょう。「+」ボタンをクリックしたらポップアップにユーザー一覧を表示し、宛先のユーザーを選択したらポップアップが閉じて「宛先の名前」テキストに名前が表示されればOKです。

3.4 メッセージ部分の作成

では、自分(Current User)と選択したユーザーされたユーザーのメッセージを表示させていきます。この部分は、第3回で作成した reusable element の「Message」を再利用します。

Reusable element の「Message」を配置していきますが、FloatingGroup Header の下に表示させたいので、Margins の Top を「100」、Left と Right は「5」ぐらいにしておきます。Horizontal alignment を「Centered」にして、Max width を「640」に指定しておきましょう。

Data source に Do a search for で Room Type から「Member contains Current User」と「Member contains createmessage's selectedUser」の条件で取得したデータの「first item」とします。

これで、ポップアップで取得した宛先のユーザーのメッセージを表示することができました!

3.5 フッター部分の作成

では、次にメッセージをエントリーする部分を作成しましょう。こちらも既に作成済みの reusable element を使用していきます。新たに Floating Group を配置して、名前を「FloatingGroup Footer」、背景を「Flat color」の「#FFFFFF」、Vertically float relative to を「Bottom」、Horizontally float relative to を「Left」にします。

Layout では「Colomn」として Make this element fixed-width のチェックをオフにし、Min height を「115」ぐらいにしておきます。なお、Margins の Top を「Message」の高さよりも少し高めの 115 に設定しているのは、プレビューした際の、デバッカー領域や Bubble ロゴで隠れてしまう領域に対応させる為です。

配置した FloatingGroup 内に reusable element の「Message_Send」を配置し、Data source を前項の reusable element である Message で表示している Room Type のデータに登録されるよう「Message’s Room」とします。

次に Reusable element の「Message_Send」でメッセージが登録された場合は、現在の「createmessage」ページから「room」ページへ遷移するようにワークフローを設定しておきましょう。

Click here to add an action... から Navigation で「Go to page...」を選択、Destination を「room」とします。Data to send で Result of step2 として、更新した Room Type のデータを引き渡します。条件を「Current page name is not room」として「room」ページ以外で登録されたメッセージを対象としておきます。

4. 「キャンセル」ボタンのワークフローを設定

「キャンセル」ボタンをクリックした場合のワークフローを設定しましょう。

ヘッダー部分の「キャンセル」ボタンは、クリックした場合、メッセージ表示の index ページへ遷移するようにしたいので 「Go to page...」のアクションを追加します。

ポップアップの「キャンセル」ボタンは、ポップアップ画面を閉じたいので、「Group User」をクリックした時のワークフローの Step3で設定したアクションをコピーします。

5. ログインしていないユーザーを閉め出し

では、最後の仕上げとしてログインしていないユーザーは、閉め出しするように設定しておきましょう。General の User is logged out で「Go to page...」のアクションを追加し、遷移先を「login」ページにします。

以上で、初めてのユーザーにメッセージを送信する画面の完成です。お疲れさまでした!

6. まとめ

いかがでしたか?今回は、iPhone のメッセンジャーもどきの第5回として、初めてのユーザーにメッセージを送信する画面を作成しました。次回は、OneSignal を使って Web Push を実装していきます!

コンテンツ

1.新規アプリの作成及び、ユーザー登録、ログイン画面を作成する

2.メッセージを送信する相手を選択する画面を作成する

3.メッセージを表示する画面を作成する

4.プロフィール画面を作成する

5.初めてのユーザーにメッセージを送信する画面を作成する

6.OneSignal を使って Web Push を実装する(iOS を除く)