【ノーコード・ローコード】OutSystemsでアプリづくり#04 ~マッチングアプリをつくる①~

『アイデアはあるけど実現できない。。。』プログラミング完全初心者の私が、試行錯誤しながらアイデアを形にしていく過程（主に悩み…）を記事にしていきます。

アイデアを素早く実現していくにあたり、【ノーコード・ローコード】というジャンルを見つけました。本記事では、ローコードツール『OutSystems』 を用いて、Tinderライクなマッチングアプリをつくる過程を紹介していきます。

☑︎本記事の内容

アウトプットと完成イメージ
必要な材料（画面構成、データ構成）
レシピ①：画面遷移バーをつくる
レシピ②：プロフィール画面とプロフィール編集画面をつくる

☑︎著者の経験

この記事を書いている私は、非情報系の大学院を卒業後、通信関係の企業に3年勤めた後、現在までコンサルティング会社に勤めています。
学生時代〜現職までプログラミングとは縁がなく、前職でルーターの設定を少しかじった程度のプログラミング完全初心者です。
こういった私が、解説していきます。

Twitterもはじめました。

アイデアを思いつきで終わらせるのはもったいない！と思い、趣味ながらプログラミングをはじめました。
1人でどうせ悩む日々なので、色々な意見も参考にしたく、今更ながらTwitter&ブログもはじめました。
三日坊主がどこまで続くか、、、
— Lteruの悩み@ローコード勉強中 (@LteruNoNayami) September 16, 2021

1 アウトプットと完成イメージ
2 必要な材料
3 レシピ0：新規登録画面、機能をつくる
4 レシピ①：画面遷移バーをつくる
5 レシピ②：プロフィール画面とプロフィール編集画面をつくる
6 まとめ

アウトプットと完成イメージ

○作りたいもの

OutSystemsを使った２つ目のアウトプットです。せっかくの高速開発ツールなのでどれくらい便利なのか測るために、身近なアプリのプロトタイプをどんどん作ってみたいと思いました。

そこで考えたのが、 『マッチング』アプリです。

もっと身近なアプリとしてTwitterとかメルカリとかも考えましたが、OutSystemsで使えるウィジェットの中に『カードを左右にスワイプしてアクションを変えるもの』があったので、Tinderっぽいものができそうと思いました。

（なお、私自身はマッチングアプリ未経験者であるため、想像が入ってしまっている点はご了承ください。）

○できること

作りたい機能を先にリストアップします。

ユーザー登録できること。 → 別記事
プロフィールとしてニックネームや写真を登録・編集できること。→ 今回
異性の写真をスワイプすることで『いいね』ができること。→ 次回以降
お互いに『いいね』された場合、マッチング成立を知らせられること。 → 次回以降
マッチングした人同士でメッセージを送り合えること。 → 次回以降

なお、以下は対象外とする。

趣味や距離といった情報からオススメのユーザーを優先して表示されること。

○完成イメージ

クックパッド的な感じで先に完成イメージを。

必要な材料

○画面構成

必要な画面は以下のとおり。

①ログイン画面
②新規登録画面
③プロフィール画面・・・プロフィール情報（ニックネーム、性別、顔写真など）の表示
④プロフィール情報登録画面・・・プロフィール情報の登録・編集
⑤マッチング画面（スワイプ型）・・・異性に対するLike or Unlike機能（スワイプアクション）およびマッチング成立ポップアップ
⑥チャット一覧画面・・・マッチング成立者の一覧表示とチャット画面への遷移
⑦チャット画面

今回、画面設計に使う主なウィジェットは以下のとおり。

Ifウィジェット・・・新規登録時か否かによるプロフィール画面表示の場合分け

○データ構成

最終的なE−R図は以下のとおり。

○作り方

OutSystemsでの開発方針として、以下の順番で進めていきたいと思います。

①画面をつくる
②DBをつくる
③ロジックをつくる

レシピ0：新規登録画面、機能をつくる

今回つくるマッチングアプリは、『誰から誰へ』といった情報が必要になるため、アプリケーションへのログインが必要です。そして、ログインするのは、ログインユーザーを登録する必要があります。

OutSystemsでは、以下の通りログイン画面とログインロジックは初めから作られています。

一方、サインアップ画面と機能はないため、実装する必要があります。

このサインアップ機能は色々なアプリで共通で必要になる機能だと思うので、別の記事で紹介しようと思います。

リンク

レシピ①：画面遷移バーをつくる

○画面をつくる

１．『Interface』タブの『Common』に初めから用意されている『BottomBar』を開きます。

２．『Column』ウィジェットと『icon』ウィジェットを用いて下記のようにアイコンを配置します。

↓

各アイコンの遷移画面は以下のとおりです。

1. Home　→　使い方考えてない
2. Message list　→　マッチング成立した人とチャットできる画面
3. Matching　→　スワイプ型の『いいね』機能を持つマッチング画面
4. Profile　→　プロフィール編集画面
5. Sign Out　→　ログイン画面

