この記事は、bubbleが用意しているレッスン(チュートリアル)の初心者むけのものを実際にやっていきます。
何をやっているのかもその都度解説していきますので、初心者の方でも分かりやすくなっています。
こんな方におすすめです
・レッスンやってみたけど、英語だし何やってるのか分からなかった方
・bubbleでどんなことができるのか知りたい方
・bubbleの操作を勉強したい方
この記事でできることは、こんな感じです。
- サインアップ・ログイン・ログアウト機能をつくる方法を勉強
- 投票アプリをつくる方法を勉強
- スライドショーの設置方法を勉強
- データベースに画像を保存し、その保存された画像を表示させる方法を勉強
- 色々な動作に条件を加える方法を勉強(条件分岐)
- 外部APIを使って「iTunes」の曲を表示させる方法を勉強
- データをチャート表示するための方法を勉強
このあと、レッスン(チュートリアル)を1つずつ解説していきます!
bubbleの基礎から勉強したい方は、先にこちらの記事で一通り勉強することをおすすめします。
この記事のレッスン(チュートリアル)の理解がより進むと思います。
![](https://hironk-blog.net/wp-content/uploads/2020/09/undraw_pride_y0te-320x180.png)
さっそく始めていきましょう!
レッスンは、①から順にやっていくことをおすすめします。
①:サインアップ・ログイン・ログアウト機能をつくる方法を勉強
ここでは、ユーザーが「サインアップ」「ログイン」「ログアウト」する機能をつくる方法を勉強をします!
完成イメージはこんな感じです。
![サインアップ・ログイン・ログアウト機能作成(プレビューで確認)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-124341.png)
・ユーザーが、「メールアドレス」と「パスワード」を入力するフォーム
・「サインアップボタン」と「ログインボタン」の設定
・ユーザーのメールアドレスを表示
・「ログアウトボタン」の設置
まずは、ユーザーが自分の「メールアドレス」や「パスワード」を入力できるように、入力フォームを作成していきます。
![サインアップ・ログイン・ログアウト機能作成(入力フォーム作成編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-100520.png)
「Input」エレメントで作っていきます。
![サインアップ・ログイン・ログアウト機能作成(入力フォーム作成編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-102340.png)
メールアドレスを入力するためのフォームなので、「メールアドレスを入力」にします。
「Content format」は、メールアドレスを入力する専用フォームなので、「Email」を選択。
![サインアップ・ログイン・ログアウト機能作成(入力フォーム作成編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-102532.png)
同じように、パスワードを入力するフォームを作成します。
「Content format」は、パスワード専用フォームなので「Password」を選択します。
![サインアップ・ログイン・ログアウト機能作成(入力フォーム作成編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-100916.png)
続いて、メールアドレスやパスワードに入力された情報を登録するための「ボタン」を作成します。
![サインアップ・ログイン・ログアウト機能作成(入力フォーム作成編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-101037.png)
まずは、サインアップのためのボタンで「サインアップボタン」をつくります。
![サインアップ・ログイン・ログアウト機能作成(入力フォーム作成編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-101209.png)
同じように、「ログインボタン」も作成します。
![サインアップ・ログイン・ログアウト機能作成(入力フォーム作成編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-101245.png)
ここまでできたら、「サインアップボタン」を押された時に、ユーザーの情報を登録する、ワークフローを作っていきます。
![サインアップ・ログイン・ログアウト機能作成(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-104614-1.png)
Workflowタブに移動します。
「When~~」の部分は、「いつ起こすアクションですか?」→「Buttonをクリックしたときです」になります。
「Click here to~~」をクリックしてアクションを定義していきます。
![サインアップ・ログイン・ログアウト機能作成(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-104640-1.png)
今回のワークフローはアカウント関係なので、「Account」を選択。
アカウントのSign upをしたいので、「Sign the user up」を選択。
![サインアップ・ログイン・ログアウト機能作成(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-104814-1.png)
アカウントを登録するには、「Email」と「Password」が必要なので設定します。
まずは、Emailです。
先ほど作成した、「Input Email」の、メールアドレスを登録したいので、「Input Email」を選択。
![サインアップ・ログイン・ログアウト機能作成(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-104842-1.png)
「value(値)」を選択。
![サインアップ・ログイン・ログアウト機能作成(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-104919-1.png)
同じようにPasswordも設定していきます。
![サインアップ・ログイン・ログアウト機能作成(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-104943-1.png)
これでサインアップはOKです。
次に、ログインボタンを押された時のワークフローを作成していきます。
![サインアップ・ログイン・ログアウト機能作成(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-105221-1.png)
ここをクリックすると新しいワークフローが作成できます。
![サインアップ・ログイン・ログアウト機能作成(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-105344-1.png)
今回は、エレメントのワークフローを設定したいので、「Elements」の「An element is clicked(エレメントはクリックされた時)」を選択します。
![サインアップ・ログイン・ログアウト機能作成(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-105447-1.png)
どのエレメントのワークフローですか?となりますので、「Button Login」を選択。
これで、ログインボタンのワークフローが作成できます。
![サインアップ・ログイン・ログアウト機能作成(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-105506-1.png)
ワークフローを作成していきます。
![サインアップ・ログイン・ログアウト機能作成(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-105540-1.png)
今度は、ログインのアクションなので、アカウントのログインを選択します。
![サインアップ・ログイン・ログアウト機能作成(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-105639-1.png)
先ほどのサインアップと同様の設定をして完了です。
次に、ログインした時に、そのユーザーの「メールアドレス」を表示させるようにしていきます。
デザインに戻ります。
![サインアップ・ログイン・ログアウト機能作成(メールアドレス表示編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-111718.png)
「Group」エレメントでグループを作ります。
![サインアップ・ログイン・ログアウト機能作成(メールアドレス表示編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-111733.png)
このように配置します。
![サインアップ・ログイン・ログアウト機能作成(メールアドレス表示編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-111800.png)
「Text」エレメントを、グループ内に入れます。
![サインアップ・ログイン・ログアウト機能作成(メールアドレス表示編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-111845.png)
ここに、現在ログインしているユーザーのメールアドレスを表示させます。
![サインアップ・ログイン・ログアウト機能作成(メールアドレス表示編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-111928.png)
Textエレメントのプロパティーで、現在ログインしている、ユーザーのメールアドレスを表示させる設定をしていきます。
「Insert dynamic data(動的データ)」をクリックして設定します。
![サインアップ・ログイン・ログアウト機能作成(メールアドレス表示編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-112018.png)
「Current User(現在のユーザー)」を選択。
![サインアップ・ログイン・ログアウト機能作成(メールアドレス表示編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-112040.png)
「email」を選択。
これで、現在ログインしている、ユーザーのメールアドレスを、Textエレメントで表示させるという設定ができました。
次に「ログアウトボタン」を設置します。
![サインアップ・ログイン・ログアウト機能作成(ログアウト編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-120730.png)
「Button」エレメントで「ログアウトボタン」を設置。
![サインアップ・ログイン・ログアウト機能作成(ログアウト編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-120755.png)
ログアウトボタンのワークフローを設定していきます。
![サインアップ・ログイン・ログアウト機能作成(ログアウト編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-120825.png)
Workflowタブに移動します。
「When~~」の部分は、「いつ起こすアクションですか?」→「Buttonをクリックしたときです」になります。
「Click here to~~」をクリックしてアクションを定義していきます。
![サインアップ・ログイン・ログアウト機能作成(ログアウト編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-120849.png)
アカウントの「ログアウト」を選択して完了です。
次に、「ログインボタン」を押した時に、先ほど作った「グループ」が表示されるワークフローを設定していきます。
![サインアップ・ログイン・ログアウト機能作成(ログインした時にグループを表示させる編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-121104.png)
新しくワークフローを作っていきます。
![サインアップ・ログイン・ログアウト機能作成(ログインした時にグループを表示させる編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-121153.png)
「ユーザーがログインした時」とします。
![サインアップ・ログイン・ログアウト機能作成(ログインした時にグループを表示させる編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-121351.png)
「ユーザーがログインした時」で設定していきます。
![サインアップ・ログイン・ログアウト機能作成(ログインした時にグループを表示させる編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-121454.png)
今回は、エレメントが表示するとう設定をします。
![サインアップ・ログイン・ログアウト機能作成(ログインした時にグループを表示させる編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-121711.png)
なんのエレメント表示するか聞かれましたので、先ほどつくった「グループエレメント」を表示させます。と設定します。
![サインアップ・ログイン・ログアウト機能作成(ログインした時にグループを非表示にする方法編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-123246.png)
新しいワークフローを作ります。
今度は、ログアウトした時のワークフローなので、「ログアウト」を選択します。
![サインアップ・ログイン・ログアウト機能作成(ログインした時にグループを非表示にする方法編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-123306.png)
「ユーザーがログアウトした時」のワークフローの設定をします。
![サインアップ・ログイン・ログアウト機能作成(ログインした時にグループを非表示にする方法編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-123325.png)
エレメントアクションの「Hide(非表示・隠す)」を選択します。
![サインアップ・ログイン・ログアウト機能作成(ログインした時にグループを非表示にする方法編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-123345.png)
グループエレメントを選択します。
これで、「ユーザーがログアウト」したら「グループエレメント」を非表示にするというワークフローができました。
これで、設定は完了です!
プレビューで動作を確認してみましょう!
![サインアップ・ログイン・ログアウト機能作成(プレビューで確認)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-123948.png)
まだ、グループ(ユーザーのメールアドレスとログアウトボタン)は表示されてません。
適当に「メールアドレス」と「パスワード」を入力してみましょう。
「サインアップボタン」をクリックで、グループ(ユーザーのメールアドレスとログアウトボタン)が表示されます。
![サインアップ・ログイン・ログアウト機能作成(プレビューで確認)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-124341.png)
表示されました。
「ログアウトボタン」をクリックして、「ログアウト」してみましょう。
グループが消えましたね。
これで、「サインアップ」「ログイン」「ログアウト」の機能を作る勉強を終了します。
②:投票アプリをつくる方法を勉強
ここでは、ユーザーが都市名を入力して投票できるようなアプリを作成する方法を勉強していきます!
このレッスンで勉強できること
・Repeating Groupを使ってデータベースに登録された情報をリスト表示させる
・Make changes to thingで、データベースに登録された情報を変換する
が主に学べます
完成イメージはこんな感じです。
![完成イメージ](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-163954-コピー.png)
・都市名を入力するフォーム
・入力されたデータをデータベースに登録するボタン
・データベースに登録された、都市名を呼び出す
・クリックすると投票数を加算していくアイコン
まずは、都市名を入力するフォームを作成します。
![投票アプリを作る方法](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-135247.png)
入力フォームなので、「Input」エレメントを使います。
![投票アプリを作る方法](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-135415.png)
都市名を入力するフォームなので、「都市名を入力」とします。
![投票アプリを作る方法](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-135448.png)
次に、入力された都市名を「送信」するボタンを作成します。
![投票アプリを作る方法](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-135543.png)
ボタンの名前は「送信」とします。
![投票アプリを作る方法(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-140324.png)
この「送信ボタン」のワークフローを作っていきます。
![投票アプリを作る方法(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-135711.png)
Workflowタブに移動します
「When~~」の部分は、「いつ起こすアクションですか?」→「送信Buttonをクリックしたときです」になります。
「Click here to~~」をクリックしてアクションを定義していきます。
![投票アプリを作る方法(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-141658.png)
保存ボタンをクリックしたら、「データベースに住所を登録したい」ので「Data」を選択。
新しい情報を登録したいので、「Create a new~~」をクリック。
![投票アプリを作る方法(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-141741.png)
ここからは、住所を保存するためのフィールドを、データベース内に作っていく作業をします。
「Create a new type」をクリック。
![投票アプリを作る方法(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-141842.png)
Typeを「都市」とします。
これは、データベースのタイトルのようなものです。
![投票アプリを作る方法(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-142343.png)
続いて、データベースの「都市」の中に、都市名を保存するフィールドを作成します。
「Set another field」をクリック。
![投票アプリを作る方法(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-142453.png)
フィールド名は、都市名を保存するので「名前」とします。
フィールドタイプは、都市名なので「text」を選択。
「CREATE」をクリック。
これで、データベースに
「都市」とういタイトルで、その中に「都市名」を保存できるフィールドの作成ができました。
![投票アプリを作る方法(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-142523.png)
続いて、今作成したフィールドに何の情報を登録するかを設定します。
「Click」をクリック
![投票アプリを作る方法(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-142627.png)
先ほど作成した、「Input 都市を入力」を選択します。
![投票アプリを作る方法(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-142644.png)
「value(値)」を選択。
これで、
「名前(都市名)」というデータベースに中には、「Input 都市名を入力」に入力された「値」を登録してくださいね。という指示ができました。
続いて、投票数を登録するためのフィールドを作成します。
![投票アプリを作る方法(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-150458.png)
データベースに新たにフィールドを追加します。
![投票アプリを作る方法(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-150633.png)
今度は、名前を「投票」とし、数を登録していくので、「number」を選択します。
「CREATE」をクリック。
![投票アプリを作る方法(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-150733.png)
投票の最初の値は、「1」としておきます。
続いいて、「ユーザーが送信ボタンを押した後に入力をリセットする」ワークフローを作っていきます。
![投票アプリを作る方法(入力をリセット編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-152452.png)
先ほどの、送信ボタンを押した時のアクションに追加していきます。
![投票アプリを作る方法(入力をリセット編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-152536.png)
エレメントのアクションの設定なので、「Element Acctions」の「Reset inputs(入力をリセット)」を選択します。
これでユーザーが、「都市入力」しを「送信ボタン」を押した時のワークフローができました!
続いて、入力されたデータをデータベースから呼び出し表示をする設定をしていきます。
![投票アプリを作る方法(投票結果を表示編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-153309.png)
複数のデータを呼び出したいので、「Repeating Group」エレメントを使います。
![投票アプリを作る方法(投票結果を表示編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-153417-300x280.png)
このように配置します。
![投票アプリを作る方法(投票結果を表示編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-153443.png)
コンテンツのタイプは、先ほど作成した「都市」を選択します。
![投票アプリを作る方法(投票結果を表示編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-153622.png)
「Data source(情報源)」を選択していきます。
「Click」をクリック。
![投票アプリを作る方法(投票結果を表示編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-153648.png)
「Do a search for」を選択し、データベースのデータを検索しにいきます。
![投票アプリを作る方法(投票結果を表示編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-153714.png)
データベースのどのデータTypeか聞かれているので、「都市」を選択。
![投票アプリを作る方法(投票結果を表示編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-153756.png)
表示する順番を聞かれているので、「投票」順を選択。
![投票アプリを作る方法(投票結果を表示編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-153837.png)
「Descending(降順)」ですか?と聞かれているので、「yes」を選択。
続いて、「Repeating Group」に投票結果を表示させるため、「Text」エレメントを配置します。
![投票アプリを作る方法(投票結果を表示編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-154212.png)
![投票アプリを作る方法(投票結果を表示編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-155415.png)
このように「Repeating Group」の一番上のセル内に配置します。
![投票アプリを作る方法(投票結果を表示編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-155445.png)
Textエレメントのプロパティーで、現在セルにある「都市」を表示させる設定をしていきます。
「Insert dynamic data(動的データ)」をクリックして設定します。
![投票アプリを作る方法(投票結果を表示編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-155538.png)
「Current cells 都市」を選択。
![投票アプリを作る方法(投票結果を表示編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-155706.png)
データベースの「都市」の「名前」を表示させるようにします。
![投票アプリを作る方法(投票結果を表示編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-160005.png)
同じことを、繰り返しやって、「投票」も表示されるようにしましょう。
次にアイコンの設定をしていきます。
![投票アプリを作る方法(アイコン編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-160045.png)
「Icon」エレメントを使います。
![投票アプリを作る方法(アイコン編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-160200.png)
このように配置します。
![投票アプリを作る方法(アイコン編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-160216.png)
アイコンは「ハート♥」にします。
![投票アプリを作る方法(アイコン編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-160257.png)
アイコンのワークフローを設定していきます。
![投票アプリを作る方法(アイコン編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-160325.png)
Workflowタブに移動します。
「When~~」の部分は、「いつ起こすアクションですか?」→「アイコンをクリックしたときです」になります。
「Click here to~~」をクリックしてアクションを定義していきます。
![投票アプリを作る方法(アイコン編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-160434.png)
「Data」を選択して、データを変化させたいので、「Make changes to~~」を選択します。
ここのワークフローは、プレビューで実際にさわってみないと、イメージ付きにくいと思いますので、とりあえず解説に従って、作業していってください!
![投票アプリを作る方法(アイコン編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-160528.png)
「Current cells 都市」を選択。
都市のデータを変化させます。
アイコンを押すと、投票数(都市データ)が増えていくように設定します。
![投票アプリを作る方法(アイコン編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-162148.png)
「都市」のデータを何に変更するかを設定していきます。
「Change another field」をクリック。
![投票アプリを作る方法(アイコン編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-162221.png)
「投票」を選択。
![投票アプリを作る方法(アイコン編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-162308.png)
「Current cells 都市」を選択。
![投票アプリを作る方法(アイコン編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-162328.png)
「投票」を選択。
![投票アプリを作る方法(アイコン編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-162446.png)
「+」を選択。
![投票アプリを作る方法(アイコン編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-162523.png)
「1」を入力。
これで、アイコンを押した時のワークフローは完了です!
何をしたか分からないと思うので、プレビューで実際に動作を確認していきましょう。
![投票アプリを作る方法(プレビューで確認)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-163900-300x300.png)
お好きな都市を入力して「送信」ボタンをクリックしてください。
送信した都市が並んでいきます。
![投票アプリを作る方法(プレビューで確認)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-163954-298x300.png)
次に、アイコンをクリックしてみてください。
数字が加算されていくのが分かると思います。
これが、アイコンのワークフローで設定したことです。
アイコンをクリックすると、投票数が+1になるという設定ですね。(データの変換)
これで、投票アプリを作る方法の勉強を終了します!
③:スライドショーの設置方法を勉強
ここでは、プラグインの使い方を勉強しながら、スライドショーを作成していきます!
完成イメージはこんな感じです。
![プラグインを使ったスライドショーの勉強](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-171400.png)
まずは、プラグインのインストールからやっていきましょう!
![プラグインを使ったスライドショーの勉強](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-170254.png)
「Pluginsタブ」をクリック。
![プラグインを使ったスライドショーの勉強](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-170315.png)
こちらをクリック。
![プラグインを使ったスライドショーの勉強](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-170438.png)
検索窓に「Slideshow」と入力し、「Slick Slideshow」をインストールします。
![プラグインを使ったスライドショーの勉強](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-170614.png)
デザインタブに戻ります。
「Slideshow」というエレメントが追加されてますので、これを使います。
![プラグインを使ったスライドショーの勉強](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-170655.png)
このように配置します。
![プラグインを使ったスライドショーの勉強](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-170732.png)
画像をアップロードしますので、こちらをクリック。
![プラグインを使ったスライドショーの勉強](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-170759.png)
「Upload」ボタンをクリックし画像を選択します。
![プラグインを使ったスライドショーの勉強](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-170913.png)
こんな感じになります。
さらに追加する場合は、同じことを繰り返します。
![プラグインを使ったスライドショーの勉強](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-171234.png)
色々設置も変更できますので、お好みで変更してください。
これで完了です。
プレビューで動作を確認してみましょう!
![プラグインを使ったスライドショーの勉強](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-171400.png)
ちゃんとスライドショーになっています!
簡単でしたね。
④:データベースに画像を保存し、その保存された画像を表示させる方法を勉強
ここでは、データベースに画像を保存して、その保存した画像を表示させる方法を勉強します!
勉強できること
・画像をアップロードする方法
・新しいページを作る方法
・別ページに移動する方法
・ページ間でデータをやり取りする方法
こんな感じです。
完成イメージはこれです。
![データベースに保存された画像を表示させる方法を勉強(プレビュー)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-061443.png)
「画像のタイトルを入力」「画像をアップロード」して「保存ボタン」を押すと、それがデータベースに保存されます。
また、保存をすると右側に、「タイトルのリンク」が表示されて、このリンクをクリックをクリックすると、新しいページに移動します。
![データベースに保存された画像を表示させる方法を勉強(プレビュー)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-061504.jpg)
移動したページでは、データベースに保存された、画像やタイトルが表示されます。
こんな感じのものを作っていきます!
まずは、画像をアップロードする為のフォームを作成していきます。
![画像をアップロードする方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-173712.png)
「Input」エレメントで、画像のタイトルを入力するフォームを作成します。
![画像をアップロードする方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-173832.png)
「画像のタイトルを入力」と入力
![画像をアップロードする方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-173938.png)
画像をアップロードするために、「Picture Uploader」エレメントを使います。
![画像をアップロードする方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-174015.png)
このように配置。
![画像をアップロードする方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-174036.png)
「Button」エレメントで、画像をアップロードするためのボタンを作成します。
![画像をアップロードする方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-174158.png)
このように配置して、ボタン名は「保存」にします。
![データベースに保存された画像を表示させる方法を勉強(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-174851.png)
ボタンを押したら、「画像がアップロード」されるよう、ワークフローを作っていきます。
![データベースに保存された画像を表示させる方法を勉強(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-174919.png)
Workflowタブに移動します
「When~~」の部分は、「いつ起こすアクションですか?」→「Buttonをクリックしたときです」になります。
「Click here to~~」をクリックしてアクションを定義していきます。
![データベースに保存された画像を表示させる方法を勉強(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-175806.png)
ボタンをクリックしたら、「データベースに画像を登録したい」ので「Data」を選択。
新しい情報を登録したいので、「Create a new~~」をクリック。
![データベースに保存された画像を表示させる方法を勉強(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-175023.png)
ここからは、画像を保存するためのフィールドを、データベース内に作っていく作業をします。
「Create a new type」をクリック。
![データベースに保存された画像を表示させる方法を勉強(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-175043.png)
Typeを「画像」とします。
これは、データベースのタイトルのようなものです。
![データベースに保存された画像を表示させる方法を勉強(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-175117.png)
続いて、データベースの「画像」の中に、画像のタイトルを保存するフィールドを作成します。
「Set another field」をクリック。
![データベースに保存された画像を表示させる方法を勉強(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-175214.png)
フィールド名は、画像のタイトルを保存するので「タイトル」とします。
フィールドタイプは、タイトルなので「text」を選択。
「CREATE」をクリック。
これで、データベースに
「画像」とういタイトルで、その中に「タイトル」を保存できるフィールドの作成ができました。
![データベースに保存された画像を表示させる方法を勉強(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-175238.png)
続いて、今作成したフィールドに何の情報を登録するかを設定します。
「Click」をクリック。
![データベースに保存された画像を表示させる方法を勉強(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-175305.png)
先ほど作成した、「Input Title」を選択します。
![データベースに保存された画像を表示させる方法を勉強(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-175329.png)
「value(値)」を選択。
これで、
「画像」というデータベースに中の「タイトルフィールド」には、「Input Title」に入力された「値」を登録してくださいね。という指示ができました。
タイトルのフィールドに続いて、データベースの中に画像を保存するフィールドを作成します。
やり方は「タイトルフィールド」と一緒です。
![データベースに保存された画像を表示させる方法を勉強(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-175401.png)
「Set another field」をクリック。
![データベースに保存された画像を表示させる方法を勉強(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-175424.png)
新しいフィールドを作成します。
![データベースに保存された画像を表示させる方法を勉強(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-175514.png)
フィールド名は、画像のタイトルを保存するので「写真」とします。
フィールドタイプは、画像なので「image」を選択。
「CREATE」をクリック。
![データベースに保存された画像を表示させる方法を勉強(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-175540.png)
「Input Picture 」を選択。
![データベースに保存された画像を表示させる方法を勉強(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-09-175604.png)
「value(値)」を選択。
これで、
「画像」というデータベースに中の「写真フィールド」には、「Input Picture 」に入力された「値」を登録してくださいね。という指示ができました。
続いて、ユーザーが、保存ボタンを押したあと、画像の表示をリセットするワークフローを作っていきます。
![データベースに保存された画像を表示させる方法を勉強(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-044834.png)
続いて、ユーザーが、保存ボタンを押したあと、画像の表示をリセットするワークフローを作っていきます。
![データベースに保存された画像を表示させる方法を勉強(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-044915.png)
今度は、エレメントのアクションの設定なので、「Element Acctions」の「Reset inputs(入力をリセット)」を選択。
これでワークフローは完了です。
デザインタブに戻ります。
![データベースに保存された画像を表示させる方法を勉強(Repeating Group編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-045241.png)
画像を表示するフィールドを作成していきます。
「Repeating Group」エレメントを使います。
![データベースに保存された画像を表示させる方法を勉強(Repeating Group編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-045317.png)
このように配置します。
![データベースに保存された画像を表示させる方法を勉強(Repeating Group編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-045503.png)
コンテンツのタイプは、先ほど作成した「画像」を選択します。
![データベースに保存された画像を表示させる方法を勉強(Repeating Group編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-045444.png)
「Data source(情報源)」を選択していきます。
「Do a search for」を選択し、データベースのデータを検索しにいきます。
データベースのどのデータTypeか聞かれているので、「画像」を選択。
続いて、ユーザーがクリックしたら、別のページに移動できるようにしていきます。
![データベースに保存された画像を表示させる方法を勉強(ページ移動編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-050445.png)
ページの移動には、「Link」エレメントを使います。
![データベースに保存された画像を表示させる方法を勉強(ページ移動編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-050617.png)
Repeating Groupの中にこのように配置します。
![データベースに保存された画像を表示させる方法を勉強(ページ移動編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-050648.png)
「Insert dynamic data(動的データ)」をクリックして設定します。
動的データを使って、リンクエレメントに画像のタイトルを表示させるようにします。
![データベースに保存された画像を表示させる方法を勉強(ページ移動編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-050723.png)
「Current cells 画像」を選択。
![データベースに保存された画像を表示させる方法を勉強(ページ移動編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-050753.png)
「画像」の「タイトル」を表示させるようにしました。
これでデータベースに保存した「画像」の「タイトル」がリンクに表示されるようになりました。
続いて、新しいページを作っていきます。
![新しいページをつくる](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-051929.png)
画面左上から新しいページは作っていきます。
「▼」をクリック。
![新しいページをつくる](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-051953.png)
「Add a new page」をクリック。
ちなみに今までは、「index」ページにいました。
![新しいページをつくる](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-052250.png)
ページの名前はなんでもOKです。
「CREATE」をクリックで新しいページが作成されます。
新しいページに移動したら、なにもないところで左クリックをしましょう。
![データベースに保存された画像を表示させる方法を勉強(画像ページ作成編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-053100.png)
このように、ページ全体のプロパティーがひらきます。
先ほどつけた「Picture 」が反映されています。
![データベースに保存された画像を表示させる方法を勉強(画像ページ作成編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-053334.png)
コンテンツのタイプを「画像」として、このページは画像を表示させるページですよ。と設定をします。
![データベースに保存された画像を表示させる方法を勉強(画像ページ作成編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-053432.png)
ページ名はなんでも良いですが、ここでは「画像ページ」としておきます。
続いて、このページに画像を表示させる作業をしていきます。
![データベースに保存された画像を表示させる方法を勉強(画像ページ作成編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-053522.png)
画像を表示させたいので、「Image」エレメントを使います。
![データベースに保存された画像を表示させる方法を勉強(画像ページ作成編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-053617.png)
画面に大きめに設置します。
![データベースに保存された画像を表示させる方法を勉強(画像ページ作成編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-053731.png)
Imageエレメントに、なんの画像を表示させるかの設定をしていきます。
「Insert dynamic data(動的データ)」をクリックして設定します。
![データベースに保存された画像を表示させる方法を勉強(画像ページ作成編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-053801.png)
![データベースに保存された画像を表示させる方法を勉強(画像ページ作成編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-053828.png)
これで写真を表示させるように設定しました。
続いて、写真のタイトルも表示されるようにしましょう。
![データベースに保存された画像を表示させる方法を勉強(画像ページ作成編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-055217.png)
「Text」エレメントを使います。
![データベースに保存された画像を表示させる方法を勉強(画像ページ作成編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-055303.png)
このように配置します。
![データベースに保存された画像を表示させる方法を勉強(画像ページ作成編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-055322.png)
あとは、先ほどの写真を表示させるやり方と同じです。
「Insert dynamic data(動的データ)」の設定で、「Current Page 画像 タイトル」にしましょう。
これで、写真のタイトルを表示させることができます。
テキストのフォントはお好みで設定しましょう。
これで新しいページ(Picture )の設置は終わったので、Indexページ(最初のページ)に戻りましょう。
![データベースに保存された画像を表示させる方法を勉強(リンクの設定編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-060038.png)
Indexページに戻り、最後に、リンクをクリックしたら、先ほどつくった「Picture ページ」に移動できるように設定します。
![データベースに保存された画像を表示させる方法を勉強(リンクの設定編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-060245.png)
リンクエレメントをクリックしてプロパティーを表示します。
「Destination pade(宛先)」でリンクをクリックしたときに、どのページ飛ぶか設定します。
先ほど作った「Picture ページ」に設定します。
![データベースに保存された画像を表示させる方法を勉強(リンクの設定編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-060334.png)
「Data to send(送信するデータ)」で送信するデータを選択します。
現在表示している、画像をデータを送信したいので、「Current cells 画像」を選択。
![データベースに保存された画像を表示させる方法を勉強(リンクの設定編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-060428.png)
ユーザーがリンクをクリックした時に、新しいタブで開けるように、「Open in a new tab」にチェックをいれます。
これで設定は完了です。
プレビューで動作を確認してみましょう!
![データベースに保存された画像を表示させる方法を勉強(プレビュー)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-061443.png)
画像のタイトルを入力→好きな画像をアップロードして、保存ボタンを押してみましょう!
![データベースに保存された画像を表示させる方法を勉強(プレビュー)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-061443.png)
このように、右側にタイトルのリンクが出てきました。
このリンクをクリックしてみましょう。
![データベースに保存された画像を表示させる方法を勉強(プレビュー)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-061504.jpg)
新しいページに移動して、タイトルと写真がちゃんと表示されました!
これでこのレッスンは終了となります。
⑤:色々な動作に条件を加える方法を勉強(条件分岐)
このレッスンでは、色々な動作に条件を加える方法を勉強していきます!
勉強できることは、
・「Conditional(条件付き)」の使い方
・「Alert(アラート)」の使い方
・ワークフローで条件を追加する方法
1つずつやっていきましょう!
「Conditional(条件付き)」の使い方
ここでは、ユーザーがマウスホバーした時に、テキストの色を変える方法を勉強していきましょう!
![マウスホバーした時テキストの色を変更する方法](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-063939.png)
「Text」エレメントを使っていきます。
![マウスホバーした時テキストの色を変更する方法](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-064106.png)
テキスト名をなんでもいいですが、ここでは「Hover me!!」とします。
フォントサイズも少し大きくします。
![マウスホバーした時テキストの色を変更する方法](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-064208.png)
「Conditional(条件付き)」タブを選択。
![マウスホバーした時テキストの色を変更する方法](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-064224.png)
「Define another condition(別の条件を定義する)」をクリックして、条件を定義していきます。
![マウスホバーした時テキストの色を変更する方法](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-064337.png)
いつ条件を変更しますか?ときかれているので、
「This Text(このテキスト)」が・・・
![マウスホバーした時テキストの色を変更する方法](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-064403.png)
「is hovered(ホバー)」
「このテキストがホバーされた時」条件を変更してください。と設定しました。
続いて、どんな条件に変更するかを設定していきます。
![マウスホバーした時テキストの色を変更する方法](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-064500.png)
こちらで、変更する条件を選択します。
![マウスホバーした時テキストの色を変更する方法](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-064524.png)
今回は、テキストのフォントの色を変更しますので、「Font color」を選択します。
![マウスホバーした時テキストの色を変更する方法](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-064558.png)
Font colorを「赤色」にして設定完了です。
これで
テキストがマウスホバーされたら、テキストの色を赤色にしてください
とうい条件を追加しました。
これで設定は完了です。
プレビューで動作を確認してみてください!
「Alert(アラート)」の使い方とワークフローで条件を追加する方法
ここでは、アラートの使い方とワークフローで条件を追加する方法を勉強していきます!
完成イメージはこんな感じです。
![プレビューで動作を確認](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-093903.png)
何か文字を入力して、ボタンをクリックすると、アラートが表示されるようにしていきます。
また、文字が入力されていない時は、アラートが表示されないような設定もあわせてしていきます。
まずは、入力フォームを作っていきましょう
![「Alert(アラート)」の使い方](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-085646.png)
「Input」エレメントを使って入力フォームを作ります。
![「Alert(アラート)」の使い方](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-085833.png)
次に「Button」エレメントを配置します。
![「Alert(アラート)」の使い方](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-085931.png)
「Input」と「Button」をこのように配置します。
Buttonの名前は、「クリック!!」にします。
![「Alert(アラート)」の使い方](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-090445.png)
次に「Alert」エレメントを配置します。
![「Alert(アラート)」の使い方](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-090613.png)
表示は、「アラート」としました。
続いて、ユーザーがボタンをクリックした時のワークフローを作っていきます!
![「Alert(アラート)」の使い方(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-091456.png)
ボタンのワークフローを作っていきます。
![「Alert(アラート)」の使い方(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-091527.png)
Workflowタブに移動します
「When~~」の部分は、「いつ起こすアクションですか?」→「Buttonをクリックしたときです」になります。
「Click here to~~」をクリックしてアクションを定義していきます。
![「Alert(アラート)」の使い方(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-091551.png)
エレメントのアクションを起こしたいので、「Element Actions」を選択。
Alertの「Show message」を選択して、アラートのメッセージを表示すると設定します。
![「Alert(アラート)」の使い方(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-091614.png)
どのアラートを表示する?と聞かれてますので、先ほど作成した「Alert No Empty」を選択。(ページ内に「Alert No Empty」のアラートしかないので、デフォルトで設定されてます)
![「Alert(アラート)」の使い方(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-092615.png)
「Only when(~の時だけ)」で、「入力フォームに文字が入力されている時だけアラートが表示される」ように設定していきます。
![「Alert(アラート)」の使い方(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-092655.png)
先ほど作った「Input Text」のフォームを選択。
![「Alert(アラート)」の使い方(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-092805.png)
valueを選択。
![「Alert(アラート)」の使い方(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-092845.png)
「is not empty(空ではない)」を選択。
これで、
「入力フォーム」の「値」が「空ではない時」に「アラートを表示させる」という設定
ができました。
これで完成ですので、プレビューで動作を確認してみてください!
![プレビューで動作を確認](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-093903.png)
文字を入力して、ボタンを押したら、アラートが表示されます!
⑥外部APIを使って「iTunes」の曲を表示させる方法を勉強
ここでは、外部APIを使って「iTunes」の曲を表示させる方法を勉強していきます!
完成イメージはこんな感じです。
![プレビューで動作を確認](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-105429.png)
検索窓にタイトルを入力すると、検索結果が表示され、検索結果のリンクをクリックすると、iTunesのサイトに飛びます。
![プレビューで動作を確認](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-105458.png)
iTunesのサイトに飛びました。
こんな感じのものを作っていきます!
まずは、ユーザーが曲を入力するための「入力フォーム」を作りましょう!
![外部APIを使って「iTunes」の曲を表示させる方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-095754.png)
「Input」エレメントを使います。
![外部APIを使って「iTunes」の曲を表示させる方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-095913.png)
次に「Repeating Group」エレメントも配置します。
![外部APIを使って「iTunes」の曲を表示させる方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-100018.png)
こんな感じで配置ます。
行を「3」に変更して。列は「2」にします。
続いて、プラグインをインストールしていきます。
![](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-100359.png)
「Pluginsタブ」をクリック。
![外部APIを使って「iTunes」の曲を表示させる方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-100412.png)
クリック。
![外部APIを使って「iTunes」の曲を表示させる方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-100504.png)
検索窓に「itunes」と入力して検索。
「iTunes」をインストール。
![外部APIを使って「iTunes」の曲を表示させる方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-100514.png)
クリック。
続いて、デザインタブに戻って、Repeating Grouの設定をしていきます。
![外部APIを使って「iTunes」の曲を表示させる方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-100842.png)
Repeating Grouエレメントのプロパティーを開きます。
コンテンツのタイプに「iTunes Song」を選択。
![外部APIを使って「iTunes」の曲を表示させる方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-100931.png)
「Data source(情報源)」はどこから持ってくるか?の設定は「外部API」とします。
![外部APIを使って「iTunes」の曲を表示させる方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-100957.png)
APIの提供者を聞かれているので、「Get iTunes songs」とします。
![外部APIを使って「iTunes」の曲を表示させる方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-101110.png)
「検索方法」は、動的データで設定していきます。
![外部APIを使って「iTunes」の曲を表示させる方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-101153.png)
先ほど作成した、「Term Imput(入力フォーム)」を選択。
![外部APIを使って「iTunes」の曲を表示させる方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-101255.png)
valieを選択。
検索方法は、「入力フォーム」の「値」と設定しました。
最後に、曲のタイトル(リンク)を作成していきます。
このリンクは、iTunesに飛ぶリンクです。
![外部APIを使って「iTunes」の曲を表示させる方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-102830.png)
「Link」エレメントを、Repeating Grou内に設置していきます。
![外部APIを使って「iTunes」の曲を表示させる方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-102945.png)
このようにリンクを設置します。
リンクのプロパティーで、iTunesとの紐づけを行っていきます。
「Insert dynamic data(動的データ)」をクリックして設定します。
![外部APIを使って「iTunes」の曲を表示させる方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-103040.png)
現在検索された、iTunesの曲を選択。
![外部APIを使って「iTunes」の曲を表示させる方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-103110.png)
タイトルを選択。
これで、「現在検索された、iTunesの曲のタイトルを表示する」という設定ができました。
![外部APIを使って「iTunes」の曲を表示させる方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-16-063400.png)
続いて、「Data to send(情報源)」はどこから?の設定をしていきます。
外部URLから取得するので、「External URL(外部URL)」を選択します。
![外部APIを使って「iTunes」の曲を表示させる方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-103245.png)
リンク先のURLを設定します。
「Insert dynamic data(動的データ)」をクリック。
![外部APIを使って「iTunes」の曲を表示させる方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-103329.png)
現在検索された、iTunesの曲を選択。
![外部APIを使って「iTunes」の曲を表示させる方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-103401.png)
URLを選択。
これで、「現在検索された、iTunesの曲のURLに飛ぶ」という設定ができました。
これで設定は完了なので、プレビューで動作を確認しましょう!
![プレビューで動作を確認](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-105429.png)
検索窓にタイトルを入力すると、検索結果が表示されます。
検索結果のリンクをクリックすると、iTunesのサイトに飛びます。
![プレビューで動作を確認](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-105458.png)
表示されました!
成功ですね。
これで、外部APIを使って「iTunes」の曲を表示させる方法を終わります!
⑦:データをチャート表示するための方法を勉強
このレッスンでは、APIを用いて、データをチャート表示させる方法を勉強していきます!
完成イメージはこんな感じです。
![プレビューで動作を確認](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-140929.png)
入力フォームの「ラベル」に入力したデータが、横軸の月になり、「値」に入力したデータが縦軸になるようなチャートを作っていきます!
「保存ボタン」を押すと、入力したデータが、データベースに保存され、それがチャートに反映される仕組みです。
まずは、データを入力する、入力フォームを作成していきます。
![データをチャート表示するための方法](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-115935.png)
「Input」エレメントを使います。
![データをチャート表示するための方法](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-115422.png)
チャートのX軸なりますので、「ラベル」と入力。
![データをチャート表示するための方法](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-115632.png)
同じく「Inputエレメント」で、Y軸を入力するフォームも作成します。
Y軸は「値」とします。
![データをチャート表示するための方法](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-115704.png)
Y軸は数字を入力するため、コンテンツのフォーマットを「Decimal(10進数)」を選択します。
![データをチャート表示するための方法](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-115810.png)
データを保存するための、「ボタン」を作成します。
![データをチャート表示するための方法](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-115850.png)
このように配置し、名前は「保存」にします。
次に、ユーザーがボタンを押した時のワークフローを作っていきます。
![データをチャート表示するための方法](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-120758.png)
ボタンのワークフローを作っていきます。
![データをチャート表示するための方法](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-120938.png)
Workflowタブに移動します。
「When~~」の部分は、「いつ起こすアクションですか?」→「Buttonをクリックしたときです」になります。
「Click here to~~」をクリックしてアクションを定義していきます。
「ラベル」と「値」に入力して「保存ボタン」押したら、データベースに保存するという指示を作ります。
![データをチャート表示するための方法](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-121035.png)
ボタンをクリックしたら、「データベースにラベルと値を登録したい」ので「Data」を選択。
新しい情報を登録したいので、「Create a new~~」をクリック。
![データをチャート表示するための方法](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-121114.png)
ここからは、「ラベル」を保存するためのフィールドを、データベース内に作っていく作業をします。
「Create a new type」をクリック。
![データをチャート表示するための方法](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-121132.png)
Typeを「データポイント」とします。
これは、データベースのタイトルのようなものです。
![データをチャート表示するための方法](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-121227.png)
続いて、データベースの「データポイント」の中に、「ラベル」を保存するフィールドを作成します。
「Set another field」をクリック。
![データをチャート表示するための方法](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-121253.png)
フィールド名は、ラベルを保存するので「ラベル」とします。
フィールドタイプは、ラベルなので「text」を選択。
「CREATE」をクリック。
これで、データベースに
「データポイント」とういタイトルで、その中に「ラベル」を保存できるフィールドの作成ができました。
![データをチャート表示するための方法](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-121324.png)
このデータベースの「ラベル」になんの情報を保存するかを設定します。
先ほど作成した、「Input Label(ラベルの入力フォーム)」を選択します。
![データをチャート表示するための方法](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-121600.png)
valueを選択。
これで、「Input Label」に入力された「値」を保存してくださいというワークフローができました。
続いて、「値」の入力フォームに入力されたデータを保存するワークフローを作成します。
やり方は「ラベル」と一緒です。
![データをチャート表示するための方法](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-130105.png)
こちらをクリック。
![データをチャート表示するための方法](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-130130.png)
新しくデータベースにフィールドを作成します。
![データをチャート表示するための方法](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-130153.png)
今度は「値」にし、数字を入力するので「number」を選択します。
![データをチャート表示するための方法](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-130218.png)
データベースの「値フィールド」に保存するデータは、「Input Value(値の入力フォーム)」を選択。
![データをチャート表示するための方法](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-130231.png)
valueを選択で完了です。
これで、「ラベル」と「値」の入力フォームに入力されたデータは、「保存ボタン」を押すと、データベースの「データポイント」に保存されます。
続いて、ユーザーが入力したデータを「保存ボタン」をクリックした後、消す処理を設定します。
![データをチャート表示するための方法](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-131046.png)
ワークフローのstep2に、「Element Acctions」の「Reset inputs」を設定します。
これで、保存ボタンを押した後は、Inputエレメントに入力されているデータは、リセットしてね。と設定できました。
これでワークフローが完成しました。
次に、チャートを作成する為のプラグインをインストールします。
「Plugingsタブ」をひらきましょう。
![データをチャート表示するための方法](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-131530.png)
「Plugins」をクリック。
![データをチャート表示するための方法](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-131546.png)
こちらをクリック。
![データをチャート表示するための方法](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-131700.png)
検索窓に「Chart」を入力し、インストールします。
![データをチャート表示するための方法](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-131712.png)
こちらをクリック。
![データをチャート表示するための方法](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-132000.png)
「Line/Bar Chart」エレメントを配置します。
![データをチャート表示するための方法](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-132039.png)
こんな感じで配置しましょう。
![データをチャート表示するための方法](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-132125.png)
チャートのタイプを、「Bar(棒グラフ)」にします。
![データをチャート表示するための方法](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-132239.png)
データのタイプは、先ほど作成した「データポイント」を選択。
![データをチャート表示するための方法](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-132327.png)
「Data source(情報源)」でどこからデータを持ってくるかを指定します。
「Do a search for」で検索先を選択できるようにします。
![データをチャート表示するための方法](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-132239.png)
データベースの「データポイント」からデータを持ってきます。
これで、チャートのデータはどこからもってくるか、設定できました。
![データをチャート表示するための方法](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-135137.png)
次に、「Value expression(値の式)」の設定をします。
![データをチャート表示するための方法](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-135155.png)
「値」を設定します。
![データをチャート表示するための方法](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-135222.png)
次に、「Label expression(ラベルの式)」も一緒です。
![データをチャート表示するための方法](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-135248.png)
「ラベル」を設定します。
最後に、チャートの背景を白にします。
![データをチャート表示するための方法](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-140231.png)
「Background style(背景のスタイル)」の「Flat color」を選択。
![データをチャート表示するための方法](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-140309.png)
白を選択します。
これで設定は完了です!
プレビューで動作を確認してみましょう!
![プレビューで動作を確認](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-10-140929.png)
ラベルに「1月」と入力し、値に「10」と入力し、「保存」ボタンをクリックし
そのあともそれぞれ、月と数字を入力して作りました。
しっかりと、入力したデータが、チャートに反映されてますね!
これで、データをチャート表示するための方法の勉強を終わります。