この記事では、bubbleのWorkflow(ワークフロー)の使い方を、画像と動画で解説していきます!
Workflow(ワークフロー)は、
ユーザーがサイトやアプリを操作した時に、どんな処理を行うか定義できます。
なんだか良くわからないと思いますので、
実際にワークフローを作りながら解説していきます!
つくってみるワークフローは以下の4つです。
①ボタンを押すと指定したアクションが起きるワークフロー
②クリックすると別のページに移動するワークフロー
③ボタンを押すとアラートを表示させるワークフロー
④ユーザー登録をしてそれをデータベースに保存するワークフロー(サインアップ)
ワークフローの前に、「エレメント」の使い方が良く分からないよという方は、こちらの記事をご覧ください。
![](https://hironk-blog.net/wp-content/uploads/2020/09/undraw_content_team_3epn-320x180.png)
①ボタンを押すと指定したアクションが起きるワークフロー
まずは簡単なところからで、ボタンを押した時に指定したアクションが起きるようにしてみましょう!
![ワークフローの使い方(アニメーション編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-04-060803.png)
まずは「Textエレメント」と「Buttonエレメント」を下記のように配置してください。
テキストに書いてある通りですが、「ボタンが押されたら、テキストエレメントは消える」ようにワークフローをつくっていきます。
![ワークフローの使い方(アニメーション編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-04-055309.png)
ボタンを押した時にアクションが起こるようにします。
ボタンエレメントのプロパティーを開いて「workflow」を選択します。
![ワークフローの使い方(アニメーション編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-04-055424.png)
Workflowタブに移動します
「When~~」の部分は、「いつ起こすアクションですか?」→「ボタンをクリックしたときです」になります。
「Click here to~~」をクリックしてアクションを定義していきます。
![ワークフローの使い方(アニメーション編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-04-055450.png)
今回は、ボタンエレメントが押されたときにアクションを起こしたいので、「Element Actions」を選択
ボタンが押されたら消したいので「Animate」を選択
※Hide(隠す・非表示にする)でも同じことができます
![ワークフローの使い方(アニメーション編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-04-055704.png)
「どのエレメントにアニメーションを付けますか?」なので「Textエレメント」を選択
![ワークフローの使い方(アニメーション編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-04-055739.png)
「どんなアニメーションを付けますか?」なので今回は消したいということで「Fadeout(フェードアウト)」を選択
![ワークフローの使い方(アニメーション編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-04-055815.png)
「ボタンが押された時」→「Textエレメント」を「フェードアウト」させる
とワークフローをつくりました。
「Preview(プレビュー)」で動きを確認してみましょう!
![ワークフローの使い方(アニメーション編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-04-055839.png)
ボタンをクリックします
そうすると、、、
![ワークフローの使い方(アニメーション編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-04-055856.png)
消えました!
Textエレメントが消えた(フェードアウト)したので成功ですね!
動画で見たい方はこちらから
②クリックすると別のページに移動するワークフロー
次に、クリックすると別のページに移動するワークフローをつくってみましょう!
今からやることのイメージは、企業のホームページなどにあるメニューボタンで、
例えば、「企業概要」をクリックすると「企業概要ページ」に移動しますよね。
そんな事をイメージして頂けると良いかなと思います。
まずは、下記のように、Textエレメントを作成してください。
![ワークフローの使い方(ページ移動編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-04-081650.png)
テキストの内容や色、形などは何でもOKです。
![ワークフローの使い方(ページ移動編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-04-063417.png)
次に移動先のページを新しく作ります。
ちなみに今は「indexページ」にいます。
画面左上にある、「Page」の「▼」をクリックします
![ワークフローの使い方(ページ移動編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-04-063443.png)
「Add a new page」で新しいページをつくります
![ワークフローの使い方(ページ移動編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-04-063515.png)
新しいページ名は、「sample」
「Clone from(コピーするページ)」で先ほどまでいた、「index」を選択
「CREATE」をクリックすると新しいページが作成できます。
![ワークフローの使い方(ページ移動編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-04-063541.png)
ページが「sampleページ」に変わりました。
![ワークフローの使い方(ページ移動編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-04-063643.png)
ページが移動したことがわかりやすいように、テキストと色を変更しておきます。
![ワークフローの使い方(ページ移動編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-04-063856.png)
「indexページ」に戻り、ワークフローを設定していきましょう!
「workflow」をクリック
![ワークフローの使い方(ページ移動編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-04-063925.png)
Workflowタブに移動します
「When~~」の部分は、「いつ起こすアクションですか?」→「Textをクリックしたときです」になります。
「Click here to~~」をクリックしてアクションを定義していきます。
![ワークフローの使い方(ページ移動編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-04-064029.png)
どこに移動するか指示をしたいので、「Navigation」を選択し
どこのページに移動するか選択したいので、「Go to page」をクリック
![ワークフローの使い方(ページ移動編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-04-064131.png)
「Destination(行き先)」で移動したいページを選択します。
sampleページに移動させたいので、「sample」を選択
「Text testエレメントがクリックされたら」→「sampleページへ移動する」というワークフローをつくりました
ここまでできたら、プレビューで動きを確認してみましょう
![ワークフローの使い方(ページ移動編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-04-064412.png)
「index」ページではこのように表示されています
このテキストをクリックしてみます
![ワークフローの使い方(ページ移動編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-04-065035.png)
無事に、「sample」ページに移動しました!
動画で見たい方はこちらから
③ボタンを押すとアラートを表示させるワークフロー
ボタンを押すとアラートを表示させるワークフローは、エレメントの使い方の記事で解説しています。
こちらからご覧ください!
④サインアップのワークフロー
続いて、ユーザー登録をした時に、そのユーザーの情報をデータベースに保存するワークフローの解説をしていきます!
つまり、サインアップ(Sign up)ですね。
事前準備
ワークフローをつくるための準備を先にします。
![ワークフローの解説(サインアップ編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-05-040955.png)
まずこのように、「Textエレメント」「Inputエレメント」「Buttonエレメント」を配置してください。
エレメントの使い方が良く分からないという方はこちらの記事をご覧ください
配置できたら、このあと1つずつ設定していきます。
![ワークフローの解説(サインアップ編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-05-041135.png)
まずは、Textエレメントです。
エレメントをダブルクリックして、「ユーザー登録」と入力
![ワークフローの解説(サインアップ編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-05-041235.png)
Inputエレメントに、「ユーザー名」と入力
![ワークフローの解説(サインアップ編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-05-041331.png)
ユーザー名の下のInputエレメントに、「メールアドレス」と入力
Content formatは「Email」を選択
ここはメールアドレスを入力するところですよとします
![ワークフローの解説(サインアップ編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-05-041503.png)
メールアドレスの下のInputエレメントに、「パスワード」と入力
Content formatは「Password」を選択
ここはパスワードを入力するところですよとします
![ワークフローの解説(サインアップ編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-05-041604.png)
ボタンの名前は、「Sign up」としておきます。
これでワークフローをつくるための事前準備は完了です。
続いてワークフローをつくっていきましょう!
ワークフロー(Workflow)の設定
ワークフローの設定をしていきます。
先ほど準備したので、現在このような状態になっていると思います。
![ワークフローの解説(サインアップ編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-05-041720.png)
ここから、
「Sign upボタンを押すと、ユーザー名が表示される。さらにそのユーザー情報がデータベースに保存される」
というワークフロー(Workflow)をつくっていきます!
![ワークフローの解説(サインアップ編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-05-055622.png)
Sign upボタンにワークフローを設定していきます!
![ワークフローの解説(サインアップ編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-05-055643.png)
Workflowタブに移動します
「When~~」の部分は、「いつ起こすアクションですか?」→「Buttonをクリックしたときです」になります。
「Click here to~~」をクリックしてアクションを定義していきます。
![ワークフローの解説(サインアップ編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-05-055714.png)
今回のワークフローはアカウント関係なので、「Account」を選択
アカウントのSign upをしたいので、「Sign the user up」を選択
![ワークフローの解説(サインアップ編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-05-055828.png)
アカウントを登録するには、「Email」と「Password」が必要なので設定します。
まずは、Emailです。
先ほど作成した、「Inputメールアドレス」の、メールアドレスを登録したいので、「Input メールアドレス」を選択
![ワークフローの解説(サインアップ編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-05-055921.png)
「value(値)」を選択
![ワークフローの解説(サインアップ編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-05-060349.png)
同じようにPasswordも設定していきます
![ワークフローの解説(サインアップ編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-05-060406.png)
これで設定は完了です。
「Sign upボタンを押したら」→「フォームに入力されているユーザーを」→「Sign upする」というワークフローをつくりました。
プレビューで動作を確認してみましょう!
![ワークフローの解説(サインアップ編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-05-063959.png)
このようにお好きな、「ユーザー名」「メールアドレス」「パスワード」を入力
「Sign upボタン」をクリック
何が起きたか良く分からないと思いますが、上の方に横に線が走ったと思います
これで、入力したアカウント情報が、Sign upされました
データベースで確認してみましょう!
![ワークフローの解説(サインアップ編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-05-064113.png)
データベースタブをクリックしてデータベース画面に入ります
「App data」タブに先ほど登録したメールアドレスが入っています
ちゃんと登録されてますね!
もしなにも出てこない時はここをクリックしてページを更新してみてください。
![データベースの使い方](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-02-165016.png)
サインアップのワークフローの解説を動画で見たい方はこちら
これでワークフローの解説は終わりにします!
また別の記事でお会いできるのを楽しみにしています(^▽^)/