みなさん、こんにちは。
ノーコード初心者の方に向けて第7回目のチュートリアルということで「SNSアプリの作り方」を解説していきたいと思います。
本記事を読むことによって、データベースの応用を学ぶことができますので、ぜひ最後までお読みください。
また、SNSアプリは第６回目のチュートリアルで作成した「ご意見箱アプリ」を応用して作るので、そちらをまだ作っていないという方は以下の記事を読んでから本記事をお読みください。
動画チュートリアル
今回の記事は、以下の動画をさらに分かりやすく解説した記事になります。
YouTubeを見て分からない点をこちらの記事で補うといった形で学習を進めてみてください。
SNSアプリの作り方
キャンバス画面を整理し、画像エレメントを導入する
今回のSNSアプリはご意見箱アプリを応用したものになるため、前回の記事の画面からスタートしていきます。
まず上の画像の赤枠の部分、つまりリストの空白の幅を調整する部分を以下の画像のように広げます。
次に、余白を調整する部分の中にある四角い白色のエレメント(シェイプエレメント)を選択します。そしてそのエレメントも下に広げます。
そして、そのシェイプエレメントの中に画像エレメントをドラッグ&ドロップで配置していきます。そして大きさを調整します。
この画像エレメントのエディターでは「画像ソース」の初期設定が「画像のアップロード」になっていますが、これでは通常のSNSアプリのように、ユーザーが投稿した画像を載せることはできません。なので、データベースを設定してきます。
データベースに移動したら、「項目を追加」を選択し「画像」をクリックします。名前を「投稿画像」にしましょう。この操作によって、画像ファイルをデータベースに格納することができるようになりました。
※YouTube動画では「Form内容」が「投稿内容」になっていますが、気にする必要はありません。テーブルの名前が変わっているだけなので動作に何も影響はありません。
次にキャンバス画面に戻り、画像エレメントを選択します。そしてエディターの「画像ソース」を選択し、「データベース」クリックします。そして「Current Form内容」を選択しましょう。
この操作によって、データベースから画像のデータを引用することが可能になります。
フォームの設定を行う
次に「Home」ページにあるフォームエレメントを選択し、エディターにある「項目」をクリックし、「表示項目の追加」を選択します。そこで「投稿画像」をクリックすると、フォームの中に画像をアップロードする欄が表示されます。
この状態で一度、プレビューしてみましょう。
フォームに「投稿者名」「投稿内容」「投稿画像」を入力します。
そして送信ボタンを押すと以下のようにリストが表示されます。
上の画像では写真が切れていますが、これは画像エレメントにて「画像トリミング」の設定が「画像の切り抜き表示」になっているためです。「フル画像の表示」に変更すると、画像をしっかり映すことが可能になります。
データベースのリレーションの設定を行う
この状態でもSNSアプリとして扱うことが可能ですが、今の状態では「投稿者名」をいちいちフォームに記入して送信しないといけないようになっています。「投稿者名」は自分自身であるため、わざわざ入力するのは面倒くさいですよね。
そのためにデータベースの「リレーション」という機能を使って改善していきます。
「リレーション」という機能を扱うことによって、実際にログインしているユーザー(以下の画像ではtest user1)の名前を「投稿者名」の中に自動で格納するということができます。
「リレーション」を設定するために、データベースに移動し「Form内容」の「項目を追加」を選択します。すると、一番下に「データの紐付け」があるのでそちらを選択し、「Users」をクリックします。
この操作によって「Form内容」のデータと「Users」のデータを紐づける、つまり連携させることができます。
次にタイプの一覧が表示されるので、一番上の「User は複数の Form内容 を保有します。Form内容 は1つの User にしか属しません。」を選択します。そして名前を「作成者」と入力します。
なぜこのタイプを選択するかと言うと、SNSにおいてユーザーは複数の投稿を行うからです。この状態をデータベース目線で言い換えると「Userというデータは、複数のForm内容のデータを保有している」ということになります。
リレーションの考え方はかなり難しいですが、アプリの最終形を見ればさらに理解が深まると思いますので、分からなくとも、気にせずに飛ばして次に進みましょう。
これで「Users」と「Form内容」のリレーション設定は完了です。
リレーションを使って「投稿者名」を自動表示する
キャンバス画面に戻りフォームエレメントを選択し「ClickFlow」から「ClickFlowの追加」をクリックします。そして「データの更新」を選択し「New Form内容」をクリックします。
これによって「[Create]Form内容」と「[Update]Form内容」が同時に行われるようになり、少し難しい感じがするかもしれませんが後ほど説明するので飛ばして先に進んでください。
「[Update]Form内容」を選択して「投稿者名」の右にある+ボタン(マジックテキスト)をクリックします。そして「Logged in User」の「Username」をクリックします。
するとユーザーがフォームに「投稿者名」を入力する必要がなくなるので、フォームエレメントを選択し「項目」から投稿者名を削除します。
すると以下の画像のようにフォームエレメントが変更されます。
先ほど説明を省略した「[Create]Form内容」と「[Update]Form内容」が同時に行われるようにした理由についてですが、これは「投稿者名」が入力されていないデータをCreateして、そのデータを即座にログインしているユーザーにUpdateするためです。
もしUpdateの処理がなければ、投稿者名が空白のデータが出力され、投稿内容と投稿画像だけのデータがリストに出力されるようになってしまいます。
これでSNSアプリは完成です。
プレビューで確認する
プレビューを行い「投稿内容」と「投稿画像」を入力し「送信する」をクリックします。
すると、以下の画像のようにUserである「test user1」が自動で入力されてタイムラインに載るようになります。
終わりに
いかがでしたでしょうか。
データベースの応用の仕方についてかなりイメージできるようになったのではないでしょうか？
SNSアプリを作る過程で学んだことを使えば、様々な種類のアプリに応用することができますので何かアイデアが思い浮かんだらぜひアウトプットしてみてください。
このアプリケーションを作成することができたみなさんは立派なアプリ開発者なのでぜひ自信を持ってもらえたらと思います。
NoCodeJapan株式会社では今後もClickの使用方法に関して発信していきます。
