この記事は、7通りのレッスンを通して、bubbleでどんなことができるかが勉強できます。
bubbleをとにかく実践的に操作してみたい!数をこなしたい!という方には最適です。
bubbleをまだ全くさわったことがないよ。という方は、まずはこちらの記事で勉強することをおすすめします。
などが学べます。
目次を見て頂き、好きなところから勉強して頂いても大丈夫です!
![](https://hironk-blog.net/wp-content/uploads/2020/09/undraw_pride_y0te-320x180.png)
各レッスンには、「完成イメージ」がありますので、そちらも参考にしてください。
それでは、始めていきましょう!
①現ページのURLをクリップボードにコピーする方法を勉強
現ページのURLをクリップボードにコピーする方法を勉強していきましょう!
完成イメージはこんな感じです。
ボタンを押すとクリップボードに、URLが保存されて、それを入力フォームにペーストしています。
それでは、始めていきましょう!
まずは、プラグインをインストールしていきましょう!
![](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-21-131743.png)
Pluginsタブより、プラグインをインストールします。
検索窓に「clipboard」と入力。
「Air Copy to clipboard」をインストール。
![①現ページのURLをクリップボードにコピーする方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-21-132157.png)
続いて、クリップボードにコピーする時にトリガーとなる「ボタン」を設置します。
名前は、「現ページをクリップボードにコピー」とします。
このボタンにワークフローを設定していきます。
![①現ページのURLをクリップボードにコピーする方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-21-132444.png)
先ほどインをインストールした、プラグインを使うので、「Plugings」の「Copy to clipboard」を選択。
![①現ページのURLをクリップボードにコピーする方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-21-132603.png)
現在のページのURLをコピーしたいので、「Insert dynamic data(動的データ)」をクリック。
![①現ページのURLをクリップボードにコピーする方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-21-132637.png)
「This url」を選択。
これで、「ボタンを押した時」に、「現在のページ」の「URLをクリップボードにコピーする」というワークフローができました!
続いて、コピーができたことを知らせるための、「アラート」を設置します。
![①現ページのURLをクリップボードにコピーする方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-21-132822.png)
「Alertエレメント」を配置して、「コピーできました!」とします。
ボタンを押した時にこのアラートを表示させたいので、ボタンのワークフローを再度設定していきます。
![①現ページのURLをクリップボードにコピーする方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-21-132928.png)
アラートを表示させるには、「Element Actions」の「Show message」になります。
![①現ページのURLをクリップボードにコピーする方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-21-133007.png)
表示させたい「アラート」は、先ほど作成した、「Alertコピーできました!」を選択。
![①現ページのURLをクリップボードにコピーする方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-21-133354.png)
最後に、コピーしたURLを貼り付ける為に「Inputエレメント」を配置します。
「URL貼り付け」としました。
これで、全ての設定は完了しました!
プレビューで動作を確認してみましょう!
②WEBサイト内を検索するための機能を付ける方法を勉強
WEBサイト内を検索するための機能を付ける方法を勉強します!
WEBサイトの内容は、「東海地方の子供の遊び場」とします。
完成イメージは、こんな感じです。
検索窓に入力すると、入力した情報をデータベースから取ってきて表示させます。
まずは、データーベースを作っていきます。
![②WEBサイト内を検索するための機能を付ける方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-21-151628.png)
データーベースのタイプを「東海地区子ども遊び場」とします。
![②WEBサイト内を検索するための機能を付ける方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-21-151657.png)
続いて、フィールを3つ作っていきます。
![②WEBサイト内を検索するための機能を付ける方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-21-152426.png)
1つ目は、遊び場の名称ということで「名前」にします。
![②WEBサイト内を検索するための機能を付ける方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-21-152526.png)
同じように、遊び場の「タイプ」と、遊び場の「所在地」も作成します。
![②WEBサイト内を検索するための機能を付ける方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-21-152607.png)
「App dataタブ」に移動して、データベースに新しく登録していきます。
「New entry」をクリック。
![②WEBサイト内を検索するための機能を付ける方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-21-152814.png)
このように
名前:東原山動植物園
タイプ:テーマパーク
所在地:愛知
と入力して「CREATE」をクリックで、1つデータが登録できました。
これをいくつかやっていきます。
![WEBサイト内を検索するための機能を付ける方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-21-183101.png)
このように登録しました。
続いて、検索するための、検索窓やボタンを作っていきます。
![②WEBサイト内を検索するための機能を付ける方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-21-155246.png)
「Dropdownエレメント」を配置します。
選択しは、先ほどデータベースで作成した、「県名」「遊び場のタイプ」「遊び場の名称」とします。
![②WEBサイト内を検索するための機能を付ける方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-21-155546.png)
続いて、ユーザーが検索したい用語を入力できるように、「Inputエレメント」を配置します。
![②WEBサイト内を検索するための機能を付ける方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-21-155745.png)
最後に、検索のトリガーとなるボタンを「Buttonエレメント」で作ります。
次に、検索結果を表示するページを新しく作りましょう!
![WEBサイト内を検索するための機能を付ける方法を勉強(新しいページ作成編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-21-160545.png)
「Add a new page」で新しいページを作ります。
![WEBサイト内を検索するための機能を付ける方法を勉強(新しいページ作成編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-21-160708.png)
名前は何でも良いですが、「playground」とします。
「CREATE」をクリック。
「Repeating Grouエレメント」を使って、検索結果を表示できるようにしていきます。
![WEBサイト内を検索するための機能を付ける方法を勉強(Repeating Grouエレメント編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-21-161623.png)
コンテンツタイプは、先ほどデータベース作成した「東海地区子ども遊び場」を選択。
「Data source(情報源)」は「Do a search for」、「東海地区子ども遊び場」を選択して、情報源は、データベースの東海地区子ども遊び場(タイプ)から検索と設定しました。
「Add a new constraint(新しい制限を追加)」を追加していきます。
![WEBサイト内を検索するための機能を付ける方法を勉強(Repeating Grouエレメント編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-21-161707.png)
「Any field」を選択。
![WEBサイト内を検索するための機能を付ける方法を勉強(Repeating Grouエレメント編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-21-161750.png)
「Insert dynamic data(動的データ)」をクリック。
![WEBサイト内を検索するための機能を付ける方法を勉強(Repeating Grouエレメント編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-21-161844.png)
「Get data from page URL(ページのURLからデータを取得)」を選択。
![WEBサイト内を検索するための機能を付ける方法を勉強(Repeating Grouエレメント編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-21-162058.png)
タイプは「Parameter(入力値)」を選択。
パラメーターの名は「query」とします。
続いて、Repeating Grouエレメントの中に、遊び場の名前を表示するために「Textエレメント」を配置します。
![WEBサイト内を検索するための機能を付ける方法を勉強(Repeating Grouエレメント編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-21-164337.png)
「Textエレメント」をRepeating Grouエレメントの中に配置して、「Insert dynamic data(動的データ)」をクリック。
![WEBサイト内を検索するための機能を付ける方法を勉強(Repeating Grouエレメント編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-21-164402.png)
「Current cells東海地区子ども遊び場」を選択。
![WEBサイト内を検索するための機能を付ける方法を勉強(Repeating Grouエレメント編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-21-164424.png)
「名前」を選択。
「東海地区子ども遊び場」の名前を表示させるように設定しました。
![WEBサイト内を検索するための機能を付ける方法を勉強(Repeating Grouエレメント編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-21-164638.png)
「Buttonエレメント」も設置し、「詳細」とします。
このボタンは、飾りで今回はなんの動作もさせません。
続いて、「indexページ」に戻って、ボタンのワークフローを設定していきましょう!
ボタンを押したら、今作成した、「playgroundページ」に移動し、検索結果を表示させるようにします。
![WEBサイト内を検索するための機能を付ける方法を勉強(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-21-173647-コピー.png)
ボタンのワークフローをクリック。
![WEBサイト内を検索するための機能を付ける方法を勉強(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-21-173731-コピー.png)
ページの移動なので、「Navigation」の「Go to page」を選択。
![WEBサイト内を検索するための機能を付ける方法を勉強(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-21-173758-コピー.png)
移動するページは「playground」を選択。
![WEBサイト内を検索するための機能を付ける方法を勉強(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-21-173836-コピー.png)
「Only when(~の時だけ)」に「Dropdown検索」を選択。
![WEBサイト内を検索するための機能を付ける方法を勉強(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-21-174929.png)
「Value」を選択。
![WEBサイト内を検索するための機能を付ける方法を勉強(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-21-173959-コピー.png)
「is」を選択。
![WEBサイト内を検索するための機能を付ける方法を勉強(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-21-174228-コピー.png)
「県名」と入力。
これで、
「Dropdown検索」で「県名」が選択された「時だけ」、「playgroundページ」に移動する
というワークフローが設定できました。
![WEBサイト内を検索するための機能を付ける方法を勉強(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-21-174723-1.png)
最後に、パラメータ(入力値)の送信設定をします。
「Send more parameters to the page(ページに更にパラメーターを送信する)」にチェックを入れる。
「Add another paramerer(別のパラメーターを追加する)」をクリック。
![WEBサイト内を検索するための機能を付ける方法を勉強(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-21-174836.png)
Keyは先ほど、Repeating Grouで設定した「query」と入力。
「Insert dynamic data(動的データ)」をクリック。
![WEBサイト内を検索するための機能を付ける方法を勉強(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-21-174905-コピー.png)
「Input検索用語を入力」を選択。
![WEBサイト内を検索するための機能を付ける方法を勉強(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-21-174929-1.png)
「Value」を選択。
これで全ての設定が完了しました。
「県名」「遊び場のタイプ」「遊び場の名称」とデータベースには3つのフィールドを作成しましたが、今回は「県名」のみ作成しました。他の2つのページは作成していないので、今回は割愛します。
プレビューで動作を確認してみましょう!
③エラーメッセージのカスタマイズ方法を勉強
エラー処理のワークフローの使い方を勉強していきましょう!
完成イメージはこんな感じです。
デフォルトで設定してあるエラーメッセージでなはく、自分でワークフローを作って、アラートでエラーメッセージを表示させています。
それでは始めていきましょう!
まず、ログインフォームを作成していきます。
![エラー処理ワークフローの使い方を勉強(ログインフォーム編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-22-034202.png)
まずは、「Inputエレメント」で入力フォームを作ります。
「メールアドレス」と「パスワード」の2つを作りましょう。
![エラー処理ワークフローの使い方を勉強(ログインフォーム編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-22-034256.png)
次に「Buttonエレメント」でログインボタンを配置し、ワークフローを作ります。
![エラー処理ワークフローの使い方を勉強(ログインフォーム編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-22-034345.png)
ログインボタンなので、「Account(アカウント)」「Log the user in(ユーザーログイン)」を選択。
![エラー処理ワークフローの使い方を勉強(ログインフォーム編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-22-034435.png)
Emailは、「Inputメールアドレス」の「Value(値)」を選択。
Passwordは、「Inputパスワード」の「Value(値)」を選択。
![エラー処理ワークフローの使い方を勉強(ログインフォーム編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-22-034730.png)
これでログインフォーマットができました。
プレビューで動作を確認してみましょう。
![エラー処理ワークフローの使い方を勉強(プレビュー編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-22-040439.png)
適当に、メールアドレスとパスワードを入力します。
![エラー処理ワークフローの使い方を勉強(プレビュー編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-22-040501.png)
もちろん、アカウント登録していないので、エラーメッセージがでました。
このエラーメッセージは、こちらで設定タブの言語で設定されています。
![エラー処理ワークフローの使い方を勉強(設定タブ編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-22-040805.png)
「Settingタブ」の「Languages(言語)」でエラーメッセージなどが設定されています。
メッセージを日本語に変更したり、メッセージ文を変更したりもできます。
上記、赤線を引いている、グレー字の大文字アルファベットがこのメッセージのコードになります。
あとで出てきますので、覚えておきましょう。(WRONG_PASSWORD)
それでは、このあとエラーメッセージをアラートに変更するワークフローを作っていきます。
![エラー処理ワークフローの使い方を勉強(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-22-040958.png)
「General(一般的)」「An unhandled error occurs(未処理のエラーが発生)」を選択。
![エラー処理ワークフローの使い方を勉強(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-22-041204.png)
「Only when(~の時だけ)」に「Current Workflow Error(現在のワークフローエラー)」を選択。
![エラー処理ワークフローの使い方を勉強(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-22-041232.png)
「code」を選択。
![](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-22-041315.png)
「is」を選択。
![エラー処理ワークフローの使い方を勉強(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-22-041432.png)
先ほど確認したコードを入力します。「WRONG_PASSWORD」を入力。
これで、
現在の「エラーコード」が「WRONG_PASSWORD」の時だけ
と設定しました。
続いて、「WRONG_PASSWORD」のエラーコードの時のワークフローを作っていきます。
「WRONG_PASSWORD」のエラー表示ではなく、変わりにアラートを設定していきます。
![エラー処理ワークフローの使い方を勉強(アラート編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-22-041756.png)
「Alertエレメント」を設置し、「もう一度パスワードを入力してください」とします。
次に、このアラートを表示させるワークフローを作っていきます。
![エラー処理ワークフローの使い方を勉強(アラート編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-22-042020.png)
先ほど設定した、「エラーコード」が「WRONG_PASSWORD」の時だけアラートが表示させるようにします。
アラートの表示なので「Element Actions」「Show message」を選択。
![エラー処理ワークフローの使い方を勉強(アラート編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-22-042124.png)
「Alertもう一度パスワードを入力してください」を選択。
これでアラートの設定は完了しました!
プレビューで動作を確認してみましょう!
④グループ内のエレメントに合わせてグループの大きさを変える方法を勉強
グループを折りたたんだり、開いたりする方法を勉強していきましょう!
イメージはこんな感じです。
紫のグループがグループ内のエレメントの動きに合わせて、大きくなっていることが分かります。
それでは、始めていきましょう!
![グループ内のエレメントに合わせてグループの大きさを変える方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-23-052830.png)
まずは、「Groupエレメント」を配置します。これが「GroupA」になります。
![グループ内のエレメントに合わせてグループの大きさを変える方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-23-053001.png)
続いてグループ内に「Iconエレメント」を配置します。アイコンはなんでもOKです。
![グループ内のエレメントに合わせてグループの大きさを変える方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-23-060103.png)
アイコンの下に「Textエレメント」を配置します。
![グループ内のエレメントに合わせてグループの大きさを変える方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-23-053713.png)
次に、「GroupA」内のテキストとアイコンをグループ化します。
テキストで、右クリックをし、「Group elements in a Group(グループ内のエレメントをグループ化する)」を選択。
![グループ内のエレメントに合わせてグループの大きさを変える方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-23-060151-1.png)
これで「GroupB」ができました。
次に、GroupBにバックグランドカラー(背景)をつけるのですが、画像ですとわかり辛いので、下記の動画をご覧ください。
GroupBに背景色を付けました。
![グループ内のエレメントに合わせてグループの大きさを変える方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-23-055203.png)
「GroupB」の「Collapse this elements height when hidden(非表示の時はこのエレメントを折りたたむ)」にチェックをいれます。
続いいて、アイコンのワークフローを作っていきます。
![グループ内のエレメントに合わせてグループの大きさを変える方法を勉強(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-23-055359.png)
「IconA」のワークフローをクリック。
![グループ内のエレメントに合わせてグループの大きさを変える方法を勉強(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-23-055501.png)
「Element Actions」の「Toggle(切り替え)」を選択。
![グループ内のエレメントに合わせてグループの大きさを変える方法を勉強(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-23-055540.png)
「GroupB」を選択。
これで、「アイコン」をクリックすると、「GroupB」の表示が「切り替わる」というワークフローができました。
ここで一度、プレビューで動作を確認してみましょう!
アイコンをクリックしたら、GroupBが非表示になればOKです。
![グループ内のエレメントに合わせてグループの大きさを変える方法を勉強(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-23-060151-2.png)
続いて、「GroupB」をコピーして、残りのアイコンの下にペーストしていきます。
![グループ内のエレメントに合わせてグループの大きさを変える方法を勉強(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-23-060537.png)
このようになればOKです。
![グループ内のエレメントに合わせてグループの大きさを変える方法を勉強(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-23-060934-1.png)
次に、残りの3つのアイコンにもワークフローを設定していきます。
やり方は先ほどと同じになります。
![グループ内のエレメントに合わせてグループの大きさを変える方法を勉強(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-23-061107.png)
このように、4つのアイコンのワークフローを作成します。
![グループ内のエレメントに合わせてグループの大きさを変える方法を勉強(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-23-061413.png)
続いて、「GroupB」のプロパティーをひらいて、「This elements is visible on page load(このエレメントは、ページの読み込み時に表示します)」のチェックをはずします。
これによって、ページを読み込んだ時に、「GroupB」は表示されなくなります。
他のGroupも同じように、非表示にしていきます。(GroupA以外)
![グループ内のエレメントに合わせてグループの大きさを変える方法を勉強(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-23-061859.png)
最後に、GroupAの大きさが変わっていることが分かるように、背景色をつけます。
これで全ての設定は完了しました!
プレビューで動作を確認してみましょう!
⑤パスワード入力されたテキストを確認できるようにする方法を勉強
パスワード入力されたテキストを、確認できるようにする方法を勉強していきましょう!
完成イメージはこんな感じです。
それでは、始めていきましょう!
![パスワード入力されたテキストを確認できるようにする方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-23-094205.png)
まずは、「Textエレメント」を配置して、「Password」とします。
![パスワード入力されたテキストを確認できるようにする方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-23-094528.png)
「Inputエレメント」を配置して、コンテンツのフォーマットを「Password」とします。
![パスワード入力されたテキストを確認できるようにする方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-23-094708.png)
続いて、パスワードの入力内容を表示させるために「Textエレメント」を配置します。
「Insert dynamic data(動的データ)」をクリック。
![パスワード入力されたテキストを確認できるようにする方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-23-094805.png)
先ほど作った、「InputA」を選択。
![パスワード入力されたテキストを確認できるようにする方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-23-094833.png)
「Value」を選択。
これで、「InputA」に入力された「値」を表示するという設定ができました。
![パスワード入力されたテキストを確認できるようにする方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-23-094952.png)
このテキストは通常時は表示しないので、「This elements is visible on page load(このエレメントは、ページの読み込み時に表示します)」のチェックをはずします。
続いて、アイコンの設定をしていきます。
![パスワード入力されたテキストを確認できるようにする方法を勉強(アイコン編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-23-100114.png)
「Iconエレメント」を設置して、「eye」で検索すればでてきます。
![パスワード入力されたテキストを確認できるようにする方法を勉強(アイコン編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-23-100213.png)
次にアイコンのワークフローを作っていきます。
![パスワード入力されたテキストを確認できるようにする方法を勉強(アイコン編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-23-100309.png)
「Element Actions」の「Toggle(切り替え)」を選択。
![パスワード入力されたテキストを確認できるようにする方法を勉強(アイコン編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-23-100348.png)
パスワードを表示させる「Textエレメント」の「Text Input As value」を選択。
これで、アイコンをクリックすると、パスワードを表示するワークフローができました。
最後に、アイコンをクリックした時(パスワードが表示された時)に、アイコンを変える設定をしていきます。(今のままですと、パスワードが見えているのに、アイコンに斜線が入ってしまっているので)
![パスワード入力されたテキストを確認できるようにする方法を勉強(アイコン編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-23-102330.png)
アイコンのプロパティーを開いて、「Conditional(条件)」タブを選択します。
![パスワード入力されたテキストを確認できるようにする方法を勉強(アイコン編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-23-102428.png)
「When(いつ)」に、「Text Input As value(パスワード)」を選択。
![パスワード入力されたテキストを確認できるようにする方法を勉強(アイコン編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-23-102456.png)
「is visible(表示)」を選択。
これで、「パスワードが表示された時と設定しました。
![パスワード入力されたテキストを確認できるようにする方法を勉強(アイコン編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-23-102541.png)
パスワードが表示された時に、何を変更するか設定します。
アイコンの変更がしたいので、「Icon」を選択。
![パスワード入力されたテキストを確認できるようにする方法を勉強(アイコン編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-23-102614.png)
斜線なしのアイコンを選択します。
これで全ての設定が完了しました。
プレビューで動作を確認してみましょう!
⑥テキストの表示を切り替える方法を勉強
テキストの表示を切り替える方法を勉強します!
完成イメージはこんな感じです。
チェックボックスにチェックを入れると、テキストが切り替わることがわかります。
それでは、はじめていきましょう!
まずは、データベースを作っていきます。
![テキストの表示を切り替える方法を勉強(データベース編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-23-142019.png)
データベースの新しいタイプを「タスク」とします。
「CREATE」をクリック。
![テキストの表示を切り替える方法を勉強(データベース編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-23-142048.png)
フィールドを追加していきます。
![テキストの表示を切り替える方法を勉強(データベース編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-23-142111.png)
タスクのタイトルとして「タイトル」、タイプを「text」とします。
![テキストの表示を切り替える方法を勉強(データベース編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-23-142149.png)
もう1つを「完了」とし、「yes/no」を選択します。
![テキストの表示を切り替える方法を勉強(データベース編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-23-142226.png)
このように登録したら、今作成したデータベースに登録していきます。
![テキストの表示を切り替える方法を勉強(データベース編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-23-142720.png)
登録は、「Add dataタブ」になります。
「New entry」をクリック。
![テキストの表示を切り替える方法を勉強(データベース編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-23-142801.png)
タスクはなんでも良いですが、完了は「no」にします。
同じように、4つのタスクを登録しました。
これで、データベースの作成はできました。
続いて、タスクを表示させるため、「Repeating Groupエレメント」を配置していきます。
![テキストの表示を切り替える方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-23-143214.png)
コンテンツのタイプは、「タスク」を選択。
Data source(情報源)は、「Do a search for」「タスク」を選択します。
![テキストの表示を切り替える方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-23-143332.png)
次に、データベースに登録してあるタスクを表示するために、「Textエレメント」を配置します。
「Insert dynamic data(動的データ)」を設定していきます。
![テキストの表示を切り替える方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-23-143401.png)
「Current cellsタスクsタイトル」を選択。
![テキストの表示を切り替える方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-23-145115.png)
続いて、「Checkboxエレメント」を配置します。
プリセットは、「Dynamic(動的)」を選択。
動的ステータスは、「Current cellsタスクs完了」を選択。
最後に、タスクの完了/未処理を表示するため、「Textエレメント」を配置します。
![テキストの表示を切り替える方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-23-145630.png)
チェックボックスの下に、「Textエレメント」を配置します。
「Insert dynamic data(動的データ)」を設定していきます。
![テキストの表示を切り替える方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-23-150508.png)
「Checkbox is checked(チェックボックスがチェックされている)」を選択。
![テキストの表示を切り替える方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-23-150530.png)
「:formatted as text(テキストをフォーマット化)」を選択。
![テキストの表示を切り替える方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-23-150557.png)
yesの場合は、「完了」
noの場合は、「未処理」
と表示するように設定しました。
これで、全ての設定は完了です!
プレビューで動作を確認してみましょう!
⑦チェックボックスの「全て選択機能」を作る方法を勉強
チェックボックスの「全て選択機能」を作る方法を勉強していきましょう!
完成イメージはこんな感じです。
チェックボックスを全選択したり。全解除できていることが分かります。
このパートは少し複雑なので、「へーbubbleはこんなこともできるんだー」ぐらいで、勉強してもらうぐらいで良いかもしれません。
それでは、始めていきましょう!
まずは、データベースを作っていきます。
![チェックボックスの「全て選択機能」を作る方法を勉強(データベース編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-23-160242.png)
データベースの新しいタイプは、「USER」とします。
![チェックボックスの「全て選択機能」を作る方法を勉強(データベース編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-23-160301.png)
続いて、フィールドを作成します。
![チェックボックスの「全て選択機能」を作る方法を勉強(データベース編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-23-160322.png)
メールアドレスを登録したいので、「メールアドレス」とし、タイプは「text」にします。
![チェックボックスの「全て選択機能」を作る方法を勉強(データベース編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-23-160400.png)
データを登録していきます。
「Add dataタブ」に移動して、「New entry」をクリック。
![チェックボックスの「全て選択機能」を作る方法を勉強(データベース編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-23-160429.png)
なんでも良いので、メールアドレスを登録していきます。
![チェックボックスの「全て選択機能」を作る方法を勉強(データベース編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-23-160612.png)
こんな感じで、6つのメールアドレスを登録しました。
続いて、Repeating Groupを作成していきます。
![チェックボックスの「全て選択機能」を作る方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-24-050437.png)
「Repeating Groupエレメント」を配置します。
・コンテントタイプは、先ほどデータベースで作成した「USER」
・Data source(情報源)は、「Do a search for」「USER」
・レイアウトは、「Full list」(データベースの全データ分のセルを表示します)
・Rows(行)を、「6」
と設定します。
![チェックボックスの「全て選択機能」を作る方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-24-054640.png)
「inspector」をクリックして、「Repeating Groupエレメント」の状態を変えていきます。
![チェックボックスの「全て選択機能」を作る方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-24-051206.png)
「Add a new custom state(新しいカスタム状態を追加する)」をクリック。
![チェックボックスの「全て選択機能」を作る方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-24-053054.png)
状態の名前を「selected」とし、タイプは「USER」を選択します。
「This state is a list」にチェックを入れます。
次にアイコンを設置していきます。
![チェックボックスの「全て選択機能」を作る方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-24-050617.png)
検索窓に「squar」と入れて選択します。
次に、Repeating Group内に、「Textエレメント」を配置していきます。
![チェックボックスの「全て選択機能」を作る方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-24-053611.png)
Repeating Group内に、「Textエレメント」を設置し、「Insert dynamic data(動的データ)」の設定をします。
![チェックボックスの「全て選択機能」を作る方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-24-053641.png)
「Current cells USER」「メールアドレス」を選択。
続いて、トリガーとなる「ボタン」を設置していきます。
![チェックボックスの「全て選択機能」を作る方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-24-054151.png)
「Buttonエレメント」を設置し、名前を「全て選択」にします。
これが、全選択のトリガーとなります。
ボタンのワークフローを設定していきます。
![チェックボックスの「全て選択機能」を作る方法を勉強(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-24-054411.png)
「Element Actions」「Set state」を選択します。
![チェックボックスの「全て選択機能」を作る方法を勉強(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-24-054930.png)
設定するエレメントは、「Repeating Group USER」を選択。
Custom stateは、先ほど設定した「selected」を選択。
![チェックボックスの「全て選択機能」を作る方法を勉強(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-24-055313.png)
「selected」に割り当てる「値」を設定します。
「Repeating Group USER」「List of USER」にします。
![チェックボックスの「全て選択機能」を作る方法を勉強(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-24-060521.png)
次に「いつ」アクションが行われるかを設定していきます。
「Only when(~の時だけ)」に上記のように選択していきます。
・「Repeating Group USER」「seledted」:先ほど設定したカスタムステイト。
・「count(カウント)」:リスト内のアイテムの数を返す。
・「is not(~ではない)」:2つのエントリが等しいかどうかをチェックします。そうでない場合は、yesが返されます。
なにをやっているのか分からないかもしれませんが、つまりここでは、
ボタンを押した時に、チェックボックスで選択されている数が、6(データがある数)ではない場合、ボタンのワークフローを実行してね。(全選択)
と設定しました。
次は逆に、「全選択されている時にその全選択を解除する」ワークフローを作成します。
![チェックボックスの「全て選択機能」を作る方法を勉強(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-24-060547.png)
今作成したワークフローをコピペし複製します。
![チェックボックスの「全て選択機能」を作る方法を勉強(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-24-060612.png)
ペーストします。
![チェックボックスの「全て選択機能」を作る方法を勉強(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-24-060723.png)
複製したワークフローの設定していきます。
先ほど設定した一部を変更して、上記のようにします。
「>」:最初の数値が2番目の数値より大きい場合は、yesを返す。
「0」よりも大きい数字の時だけ、実行されるワークフローと設定しました。
つまり、
ボタンを押した時に、チェックボックスに1つでもチェックが入っていたら、全部解除してね。
というワークフローになります。
さらに、「値」が割り当てられないようにし、アイコンをチェックなしのチェックボックスに戻すために「Value」に入っている「Repeating Group USER~~」は削除します。
![チェックボックスの「全て選択機能」を作る方法を勉強(ワークフロー編)](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-24-060818.png)
「Value」に入っている「Repeating Grou USER~~」は削除します。
続いて、「値」がある時にアイコンがチェック付きのチェックボックスに変化するようにします。
![チェックボックスの「全て選択機能」を作る方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-24-061107.png)
アイコンのプロパティーを開きます。
「Conditional(条件)タブ」にいき、条件を設定します。
「Repeatinng Group」に、USERの情報が含まれている場合とします。
![チェックボックスの「全て選択機能」を作る方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-24-061346.png)
「Select a property to change when truue」でどんな変化をさせるか設定します。
「Icon」を選択して、チェック付きのチェックボックスにします。
「Icon color」を選択して、色を変えます。
これで「ボタンを押す」と「チェックなしのチェックボックス」が「チェック付きのチェックボックス」にかわります。
ここまでで、プレビューで動作を確認してみましょう!
次に、ボタンの押した時のテキストを変えていきます。
![チェックボックスの「全て選択機能」を作る方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-25-040436.png)
ボタンのプロパティーを開きます。
「Conditional(条件)タブ」に移動します。
「When(いつ)」に、Repeatinng Groupで選択されている数が「0」より大きい時。と設定します。
![チェックボックスの「全て選択機能」を作る方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-25-040604.png)
「0」以上の時に、「Text」を「全て解除」になるように設定しました。
続いて、アイコンのワークフローを作って、アイコンを1つずつ変化させられるようにしていきます。
![チェックボックスの「全て選択機能」を作る方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-25-041216.png)
アイコンのプロパティーからワークフローに移動します。
![チェックボックスの「全て選択機能」を作る方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-25-041500.png)
「Only when(~の時だけ)」に上記のように設定します。
つまり、「チェック付きのチェックボックスの時だけ」としました。
![チェックボックスの「全て選択機能」を作る方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-25-041616.png)
「Element Actions」「Set state」を選択。
![チェックボックスの「全て選択機能」を作る方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-25-042532.png)
minus item:アイテムのリストからアイテムを削除します。元のリストからアイテムを除いた新しいリストを返します。
これで、チェック付きのアイコンをクリックすると、アイテムリストから削除されるので、チェックなしのアイコンに変わる設定ができました。
次に、チェックなしのアイコンをチェックありのアイコンに変える設定をしていきます。
![チェックボックスの「全て選択機能」を作る方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-25-043212.png)
今作成した、アイコンのワークフローをコピペします。
![チェックボックスの「全て選択機能」を作る方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-25-043231.png)
![チェックボックスの「全て選択機能」を作る方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-25-043537.png)
「Only when(~の時だけ)」の「contain(含む)」を「doesn’t contain(含まない)」に変更します。
つまり、「チェックなしのチェックボックスの時だけ」としました。
![チェックボックスの「全て選択機能」を作る方法を勉強](https://hironk-blog.net/wp-content/uploads/2020/09/スクリーンショット-2020-09-25-045053.png)
こちらも上記のように変更します。
「minus item」を「plus item」に変更。
plus item:リストにアイテムを追加します。元のリストと新しいアイテムを含む新しいリストを返します。
これで、チェックなしのアイコンをクリックすると、アイテムリストに追加されるので、チェック付きのアイコンに変わる設定ができました。
全ての設定が完了しました!
プレビューで動作を確認してみましょう!