⌨️
インプット
サンプルアプリ
インプットとは
インプットエレメントは主にチャットや検索などユーザーがワードを入力するために用いるエレメントであり、以下の3種類がある。基本的には他のエレメントと組み合わせて使うことが多い。
① ラベル
文字、数字、記号問わず何でも入力が出来る。
② 数値
半角数字のみ入力することが出来る。数字と組み合わせて使うことの多い「¥」や「-」などの
記号を入力することが出来ないが「小数点」は使用可能である。
③ メールアドレス
メールアドレス形式「example@domain.com」で入力させたい時に用いる。
1)データの作成
インプットエレメントとボタンを用いてUserデータの作成を行う。
デーブルの作成
データベースの画面に移動し、Users テーブルに項目を追加します。「項目の追加」から「数値」タイプを選択し、年齢を保存するための項目を追加する。
エレメントの設定
キャンバス画面に移動し、インプットエレメントとテキストエレメントを3つずつと、ボタンエレメントをページに配置する。
テキストを変更します。それぞれのテキストエレメントを選択し、「ユーザーネーム」「メールアドレス」「年齢」を入力する。
それぞれのインプットエレメントの名前とプレイスフォルダーの設定をします。インプットエレメントを選択し、テキストエレメントと同様の名前に変更します。
※プレイスホルダーとは
そのインプットエレメントに何を入力するのか、どのように入力するのかといったように、入力する値の指標となるものです。ユーザーが入力するとプレイスホルダーは非表示になり、ユーザーが入力した文字がインプットエレメントに表示されます。
インプット > 種類 の設定
メールアドレスのインプットを選択し、「種類」を「メールアドレス」に変更します。年齢の種類は「数値」に変更します。
ClickFlow の設定
ボタンを選択し、右ウインドウ「ClickFlow > 作成 > User」を選択する。
User作成 タブから詳細設定を行います。
- Emailにはカスタムテキストから 「more… > Form Inputs > メールアドレス」を選択します。
- Usernameにはカスタムテキストから 「more… > Form Inputs > ユーザーネーム」を選択します。
- 年齢にはカスタムテキストから 「more… > Form Inputs > 年齢」を選択します。
プレビューを開き、動作確認を行う。
データの更新
インプットエレメントはデータの作成だけでなく、データの更新も行うことができる。
アカウント情報の更新する。
アカウント登録ページのフォームを選択し、右ウインドウ 「ClickFlow」タブの「ページ移動」タブを削除し、新規ページへの ClickFlow を作成する。「+ ClickFlowの追加」から「ページ移動 > 新規ページ」を選択します。
ログインページのフォームを選択し、右ウインドウの ClickFlow「ページ移動」の遷移先を先ほど作成したページに変更する。
新規ページに「テキストエレメント」と「インプットエレメント」を3つずつ、ボタンエレメントを1つ配置する。
それぞれのテキストエレメントの名前を「ユーザーネーム」「メールアドレス」「年齢」に変更する。
それぞれのインプットエレメントの名前とプレイスホルダーの設定をします。インプットエレメントを選択し、テキストエレメントと同様の名前に変更します。
メールアドレスのインプットを選択し、「種類」を「メールアドレス」に変更します。年齢の「種類」を「数値」に変更します。
ボタンを選択し、右ウインドウ「ClickFlow」タブから ClickFlow を設定する。「+ ClickFlowの追加」から「更新 > Logged in User」を選択する。
「User更新」項目を開き、それぞれカスタムテキストから設定します。
- Email more… > Form Inputs > メールアドレス
- Username more… > Form Inputs > ユーザーネーム
- 年齢 more… > Form Inputs > 年齢を設定する。
プレビューを開き、動作確認を行う。
インプットエレメントの応用
インプットエレメントはデータの作成・更新 以外にも他のエレメントと組み合わせることで多様な機能を実装することが可能である。
検索機能
新規ページの作成
インプットエレメントを配置する。
ベーシックリストを配置し右ウインドウ「ベーシック」タブを開き「Users」テーブルを選択する。サブタイトル、サブタイトル2、左セクションのスイッチをオフにする。
「タイトル」タブを開き、カスタムテキストから「Users > Username」を選択する。
もう一度「ベーシック」タブを開き、フィルターの「さらに追加」を選択する。
フィルターの条件を設定します。インプットに入力された値を含むデータを表示させます。
一番上のドロップダウンを「Username」
真ん中のドロップダウンを「含む」
一番下のドロップダウンを「Form Inputs > インプット」
を選択する。
プレビュー画面を開き、動作確認を行う。