皆さん、こんにちは！
今回は、bubble camp（ノーコードラボが Bubble を使って自分で Webアプリを作れるようになりたい人向けに行っている個別指導）内で、生徒さんからいただいた質問について、まとめてみました。Bubble 開発におけるテクニックや、知っておくと便利な裏技を含め、色々ご紹介していきたいと思いますので、どうぞお付き合いくださいね！
- 1. Custom state を一覧で確認することはできる？
- 2. Bubble にアップロードしたファイルはどこで確認できる？
- 3. Elements をコピーする時に Workflow も一緒にコピーしたい！
- 4. アプリが壊れた！過去の状態に戻したい時はどうすれば良い？
- 5. Elements の後ろに隠れた（背後にある） Elements を選択したい場合
- 6. データ型の numeric range や data range ってどうやって使う？
- 7. Group Element の上に配置したいけど、Group には含めたくない！
- 8. index を別のページにしたい！
- 9. 「Cut off content if the element is not tall enouth」が効かない！
- 10. Data Type と Option sets の違いって何？
- まとめ
1. Custom state を一覧で確認することはできる？
Custom state は一言でいうと変数のようなもので、inspector を利用することで定義している Custom state を確認することができます。 inspector は、エレメントのプロパティウィンドウから開きます。
上記の画像の例では、index ページに定義されている Custom state を表示していますが、Custom state 自体は各エレメントに定義することが出来るため、特に理由がない限りは、どのエレメントに定義したか迷子にならないよう、ページ（ここでは index ）自体にまとめて定義することをお勧めします。
また inspector では、定義した Custom state の Type（型）や、デフォルト値を定義することが可能で、その他にもワークフロー内において Custom state を使用したアクションを確認することもできます。
なお、Custom state の追加や値の代入はワークフローを使用して定義することが可能です。アクションの追加で Element Actions の Set state から設定します。そもそも Custom state って何？をお調べの方は、以下の記事で Custom state について解説していますので、良かったらご参考くださいね。
2. Bubble にアップロードしたファイルはどこで確認できる？
通常、Bubble でファイルをアップロードした場合、ファイルの一覧は Data タブの File manager から確認します。画面右の「Search」ボタンをクリックしないと一覧は表示されませんので、ご注意くださいね。
また、少し話が逸れますが、意外と見落としがちな重要ポイントとして、Bubble では何もせずにファイルをアップロードした場合、ファイルへのリンクを知っているすべてのユーザーがそのファイルを表示することができてしまうという問題があります。
プライベートな権限を持つ画像をアップロードしたい場合は別途設定が必要です。以下の記事にファイルの取り扱いについて記載していますので、良かったらご参考くださいね。
3. Elements をコピーする時に Workflow も一緒にコピーしたい！
既存の Element をコピーしたいことって多々ありますよね。Bubble では Element に限らず、Style や Conditional 、その他 Event や Action、When 条件などもコピーすることができます。
画面要素のコピー機能は、主に Edit メニューから利用できます。Edit メニューには、知っておくと開発の時短に繋がる優秀なメニューがありますので、是非チェックしておいてくださいね。
Element だけをコピー
シンプルに Text や Button などの Element だけをコピーしたい場合は、対象の Element を選択した時点でショートカット（ Windows で言えば ctrl+C ）、もしくは Edit メニュー から「Copy」して「Paste」することが可能です。
Elemtnt と Workflow も両方一緒にコピー
Design タブでコピーしたい Element を選択した状態で、Edit メニューの「Copy with workflow」をクリックしてから、次に貼り付けたいエリアを選択し、「Paste with workflow」をクリックすると Element に定義した Workflow も一緒にコピーすることができます。
Conditional をコピー
Element に設定している Conditional をコピーしたい場合は、Conditional ウィンドウで右クリックすると、「Copy condition」「Paste condition」メニューを利用することができます。
また、Edit メニューにある「Copy conditional formatting」と「Paste conditional formatting」を使用すると、Conditional をまとめてコピーすることができます。なおその際に、既存の Conditional がある場合は Paste したものに置き換えられることになります。
Workflow の Event や Action をコピー
コピーしたいイベントの上で右クリックすると、Copy や Paste ができるメニューを表示することができます。コピー後、イベントを新規追加する Click here to add an event... エリアで右クリックしてペーストします。
同様に、Action もコピペすることができます。
その他 条件などをコピー
Event や Action で設定する Only When や Data source なども右クリックでコピーペーストしたりすることが可能です。Do a search for などの細かい設定も持っていけるので便利ですね。
Reusable element を別アプリにコピーしたい
Reusable element についても、Bubble 上では単に Element 群であるため、Edit メニューから「Select all」などで対象を選択し、コピー先のアプリで「Paste with workflow」でワークフローごと貼り付けることができます。その際、コピー元と先とで同じ Data Type に揃えるなどの微調整は必要になるかと思いますが、アプリを跨いでのコピー自体は可能です。
4. アプリが壊れた！過去の状態に戻したい時はどうすれば良い？
Bubble でアプリを開発していると、設定を微調整しているうちにレイアウトがズレていたり、定義していた Workflow を間違って消してしまったといったことありませんか？
そんな場合は、Save point をうまく利用してアプリのバックアップを取るようにしましょう。
Save point の活用
Save point を作成するには、画面右上にある Development をクリックします。次に「Create save point」をクリックして、任意の Save point 名を入力し「Save」ボタンで保存します。
保存した Save point に戻りたい場合は、同様に Development をクリックして「History」から Save point の一覧を表示し「Revert to this time」 ボタンから復元します。
datetime から復元
また、もし Save point を作ってしなかったといった場合は、おおよその時間が分れば、「Or simply enter a date and time」でその時間を指定して戻ることも可能です。
ただ、Save pint にしろ、datetime 復元にしろ、戻せるタイミングは利用しているプランによって異なります。無料プランの Hobby の場合は12時間前までしか復元できませんので、ご注意くださいね。
以下は、2020/07/21時点での復元可能ポイントです。
| Plan | Data backup & restore |
|---|---|
| Hobby | Last 12 hours |
| Personal | Last 7 days |
| Professiona | Last 30 days |
| Production | Last 365 days |
5. Elements の後ろに隠れた（背後にある） Elements を選択したい場合
Design タブで Element を配置してページを作成していると、Group の背後に隠れてしまったといったことがあると思います。そういった場合は、以下のコマンド操作で背後の Element を選択することができます。
Mac
コマンドキー＋クリック
Windows
ウィンドウズキー+クリック
ただ、Windows では、同時に Windows メニューまで表示されるため、実際は使い辛いといった問題があると思います。
Element を選択するテクニックとして、画面の左側にある UI Builder の Elements tree から Element を選択することもできますので、あわせてご確認ください。
また、Elements tree の構造が複雑になってきた場合、Element のプロパティウィンドウの下の方にある「Reveal in the Elements tree」をクリックすると、Elements tree をオープンしてくれますので便利です！
6. データ型の numeric range や data range ってどうやって使う？
numeric range は数値の範囲、data range は日付の範囲を保持できるデータ型です。対象年齢や夏休み期間といったデータ範囲を持つ場合に利用できそうです。
例えば、以下のように Test という名前のデーブルに、numeric range 型と data range 型のフィールドを作成した場合、
実際にこのフィールドにデータを登録するには、以下のように登録データに<-range->を含めて登録することになります。
range を利用した場合、numeric の場合は「:average」、date の場合は「:center」などとして簡単に中央値を取得できるといったメリットがありますが、仕様によっては案外、開始と終了を別フィールドで持っていた方が扱いやすいといった場合があるかもしれません。導入する場合は、フィールドの使用目的にあわせて検討すると良いですね。
7. Group Element の上に配置したいけど、Group には含めたくない！
Bubble で開発をスタートした時に、意外とはまりがちなのが Element の配置に関するレイアウトです。
Element は重ねて配置したいけど、下にある Group には含めたくないといった場合は、Elements tree にある eye マークアイコンをクリックして、背後の Element を非表示にした状態でレイアウトすると良いでしょう。
また、逆に Group に含まれてしまったものを Group の外に出したいといった場合は、Element を選択した状態で右クリックするか、画面上部の Arrange メニューから「Ungroup these elements」をクリックすることで Group 外に出すことができます。
Bubble では Group や Repeating group などといった Containers と呼ばれる Element 上に Button などを重ねて配置すると、自動でその Container 内に含まれることになります。Container の枠が赤くなっている時 、その Container が選択されているという状態になりますが、Bubble では、この Container に含むといった状態が Workflow や Data source を定義する時などで大きな意味を持ちます。定義する際に思ったメニューが出てこないといった場合は、Element の Parent（親）との関係などについても見直す必要があるかもしれません。
8. index を別のページにしたい！
アプリ開発において何度か仕様を見直していると、「index ページとは別に作成したページが index の役割をしている！」といった場合が発生するかもしれません。実際、bubble camp でもそういった事例がありました。
この場合、作成したページの Element などをコピーして置き換えてといった方法で差し替えることも可能だと思いますが、Bubble にはもっと簡単に index を差し替えることができるメニューがあります。
Edit メニューの下の方に「Make this page the new index」というメニューがありますので、そちらを利用しましょう。
この場合、注意が必要なポイントとして、既存の index に定義しているものに対して差し替えが行われるため、既存の index に作成した Element や Workflow を置いておきたい場合は、予めページを複製して置いておくようにしましょう。
9. 「Cut off content if the element is not tall enouth」が効かない！
Bubble で文字数が多い Text を表示する場合、定義している Element サイズからはみ出してしまう場合は、「Cut off content if the element is not tall enouth」という設定を利用して、余剰分を「…」に置き換えて Element の高さを固定にしてくれるという機能があります。
この機能は、複数のテキストなどを横並びなどで配置するときに、高さを揃えることが出来るといったメリットがあるのですが、残念ながら表示データが日本語の場合、全文がカットされるといった意図しない動きをすることがあります。これは英語のように半角スペースが含まれるといった条件が前提としてあるためで、日本語の場合は、カットしたい場合、意図的に半角スペースを含める必要があります。
tarancated to で文字を切り出す
しかし、表示するデータが DB から動的に取得したエンドユーザーによる入力値だったりする場合や、意図的に半角スペースを含めるといったことが難しい場合は、「:tarancated to」を使用して、文字を切り出してしまうという手もあります。
10. Data Type と Option sets の違いって何？
Bubble でいう「Data Type」とは、いわゆるデータベースのテーブルにあたります。Bubble でアプリを作成した場合「User」という名前の Data Type が自動で作成されますが、この User Type にしても、自分で作成した Data Type にしても 開発するアプリに合わせて Field を追加していくことになります。
一方、「Option sets」もデータを保持するという意味では同じですが、こちらはアプリの中で「定数」として扱うようなデータを保持するのに適しています。
また、Bubble の Data Type や Option sets が特徴的なのは、作成した Field や Custom state における Type（型）にも、この Data Type や Option sets が利用できるという点です。
なお、Option setsで値を呼び出す際は「Get an option」を使用しますが、定数といった固定の値を保持するため、定義した値を直接参照することが可能です。
ただし、定数的な意味を持つ値だから必ず Option sets の方が適しているとは限りません。例えば、アプリのユーザーを「管理者」と「一般ユーザー」などに分けて権限を付与するといった仕様の場合、単純に「管理者」と「一般」の2種類に分けれるなら別かもしれませんが、他にも「インストラクター」や「メンター」といった複数の権限を持つ必要がある場合は、Data Type で「Rank」というテーブルを作成し、「管理者」といった権限名とは別に、number 型の「ID」を持って「Current User's Rank > 1」といった条件で判定する方が適している可能性もあります。
Bubble における DB の取り扱いは非常に特徴がありますので、初めのうちは慣れない部分や分かりにくい点があるかもしれません。ノーコードラボでは Bubble でのデータベース設計について考察している記事もありますので、是非合わせてご参考くださいね。
まとめ
いかがでしたか？今回は、bubble camp であがった質問についてまとめてみました！Bubble を始めたばかりといった方は、是非参考にしてみてくださいね。では、次回もどうぞお楽しみに～！
