みなさん、こんにちは。
ノーコード初心者の方に向けて第6回目のチュートリアルということで今回はClickで「ご意見箱アプリ」の作り方を解説していきたいと思います。
本記事を読むことによって、データベースを使ったアプリ開発が可能になりますので、ぜひ最後までお読みください。
また本記事は、第5回目のチュートリアルを応用したものになりますので、そちらの記事はまだ読んでいない方はそちらを先にお読みください。
動画チュートリアル
今回の記事は、以下の動画をさらに分かりやすく解説した記事になります。
YouTubeを見て分からない点をこちらの記事で補うといった形で学習を進めてみてください。
ご意見箱アプリの作り方
お問い合わせフォームを作成する
まずは前回のチュートリアルで作ったお問い合わせフォームを作成し、ご意見箱アプリに適した形に変更していきます。そのため、前回と同様にフォームエレメントを「Home」のページにドラッグ&ドロップで追加します。
そしてデータベースに移動し、一番下にある「テーブルを追加」をクリックします。そしてそこで「Form内容」という名前にします。
そして「項目を追加」から「テキスト」を選択し、「投稿者名」,「投稿内容」という名前で項目を作ります。「テキスト」と選択することによって、文字情報をそのデータベースに格納することができるようになります。
そしてキャンバスの画面に戻り、ドラッグ&ドロップによって配置した「フォーム」をクリックします。そして「データを選択してください」の部分から先ほどデータベースで作った「Form内容」を選択します。
この操作により、キャンバスにあったフォームエレメントの表示が変更されます。
そして、右側のエディターの「送信ボタン」を選択し、「ラベル」を「CREATE」から「送信する」に変更します。するとボタンの表示も「送信する」に変更されています。
投稿された意見のリストを作成する
次に、ご意見箱に集められた意見を表示するリストを作成していきます。
まず、新たにページを作るためにページエレメントをクリックし「一覧ページ」と名前をつけましょう。
次に「一覧ページ」に対して「カスタムリスト」というエレメントをドラッグ&ドロップをして配置します。
そしてカスタムリストをクリックして、右側にあるエディターの「データを選択してください」に対して最初に作成したデータベースのテーブルである「Form内容」を選択します。
この操作によって、「Form内容」にあるデータのリストを作成することができます。
次にカスタムリストの中にある「Title」を選択します。少し選択するのが難しいかもしれませんが、ピンポイントでダブルクリックを行うとできます。
また、このエレメントはテキストエレメントであるため、ここに文章を表示することができます。
次に右側のエディターの「Title」と書かれてある部分を削除して、その右上にある「+ボタン」をクリックします。
これは「マジックテキスト」と呼ばれ、データベースの中にあるデータを引用して表示することができます。
そこから「Current Form内容」を選択し、「投稿者名」をクリックします。
すると以下の画像のような表示になります。
次にカスタムリストの中にある「Sub Title」を選択します。こちらも先程と同じように、右側のエディターから「Sub Title」を削除して、その右上にある「+ボタン」をクリックします。そこから「Current Form内容」を選択し、「投稿内容」を選択します。
すると以下の画像のような画面になります。
補足ですが、この投稿内容を複数行の文章で表示したい場合は、右側のエディターの「Type Line」を「Multi Line」に変更すれば複数行のテキストを表示することができます。
しかし、このままだと「一覧ページ」から「Home」に戻ることができないため、ボタンを設置する必要があります。
なので、ボタンエレメントを選択し「一覧ページ」にドラッグ&ドロップして配置します。
そして右側のエディターから「ClickFlow」を選択し、「ClickFlowの追加」から「ページの移動」をクリックし、「Home」を選択します。
すると以下の画像のように表示が変更されます。矢印は、「一覧ページ」から「Home」に移動するためのエレメントが備わっていることを示しています。
また現在の状況では「Home」から「一覧ページ」に移動することができないため、同様に「Home」にあるフォームの「ClickFlow」をクリックし、「ClickFlowの追加」から「ページの移動」をクリックし、「一覧ページ」を選択します。
すると以下の画像のように表示が変更されます。
これで完成です。
プレビューを行い確認する
プレビューを行うと、まずサインアップのページが出てきます。
メールアドレスとパスワード、ユーザーネームを記入すると、アカウントを作成することができログインすることができます。すると、こちらのページに移動します。
そして「投稿者名」「投稿内容」にそれぞれ適切な文章を入力して「送信する」ボタンをクリックすると、それぞれの内容がリストに出力されます。
リストの幅を調整する(補足)
プレビューで確認して、複数のデータをリストに表示したとき、以下の画像のように余白が出現していると思います。
これでは見た目が悪いので、エディターのカスタムリストを選択して、赤枠の部分の幅を狭くしてください。この動作を行うことによって余白を調整することができます。
おわりに
いかがでしたでしょうか。
Clickのデータベースに対する知識がより深まったのではないでしょうか？
Clickではデータベースを上手く利用することによって、応用できる幅が広がるので、ぜひデータベースを使ってどんどんアプリを作ってみてください。
NoCodeJapan株式会社では今後もClickの使用方法に関して発信していきます。
