Clickチュートリアル＃5〜お問い合わせフォームの作り方〜

みなさん、こんにちは。

ノーコード初心者の方に向けて第5回目のチュートリアルということで今回はClickで「お問い合わせフォーム」というアプリの作り方を解説していきたいと思います。

本記事を読むことによって、Clickで簡単なアプリを開発できるようになりますので、ぜひ最後までお読みください。

またまだClickの登録が完了していないという方は以下の記事からご登録ください。

また、この記事で分からない用語などがありましたら、以下の記事を辞書のようにして調べながらご覧ください。

コンテンツ 非表示

おわりに

動画チュートリアル

今回の記事は、以下の動画をさらに分かりやすく解説した記事になります。

YouTubeを見て分からない点をこちらの記事で補うと言った形で学習を進めてみてください。

お問い合わせフォームの作り方

新しくアプリを作成する

まずは初期画面から、以下の画像の1番上の赤枠の部分(みなさんの画面にはSNSアプリとは書かれていない)をクリックします。

そして「新規アプリを作成」をクリックすると、アプリ名を入力する欄が出てくるので、そちらに「お問い合わせフォーム」と入力します。

最後に「作成」をクリックすると、新たにアプリを作成することができます。

エレメントを配置する

まずは、フォームエレメントを「Home」のページにドラッグ&ドロップで追加します。

データベースを追加する

次にデータベースの設定を行なっていきます。そのため左上の「データベース」と書かれたところをクリックします。

そして、一番下にある「テーブルを追加」をクリックします。

テーブルとは「データベースの種類ごとの単位」、つまりデータベースの情報をまとめるフォルダのことを指します。

例えば、中学校では英数国理社の5教科の授業を受けます。しかし、ノートを取る際はそれぞれ別のノートを用意して、内容を書き留めますよね。そのノートの役割を果たしているのがテーブルになります。つまり、テーブルとは情報を分かりやすく整理するために使う機能になります(ノートも情報が分かりやすくなるように英数国理社それぞれ別のノートを使う)。

最初から備わっているUsersのテーブルを見てみると、

Email
Password(ここはアプリを作った人でも見られないようになっている)
Username
Full name

の4つのデータが備わっています。テーブルの中では情報をさらに整理することができ、これによってユーザーの情報を分かりやすく管理することができます。

次にそこで「お問い合わせフォーム」という名前をつけます。

次に、お問い合わせフォームのテーブルから「Name」を選択し「内容」と名前を変更します。

エレメントの詳細設定を行う

先ほどドラッグ&ドロップによって配置した「フォーム」をクリックします。そして「データを選択してください」の部分から先ほどデータベースで作った「お問い合わせフォーム」を選択します。
この操作により、キャンバスにあったフォームエレメントの表示が変更されます。

次に右上にあるClickFlowをクリックすると、現在のClickFlowの状況を閲覧することができます。フォームエレメントでは最初から「[Create]お問い合わせフォーム」というClickFlowが選択されているため設定の必要はなく、ボタンを押すと入力したデータが「お問い合わせフォーム」のテーブルに格納されます。

これでアプリは完成です。

プレビューをしてみる

右上のプレビューボタンをクリックすると、実際にアプリを使う側の画面を見ることができます。これでどのようなアプリができているかを確認します。

そして実際に操作をして、アカウント登録を行います。パスワードやユーザーネームは適当に入力しても大丈夫です。しかし、メールアドレスに関しては、自分のメールアドレスか＠test.comや＠example.comなどの実際には存在しないアドレスを入力してください。実際に存在する他人のメールアドレスを入力してしまうと、問題になる場合があるためです。