ノーコード ラボ

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

iPhone のメッセンジャーもどきを Bubble で作ってみる(初級者向け)1:新規アプリの作成及び、ユーザー登録、ログイン画面を作成する

f:id:yksmt:20200330103739p:plain

この記事は 【 iPhone のメッセンジャーもどきを Bubble で作ってみる(初級者向け) 】の第1回です。 前提条件等、確認されていない方は先にこちらの記事を確認してください。

blog.nocodelab.jp

それでは早速作っていきます!

基本的には下の記事の焼き直しですが、若干、複雑にしています。また、簡単なところは説明省いていますので、もしわからないところがあれば、こちらの記事も合わせてご確認ください。

twitter のような簡単な SNS を bubble で作ってみる(入門者向け)2: サインアップとログイン/ログアウト処理

1. 新規アプリの作成

ログイン後の画面で「NEW APP」というボタンを押します。

Name of this new app という欄に今回は「nMessage」と入力し、「CREATE A NEW APP」ボタンを押します。

f:id:toka-xel:20200131213928p:plain

Application Assistant が表示されますが、「Start with a blank page」を押し、「Close the assistant」をクリックします。

これで新規アプリを作成する準備が出来ました。

f:id:toka-xel:20200131214107p:plain

1.1 Ionic Elements プラグインのインストール

「Plugin」タブをクリックし、Add plugins ボタンを押します。

f:id:toka-xel:20200131214216p:plain

「Search for a plugin」に「ionic」と入力してください。Ionic Elements が表示されるので、install ボタンをクリックしてください。

f:id:toka-xel:20200131214324p:plain

これで Ionic Elements プラグインはインストールされました。

f:id:toka-xel:20200131214423p:plain

1.2 index の設定

1.2.1 Page width の設定

「Design 」タブに戻って、index ページの横幅を設定します。今回は 320 で設定します。

この横幅は iPhone であれば、iPhone SE 以前のものと同じですので、ほとんどのスマートフォンに対応できる設定です。

なお、最近小さい Android 端末が出ていますが、それらには表示が崩れたりする可能性があります。

縦幅はひとまず 480 で設定しておきます。

1.2.2 Page title の設定

ついでに Page Title を「nMessage」に変更しておきます。

f:id:toka-xel:20200131214925p:plain

2. ユーザー登録画面の作成

index をコピーして「signup」画面を作成します。

f:id:toka-xel:20200131215052p:plain

今回はユーザー登録画面については簡単なものにします。

登録周りを真面目にやると結構大変ですので、興味がある方は次のコンテンツをご覧ください。

Bubbleでログイン処理をしてみよう!~第1回ユーザ登録をしてみよう - ノーコード ラボ

2.1 ユーザー登録画面のデザイン作成

signup ページに Group を一つ作ります。名前はひとまず Group Body とします。サイズは 320 x 480 で設定しておきます。 Apply a max width when the page is stretched にチェックを入れて、Maximum width を 200(%) にします。 これで width が最大 640 まで広がります。

f:id:toka-xel:20200131215404p:plain

2.1.2 Group のデフォルトのスタイル変更

ついでに Group の デフォルトのスタイルを変更します。

Style のところの Edit style をクリックします。 下の画像の枠で囲まれた部分(Remove this style as a default for all new Groups)をクリックします。

f:id:toka-xel:20200131215656p:plain

これで以降、Group を作っても Style が適用されなくなります。

2.1.3 Group Body の設定

まずは Remove style をクリックして、style を外します。

Background style を None、 Border style - all borders の Roundness を 0 に設定します。

f:id:toka-xel:20200131220207p:plain

2.1.4 ユーザー登録フォームの作成

あとは twittel の時と同じような要領で、上から Text、Input、Input、Button、Text の順でエレメントを配置していきます。

f:id:toka-xel:20200131221443p:plain

2.1.5 ログイン画面へ遷移させるメッセージの編集

最後の Text はログイン画面へ遷移させるためのメッセージとします。

Text エレメントを選択した状態で Rich text editor を開きます。

f:id:toka-xel:20200131221756p:plain

「ログイン」を選択し、一番右上のリンクのボタンを押します。

f:id:toka-xel:20200131221922p:plain

URL のところに「./login」と入力し、「Insert」ボタンを押します。

f:id:toka-xel:20200131222015p:plain

これで「ログイン」のところをクリックするとログイン画面の方に遷移するようになります。 ログイン画面は後ほど作成します。

ついでにわかりやすいように色を青に変更しておきます。

Rich Text の画面を Save すると次の画面のようになります。

f:id:toka-xel:20200131222637p:plain

2.1.6 Email の代わりに Account を利用する

また、今回は Email を使う代わりに Account という形にしようと思います。Account は一意とします。

実際の DB には Account + @xxx.xx みたいな Email と同じ形で保存するのですが、ログインを簡単にしたいためにこのような形をとります。 なお、この場合、パスワード忘れの時に Email を送付するなどの対応はできませんので、ご承知ください。

