この記事は、7通りのレッスンを通して、bubbleでどんなことができるかが勉強できます。
bubbleをとにかく実践的に操作してみたい!数をこなしたい!という方には最適です。
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-12-054541.png)
データベースのタイプは「画像」とします。これはデータベースのタイトルのようなものです。
「Create」をクリック。
![ボタンを押した時、スライドショーをポップアップ表示する方法(データベース編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-12-054609.png)
次に「画像タイプ」の中に、新しいフィールドを作っていきます。
フィールドとは、保存するデータの見出しや項目みたいなイメージです。
「Create a new field」をクリック。
![ボタンを押した時、スライドショーをポップアップ表示する方法(データベース編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-12-054636.png)
名前を「写真」、フィールドタイプを「image」にします。
「Create」をクリックで新しいフィールドが作成できました。
![ボタンを押した時、スライドショーをポップアップ表示する方法(データベース編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-12-054729.png)
次に「App dataタブ」に移動して、画像をアップロードしていきます。
「New entry」をクリック。
![ボタンを押した時、スライドショーをポップアップ表示する方法(データベース編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-12-054804.png)
こちらから画像をアップロードしていきます。
アップロードできたら、「Create」
同じ手順でお好きな画像を2枚アップロードしてください!
![ボタンを押した時、スライドショーをポップアップ表示する方法(データベース編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-12-054902.png)
このように、2枚画像がデータベースに保存できていればOKです!
続いて、スライドショーを設置していきましょう。
![ボタンを押した時、スライドショーをポップアップ表示する方法(プラグイン編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-12-052100.png)
スライドショーの設置は、プラグインを使用します。
![ボタンを押した時、スライドショーをポップアップ表示する方法(プラグイン編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-12-052116.png)
こちらをクリック。
![ボタンを押した時、スライドショーをポップアップ表示する方法(プラグイン編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-12-052202.png)
検索窓に「slideshow」と入力。
インストールします。
![ボタンを押した時、スライドショーをポップアップ表示する方法(プラグイン編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-12-052216.png)
こちらをクリック。
デザインタブに戻って、スライドショーの設定をしていきます。
![ボタンを押した時、スライドショーをポップアップ表示する方法(スライドショーの設定編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-12-060308.png)
まずは、スライドショーに表示させる画像のデータをどこから持ってくるかを選択していきます。
「Use a dynamic list(動的リストを使用)」を選択します。
![ボタンを押した時、スライドショーをポップアップ表示する方法(スライドショーの設定編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-12-060409.png)
画像のタイプは「画像」を選択。
![ボタンを押した時、スライドショーをポップアップ表示する方法(スライドショーの設定編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-12-060447.png)
「Data source(情報源)」は、データベースを検索していきますので、「Do a search for(~を検索します)」を選択。
![ボタンを押した時、スライドショーをポップアップ表示する方法(スライドショーの設定編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-12-060409.png)
データベースのタイプは先ほど作った、「画像」になります。
これで情報源は、「データベースの「画像」を検索してくると」設定できました。
![ボタンを押した時、スライドショーをポップアップ表示する方法(スライドショーの設定編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-12-060606.png)
続いてフィールドの設定です。
これも先ほど作った、「写真」になります。
![ボタンを押した時、スライドショーをポップアップ表示する方法(スライドショーの設定編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-12-060727.png)
「Rescale」を選択して、画像の大きさをエレメントに合わせて、縮尺を合わせるようにします。
これでスライドショーの設定は完了です。
続いて、ポップアップを作っていきます。
![ボタンを押した時、スライドショーをポップアップ表示する方法(ポップアップ編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-12-053026.png)
「Popup」エレメントを使います。
![ボタンを押した時、スライドショーをポップアップ表示する方法(ポップアップ編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-12-053250.png)
ポップアップを大きめに配置します。
続いてスラインドショーをポップアップさせるための、ボタンを作成します。
![ボタンを押した時、スライドショーをポップアップ表示する方法(ボタンの設定編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-12-052718.png)
「Button」エレメントを使います。
![ボタンを押した時、スライドショーをポップアップ表示する方法(ボタンの設定編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-12-052952.png)
このように配置して、名前は「ボタン」にします。
![ボタンを押した時、スライドショーをポップアップ表示する方法(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-12-053319.png)
ボタンのワークフローを作成していきます。
![ボタンを押した時、スライドショーをポップアップ表示する方法(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-12-053353.png)
Workflowタブに移動しました。
「When~~」の部分は、「いつ起こすアクションですか?」→「ボタンをクリックしたときです」になります。
「Click here to~~」をクリックしてアクションを定義していきます。
![ボタンを押した時、スライドショーをポップアップ表示する方法(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-12-053431.png)
「Popupエレメント」のアクションなので、「Element Actions」を選択。
ポップアップを見えるようにしたいので、「Show」を選択。
![ボタンを押した時、スライドショーをポップアップ表示する方法(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-12-053509.png)
見えるようにしたいエレメントは、先ほど作成した「Popup A」なので、こちらを選択。
これで、
ボタンを押した時に、「Popup A」を表示させるというワークフロー
ができました。
続いて、ポップアップにスライドショーを表示させる設定をしていきます。
![ボタンを押した時、スライドショーをポップアップ表示する方法(ポップアップにスライドショーを表示させる編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-12-053815.png)
ポップアップは、通常時かくれていますので、エレメントツリーを使って表示させます。
![ボタンを押した時、スライドショーをポップアップ表示する方法(ポップアップにスライドショーを表示させる編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-12-053856.png)
表示させたらポップアップの中に、スライドショーを表示させるため、「Image」エレメントを配置します。
![ボタンを押した時、スライドショーをポップアップ表示する方法(ポップアップにスライドショーを表示させる編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-12-053924.png)
このようにポップアップの中に、「Imageエレメント」を配置します。
![ボタンを押した時、スライドショーをポップアップ表示する方法(ポップアップにスライドショーを表示させる編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-12-054008.png)
Imageエレメントに、スライドショーを表示させる設定をしていきます。
動的データになりますので、「Insert dynamic data(動的データ)」をクリック。
![ボタンを押した時、スライドショーをポップアップ表示する方法(ポップアップにスライドショーを表示させる編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-12-061001-1.png)
スライドショーを表示させたいので、「Slideshow A」を選択。
![ボタンを押した時、スライドショーをポップアップ表示する方法(ポップアップにスライドショーを表示させる編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-12-061036-1.png)
「current slide(現在のスライド)」を選択します。
![ボタンを押した時、スライドショーをポップアップ表示する方法(ポップアップにスライドショーを表示させる編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-12-061118-1.png)
表示させるのは、「写真」になります。
これで完成です!
プレビューで動作を確認してみましょう!
②ダブルクリックの機能を付ける方法を勉強
このパートでは、ダブルクリック機能の付け方を勉強していきましょう!
勉強できること
・ダブルクリックの実装方法
・Element Inspectorの使い方
完成イメージはこんな感じです。
1回クリックしただけでは何も反応せず、2回目のクリックでアラートが表示されるようなボタンを作成していきます。
まずはボタンを配置します。
![ダブルクリックの機能を付ける方法](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-14-051342.png)
ボタンを配置して、ボタン名を「ダブルクリック!!」にします。(なんでもOK)
次に、「Element Inspector(エレメント検査)」をクリックします。
![ダブルクリックの機能を付ける方法(エレメント検査編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-14-052136.png)
「Add a new custom state」をクリック
![ダブルクリックの機能を付ける方法(エレメント検査編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-14-052218.png)
名前を、「クリック数」
タイプを、クリック数なので「number」にします。
![ダブルクリックの機能を付ける方法(エレメント検査編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-14-052352.png)
ページをひらいた時のデフォルトのクリック数は、「0」にします。
続いて、ボタンのワークフローを設定していきましょう!
![ダブルクリックの機能を付ける方法](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-13-072911.png)
ボタンエレメントの「ワークフロー」をクリック
![ダブルクリックの機能を付ける方法](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-13-073106.png)
「Only when(~の時だけ)」に「This Button」を選択。
![ダブルクリックの機能を付ける方法](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-13-073302.png)
先ほど新しく作った、「クリック数」を選択。
![ダブルクリックの機能を付ける方法](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-13-073329.png)
「is」を選択。
![ダブルクリックの機能を付ける方法](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-13-073455.png)
最後に「0」を入力。
「クリック数が0の時だけ」としました。
![ダブルクリックの機能を付ける方法](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-13-073731.png)
今設定した、クリック数が0の時だけどうするのかを設定します。
「Element Actions」の「Set state(状態を設定)」を選択。
![ダブルクリックの機能を付ける方法(エレメント検査編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-14-054729.png)
「Button ダブルクリック!!」エレメントの状態を設定します。
![ダブルクリックの機能を付ける方法](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-13-073945.png)
「クリック数」を選択。
![ダブルクリックの機能を付ける方法](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-13-074025.png)
「1」を入力。
これで、
ボタンのクリック数が「0」の時、ボタンがクリックされたら、クリック数を「1」にする
というワークフローができました。
![ダブルクリックの機能を付ける方法(エレメント検査編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-13-074155.png)
続いて今作成したワークフローをコピペします。
![ダブルクリックの機能を付ける方法(エレメント検査編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-13-074223.png)
同じワークフローが2つできました。
これを元に、もう1つワークフフォローを作成します。
ここからは、ダブルクリックの2クリック目のワークフローです。
![ダブルクリックの機能を付ける方法(エレメント検査編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-13-074325.png)
「Only when(~の時だけ)」の「0」だったのを「1」に変更します。
これで、「ボタンのクリック数が、1の時だけ」になりました。
![ダブルクリックの機能を付ける方法(エレメント検査編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-13-074643.png)
「0」を入力。
これで、
ボタンのクリック数が「1」の時、ボタンがクリックされたら、クリック数を「0」にする
というワークフローができました。
今まで作成したワークフローをおさらいします。
まず1クリック目は、
ボタンのクリック数が「0」の時、ボタンがクリックされたら、クリック数を「1」にする。
2クリック目は、
ボタンのクリック数が「1」の時、ボタンがクリックされたら、クリック数を「0」にする。
要は、ダブルクリックの状態を作ったことになります。
続いて、ダブルクリック(2回目のクリック)した時に、アラートが表示されるようにします。
![ダブルクリックの機能を付ける方法(アラート編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-13-080215.png)
「Alert」エレメントを設置して、「成功!!」とします。
アラートのワークフローを作っていきます。
![ダブルクリックの機能を付ける方法(アラート編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-14-061805.png)
2回目のクリックをした後にワークフローを追加していきます。
アラートを表示したいので、「Element Actions」の「Show message」を選択します。
これで、設定は全て完了しました。
プレビューで動作を確認してみましょう!
③イベントスタッフ募集をカレンダーを使ってつくる方法を勉強
このパートでは、イベントスタッフ募集をカレンダーを使って作る方法を勉強していきましょう!
勉強できること
・カレンダープラグインの使い方
・データベースの使い方
・登録情報をデータベースに保存する方法
・新しいページを作る方法
・ページを移動するためのワークフローをつくる方法
完成イメージはこんな感じです。
ある歌手のイベントスタッフ(ボランティア)の応募フォーマットを作成する設定です。
それでは始めていきましょう!
まずは、カレンダープラグインをインストールします。
![イベントスタッフ募集をカレンダーを使ってつくる方法を勉強(プラグイン編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-14-063454.png)
検索窓に「full calendar」と入力しインストールします。
次にデータベースに、カレンダーに掲載するイベントを登録していきます。
![イベントスタッフ募集をカレンダーを使ってつくる方法を勉強(データベース編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-15-043144.png)
データベースのタイプを「イベント」とします。
![イベントスタッフ募集をカレンダーを使ってつくる方法を勉強(データベース編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-15-043206.png)
フィールドを作成していきます。
![イベントスタッフ募集をカレンダーを使ってつくる方法を勉強(データベース編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-15-043240.png)
名前はイベントの「タイトル」、フィールドタイプは「text」にします。
同じように「開始時間」と「終了時間」のフィールドも作成します。
![イベントスタッフ募集をカレンダーを使ってつくる方法を勉強(データベース編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-15-043347.png)
「開始時間」と「終了時間」のフィールドタイプは「date」にします。
このように3つのフィールドを作りました。
次にイベントを登録していきます。
![イベントスタッフ募集をカレンダーを使ってつくる方法を勉強(データベース編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-15-043456.png)
「Add data」タブに移って、「New entry」で新しいイベントを登録します。
![イベントスタッフ募集をカレンダーを使ってつくる方法を勉強(データベース編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-15-044457.png)
イベントタイトル「ファン感謝祭」とし、開始日時と終了日時も入力します。(なんでもOKです)
![イベントスタッフ募集をカレンダーを使ってつくる方法を勉強(データベース編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-15-044649.png)
このように「ファン感謝際」「ディナーショー」の2つのイベントを登録しました。
続いて、カレンダーを作っていきます。
![イベントスタッフ募集をカレンダーを使ってつくる方法を勉強(カレンダー作成編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-15-044727.png)
先ほどインストールした「Calendar」を選択。
![イベントスタッフ募集をカレンダーを使ってつくる方法を勉強(カレンダー作成編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-15-044835.png)
タイプは先ほど作成した「イベント」にします。
![イベントスタッフ募集をカレンダーを使ってつくる方法を勉強(カレンダー作成編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-15-044916.png)
「Data source(情報源)」を選択していきます。
データベースから探してくるので、「Do a search for」を選択。
![イベントスタッフ募集をカレンダーを使ってつくる方法を勉強(カレンダー作成編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-15-044941.png)
データベースのタイプは、先ほど作成した「イベント」を選択。
![イベントスタッフ募集をカレンダーを使ってつくる方法を勉強(カレンダー作成編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-15-045146.png)
日時は、「開始時間」と「終了時間」フィールドからと設定。
イベントキャプションは、「イベントのタイトル」を設定します。
プレビューで、イベントが表示されているか確認してみましょう!
![イベントスタッフ募集をカレンダーを使ってつくる方法を勉強(カレンダー作成編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-15-045451.png)
ディナーショーとファン感謝祭がちゃんと表示されています。
これで、データベースに登録した情報をカレンダーに表示することができました。
続いて、イベントスタッフの応募フォーマットを作成していきます。
![イベントスタッフ募集をカレンダーを使ってつくる方法を勉強(登録者フォーム作成編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-15-045651.png)
登録者フォームは、別のページを作成していきます。
![イベントスタッフ募集をカレンダーを使ってつくる方法を勉強(登録者フォーム作成編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-15-045714.png)
「Add a new page」を選択。
![イベントスタッフ募集をカレンダーを使ってつくる方法を勉強(登録者フォーム作成編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-15-045809.png)
ページ名は、「volunteer(ボランティア)」とします。
最初に、この「volunteer(ボランティア)」ページの設定をします。
![イベントスタッフ募集をカレンダーを使ってつくる方法を勉強(登録者フォーム作成編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-15-050709.png)
エディターの何もないとことで、左クリックをして「volunteer(ボランティア)」ページ全体のプロパティーを表示させます。
コンテンツのタイプは「イベント」を選択。
下記の手順でも、「volunteer(ボランティア)」ページ全体のプロパティーを表示できます。
![イベントスタッフ募集をカレンダーを使ってつくる方法を勉強(登録者フォーム作成編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-15-050554.png)
![イベントスタッフ募集をカレンダーを使ってつくる方法を勉強(登録者フォーム作成編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-15-050618.png)
![イベントスタッフ募集をカレンダーを使ってつくる方法を勉強(登録者フォーム作成編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-15-045956.png)
続いて、「Inputエレメント」を使って、登録者の「名前入力」と「メールアドレス」入力フォームを作成します。
![イベントスタッフ募集をカレンダーを使ってつくる方法を勉強(登録者フォーム作成編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-15-050350.png)
入力された情報を、データベースに登録するためのボタンを設置します。
次に、イベント名を「Textエレメント」を使って作っていきます。
![イベントスタッフ募集をカレンダーを使ってつくる方法を勉強(登録者フォーム作成編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-15-050846.png)
入力フォームの上にTextエレメントを設置します。
動的データで、設定していきます。
「Insert dynamic data(動的データ)」をクリック。
![イベントスタッフ募集をカレンダーを使ってつくる方法を勉強(登録者フォーム作成編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-15-050930.png)
「Current Pageイベント」を選択。
![イベントスタッフ募集をカレンダーを使ってつくる方法を勉強(登録者フォーム作成編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-15-050956.png)
タイトルを選択します。
これで、カレンダーで選択されたイベントのタイトルが、Textエレメントに表示されるようになります。
![イベントスタッフ募集をカレンダーを使ってつくる方法を勉強(登録者フォーム作成編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-15-051132.png)
テキストの大きさなどを少し変更しておきます。
続いて、入力された情報を保存できるように、データベースを作成します。
![イベントスタッフ募集をカレンダーを使ってつくる方法を勉強(データベース編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-15-051628.png)
登録者の情報を保存したいので、タイプ名は「登録者」とします。
![イベントスタッフ募集をカレンダーを使ってつくる方法を勉強(データベース編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-15-051958.png)
登録者タイプの中に、フィールド作成します。
![イベントスタッフ募集をカレンダーを使ってつくる方法を勉強(データベース編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-15-052017.png)
名前は「イベント」としてイベント名が登録できるようにします。
![イベントスタッフ募集をカレンダーを使ってつくる方法を勉強(データベース編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-15-052049.png)
入力フォーム(「volunteer(ボランティア)」ページ)に戻って、ボタンのワークフローを作っていきます。
![イベントスタッフ募集をカレンダーを使ってつくる方法を勉強(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-15-051716.png)
入力された、名前とメールアドレスをデータベースに保存するために、「ボタン」のワークフローを作っていきます。
![イベントスタッフ募集をカレンダーを使ってつくる方法を勉強(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-15-051803.png)
ボタンがおされたら、データベースに登録していきたいので、「Data 」「Create a new thing」を選択。
![イベントスタッフ募集をカレンダーを使ってつくる方法を勉強(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-15-051844.png)
データベースの保存先のタイプは、先ほど作成した「登録者」を選択。
![イベントスタッフ募集をカレンダーを使ってつくる方法を勉強(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-15-052121.png)
データベースのフィールドは「イベント」を選択。
![イベントスタッフ募集をカレンダーを使ってつくる方法を勉強(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-15-052146.png)
データベースの「イベント」に入れる情報は、「Current Pageイベント」の
「タイトル」を選択。
データベースの「イベント」には、イベントのタイトルを保存できるようにしました。
同じように、「名前」と「メールアドレス」もデータベースに保存できるようにします。
![イベントスタッフ募集をカレンダーを使ってつくる方法を勉強(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-15-052251.png)
「Set another field」で新しくデータベースにフィールドを作ります。
![イベントスタッフ募集をカレンダーを使ってつくる方法を勉強(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-15-052315.png)
新しいフィールドは、このようにします。
![イベントスタッフ募集をカレンダーを使ってつくる方法を勉強(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-15-052338.png)
今作った、「名前」フィールドに保存する情報は、「Input名前」に入力された情報を選択します。
![イベントスタッフ募集をカレンダーを使ってつくる方法を勉強(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-15-052421.png)
メールアドレスも同じように作ります。
これでボタンが押された時、データベースにはそれぞれ、
・「イベント」には、イベントのタイトル
・「名前」には、Inputエレメントの「名前」に入力された名前
・「メールアドレス」には、Inputエレメントの「メールアドレス」に入力されたメールアドレス
が保存されるワークフローができました。
続いて、カレンダーのイベントがクリックされたときに、「volunteer(ボランティア)」ページに移動するワークフローを作っていきます。
![イベントスタッフ募集をカレンダーを使ってつくる方法を勉強(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-17-045925.png)
カレンダーのイベントがクリックされた時に、「volunteer(ボランティア)」ページに移動するワークフローを作りたいので、このように選択します。
![イベントスタッフ募集をカレンダーを使ってつくる方法を勉強(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-17-050028.png)
ページの移動のワークフローは、「Navigation」「Go to page」になります。
![イベントスタッフ募集をカレンダーを使ってつくる方法を勉強(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-17-050106.png)
移動先は、「volunteer」選択。
![イベントスタッフ募集をカレンダーを使ってつくる方法を勉強(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-17-050331.png)
![イベントスタッフ募集をカレンダーを使ってつくる方法を勉強(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-17-050416.png)
送信するデータは、このカレンダーのイベントと設定します。
カレンダーのイベントをクリックされた時、volunteerページに移動するワークフローができました。
これで設定が全部完了したので、プレビューで動作を確認してみましょう!
④折りたたみ可能なサブメニューの作り方を勉強
ここでは、折りたたみ可能なメニューの作り方を勉強していきます!
良く分からないと思いますので、こちらの完成イメージをご覧ください。
こんな感じで、クリックすると表示されたり、非表示になったりするメニューを作っていきます!
それでは始めていきましょう!
まずは、動きが分かりやすいようにグループを作成します。
![折りたたみ可能なサブメニューの作り方を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-17-155630.png)
「Groupエレメント」を配置します。
スタイルを変更しましょう。
![折りたたみ可能なサブメニューの作り方を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-17-155701.png)
バックグランドカラーを設定しました。
![折りたたみ可能なサブメニューの作り方を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-17-155813.png)
続いて、グループの中に「Textエレメント」を配置し「メニュー①」とします。
![折りたたみ可能なサブメニューの作り方を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-17-155956.png)
メニュー①をコピペし「メニュー②」を作成します。
![折りたたみ可能なサブメニューの作り方を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-17-160200.png)
メニュー①の下に「Groupエレメント」を配置します。
このグループは分かりやすいように、「Groupサブ」という名前に変更します。
スタイルを変更し、バックグランドカラーを白にします。
![折りたたみ可能なサブメニューの作り方を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-17-160313.png)
今作成した「Groupサブ」の中に、「Textエレメント」でサブメニューを3つ作ります。
![折りたたみ可能なサブメニューの作り方を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-17-160408.png)
サブメニューをグループ化します。
![折りたたみ可能なサブメニューの作り方を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-17-160640.png)
「Groupサブ」のプロパティーの「Collapse this elements height when hidden(非表示の時はこのエレメントは落ちたたむ)」にチェックを入れます。
つまり、折りたたまれるので、メニュー②が上にスライドしてきます。
![折りたたみ可能なサブメニューの作り方を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-17-160755.png)
「This element is visible on page load(このエレメントはページを読み込むときに表示する)」のチェックを外します。
これでこの「Groupサブ」は、
ページが読み込まれた時は非表示になり、非表示なので折りたたまれる
設定ができました。
続いて、メニュー①のワークフローを設定していきます。
![折りたたみ可能なサブメニューの作り方を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-17-161558-1.png)
メニュー①のプロパティーから、ワークフローの設定に入っていきます。
「Groupサブ」のエレメントの表示、非表示を切り替えたいので、「Element Actions」「Toggle(切り替え)」を選択。
![折りたたみ可能なサブメニューの作り方を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-17-161710.png)
「Groupサブ」の表示、非表示を切り替えたいのでこちらを選択。
これで一通りの設定が完了しましたので、プレビューで動作を確認してみましょう!
最後に少しおまけで、メニュー①をクリックした時に、̠アンダーラインがつくようにします。
![折りたたみ可能なサブメニューの作り方を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-17-162151.png)
「Textエレメント」のプロパティーを開いて、「Conditional(条件を付ける)」で設定していきます。
「When」でいつの条件と聞かれてますので、「Groupサブ」を選択。
![折りたたみ可能なサブメニューの作り方を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-17-162448.png)
「is visible(表示)」を選択。
「Groupサブ」が「表示」された「時」と設定できました。
![折りたたみ可能なサブメニューの作り方を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-17-162302.png)
アンダーラインを選択。
![折りたたみ可能なサブメニューの作り方を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-17-162329.png)
アンダーラインにチェックを入れます。
これで、
「Groupサブ」が「表示」された「時」、アンダーラインを引く
という条件が追加できました。
プレビューで動作を確認してみましょう!
⑤ギャラリーの写真を拡大してスライドショーを作る方法を勉強
ギャラリーの写真を拡大して、スライドショーを作る方法を勉強していきます!
イメージはこんな感じです。
それでは始めていきましょう!
まずはデータベースに写真を保存していきます。
![⑤ギャラリーの写真を拡大してスライドショーを作る方法を勉強(データベース編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-17-174931.png)
データベースタブに行き、新しいタイプを「ギャラリー」とします。
![⑤ギャラリーの写真を拡大してスライドショーを作る方法を勉強(データベース編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-17-175005.png)
次にギャラリータイプの中に、フィールドを作成していきます。
![⑤ギャラリーの写真を拡大してスライドショーを作る方法を勉強(データベース編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-17-175029.png)
フィールドは、写真を保存していくので名前を「写真」、フィールドタイプを「image」とします。
![⑤ギャラリーの写真を拡大してスライドショーを作る方法を勉強(データベース編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-17-175547.png)
次に画像をアップロードしていきます。
「App dataタブ」に移動して、「New entry」をクリック。
![⑤ギャラリーの写真を拡大してスライドショーを作る方法を勉強(データベース編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-17-175619.png)
「Upload」ボタンをより、好きな画像を選び「CREATE」で保存します。
これを画像4枚分やります。
![⑤ギャラリーの写真を拡大してスライドショーを作る方法を勉強(データベース編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-17-175818.png)
このように保存されます。
これでデータベースの準備はOKです。
次に「Repeating Groupエレメント」を配置していきます。
![ギャラリーの写真を拡大してスライドショーを作る方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-17-175239.png)
「Repeating Group」を配置して、コンテンツタイプを先ほど作成した「ギャラリー」にします。
写真を4枚表示したいので、行を「2」、列を「2」とします。
![ギャラリーの写真を拡大してスライドショーを作る方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-17-182916.png)
「Deta source(情報源)」は、「Do a search for(検索します)」を選択。
![ギャラリーの写真を拡大してスライドショーを作る方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-17-182942.png)
「ギャラリー」を選択。
これで、情報源はデータベースのギャラリーを検索と設定できました。
![ギャラリーの写真を拡大してスライドショーを作る方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-17-175340-1.png)
続いて、今作った「Repeating Group」の中に「Imageエレメント」を配置して、画像が表示できるようにします。
![ギャラリーの写真を拡大してスライドショーを作る方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-17-175415-1.png)
動的データを使うので「Insert dynamic data」をクリック。
![ギャラリーの写真を拡大してスライドショーを作る方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-17-175441-1.png)
「Current cellsギャラリー」を選択。
![ギャラリーの写真を拡大してスライドショーを作る方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-17-175508-1.png)
「写真」を選択。
これで、先ほどデータベースに保存した写真が表示できるようになりました。
次は「PopUPエレメント」を使ってポップアップを作成していきましょう。
![ギャラリーの写真を拡大してスライドショーを作る方法を勉強(ポップアップ編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-17-180022.png)
「PopUPエレメント」を大きめに配置します。
![ギャラリーの写真を拡大してスライドショーを作る方法を勉強(ポップアップ編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-17-180257.png)
今配置した「PopUPエレメント」の中に「Repeating Group」を配置します。
「Repeating Group」は、行を「1」、列を「1」とします。
レイアウトは「Fixed number of cells」選択して、セルの数を「1」で固定します。
![ギャラリーの写真を拡大してスライドショーを作る方法を勉強(ポップアップ編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-17-181000.png)
「Deta source(情報源)」は、「Repeating Groupギャラリー」を選択。
![ギャラリーの写真を拡大してスライドショーを作る方法を勉強(ポップアップ編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-17-181033.png)
「List ofギャラリー」を選択。
![ギャラリーの写真を拡大してスライドショーを作る方法を勉強(ポップアップ編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-17-181107.png)
「写真」を選択。
これで、「Repeating Groupギャラリー」の「ギャラリー」の「写真」を情報源にすると設定しました。
![ギャラリーの写真を拡大してスライドショーを作る方法を勉強(ポップアップ編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-17-181354.png)
今作った、「Repeating Group」の中に画像を表示するための「Imageエレメント」を配置します。
![ギャラリーの写真を拡大してスライドショーを作る方法を勉強(ポップアップ編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-17-181424.png)
動的データを使うので、「Insert dynamic data(動的データ)」を選択。
![ギャラリーの写真を拡大してスライドショーを作る方法を勉強(ポップアップ編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-17-181456.png)
「Current cells image(現在のセルの画像)」を選択。
![ギャラリーの写真を拡大してスライドショーを作る方法を勉強(ボタンのワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-17-181650.png)
続いて、画像をスライドするための、「ボタン」を設置します。
2つボタンを作りそれぞれ、「進む」「戻る」とします。
「進むボタン」のワークフローをまずは設定していきます。
![ギャラリーの写真を拡大してスライドショーを作る方法を勉強(ボタンのワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-17-181750.png)
「Element Actions」の「Show next(次を表示)」を選択。
これで、「Repeating Groupエレメント」の次を表示すると設定しました。
![ギャラリーの写真を拡大してスライドショーを作る方法を勉強(ボタンのワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-17-181840.png)
次を表示するRepeating Groupエレメントは、「Repeating Group image」を選択。
![ギャラリーの写真を拡大してスライドショーを作る方法を勉強(ボタンのワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-17-182246.png)
「Wrap around」にチェックを入れて、4枚の写真をループできるようにします。
入れないと、4枚目でストップします。
![ギャラリーの写真を拡大してスライドショーを作る方法を勉強(ボタンのワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-17-181930.png)
続いて、「戻るボタン」も同じようにワークフローを設定していきます。
「Element Actions」の「Show previous(前を表示)」
![ギャラリーの写真を拡大してスライドショーを作る方法を勉強(ボタンのワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-17-182018.png)
「Repeating Group image」を選択。
![ギャラリーの写真を拡大してスライドショーを作る方法を勉強(ボタンのワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-17-182212.png)
「Wrap around」にチェック。
「image A」のワークフローを設定していきます。
![ギャラリーの写真を拡大してスライドショーを作る方法を勉強(ボタンのワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-17-182347.png)
「Image A」のワークフローを設定して、画像がクリックされたら、ポップアップが表示されるようにしていきます。
![ギャラリーの写真を拡大してスライドショーを作る方法を勉強(ボタンのワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-17-182440.png)
「Element Actions」の「Show」で、エレメントを表示させるようにします。
![ギャラリーの写真を拡大してスライドショーを作る方法を勉強(ボタンのワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-17-182500.png)
どのエレメント?で「PopUP A」を選択。
これで、画像をクリックしたら、ポップアップを表示するワークフローができました。
プレビューで動作を確認してみましょう!
⑥データベースに保存した情報を検索を使って呼び出す方法を勉強
データベースに保存した情報を、検索を使って呼び出す方法を勉強していきましょう!
イメージはこんな感じです。
それでは、始めていきましょう!
まず、データベースに情報を登録していきます。
![データベースに保存した情報を検索を使って呼び出す方法を勉強(データベース編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-18-141242.png)
デフォルトである「User」タイプを使います。
その中に、新しいフィールドを作成します。
![データベースに保存した情報を検索を使って呼び出す方法を勉強(データベース編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-18-141357.png)
フィールドの名前は「名前」、タイプは「text」とします。
![データベースに保存した情報を検索を使って呼び出す方法を勉強(データベース編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-18-141523.png)
今作成した「名前」というフィールドができていますね。
「Add dataタブ」に移動して、データを保存していきます。
「New entry」をクリック。
名前とメールアドレスを、10名ほど登録していきます。
![データベースに保存した情報を検索を使って呼び出す方法を勉強(データベース編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-18-142416.png)
こんな感じに登録しました。
次に、検索窓を作成していきましょう。
![データベースに保存した情報を検索を使って呼び出す方法を勉強(検索窓編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-18-063029.png)
「Inputエレメント」を使用して、検索窓をつくります。
プレースホルダーは「入力して検索」と入力します。
W(横幅)を「600」にします。
続いて、検索結果を表示するために、「Group Focusエレメント」を使っていきます。
![データベースに保存した情報を検索を使って呼び出す方法を勉強(グループフォーカス編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-18-063221.png)
「Group Focus」を配置します。
Reference elementは、「Input入力して検索」を選択。
W(横幅)は、Inputエレメントに合わせて「600」とします。
![データベースに保存した情報を検索を使って呼び出す方法を勉強(検索結果を表示編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-18-062113.png)
続いて、「Group Focus」の中に、「Repeating Grouエレメント」を配置します。
コンテンツタイプは、「User」を選択。
![データベースに保存した情報を検索を使って呼び出す方法を勉強(検索結果を表示編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-18-062147.png)
「Deta source(情報源)」は、「Do a search for」を選択。
![データベースに保存した情報を検索を使って呼び出す方法を勉強(検索結果を表示編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-18-062216.png)
「User」を選択。
先ほど作成したデータベースの「User」を情報源に設定しました。
![データベースに保存した情報を検索を使って呼び出す方法を勉強(検索結果を表示編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-18-062251.png)
「Add a new constraint(新しい制限を追加)」します。
「Any field」を選択。
![データベースに保存した情報を検索を使って呼び出す方法を勉強(検索結果を表示編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-18-062552.png)
「Insert dynamic data(動的データ)」を設定します。
![データベースに保存した情報を検索を使って呼び出す方法を勉強(検索結果を表示編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-18-063435-1.png)
「Input入力して検索」を選択。
![データベースに保存した情報を検索を使って呼び出す方法を勉強(検索結果を表示編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-18-063500-1.png)
「value(値)」を選択。
これで、検索窓に入力された値は、全てを検索と設定できました。
![データベースに保存した情報を検索を使って呼び出す方法を勉強(検索結果を表示編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-18-142721.png)
次に「Repeating Grouエレメント」の中に、名前を表示させるための「Textエレメント」を配置します。
「Insert dynamic data(動的データ)」を設定します。
![データベースに保存した情報を検索を使って呼び出す方法を勉強(検索結果を表示編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-18-142750.png)
「Current cells User」を選択。
![データベースに保存した情報を検索を使って呼び出す方法を勉強(検索結果を表示編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-18-142818.png)
「名前」を選択。
これで、Textエレメントには、データベースのUserタイプの名前フィールドの情報が表示されます。
![データベースに保存した情報を検索を使って呼び出す方法を勉強(グループフォーカス表示編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-18-143341.png)
最後に、「Group Focusエレメント」を表示させるためのスイッチを作ります。
スイッチには、アイコンを使いますので「Iconエレメント」を設置します。
検索なので、「search」で検索しました。
ワークフローを設定していきます。
![データベースに保存した情報を検索を使って呼び出す方法を勉強(グループフォーカス表示編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-18-143426.png)
エレメントを表示させたいので、「Element Actions」の「Show(表示)」を選択。
![データベースに保存した情報を検索を使って呼び出す方法を勉強(グループフォーカス表示編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-18-143456.png)
表示させたいエレメントは、「Group Focus A」なのでこちらを選択。
これで、設定は完了しました!
プレビューで動作を確認していきましょう!
⑦入力フォームに条件を追加する方法を勉強
入力フォームに条件を追加する方法を勉強していきましょう!
イメージはこんな感じです。
入力フォームに「入力必須」の条件をつけ、未入力の場合は、枠が赤くなるようにしました。
それでも未入力の場合は、アラートが表示されます。
今回は、未入力の場合のみの設定をしていきます。
それでは、始めていきましょう!
![入力フォームに条件を追加する方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-19-045058.png)
まずは入力フォームを作るので、「Inputエレメント」を配置します。
配置したらプロパティーを開いて、「This input should not be empty(この入力は空にはできません)」にチェックを入れます。
これでこの入力フォームは、未入力にはできなくなります。
![入力フォームに条件を追加する方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-19-045417.png)
次にボタンを配置し、名前は「ユーザー登録」とします。
このボタンのワークフローを作っていきます。
![入力フォームに条件を追加する方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-19-045708.png)
「Data」の「Make changes to~~」を選択します。
![入力フォームに条件を追加する方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-19-045801.png)
変化されるものは、「Current User」を選択。
![入力フォームに条件を追加する方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-19-050001.png)
データベースのフィールドを仮ですが、作っておきます。(このレッスンでは使いません)
![入力フォームに条件を追加する方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-19-050232.png)
仮に、名前としておきます。
![入力フォームに条件を追加する方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-19-050259.png)
「Input A」を選択。
![入力フォームに条件を追加する方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-19-051238.png)
「value(値)」を選択。
「InputA」に入力された「値」に変化させる設定をしました。
続いて、入力フォームが未入力でボタンを押した時に、入力フォームの枠を赤くする設定をしていきます。
![入力フォームに条件を追加する方法を勉強(条件変更編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-19-050733.png)
Inputエレメントのプロパティーをひらいて、「Conditional(条件)」タブに移動します。
「Define another condition(別の条件を定義する)」をクリック。
条件を追加していきます。
![入力フォームに条件を追加する方法を勉強(条件変更編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-19-051331.png)
「When(いつ)」なので、「This input 」を選択。
![入力フォームに条件を追加する方法を勉強(条件変更編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-19-051415.png)
「isn’t valid(有効でない)」を選択。
これで、「この入力フォームが有効でない(未入力)の時」としました。
![入力フォームに条件を追加する方法を勉強(条件変更編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-19-062200.png)
次に上記の条件に当てはまる時、どのようなアクションをするか設定していきます。
![入力フォームに条件を追加する方法を勉強(条件変更編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-19-051832.png)
「Boxshadow style」を選択。
![入力フォームに条件を追加する方法を勉強(条件変更編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-19-051917.png)
「Outset」を選択。
![入力フォームに条件を追加する方法を勉強(条件変更編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-19-052001.png)
次に「Boxshadow color」を選択。
![入力フォームに条件を追加する方法を勉強(条件変更編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-19-052041.png)
赤色にします。
この要領で、設定を追加していきます。
![入力フォームに条件を追加する方法を勉強(条件変更編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-19-052401.png)
このように、色々設定を追加しました。
これで、「入力フォームが未入力でボタンを押した時に、入力フォームの枠を赤くする設定」ができました。
続いて、再度ボタンのワークフローを設定していきますので、ボタンのワークフローに移動します。
![入力フォームに条件を追加する方法を勉強(ボタンのワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-19-052707.png)
ワークフローの条件を追加していきます。
「Only when(~の時だけ)」を設定します。
![入力フォームに条件を追加する方法を勉強(ボタンのワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-19-052746.png)
「Input A」を選択。
![入力フォームに条件を追加する方法を勉強(ボタンのワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-19-052836.png)
「is valid」を選択。
これで、このボタンのワークフローは、「InputA」に「入力された時のみ」アクションを起こすワークフローになりました。
続いて、入力フォームが未入力の状態でボタンが押された時の、ボタンのワークフローを作っていきます。
![入力フォームに条件を追加する方法を勉強(ボタンのワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-19-052932.png)
ほとんど、先ほど作ったボタンのワークフローと同じなので、コピーして使います。
![入力フォームに条件を追加する方法を勉強(ボタンのワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-19-052956.png)
ペーストして、ワークフローを複製します。
![入力フォームに条件を追加する方法を勉強(ボタンのワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-19-053039.png)
「is valid」を「isn’t valid」に変更して、「InputAが入力されてない時」にします。
これで、入力フォームに入力されていない時だけのワークフローができました。
最後にアラートの設定をします。
![入力フォームに条件を追加する方法を勉強(アラートの設定編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-19-053155.png)
「Alertエレメント」を配置して、「名前の入力は必須です!」とします。
続いて、「入力フォームが未入力の時のボタンのワークフロー」でアラートができるように、ワークフローを設定します。
ボタンのワークフローに移動します。
![入力フォームに条件を追加する方法を勉強(アラートの設定編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-19-053318.png)
ワークフローが残っているので、「delete」で削除します。
![入力フォームに条件を追加する方法を勉強(アラートの設定編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-19-053350.png)
新しくワークフローを作ります。
Alertを表示したいので、「Element Actions」の「Show message」を選択。
![入力フォームに条件を追加する方法を勉強(アラートの設定編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-19-053511.png)
どのアラートを表示させるかで、「Alert名前の入力は必須!」を選択。
これで、全ての設定が終わりましたので、プレビューで確認してみましょう!