この記事は、bubbleで「タスク管理アプリ」を実際に作りながら、bubbleでどんなことができるかが勉強できます。
bubbleをとにかく実践的に操作してみたい!どんなことができるか知りたいという方には最適です。
bubbleをまだ全くさわったことがないよ。という方は、まずはこちらの記事で勉強することをおすすめします。
![](https://hironk-blog.net/wp-content/uploads/2020/09/undraw_pride_y0te-320x180.png)
などが学べます。
完成イメージはこんな感じです。(音ありなのでご注意ください)
それでは、早速はじめていきましょう!
【bubble】で「タスク管理アプリ」を作ってみよう!
プレビューで動作を確認する際は、データベースからUserログインし確認することをおすすめします。ログイン状態でないと動作しない部分がありますのでご注意ください。
![bubble データベース](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-12-051734.png)
また、スタイル(デザイン)は解説しませんので、お好きなようにアレンジしてください!
それでは、始めていきましょう!
データベースを作成
まずは、データベースの作成をします。
※【参考】データベースやこのあと出てくる文言は、同じにした方が制作が楽だと思います。bubbleでの制作に慣れている方は、お好きなように(^^)/
必要な「type」は3つです。
※fieldの作成前に3つのtypeを先に作成した方が良いです。
![bubble データベース](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-04-171220.png)
1つ目のタイプは、「User」。(デフォルトであります)
fieldは、上記を新たに作成します。
「プロジェクト」は、「This field is a list」にチェックを入れてリストにします。
![bubble データベース](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-04-172121.png)
2つ目のタイプは、「タスク」。
fieldは、上記を新たに作成します。
「担当者」は、「This field is a list」にチェックを入れてリストにします。
![bubble データベース](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-04-172147.png)
3つ目のタイプは、「プロジェクト」。
fieldは、上記を新たに作成します。
「タスクリスト」と「プロジェクト担当者」は、「This field is a list」にチェックを入れてリストにします。
作成中にプレビューで確認した際に、動きが分かりやすいように、最初にデータベースにデータを入れておきます。(今は入れずに後ほどでも大丈夫です。)
![bubble データベース](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-11-144149.png)
「App dataタブ」で作成します。
「User」から登録していきます。
![bubble データベース](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-11-144450.png)
登録の前に1点設定を変更しておきます。
プロジェクトの右側にある、虫眼鏡をクリックします。
![bubble データベース](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-11-144545.png)
プロジェクトが「unique id(一意のID)」を「プロジェクト名」に変更。
![bubble データベース](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-160027.png)
「タスク」は下記のようにしました。
![bubble データベース](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-11-150426.png)
「プロジェクト」は下記のようにしました。
![bubble データベース](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-155752.png)
最後に、「User」に戻ってデータを追加します。
![bubble データベース](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-11-151507.png)
「鉛筆アイコン」をクリックで編集できます。
![bubble データベース](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-11-151706.png)
プロジェクトに、先ほど登録した「新店OPEN」を入力し「Add」で追加します。
![bubble データベース](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-11-151827.png)
「User」はこのようにしました。
これでデータベースの準備ができました。
ヘッダーを作成
ヘッダーの作成をしていきます。
まず、ページ全体の大きさを設定します。
ページの何もないところでダブルクリックをして、「Indexページ」のプロパティーを開きます。
![indexページのプロパティー](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-05-051854.png)
「Width:960」「 Height:640」で設定。
次に、ヘッダーを作ります。
![bubble ヘッダー](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-05-044423.png)
①:「Textエレメント」
②~⑦:「Iconエレメント」
⑧:「Imageエレメント」
⑨:「Iconエレメント」
![bubble ヘッダーサイズ](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-05-052728.png)
ヘッダーのサイズは、「Width:960 Height:65」
こんな感じで作ります。
①~⑨まで1つずつ設定していきましょう。(ワークフローなどの設定は後ほどします)
①「Textエレメント」:プロジェクト名を表示させる
①の「Textエレメント」は、プロジェクト名を表示させるために設置します。
![bubble Textエレメントの設定](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-05-053808.png)
こんな感じで設定します。
style(デザイン)の設定をする場合は、「Remove style(スタイルを削除)」をクリックして行います。
![bubble スタイルの設定](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-05-055103.png)
②「Iconエレメント」:新しいプロジェクトを作成する
②の「Iconエレメント」は、新しいプロジェクトを作成するために使います。
大きさは、「Width:20 Height:20」
![bubble 条件設定](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-05-054820.png)
「Conditional(条件)」タブに移動します。
Whenに、「This Icon」「is hovered」を選択。
「Select a property to change when true(変更するプロパティーを選択)」をクリック。
「Icon color」を選択し、グレーにします。
これで、「このアイコン」が「ホバー」された「時」、「アイコンの色」が「グレー」になるという条件を追加できました。
③「Iconエレメント」:プロジェクトを表示する
③のIconエレメントは、プロジェクトを表示させるために使います。
大きさは、「Width:40 Height:40」
![bubble 条件設定](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-05-060606.png)
先ほどと同様に、条件を設定します。
条件の設定は、コピペでできます。
![bubble 条件設定](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-05-060948.png)
赤塗りつぶし当たりの何もないところで、「右クリック」をして「Copy condition」を選択。
![bubble 条件設定](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-05-061933.png)
同じようなところで、「右クリック」してペースを選択すればOKです。
④「Iconエレメント」:プロジェクトを選択する
④の「Iconエレメント」は、プロジェクトを選択するための、ドロップダウンを表示させるために追加します。(ドロップダウンは後ほど作ります)
②のアイコンと同じなので、コピペして配置します。
ホバー時にアイコンの色が変わる条件は、コピペしたのですでに入っていると思います。
![bubble 条件設定](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-05-065010.png)
⑤「Iconエレメント」:分析グラフを表示
⑤の「Iconエレメント」は、タスクの進捗グラフを表示するために設置します。
③のアイコンと同じなので、コピペして配置します。
![bubble 条件設定](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-05-065408.png)
⑥「Iconエレメント」:プロジェクトメンバーを表示
⑥の「Iconエレメント」は、プロジェクトメンバーを表示するために設置します。
③のアイコンと同じなので、コピペして配置します。
![bubble 条件設定](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-05-065632.png)
⑦「Iconエレメント」:ユーザーのプロフィールを登録
⑦の「Iconエレメント」は、ユーザーのプロフィール登録をするための、POPUPを表示するために設置します。
②のアイコンと同じなので、コピペして配置します。
![bubble 条件設定](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-05-070550.png)
⑧「Imageエレメント」:ユーザーのプロフィール画像を表示
⑧の「Imageエレメントエレメント」は、ユーザーのプロフィール画像を表示するために設置します。
![bubble Imageエレメントの設定](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-05-071022.png)
「Dynamic image」は、「Current User(現在ログインしているユーザー)」「プロフィール画像」「:processed with Imgix(Imgixで処理)」を選択。
「Imgix」の設定で、
・「Quality」は「100」
・「Resize to fit the dimensions by cropping(トリミングして寸法に合わせてサイズを変更します)」にチェック。
「Run-mode rendering(実行モードレンダリング)」は、「Stretch(ストレッチ)」を選択。
![bubble Imageエレメントの設定](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-05-074125.png)
その他の設定は、こんな感じです。
⑨「Iconエレメント」:サインインPOPUPの表示
⑨の「Iconエレメント」は、サインインPOPUPを表示するために設置します。
②のアイコンと同じなので、コピペして配置します。
次に、サインアップフォームの作成をします。
![bubble サインアップフォームの作成](https://hironk-blog.net/wp-content/uploads/2020/10/スクリーンショット-2020-10-17-060640.png)
「Reusable elements」の「Signup/Login Popupエレメント」を設置します。
次に、今設置した「Signup/Login Popupエレメント」を「サインアップアイコン」をクリックしたら、表示するワークフローを作成します。
![bubble サインアップのワークフロー](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-05-074724.png)
ワークフローをクリック。
![bubble サインアップフォームの作成](https://hironk-blog.net/wp-content/uploads/2020/10/スクリーンショット-2020-10-17-061315.png)
エレメントを表示させたいので、「Element Actions」「Show(表示)」を選択。
![bubble サインアップフォームの作成](https://hironk-blog.net/wp-content/uploads/2020/10/スクリーンショット-2020-10-17-061408.png)
表示させたいエレメントは、「Signup/Login Popup」を選択。
これで、「サインアップアイコン」をクリックしたら、「Signup/Login Popup」が表示されて、ユーザーがサインアップできるようになりました。
プロジェクトを選択するためのドロップダウン作成
続いて、プロジェクトを選択するための、ドロップダウンを作成していきます。
![bubble ドロップダウン](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-08-050035.png)
「Groupエレメント」を配置します。
typeは「プロジェクト」を選択。
![bubble Groupエレメントの設定](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-09-080449.png)
「This element is visible on page load(このエレメントはページの読み込み時に表示されます)」のチェックを外します。
なので、このエレメントはページ読み込み時には、表示されません。
![bubble ドロップダウン](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-08-050235.png)
今作成した「Groupエレメント」の中に、「Repeating Groupエレメント」を配置します。
・「Type of content」:「プロジェクト」
・「Data source(情報源)」:「Current User(現在のユーザー)」「プロジェクト」
・「Layout style(レイアウト)」:「Ext.vertical scroling(垂直スクロール)」
・「Rows(行)」「Columns(列)」:行「1」、列「1」
![bubble ドロップダウン](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-08-050358.png)
今作った「Repeating Group」の中に更に、「Textエレメント」を配置します。これで、「Groupエレメント」「Repeating Groupエレメント」「Textエレメント」と重ねたことになります。
「Insert dynamic data(動的データ)」をクリック。
![bubble ドロップダウン](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-08-050543.png)
「Current cell’s プロジェクト」「プロジェクト名」を選択。
次に、ワークフローを作成します。
![bubble ワークフローを作成](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-08-052504.png)
「Element Actions」「Set state」を選択。
「Set state」で新しい「Custom state」を作ります。
「Custom state」は少し難しいかもしれないので、良く分からなくてもそのまま進んでしますことをおすすめします。使っているうちになんとなく理解できるようになってきます。私もそーでした(^^;
けいさんのnote記事が分かりやすいのでおすすめです。
![bubble ワークフローを作成](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-08-061826.png)
「Element」は、「index」を選択。
![bubble ワークフローを作成](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-08-062229.png)
新しく、「Custom state」を作成します。
![bubble カスタムステイト](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-09-073739.png)
・「State name」は、「プロジェクト」
・「State type」は、データベースの「プロジェクト」
![bubble カスタムステイト](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-09-073855.png)
「Current cell’s プロジェクト(現在のセルのプロジェクト)」を選択。
![bubble アイコンのワークフロー](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-09-074808.png)
今作成した、ドロップダウンを表示させるためのワークフローを作成します。
![bubble アイコンのワークフロー](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-09-075033.png)
エレメントを表示したり非表示にしたりしたいので、「Element Actions」「Toggle(切り替える)」を選択。
![bubble アイコンのワークフロー](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-09-075115.png)
「Groupプロジェクト選択ドロップダウン」を選択。
これで、矢印アイコンをクリックすると、ドロップダウンが表示したり非表示になったりするワークフローができました。
次に、アイコンがクリックされた時に、アイコンが下を向くようにします。
![bubble 条件設定](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-09-075709.png)
「Conditional(条件)」タブに移動。
新しく条件を追加します。
When(いつ)に「Groupプロジェクト選択ドロップダウン」「is visible(見える)」を選択。
「Icon」で、下向き矢印を選択します。
これで、「Groupプロジェクト選択ドロップダウン」が「見えた」「時」に、下向き矢印アイコンに変更する条件が追加できました。
現在のプロジェクト名を表示させる
ヘッダーに、現在選択しているプロジェクト名を表示させる設定をします。
![bubble プロジェクトの表示](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-09-081233.png)
「index」「プロジェクト」「プロジェクト名」を選択。
これで、現在選択されている、プロジェクト名が表示されるようになりました。
User情報登録のPOPUPを作成
User情報登録のPOPUPを作成します。
![bubble ユーザー登録のフォーマット](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-09-082326.png)
「PopUPエレメント」を配置します。
①~⑦まで順に説明していきます。
①「Textエレメント」:Userプロフィール登録
②「Picture Uploaderエレメント」
③「Inputエレメント」:名前
④「Inputエレメント」:部門
⑤「Buttonエレメント」:登録(ワークフローはこのあと設定)
⑥「Buttonエレメント」:ログアウト(ワークフローはこのあと設定)
⑦「Iconエレメント」:×(ワークフローはこのあと設定)
⑤登録ボタンのワークフローを作成
登録ボタンが押された時にワークフローを作成します。
![bubble ボタンのワークフロー](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-09-084038.png)
入力された情報をデータベースに保存していくので、「Date 」「Make changes to thing~(データベースに変化を加える)」を選択。
![bubble ボタンのワークフロー](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-09-084151.png)
変更するデータは、「Current User」を選択。
データベースの各fieldと入力フォームに入力された各項目をひもづけていきます。
・「名前」「Inputユーザー名」「Value(値)」を選択。
これで、「Inputユーザー名」に入力された「値」は、データベースの「名前フィールド」に保存されるという設定ができました。
あとの項目も同様です。
・「プロフィール画像」「Picture Uploaderユーザープロフィール画像」「Value」を選択。
・「部門」「Inputユーザー部門」「Value」を選択。
これで、各データベースのfieldと、先ほど作成した入力フォームの項目がひもづけられました。
「登録ボタン」がクリックされたら、データベースにその情報が保存されるワークフローができました。
次に、「登録ボタン」を押したあと、POPUPが非表示になるようにします。
ワークフローのStep2を作ります。
![bubble ボタンのワークフロー](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-09-084724.png)
エレメントを非常にするので、「Element Actions」「Hide(非表示)」を選択。
![bubble ボタンのワークフロー](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-09-084816-1.png)
「Popup User プロフィール」を選択。
これで、「登録ボタン」のワークフローができました。
⑥ログアウトボタンのワークフローを作成
ログアウトボタンが押された時のワークフローを作成します。
![bubble ログアウトボタンのワークフロー](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-09-085512.png)
ログアウトのワークフローなので、「Account(アカウント)」「Log the user out(ユーザーをログアウトします)」を選択。
これで、ログアウトボタンのワークフローができました。
⑦「×アイコン」のワークフローを作成
最後に、「×アイコン」のワークフローを設定します。
「×アイコン」がクリックされると、POPUPが閉じるワークフローを作成します。
![bubble アイコンのワークフロー](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-09-090151.png)
エレメントを非常にするので、「Element Actions」「Hide(非表示)」を選択。
![bubble ボタンのワークフロー](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-09-084816-1.png)
「Popup User プロフィール」を選択。
「×アイコン」をクリックすると、POPUPが非表示になるワークフローができました。
最後に、このユーザー登録のフォーマット(POPUP)を表示させるワークフローを作成します。
![bubbleアイコンワークフロー](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-11-154438.png)
ワークフローをクリック。
![bubble POPUP表示のワークフロー](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-09-090652.png)
エレメントを表示させたいので、「Element Actions」「Show(表示)」を選択。
![bubble POPUP表示のワークフロー](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-09-090710.png)
「Popup User プロフィール」を選択。
これで、ユーザー登録のフォーマットは完成です。
タスク管理を作成
続いて、データベースに登録されているタスクが表示できるようにしていきます。
![bubble グループエレメントの設置](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-053432.png)
まず、「Groupエレメント」を配置します。
![bubble Repeating Groupエレメントの配置](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-054126.png)
次に、今配置した「Groupエレメント」の中に、「Repeating Groupエレメント」を配置します。
設定は、
・タイプは、「タスク」を選択。
・「Data source(情報源)」は、「index」「プロジェクト」「タスクリスト」を選択。
・レイアウトは、「Full List(全リスト)」を選択。
・W:840 H258
![bubble グループエレメントの設置](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-055308.png)
更に、今配置した「Repeating Groupエレメント」の中に、「Groupエレメント」を配置します。
設定は、上記の通りです。
次に、タスクの項目を表示させていきます。
![bubble Textエレメント](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-055615.png)
「Groupタスク」内に、「Textエレメント」を配置。
「Insert dynamic data(動的データ)」をクリックし、「Parent group’sタスク」「タスク名」を選択。
![bubble Textエレメント](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-060047.png)
同じように、ステータスを表示させます。
![bubble Textエレメント 期日](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-060358.png)
同じように、期日を表示させます。
次に、タスクの進捗を表示するために、プラグインをインストールします。
![bubble プラグイン](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-060638.png)
「Progress Bar」で検索し、インストールします。
![bubble プラグイン配置](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-060857.png)
![bubble プラグイン配置](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-061128.png)
「Percentage」は、「Parent group’sタスク」「進捗」を選択。
![bubble Repeating Groupエレメント](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-061912.png)
「Repeating Groupエレメント」を配置し、タスク担当者のプロフィール画像を表示させます。
・タイプは、「User」を選択。
・「Data source(情報源)」は、「Parent group’sタスク」「担当者」を選択。
・レイアウトは、「Full List(全リスト)」を選択。
・Rows(行)は「1」、Columns(列)は、「3」を選択。
今配置した、「Repeating Groupエレメント」の中に、プロフィール画像を表示させるため、「Imageエレメント」を配置します。
![bubble Imageエレメント](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-062511.png)
このように設定します。
次に、タスクを削除するための設定をしていきます。
![bubble タスク削除](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-064240.png)
「PopUPエレメント」を配置します。
![bubble POPUPの設定](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-11-155633.png)
typeは、「タスク」を選択。
①「Textエレメント」:タスクの削除
②「Textエレメント」
③「Iconエレメント」:「×」のワークフローを作成します。
![Iconエレメントのワークフローを作成](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-065446.png)
エレメントを非表示にするので、「Element Actions」「Hide(非表示)」を選択。
![Iconエレメントのワークフローを作成](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-065522.png)
「PopUPタスク削除」を選択。
④「Buttonエレメント」:削除ボタンのワークフローを作成します。
![bubble 削除ボタンのワークフローを作成](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-065725.png)
ワークフローをクリック。
![bubble 削除ボタンのワークフローを作成](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-065934.png)
データベースのデータを削除したいので、「Data」「Delete thing(データを削除)」を選択。
![bubble 削除ボタンのワークフローを作成](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-070002.png)
「Parent group’sタスク」を選択。
これで、削除ボタンを押したらタスクのデータが削除されるワークフローができました。
次に今作成した、「POPUPタスク削除」を表示させるワークフローを作成します。
![bubble 削除ボタン](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-063653.png)
「Iconエレメント」を配置し、ワークフローをクリック。
![Iconエレメントのワークフローを作成](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-063750.png)
「Element Actions」「Display data(データを表示する)」を選択。
![Iconエレメントのワークフローを作成](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-071011.png)
表示するエレメントは、「PopUPタスク削除」を選択。
表示するデータは、「Parent group’sタスク」を選択。
このワークフローにより、下記の「Parent group’sタスク」「タスク名」にタスク名が表示できます。
![bubble タスク削除](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-065259.png)
![Iconエレメントのワークフローを作成](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-071303.png)
step2で、エレメントを表示させたいので、「Element Actions」「Show(表示)」を選択。
![Iconエレメントのワークフローを作成](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-071322.png)
「PopUPタスク削除」を選択。
新しいタスクを作成
続いて、新しいタスクが作成できるようにします。
「Floating Groupエレメント」を使います。
![bubble Floating Groupエレメント](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-074437.png)
「Floating Groupエレメント」を配置します。
・「Vertically float relative to(〇〇に対して垂直に浮く)」は、「Top(上)」を選択。
・「Horizontally float relative to(に対して水平に浮く)」は、「Right(右)」を選択。
※つまり、右上に「Floating Groupエレメント」は配置されます。
・「Floating zindex」は、「Above elements(エレメントの上)」を選択。
・タイプは、「タスク」を選択。
![bubble Groupエレメントの設定](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-074532.png)
・typeは、「タスク」を選択。
・「Data source(情報源)」は、「Parent group’sタスク」を選択。
次に、「Groupエレメント」の中に各エレメントを設置していきます。
![bubble 新しいタスクの作成フォーマット](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-081435.png)
「Groupエレメント」の中にそれぞれ設定していきます。
①「Textエレメント」:新しいタスク
②「Inputエレメント」:「Parent group’sタスク」「タスク名」を選択。フォーマットは、「Text」。
![bubble Inputエレメント](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-082145.png)
③「Date/time Pickerエレメント」:「Parent group’sタスク」「期日」を選択。「Input type」は、「Date」。
![bubble Date/time Pickerエレメント](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-082339.png)
④「Dropdownエレメント」:
![bubble Dropdownエレメント](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-082524.png)
このように設定。
⑤「Inputエレメント」:
![bubble Inputエレメント](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-082709.png)
このように設定。
⑥「Textエレメント」:担当者
⑦「Repeating Groupエレメント」:
![bubble Repeating Groupエレメント](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-083012.png)
このように設定。
「Repeating Groupエレメント」の中に、下記のエレメントを設置します。
![bubble Repeating Groupエレメント設定](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-083208.png)
⑦-①「Imageエレメント」:
![bubble Imageエレメント設定](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-101631.png)
このように設定します。
⑦-②「Textエレメント」:「Insert dynamic data(動的データ)」をクリック。「Current cell’s 」「部門」を選択。
⑦-③「Iconエレメント」のワークフローを作成
![bubble Iconエレメントのワークフローを作成](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-102124.png)
ワークフローをクリック。
![bubble Iconエレメントのワークフローを作成](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-102256.png)
新しく「Custom state」を作成しますので、「Element Actions」「Set state」を選択。
![bubble Iconエレメントのワークフローを作成](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-102440.png)
「Element」は「index」を選択。
「Create a new custom state」で新しく「Custom state」を作成します。
![bubble Custom staateの設定](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-102624.png)
このように設定します。
![bubble Custom staateの設定](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-103036.png)
「Value」は、「index担当者」「:minus item(リストからマイナス)」「Current cell’s User」を選択。
※何をやっているかは、後ほど解説します。
このワークフローが実行される条件を設定します。
![bubble Iconエレメントのワークフローを作成](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-103553.png)
「Element color」は、「Blue」にします。
「Only when(~の時だけ)」は、「index」「担当者」「contains(含む)」「Current cell’s User」を選択。
次に、今作成したワークフローをコピペします。
![bubble Iconエレメントのワークフローを作成](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-104000.png)
右クリックし「コピー」
![bubble Iconエレメントのワークフローを作成](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-104055.png)
右クリックし「ペースト」
![bubble Iconエレメントのワークフローを作成](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-104303.png)
先ほど作成したワークフローは、「contain(含む)」でしたが、「doesn’t contain(含まない)」に設定します。
![bubble Iconエレメントのワークフローを作成](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-104606.png)
先ほどは、「:minus item(リストからマイナスする)」と設定しましたが、「:plus item(リストにプラスする)」に設定します。
次に、「Conditional(条件)」タブに移動します。
![bubble Conditionalの設定](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-123205.png)
「When(いつ)」「index」「担当者」「contains(含む)」「Current cell’s User」を選択。現在のセルのユーザーが担当者の時とします。
「Icon」を選択し、「Icon color」を赤にします。
これで、現在のユーザーが担当者の時は、赤●になります。
ここで、〇アイコンの設定で何をしたか簡単にまとめます。
ワークフローは2つ作成しました。
1つ目は、
![bubble Iconエレメントのワークフローを作成](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-124139.png)
「現在のユーザーが担当者に含まれている時」にアイコンがクリックされたら、「担当者リストから現在のユーザーをマイナスする」
つまり、現在のユーザーが担当者である場合、赤●アイコンになっている条件設定を先ほどしたので、担当者リストからマイナスされることによって、〇に戻ることになります。
2つ目は逆で、
![bubble Iconエレメントのワークフローを作成](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-124607.png)
「現在のユーザーが担当者に含まれない時」にアイコンがクリックされたら、「担当者リストに現在のユーザーをプラスする」
つまり、現在のユーザーが担当者でない場合、〇アイコンになっていますが、担当者リストにプラスされることによって、赤●アイコンになります。
これで、「Repeating Groupエレメント」の中の設定は完了です。
戻りまして
⑧「Iconエレメント」:×ボタン
![bubble Iconエレメントの設定](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-131140.png)
この×ボタンを押すと、「Floating Groupエレメント」が非表示になるワークフローを作成します。
![bubble Iconエレメントの設定](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-130230.png)
「Element Actions」「Animate(アニメーション)」を選択。
![bubble Iconエレメントの設定](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-130248.png)
「Element」は、「Floating Groupタスク」を選択。
「Animation」は、「Transition Slide Right Out」を選択。
⑨「Buttonエレメント」:登録ボタン
最後に上記で入力された情報を、データベースに登録するためのワークフローを作成していきます。
![bubble Buttonエレメントの設定](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-125835.png)
ワークフロークリック。
![bubble Buttonエレメントの設定](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-125635.png)
新しく、データベースに登録していくので、「Data(データベース)」「Create a new thing(新しいデータを作成)」を選択。
![bubble Buttonエレメントの設定](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-125656.png)
データベースの「タスク」に保存するため、「タスク」を選択。
データベースの各fieldと入力フォームに入力された各項目をひもづけていきます。
・「タスク名」「Inputタスク名」「Value(値)」を選択。
これで、「Inputタスク名」に入力された「値」は、データベースの「タスク名field」に保存されるという設定ができました。
あとの項目も同様です。
・「期日」「Date/time Picker期限」「Value」を選択。
・「ステータス」「Dropdownステータス」「Value」を選択。
・「進捗」「Input進捗」「Value」を選択。
・「担当者」「add list(リストに追加)」「index」「担当者」「Value」を選択。※担当者はデータベースの形式をリストにしたため、他とは少し違う設定
これで、各データベースのfieldと、先ほど作成した入力フォームの項目がひもづけられました。
「登録ボタン」がクリックされたら、データベースにその情報が保存されるワークフローができました。
次にStep2です。
![bubble Buttonエレメントの設定](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-133316.png)
「Data」「Make changes to thing~(データに変化を加える)」を選択。
![bubble Buttonエレメントの設定](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-134227.png)
「Thing to change(変化させるデータ)」は、「index」「プロジェクト」を選択。
変化させるデータベースのfieldは、「タスクリスト」「add(追加)」「Result of step 1(step1の結果)」を選択。「Step1の結果をタスクリストに追加する」になります。
次にstep3です。
![bubble Buttonエレメントの設定](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-140239.png)
入力されたデータをリセットするので、「Element Actions」「Reset inputs」を選択。
![bubble Buttonエレメントの設定](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-142438.png)
「Floating Group」を非表示にするので、「Element Actions」「Animate(アニメーション)」を選択。
![bubble Iconエレメントの設定](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-130248.png)
「Element」は、「Floating Groupタスク」を選択。
「Animation」は、「Transition Slide Right Out」を選択。
![bubble Buttonエレメントの設定](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-142739.png)
次に、このワークフローが実行される条件を設定します。
「Element color」は、「Green」にします。
「Only when(~の時だけ)」は、「Parent group’sタスク」「is empty(空)」を選択。タスクが「空」の時だけ、上記のワークフローは実行されます。
これで、「登録ボタンを押した時タスクが空だったら」、新しく入力されたデータをデータベースに保存し、「Floating Groupエレメント」を非表示するワークフローができました。
次に、今作成したワークフローをコピペします。
![bubble Buttonエレメントの設定](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-143121.png)
右クリックし「コピー」
![bubble Buttonエレメントの設定](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-143143.png)
右クリックし「ペースト」
![bubble Buttonエレメントの設定](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-143637.png)
先ほどは、「is empty(空)」でしたが、今度は「is not empty(空ではない)」にします。
「Only when(~の時だけ)」は、「Parent group’sタスク」「is not empty(空ではない)」を選択。タスクが「空ではない」の時だけ、上記のワークフローは実行されます。
![bubble Buttonエレメントの設定](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-143901.png)
Step1とStep2を削除します。
![bubble Buttonエレメントの設定](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-144014-1.png)
赤い部分あたりで、「左クリック」をして、新しいワークフローを作成します。
![bubble Buttonエレメントの設定](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-144331.png)
「Data」「Make changes to thing~(データに変化を加える)」を選択。
![bubble Buttonエレメントの設定](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-144623.png)
「Thing to change(変化させるデータ)」は、「Parent group’sタスク」を選択。
変化させるデータベースのfieldは、「担当者」「clear list(fieldの中のリストを削除)」を選択。
![bubble Buttonエレメントの設定](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-150616.png)
「→」をクリックして、Step2を作成します。
![](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-150950.png)
入力された情報をデータベースに保存していくので、「Date 」「Make changes to thing~(データベースに変化を加える)」を選択。
![bubble Buttonエレメントの設定](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-150728.png)
データベースの「タスク」に変更するため、「Parent group’sタスク」を選択。
データベースの各fieldと入力フォームに入力された各項目をひもづけていきます。
・「タスク名」「Inputタスク名」「Value(値)」を選択。
これで、「Inputタスク名」に入力された「値」は、データベースの「タスク名field」に保存されるという設定ができました。
あとの項目も同様です。
・「期日」「Date/time Picker期限」「Value」を選択。
・「ステータス」「Dropdownステータス」「Value」を選択。
・「進捗」「Input進捗」「Value」を選択。
・「担当者」「add list(リストに追加)」「index」「担当者」「Value」を選択。※担当者はデータベースの形式をリストにしたため、他とは少し違う設定
これで、各データベースのfieldと、先ほど作成した入力フォームの項目がひもづけられました。
「登録ボタン」がクリックされたら、データベースにその情報が保存されるワークフローができました。
これで、「登録ボタンを押した時タスクが空ではなかったら」、新しく入力されたデータを現在データベースあるデータと変更し、「Floating Groupエレメント」を非表示するワークフローができました。
「登録ボタン」が押された時に、タスクが空か空ではないかで、2パターンのワークフローを作成しました。
最後に、「タスクを追加ボタン」を押したら、「Floating Groupエレメント」が表示されるワークフローを作成します。
![bubble Buttonエレメントの設定](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-152211.png)
「Buttonエレメント」を配置し、ワークフローをクリック。
![bubble Buttonエレメントの設定](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-152402.png)
「Floating Group」を非表示にするので、「Element Actions」「Animate(アニメーション)」を選択。
![bubble Buttonエレメントの設定](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-154914.png)
このように設定します。
これで、「タスクを追加ボタン」を押すと「Floating Groupエレメント」が表示されます。
タスク管理フィルターの作成
続いて、タスク管理のフィルターを作成します。
![bubble フィルター作成](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-165240.png)
「Groupプロジェクト」の中(「Repeating Groupタスク管理」の上)に、新しく「Groupエレメント」を配置します。名前は「Groupフィルター」。
typeは、「タスク」にします。
![bubble フィルター作成](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-165621.png)
「Groupフィルター」の中に、「Textエレメント」を配置します。
「NEW」とします。これは、タスクのステータスと同じ文言にします。
![bubble フィルター作成](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-171938.png)
「Conditional(条件)」タブに移動し、NEWがホバーされたら、文字色が黒になるようにします。
次に、今作った「Textエレメント」の隣に、小さい「Textエレメント」を配置します。
![bubble フィルター作成](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-170151.png)
「NEW」の隣に配置します。
![bubble フィルター作成](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-170028.png)
「index」「プロジェクト」「タスクリスト」「:filtterd」「:count」を選択。
「:filtterd」は、「ステータス」「=」を選択、「NEW」と入力。
これで、タスクリスト内の「ステータスがNEW」のタスク数(count)を表示できます。
次に、「Text NEW」のワークフローを作成します。
![bubble Custom state設定](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-11-125658.png)
「Element Actions」「Set state」を選択。
![bubble Custom state設定](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-11-125732.png)
新しく「Custom state」を作成します。
![bubble Custom state設定](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-11-125813.png)
新しい「Custom state」は、「ステータス」とします。
![bubble Custom state設定](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-11-125835.png)
「Value」は「NEW」を入力。
これでワークフローが完成しました。
![bubble フィルター作成](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-171052.png)
2つの「Textエレメント」をグループ化しておきます。
![bubble フィルター作成](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-171254.png)
「Group NEW」とします。
この「Group NEW」をコピペします。
![bubble フィルター作成](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-171526.png)
「Textエレメント」は、「進行中」とします。
![bubble Custom state設定](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-11-130415.png)
ワークフローも「進行中」にします。
![bubble フィルター作成](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-172251.png)
同じように、「完了」とします。
![bubble Custom state設定](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-11-130459.png)
ワークフローも「完了」とします。
次に、「Repeating Groupタスク管理」のfilterを追加します。
![bubble filter設定](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-11-130913.png)
「Repeating Groupタスク管理」の「filter」をクリックし、「ステータス」「=」「ステータス」を選択します。これで、先ほど作成した、NEW、進行中、完了でfilterがかけられます。
※「タスク名」「contains」「input」「タスク検索」「Value」は、次に解説します。
次に、タスクを検索できるようにします。
![bubble フィルター作成](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-172445.png)
①「Iconエレメント」
②「Inputエレメント」
![bubble フィルター作成](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-172659.png)
「Inputエレメント」を配置。
![bubble フィルター作成](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-172829.png)
次に、「Repeating Groupタスク管理」のプロパティーをひらきます。
![bubble フィルター作成](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-173112.png)
①「Data source(情報源)」:「filtered(フィルター)」を追加
②「タスク名」「contains(含む)」「Inputタスク検索」「Value」を選択。これは、「Inputタスク名」に入力された「値」が、「タスク名」に「含まれている」となります。
③「Sort by(並び替え)」:進捗順
④「Descending(降順に並べる)」:yes
⑤「Ignore empty constraints(空の制約は無視する)」にチェック
これで、検索窓に入力されたタスクが検索できるようになりました。
フィルターの作成は、これで完了です。
新しいプロジェクトの作成
続いて、新しいプロジェクトが作成できるようにします。
![bubble 新規プロジェクト作成](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-11-064646.png)
![bubble POPUPの設定](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-11-164847.png)
「POPUP新しいプロジェクト」とし、typeは、「プロジェクト」を選択します。
①「Textエレメント」:新しいプロジェクト
②「Textエレメント」:新しいプロジェクトを作成します
③「Inputエレメント」:新しいプロジェクト
![bubble 新規プロジェクト作成](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-11-065034.png)
④「Textエレメント」:プロジェクト担当を選択します
⑤と⑥「Floating Groupタスク」からコピペ
![bubble 新規プロジェクト作成](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-11-065249.png)
コピペする際は、ワークフローも一緒にします。
![bubble 新規プロジェクト作成](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-11-065546.png)
「右クリック」でワークフローも一緒にコピペします。
次に、それぞれワークフローを修正します。
まずは、⑤から修正します。
![bubble アイコンのワークフローを作成](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-11-070659.png)
アイコンのワークフローをクリック。
![bubble アイコンのワークフローを作成](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-11-070428.png)
コピペされたワークフローがあるので、修正していきます。
Step1の「Custom state」を新しく作成します。
「Element」は、「index」で変更なし。
新しく「Custom state」を作成します。
![bubble アイコンのワークフローを作成](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-11-070513.png)
新しい「Custom state名」は、「プロジェクト担当者」とします。
![bubble アイコンのワークフローを作成](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-11-070609.png)
「Value」も、「担当者」を「プロジェクト担当者」に変更します。
次に、ワークフローが実行される条件なども変更します。
![bubble アイコンのワークフローを作成](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-11-071228.png)
色は赤にしました。
「Only when」も「担当者」から「プロジェクト担当者」に変更します。
もう1つのワークフローも同様に修正します。
![bubble アイコンのワークフローを作成](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-11-071441.png)
プロジェクト担当者に変更します。
![bubble アイコンのワークフローを作成](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-11-071518.png)
同じように変更します。
これでワークフローができました。
次に、⑥のワークフローを修正します。
![bubble アイコンのワークフローを作成](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-11-072254.png)
こんな感じだと思いますので、Step1を削除します。
![bubble アイコンのワークフローを作成](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-11-072321.png)
エレメントを非表示にしたいので、「Element Actions」「Hide(非表示)」を選択。
![bubble アイコンのワークフローを作成](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-11-072401.png)
「PopUP新しいプロジェクト」を選択。
これでワークフローの修正は完了です。
最後に、⑦の「作成ボタン」のワークフローを作成します。
![bubble Buttonエレメントの設定](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-125635.png)
新しく、データベースに登録していくので、「Data(データベース)」「Create a new thing(新しいデータを作成)」を選択。
![bubble Buttonのワークフロー](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-11-072840.png)
データベースの「プロジェクト」に保存するため、「プロジェクト」を選択。
データベースの各fieldと入力フォームに入力された各項目をひもづけていきます。
・「プロジェクト名」「Input新しいプロジェクト」「Value(値)」を選択。
これで、「Inputプロジェクト名」に入力された「値」は、データベースの「プロジェクト名field」に保存されるという設定ができました。
・「プロジェクト担当者」「add list(リストに追加)」「index」「プロジェクト担当者」「Value」を選択。
これで、各データベースのfieldと、先ほど作成した入力フォームの項目がひもづけられました。
「作成ボタン」がクリックされたら、データベースにその情報が保存されるワークフローができました。
Step2を作成します。
![bubble Buttonのワークフロー](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-11-074056.png)
「Data」「Make changes to a list of thing~(データベースのリストに変更を加える)」を選択。
![bubble Buttonのワークフロー](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-11-074150.png)
typeは、「User」を選択。
「List to change(変更するリスト)」は、「index」「プロジェクト担当者」を選択。
変化させるデータベースのfieldは、「プロジェクト」「add(追加)」「Result of step 1(step1の結果)」を選択。「Step1の結果をタスクリストに追加する」になります。
次にstep3です。
![bubble Buttonのワークフロー](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-11-075036.png)
「Element Actions」「Hide(非表示)」を選択。
![bubble Buttonのワークフロー](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-11-075145.png)
「PopUP新しいプロジェクト」を選択。
次に、ワークフローが実行される条件を設定します。
![bubble Buttonのワークフロー](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-11-075356.png)
色を紫に変更。
「Only when(~の時だけ)」は、「Parent group’sプロジェクト」「is empty(空)」を選択。これでプロジェクトが空の時だけ、ワークフローが実行されます。
今作成したワークフローをコピペします。
![bubble Buttonのワークフロー](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-11-075650.png)
右クリックでコピペします。
![bubble Buttonのワークフロー](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-11-075745.png)
「is empty」を「is not empty(空ではない)」に変更。
![bubble Buttonのワークフロー](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-11-081736.png)
Step1とStep2は削除して新しくワークフローを作成します。
![bubble アイコンのワークフロー](https://hironk-blog.net/wp-content/uploads/2020/10/スクリーンショット-2020-10-22-180307.png)
入力された情報をデータベースに保存していくので、「Date 」「Make changes to thing~(データベースに変化を加える)」を選択。
![bubble Buttonのワークフロー](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-11-082030.png)
変更するデータは、「Parent group’sプロジェクト」を選択。
変更するfieldは、「プロジェクト担当者」「remove list(リストを削除)」「Parent group’sプロジェクト」「プロジェクト担当者」を選択。これで、現在のプロジェクト担当者は削除されます。
次にStep2です。
![bubble Buttonのワークフロー](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-11-082903.png)
入力された情報をデータベースに保存していくので、「Date 」「Make changes to thing~(データベースに変化を加える)」を選択。
![bubble Buttonのワークフロー](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-11-083000.png)
変更するデータは、「Parent group’sプロジェクト」を選択。
データベースの各fieldと入力フォームに入力された各項目をひもづけていきます。
・「プロジェクト名」「Input新しいプロジェクト」「Value(値)」を選択。
これで、「Input新しいプロジェクト」に入力された「値」は、データベースの「プロジェクト名」に保存されるという設定ができました。
・「プロジェクト担当者」「add list(リストに追加)」「index」「プロジェクト担当者」を選択。これで、プロジェクト担当者をリストに追加できます。
次にStep3です。
上記までは、データベースの「プロジェクト」を変更するワークフローでしたが、今度は、データベースの「User」を変更するワークフローになります。
![bubble Buttonのワークフロー](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-11-083510.png)
「Data」「Make changes to a list of thing~(データベースのリストに変更を加える)」を選択。
![bubble Buttonのワークフロー](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-11-083621.png)
typeは、「User」を選択。
「List to change(変更するリスト)」は、「Parent group’sプロジェクト」「プロジェクト担当者」を選択。
変化させるデータベースのfieldは、「プロジェクト」「remove(削除)」「Parent group’プロジェクト」を選択。これで、現在のユーザーが担当しているプロジェクトが削除されます。
次にstep4です。
![bubble Buttonのワークフロー](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-11-084225.png)
「Data」「Make changes to a list of thing~(データベースのリストに変更を加える)」を選択。
![bubble Buttonのワークフロー](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-11-084425.png)
typeは、「User」を選択。
「List to change(変更するリスト)」は、「index」「プロジェクト担当者」を選択。
変化させるデータベースのfieldは、「プロジェクト」「add(追加)」「Parent group’プロジェクト」を選択。これで、データベースの「User」にプロジェクトが追加されます。
次に、「Conditional(条件)」を修正します。
![](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-11-170541.png)
「Conditional(条件)」タブの「担当者」を「プロジェクト担当者」に変更します。
最後に、この新しいプロジェクト作成のPOPUPを表示させるワークフローを作成します。
![bubble POPUP表示のワークフロー](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-11-115948.png)
「+ボタン」がクリックされたら、「POPUP」が表示されるようにします。
![bubble POPUP表示のワークフロー](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-11-120126.png)
エレメントを表示させたいので、「Element Actions」「Show(表示)」を選択。
![bubble POPUP表示のワークフロー](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-11-120147.png)
「POPUP新しいプロジェクト」を選択。
これで新しいプロジェクトを作る設定は完了です。
分析表の作成
続いて、分析表の作成をします。
![bubble Iconエレメントのワークフローを作成](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-174619.png)
ワークフローをクリック。
![bubble Iconエレメントのワークフローを作成](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-174757.png)
「Element Actions」「Set state」を選択。
![bubble Custom staateの作成](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-174933.png)
「Element」は、「index」を選択。
新しく、「Custom state」を作成します。
![bubble Custom staateの作成](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-175056.png)
このようにします。
![bubble Custom staateの作成](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-175123.png)
「Value」は、「分析」と入力します。
次に、「Groupプロジェクト」をコピペします。
![bubble エレメントのコピペ](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-180618.png)
「Element tree」で「Groupプロジェクト」をコピペして、「Groupプロジェクト copy」を作成します。
次に、「Element tree」で「Groupプロジェクト」を非表示にします。
![bubble グループを非表示](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-180336.png)
こちらをクリックで非表示にします。
![bubble グループの作成](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-181005.png)
必要のないエレメントは削除し、「Group分析」とします。
「This element is visible on page load(このエレメントはページの読み込み時に表示されます)」のチェックを外します。
次に、「Conditional(条件)」を設定します。
![bubble Conditionalの設定](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-181331.png)
「When」は、「index」「view」「is」を選択。「分析」を入力。「Custom state」が、「view」の時となります。
「This element is visble(このエレメントは表示されます)」にチェック。
つまり、「Custom state」が、「view」「分析」の時、「Group分析」は表示されるという条件を設定しました。
次に、「Dropdownエレメント」を配置し設定します。
![bubble Dropdownエレメントの設定](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-11-054200.png)
プロジェクトを選択できるように、「Dropdownエレメント」を配置します。
設定は、上記の通りです。
次に、タスクの進捗を表示するためのグラフを作成するため、プラグインをインストールします。
![bubble プラグイン](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-11-053004.png)
「検索窓」に「chart element」と入力、インストールします。
![bubble Chart element設定](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-11-054655.png)
「Line/Bar Chart」を配置します。
![bubble チャート設定](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-12-053429.png)
・「Chart type」:「Bar」を選択。
・「Type of data」:「タスク」を選択。
・「Data source(情報源)」:「Dropdownチャート」「Value(値)」「タスクリスト」「:sorted(ソート)」「期日」を選択。
・「Value expression(縦軸)」:「Current point」「進捗」を選択。
・「Label expression(横軸)」:「Current point」「タスク名」
これでチャートの設定は完了です。
次に、「Element tree」から「Groupプロジェクト」を選択します。
![bubble Custom stateの設定](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-11-062039.png)
「Groupプロジェクト」のプロパティーをひらきます。
![bubble Custom stateの設定](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-11-062122.png)
Whenは、「Conditional(条件)」に、「index」「view」「is」を選択。「プロジェクト」と入力。
「This element is visble」を選択し、チェックを入れます。
次に、「Appearance」タブに戻ります。
![bubble 表示設定](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-11-062717.png)
「This element is visible on page load(このエレメントはページの読み込み時に表示されます)」のチェックを外します。
これで、ページロード時に「Groupプロジェクト」は表示されず、「Custom state」が「view」「プロジェクト」の時に表示されます。
先ほど「Group分析」では、「view」「分析」の時に表示されるようにしたので、選択されているGroupに切り替わることになります。(この設定をしていないと両方のグループが表示されてしまいます。)
次に、ヘッダーの「Pアイコン」をクリックしたら、「Groupプロジェクト」が表示されるようにします。
![bubble アイコンのワークフロー](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-11-131451.png)
ワークフローをクリック。
![bubble アイコンのワークフロー](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-11-131613.png)
「Element Actions」「Set state」を選択。
![bubble アイコンのワークフロー](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-11-131639.png)
このように設定します。「プロジェクト」は入力です。これで、「Pアイコン」をクリックしたら、プロジェクトが表示されるようになりました。
次に、何のエレメントもないところで、「ダブルクリック」をし、「index」のプロパティーをひらきます。
![bubble indexプロパティー](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-11-172946.png)
「iマーク」をクリックし、「Custom state」の「view」のデフォルトを「プロジェクト」にします。
プロジェクトメンバー一覧作成
最後に、プロジェクトメンバー一覧を作成します。
![bubble アイコンのワークフロー](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-11-133323.png)
ワークフローをクリック。
![bubble Iconエレメントのワークフローを作成](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-174757.png)
「Element Actions」「Set state」を選択。
![bubble Custom staateの作成](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-10-174933.png)
「Element」は、「index」を選択。
新しく、「Custom state」を作成します。
![bubble アイコンのワークフロー](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-11-133656.png)
「Value」は、「プロジェクトメンバー」と入力します。
これで、ワークフローは完成です。
次に、「Group分析」をコピペします。
![bubble グループのコピペ](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-11-132546.png)
「Element tree」でコピペします。
![bubble グループのコピペ](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-11-132644.png)
コピペができたら、「Group分析」は非表示にします。
![bubble Group作成](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-11-134840.png)
チャートは削除し、「Groupプロジェクトメンバー」とします。
「Dropdown」の名前も「Dropdownプロジェクトメンバー」にします。
![bubble 条件を設定します](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-11-133918.png)
「Conditional(条件)」を設定します。
「When」は、「index」「view」「is」を選択。「プロジェクトメンバー」を入力。
「This element is visble(このエレメントは表示されます)」を選択しチェックをいれます。
つまり、「Custom state」が、「view」「プロジェクトメンバー」の時、「Groupプロジェクトメンバー」は表示されるという条件を設定しました。
次に、Groupプロジェクトメンバーの中に「Repeating Group」を設置します。
![bubble Repeating Groupの設定](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-11-135044.png)
typeは「User」。
「Data source(情報源)」は、「Dropdownプロジェクトメンバー」「Value」「プロジェクト担当者」を選択。
![bubble Repeating Groupの設定](https://hironk-blog.net/wp-content/uploads/2020/11/スクリーンショット-2020-11-11-135505.png)
「Repeating Group」内のエレメントの設定をしていきます。
①「Imageエレメント」:「Current cell’s User」「プロフィール画像」を選択。
②「Textエレメント」:「Current cell’s User」「名前」を選択。
③「Textエレメント」:「Current cell’s User」「部門」を選択。
これで全ての設定が完了しました!
プレビューで動作を確認してみましょう!