○ロジックをつくる

１．各アイコンに画面遷移用のロジックを追加します。

↓

２．ロジック内で、それぞれ遷移先の画面を選択します。

このとき、遷移先の画面はまだ作られていないので、新しく空の画面を作ります。

※ なお、今回はすべてのアイコンに画面遷移のロジックを追加しましたが、Linkでもいいです。

レシピ②：プロフィール画面とプロフィール編集画面をつくる

ここでは、以下の２つの画面をつくります。

③プロフィール画面・・・プロフィール情報（ニックネーム、性別、顔写真など）の表示
④プロフィール情報登録画面・・・プロフィール情報の登録・編集

○画面をつくる①：プロフィール画面

まずは、プロフィール画面をつくります。完成イメージは以下のとおりです。

１．『Container』ウィジェットを２つ配置します。
（上のContainerは写真や名前を表示、下のContainerはプロフィール情報登録画面への遷移ボタンなど）

２．上のContainerに『image』ウィジェットと『Expression』ウィジェットを配置します。
※ このとき、『image』ウィジェットのプロパティにて、Style Classを”img-circle”にすると、円形のイメージになります。

ここで、２つの変数が必要とわかります。

imageウィジェットのソース（Binary Data）・・・プロフィール画像
Expressionウィジェット①のソース・・・ユーザーニックネーム

３．下のContainerに『Column』ウィジェット（３列）、『Button』ウィジェット、『Upload』ウィジェット、『Icon』ウィジェットを配置します。

※ このとき、大きさや配置は『Container』ウィジェットを使って調整しています。

それぞれのボタンの役割は以下のとおり。

左ボタン・・・距離などマッチングの検索条件を設定 ※ 今回は飾り
中央ボタン・・・プロフィール画像のアップロード
右ボタン・・・プロフィール情報登録画面への遷移

○データベースをつくる

プロフィール画面をつくったので、次はプロフィール画面に表示させるユーザー情報を登録・編集する画面をつくります。

ここで、先にユーザー情報について考えます。

新規で登録したログインユーザーは、デフォルトで存在する『Userエンティティ』に登録されています。

なお、 このアプリケーションにログインできるユーザーのことをOutSystemsではアプリケーションユーザーといいます。
アプリケーションユーザーの他に ITユーザー というものがあります。

※ITユーザとの違いはOutSystemsのUser作成を参照

Userエンティティには初めからAttributeが存在しています。
この中に使いたい項目があればよいですが、 無い場合は新しくエンティティを作成し、Userエンティティと一対一で紐付けることでカスタマイズできます。

Userエンティティに今回使いたいようなニックネームや性別などの項目ないため、新しく『UserProfile』エンティティをつくります。

User（デフォルト）
UserProfile・・・姓、名、ニックネーム、性別、職業など

１．Userエンティティに足りない項目を『UserProfile』エンティティとして作成します。

２．性別のような選択式の項目はStatic Entityとして別枠で作成します。（『Gender』エンティティ）

３．UserエンティティとUserProfileエンティティを一対一、UserProfileエンティティとGenderエンティティを多対一で紐付けます。

画面をつくる②：プロフィール情報登録画面

１．新たに『ProfileEdit』画面をつくります。

このとき、『Form』ウィジェットにUserProfileエンティティをドラッグアンドドロップすることで、画面が自動で作られます。

さらに、必要なエンティティや変数が自動作成されます。

※ Input変数『UserProfileId』は『Profile』画面からログインユーザーのIdを渡すために作られ、Aggregate『GetUserProfileById』はUserProfileエンティティがログインユーザーでフィルタリングされています。

↓

２．自動設定で作られたInput変数『UserProfileId』はGetUserId()と同じであるため書き換えます。

３．Input変数『UserProfileId』を削除します。

○ロジックをつくる①：プロフィール画面

まずは、プロフィール画面作成時に足りなかったソースを加えます。

１．プロフィール画面にてAggregate『GetUserProfileById』をつくります。
このとき、Filter条件に『UserProfile.Id=GetUserId()』を加えます。

２．プロフィール画面にて変数のソースを設定します。

imageウィジェットのソース・・・GetUserProfileById.List.Current.UserProfile.ProfileThumbnail
Expressionウィジェット①のソース・・・GetUserProfileById.List.Current.UserProfile.Nickname

次に、新規ユーザー用の画面表示を考えます。新規ユーザーは、プロフィール画像もニックネームも設定されていないため、その場合の表示を変えたいと思います。

３．『If』ウィジェットを使って新規ユーザー用の表示場所をつくります。

プロフィール画面の条件・・・GetUserProfileById.List.Current.UserProfile.ProfileThumbnail <> NullBinary()
ニックネームの条件・・・GetUserProfileById.List.Current.UserProfile.Nickname <> NullTextIdentifier()

４．ifウィジェットの『False』にウィジェットを配置します。