みなさん、こんにちは。
ノーコード初心者の方に向けて第8回目のチュートリアルということで、前回のチュートリアルを応用して「SNSアプリをさらに簡単に作る方法」を解説していきたいと思います。
本記事を読むことによって、アプリ開発の時間短縮を行うことができるようになるので、ぜひ最後までお読みください。
また、今回の記事はは第7回目のチュートリアルで作成したSNSアプリを改善したものになるので、まだ作成していない方は以下の記事読んでから本記事をお読みください。
事前準備(データベースの追加)
まず前回のデータベースに対して以下の2つのテーブルを追加します。
- ID(テキストタイプ)
- アバター画像(画像タイプ)
そして、そのデータベースにあらかじめIDと画像をアップロードしておきます。
タイムラインエレメントを使用する
では、前回のSNSアプリの画面から操作を行いたいと思います。
まず、カスタムリストを削除して、その場所に「タイムライン」エレメントを配置します。
そしてエディターの「データを選択してください」から「Form内容」を選択します。
そしてエディターの下に進むと「タイトル」などの表示を設定することができるので、マジックテキストから以下のように設定します。
- メニューオプション→自動更新はON(これによってデータベースの情報が自動で連携されます)
- タイトル→投稿者名
- サブタイトル→ID
- 投稿内容→内容
- アバター画像→データベース→Current Form内容→アバター画像
- 投稿画像→データベース→Current Form内容→投稿画像
また「アバター画像」の「デフォルト画像の表示」に関してはONにしておき、初期アイコンをアップロードしておくといいでしょう。ここでは以下のような画像をアップロードしておきます。
「投稿画像」の「画像トリミング」に関しては「フル画像の表示」を選択すると、画像が切れることなく表示させることができます。そしてその下にある「何も表示しない」に関してはONにしておきましょう。
以下の画像の赤枠の部分を参考に設定すると、分かりやすいと思います。
プレビューで確認する
プレビューを行うと、以下の画像のように表示されるようになります。
終わりに
いかがでしたでしょうか。
Clickのようなノーコードツールを使えばアプリ開発の時間は短縮できますが、それに加えて工夫を重ねればさらに効率良く開発することができます。
今回は全てをカスタムリストから作るのではなく、状況に適したリストを使うことによって開発の時間を短縮することを行いました。同様に、様々な場面で工夫を行えばより効率良く開発することができるので、ぜひ作業しながら「効率良く行うにはどうすればいいのか」ということを考えながら行なってみてください。
NoCodeJapan株式会社では今後もClickの使用方法に関して発信していきます。
