.png)
出身地投票アプリを作ろう
今回は自分の出身地を入力して投票できるようなアプリを作成してみます。
完成イメージはこんな感じです。
- 都道府県を入力するフォーム
- 入力されたデータをデータベースに登録するボタン
- データベースに登録された、都道府県名を呼び出す
- クリックすると投票数を加算していくアイコン
都道府県名を入力するフォームの作成
入力フォームなので「Input」エレメントを使います。
都道府県名を入力するフォームなので、「都道府県名を入力」とします。
入力されたデータをデータベースに登録する
次に入力された都道府県名を「送信」するボタンを作成します。
ボタンの名前は「送信」とします。
この「送信ボタン」のワークフローを作成します。
Workflowタブに移動します。
「When Button 送信 is clicked」になります。
「Click here to add an action...」をクリックしてアクションを定義します。
保存ボタンがクリックされたら「データベースに都道府県名を登録したい」ので、「Data」を選択します。
「新しい情報を登録したい」ので、「Create a new thing...」をクリックします。
ここからは、都道府県名を保存するためのフィールドを、データベース内に作って行く作業をします。
「Creta a new type」をクリックします。
「Type」を「都道府県」とします。
これは、データベースのタイトルのようなものです。
続いて、データベースの「都道府県」の中に、都道府県名を保存するフィールドを作成します。
「Set another field」をクリックし、表示された「Create a new field...」ををクリックします。
フィールド名は、都道府県名を保存するので「名前」とします。
フィールドタイプは、都道府県名なので「text」を選択します。
「CREATE」をクリックします。
これで、データベースに「都道府県」というタイトルで、その中に「都道府県名」を保存できるフィールドが作成できました。
続いて、今作成したフィールドに何の情報を登録するかを設定します。
「Click」をクリックします。
先ほど作成した「入力都道府県」を選択します。
「's value」を選択します。
これで、「名前」というフィールドには、「入力都道府県」に入力された値を登録してください、という指示ができました。
続いて、投票数を登録するためのフィールドを作成します。
先ほどの「名前」と同様に、データベースに新たなフィールドを追加します。
今度は、名前を「投票」とし、数を登録していくので、「number」を選択します。
「CREATE」をクリックします。
投票数の最初の値は「1」としておきます。
続いて、「ユーザーが送信ボタンを押した後に入力をリセットする」ワークフローを作ります。
先ほどの、送信ボタンを押した時のアクションに追加します。
エレメントのアクション設定なので、「Element Actions」の「Reset inputs」を選択します。
これで、ユーザーが「都道府県名」を入力し、「送信ボタン」を押した時のワークフローができました。
データベースに登録された、都道府県名を呼び出す
続いて、入力されたデータをデータベースから呼び出し、表示する設定をします。
複数のデータを呼び出したいので、「Rpeating Group」エレメントを使います。
コンテンツのタイプは、先ほど作成した「都道府県」を選択します。
「Data source」を選択します。
「Click」をクリックします。
「Do a search for」を選択し、データベースのデータを検索するようにします。
データベースのどのデータタイプか聞かれるので、「都道府県」を選択します。
表示する順番を聞かれているので、「投票」順を選択します。
「Descending（降順）」かどうか聞かれているので、「yes」を選択します。
続いて、「Repeating Group」に投票結果を表示させるため、「Text」エレメントを配置します。
「Text」エレメントは「Repeating Group」の一番上のセルに配置します。
「Text」エレメントのプロパティで、現在セルにある「都道府県名」を表示させる設定をします。
「Insert dynamic data」をクリックします。
「Current cell's 都道府県」を選択します。
データベースの「都道府県」の「名前」を表示させるようにします。
同じ方法を繰り返して、「投票」も表示されるようにします。
クリックすると投票数を加算していくアイコン
次に、アイコンの設定をします。
「Icon」エレメントを使い、配置します。
アイコンは「ハート♥」にします。
アイコンのワークフローを設定します。
Workflowタブに移動します。
「When Vote Up Icon is clicked」になります。
「Click here to add an action...」をクリックして定義します。
「Data」を選択して、データを変化させたいので、「Make changes to thing...」を選択します。
ここのワークフローは、プレビューで実際に触ってみないと、イメージがつきにくいと思いますので、とりあえず解説に従って作業してみてください。
「Thing to change」は「Cullent cell's 都道府県」を選択することで、都道府県のデータを変化させるようにします。
アイコンが押されると、投票数が増えていく設定です。
「都道府県」のデータを何に変更するかを設定するため、「Change another field」をクリックします。
「投票」を選択します。
「Current cell's 都道府県」を選択します。
「's 投票」を選択します。
「+」を選択します。
「1」を入力します。
これで、アイコンを押したときのワークフローが完成です。
実際にプレビューで動作を確認してみましょう。
好きな「都道府県」を入力して、「送信」ボタンをクリックしてください。
送信した都道府県名が並んでいきます。
次に、アイコンをクリックしてみてください。
数字が加算されていくのがわかると思います。
これが、アイコンのワークフローで設定した、アイコンをクリックすると投票数が「+1」になるということです。
これでアプリケーションの完成です。
参考図書
LINE公式アカウント
仕事が辛くてたまらない人生が、仕事が楽しくてたまらない人生に変わります。
【登録いただいた人全員に、無料キャリア相談プレゼント中！】