2.2 User type の変更

User type(テーブル)には Account と UserImage いう Field(カラム)を追加します。

f:id:toka-xel:20200131223413p:plain

2.2.1 Option sets の設定

ユーザーのアイコンを予め準備しておいて Option sets に保存しておきます。

ユーザーのアイコンは今回は「いらすとや」さんから 12点 お借りしてダウンロードしておきます。

www.irasutoya.com

今回はこのページに表示されている 12点をダウンロードさせていただきました。

こちらを Option sets に登録します。

何に使うかというと、ユーザー登録をした際のデフォルトのアイコンをこちらからランダムで設定するようにします。

まずは UserImage という Option sets を作成します。

f:id:toka-xel:20200131223954p:plain

続いて、Create a new attribute をクリックして Icon というアトリビュートを作成します。

f:id:toka-xel:20200131224225p:plain

New option のところに「アルパカ」と入力し、「Create」ボタンを押します。

「アルパカ」の横に Modify attributes というリンクがあるので、これをクリックします。Icon のところに該当の画像ファイルをアップして、Save すれば、アルパカの準備は終わりです。

f:id:toka-xel:20200131224644p:plain

これを 12個分繰り返せば、Option sets の準備は終わりです。

f:id:toka-xel:20200131225238p:plain

2.3 ユーザー登録画面のワークフローの作成

2.3.1 ユーザーを登録する ボタンのワークフローの作成

ユーザー登録するワークフローを作成するのですが、少しだけテクニックっぽいことをします。

f:id:toka-xel:20200131230315p:plain

上はサインアップのアクションである Sign the user up を設定している画面なのですが、Email のところに注目してください。

Input Account's value :appendApp Text(domain)

というように入力されています。

ここでやりたいのは、アカウント + @nocodelab.jp のようなメールアドレスの形を作ってサインアップするようにしたいのです。 :append は追記ですね。あとは App Text がわかれば OK です。App Text でやりたいのは定数の宣言で、App Text(domain) というのが @nocodelab.jp になるように設定します。

今回は App Text は domain という Text ID で設定しました。

f:id:toka-xel:20200131230814p:plain

Define the value of the text in a different language in the Settings Tab. というリンクが表示されるので、これをクリックします。

そうすると言語の設定画面に出ます。ついでなので先に Application primary language と Currently editing messages and texts for を Japanese(ja_jp) に変更しておきます。これで言語設定が日本語になります。

domain というところができていますので、ここに「@nocodelab.jp」と入れてください。 @nocodelab.jp のところは何でも OK ですが、間違えてメールを送らないように注意してください。 万一のことを考えると、ご自分で管理されているドメインに送るようにしておいた方が安心です。

f:id:toka-xel:20200131232550p:plain

また今回は、 Account と UserImage も一緒に登録するようにします。

Change another field ボタンをクリックして、Account と UserImage を設定します。 UserImage については、Option sets から取ってきてランダムになるように All UserImage:random item's Icon と設定します。

f:id:toka-xel:20200131233737p:plain

あとは Step2 で Reset Inputs、Step3 で Go to page index を設定すれば、ユーザー登録のワークフローは終わりです。

f:id:toka-xel:20200131234152p:plain

2.4 プレビューで確認

ここまでできたらプレビューで確認しましょう。 デザインが崩れていたら適宜調整してください。 あとは実際にユーザー登録してみましょう。うまくいきましたでしょうか? こちらの画像のようにユーザーが作成されていれば OK です!

f:id:toka-xel:20200131234517p:plain

3. ログイン画面を作る

続いて、signup 画面をコピーして login画面を作成します。

f:id:toka-xel:20200131235413p:plain

3.1 ログイン画面のデザイン

ログイン画面では3ヶ所変更します。

  • テキスト:「ユーザー登録」→「ログイン」
  • ボタン:「ユーザーを登録する」→「ログインする」
  • テキスト:「ユーザー登録済みの方は [url=./login][color=#0000ff]ログイン[/color][/url] してください」→「ユーザー登録がお済みでない方は [url=./signup][color=#0000ff]ユーザー登録[/color][/url] してください」

f:id:toka-xel:20200201001338p:plain

3.2 ログインボタンのワークフローの作成

ワークフローは Step1 の Sign the user up を削除して、代わりに Log the user in を入れます。

f:id:toka-xel:20200201001650p:plain

4. ログインしていないユーザーを index ページから締め出す

index ページのワークフローで User is logged out の イベントを作成し、login 画面に遷移するように設定します。

f:id:toka-xel:20200201002123p:plain

次回

ここまででユーザー登録とログイン関係の処理の仕込みは終わりです。ログアウトの処理がまだできていませんが、また後ほど行うこととします。

次回は「メッセージを送信する相手を選択する画面、及びメッセージを表示する画面を作成する」ということで、いよいよメッセンジャーのメインとなる機能を作っていきます。