ノーコード開発ツールのBubbleは、様々なアプリをノーコードで開発できる汎用ツールとして日本でも高い人気を誇っています。
ただでさえ高速開発が可能なBubbleですが、ショートカットキーや各種サポート機能が充実しており、それらを駆使することでさらに開発効率を高めることができるのです。
本記事では、Bubbleによるノーコード開発をより効率良く行うためのショートカットや便利機能、開発に役に立つテクニックについて解説していきます。日々の開発にお役立て頂けますと幸いです。
1. Bubble開発のショートカット集
①Webブラウザの検索機能を利用する
まず最初に紹介するのは、Webブラウザ検索機能の利用についてです。
これからたくさんのショートカットや便利機能を紹介していきますが、その際に「ブログに書かれている表記がどこにあるのか分からない」ということが起きると思います。
そのため、このブログに書かれている表記が見つからないというときは「Ctrl＋ F(Macであれば⌘+ F)」を使ってブログに書かれている表記を検索してみてください。
以下の画像のようにWebブラウザが自動で検出してくれるので、学習時間を大幅にショートカットできるようになります。
②ショートカットキーを活用する
Bubbleにて開発の時間を大幅に短縮するためには、まずBubbleに搭載されているショートカットキーを覚えることが重要になります。ショートカットキーを使えるようになるだけで圧倒的に効率よくBubbleを使うことができるようになるので、ぜひ少しずつショートカットキーを覚えてみてください。
ショートカットキー一覧
- Ctrl + P：アプリのプレビューを行う
- Ctrl + T：Designタブ、Workflowタブ、Dataタブを順番に切り替える
- Command + クリック：カーソルにあるエレメントの、下にあるエレメントを選択する
- Command + ドラッグ：選択したエレメントを複製し移動
- Shift + ドラッグ：選択したエレメントを上下左右に移動
- Ctrl + C：選択したエレメント、イベント、アクションをコピー
- Ctrl + V：コピーしたエレメント、イベント、アクションをペースト
- Ctrl + X：選択したエレメント、イベント、アクションを切り取る
- Ctrl + Shift + C：選択したエレメントのフォーマットをコピー
- Ctrl + Shift + V：コピーしたエレメントのフォーマットをペースト
- Ctrl + D：選択したエレメントを複製
- Ctrl + K：選択したエレメントのワークフローに移動
- Ctrl + A：全てのエレメントを選択
- Ctrl + G：複数選択したエレメントたちをグループ化する
- Ctrl + E：選択したエレメントを親グループの横中央に移動させる
- Ctrl + B：選択したテキストを太字にする
- Ctrl + I：選択したテキストをイタリックにする
- Ctrl + U：選択したテキストにアンダーラインを引く
ショートカットキーを随時確認する方法
ショートカットキーは、Bubbleのエディターの上部にある【Help】をクリックし【Short cuts】を選択することで、いつでも必要なときに確認することができます。
③Bubbleの検索機能を利用する
最初にWebブラウザの検索機能について紹介しましたが、Bubbleにも便利な検索機能が存在します。
Webブラウザの検索機能では画面に表示されているテキストの検索を行う際に使用できましたが、Bubbleの検索機能は主に配置したエレメントや設定したワークフローを検索する際に使用します。
この検索機能を使うことによって、多くあるエレメントやワークフローの中からピンポイントで選択したいものを見つけ出すことができるため、アプリの構造が複雑になればなるほど重宝する機能となっています。
この検索機能を使う方法としては、まずBubbleのエディターの右上にある「虫眼鏡のマーク」をクリックします。
すると以下のような画面が表示されるので「Search by」には調べるタイプを選択し、「Element type」でエレメントのタイプを絞り込みます。
「Contains text」には調べたいものに含まれているキーワードを記入することでワード検索で絞り込むことができます。
「Only search current page」をチェックすると現在のページ内からのみ絞り込みを、チェックを外すと現在のページ外からの検索も可能になります。また、画像にて赤枠で囲まれている部分は入力必須の項目となっています。
検索の設定が完了してから「Search」ボタンを押すと以下のように検索結果が表示されます。これでエレメントやワークフローを探す時間を大幅にショートカットすることができるようになります。
④アイコンの名前検索を使用して、迅速に探し出す
皆さんはアイコンを使用する際に「表示されているアイコンの数が多すぎて毎回目的のアイコンを見つけ出すのに面倒臭い！」というようなことを思ったことはありませんか？そんなときは、アイコンの名前検索を使って無駄な時間をなくしましょう。
実は表示されているアイコンにはそれぞれ個別に名前が定められており、入力欄から検索できるようになっています。
アイコンの名前を知りたいという場合は、使用しているProperty Editorの左上の部分を見ることによって確認することができます。使ったことのないアイコンを使用する場合は検索機能はあまり使いませんが、よく使うアイコンの名前を使う際には非常に便利なので、お気に入りのアイコンの名前はぜひ覚えてみてください。
※以下の画像では「車」のアイコンを使っているため、名前は「automobile」となっています。
⑤エレメントに紐付いた動作を最速で見つけ出す(Element inspector)
前述したように、Bubbleによるアプリ開発では、構造が複雑になればなるほどエレメントやワークフローを探す時間が増えていきます。そのため、エレメントに紐づいた動作を探す等の操作には非常に時間がかかってしまいます。
しかし、Property Editorに搭載されている「Element inspector」という機能を使用すれば、簡単にエレメントと紐づいた動作を瞬時に一覧することができるようになります。
この機能を使う方法としては、エレメントを選択することによってでてきたProperty Editorの右上にある「i」のマークをクリックするだけです。これでエレメントに紐づいた以下の項目について一覧で見れるようになります。
- Custom state
- Events
- Actions
- Other elements(私は全く使ったことがありません)
⑥よく使用する色を設定して固定する
Bubbleで色を選択する場合、以下の画像のように初めから特定の7つの色だけはショートカットできるように配置されていますが、実はこれらの7つの色に関しては自分自身でカスタマイズすることが可能です。
これらの色を固定する方法としては、まず左のタブの【Settings】をクリックし、その画面の上のタブの【General】をクリックします。
そして一番下までスクロールすると「Color parate」という項目のところに、7つの色を設定できるところがあるので、変えたい色の部分をクリックし、自分が使いたい色のカラーコードを記入します。すると、設定した色がProperty Editorにも反映されるようになります。
⑦カラーコードの入力を短縮する
これは豆知識程度のテクニックですが「#FFFFFF」のように全てが同じ文字のカラーコードを扱う場合は「#FFF」のように短縮することができます。ほんの少しの時間のショートカットですが、これだけでも少し面倒な手間が省けるので意外と便利なテクニックになります。
⑧テキストスタイルを作って文字のパターンを固定する
Bubbleでアプリ開発やWeb制作をする際には、同じ文字パターンを何度も使い回すということがよくあります。
そんな時のためにBubbleでは「テキストスタイル」というものを作ることができます。このテキストスタイルを一度作ってしまえば、例えばブログのページのタイトルのような、複数のページで使い回すフォントを0から設定することなく使いまわせるようになります。
テキストスタイルを設定する方法としては、まず対象のテキストエレメントを選択し、Property Editorの中から【Style】を選択します。
そして表示された画面から一番下の「create a new style」を選択します。
すると以下のような画面に移るので、好きな名前を入力してテキストスタイルの名前を決めます。以下の画像の例では、各ぺージのタイトルに使うので、名前を「タイトル」にしています。これでテキストスタイルの設定は完了です。
もう一度「Style」を確認すると、自分が作ったテキストスタイルが確認できると思います。
実はテキストスタイルは、conditionalの設定も使いまわすことができます。
例えば、conditionalに「ページの幅が770pixel未満の時にフォントサイズが小さくなる」という設定をした後に、テキストスタイルを設定します。
すると、作成したテキストスタイルを利用した時は、自動でconditionalの設定が固定された状態になります。
また、この機能はテキストスタイルだけでなく、以下の画像のドロップダウンに出てくるエレメント全てで使うことができます。全てのエレメントで使いこなすことによって圧倒的に無駄な作業を省略することができるので、ぜひテキスト以外のエレメントでも使ってみてください。
⑨Conditionalの内容をコピー&ペーストする
これは最近追加された機能なのですが、Conditionalの内容に関してもコピー&ペーストすることが可能になっています。
方法としては、エレメントを選択しProperty EditorからConditionalに移動。そして入力欄を右クリックし、内容をコピーしたい場合は【Copy expression】、コピーした内容をペーストしたい場合は【Paste expression】をクリックするだけです。
同じようなConditionalを設定する際に非常に便利な機能となっています。
⑩ワークフローのイベント/アクションをコピー&ペーストする
こちらも意外と知られていないのですが、Bubbleではワークフローに関連することについてもコピー&ペーストを行うことができるようになっています。
方法としては、自分がコピーしたい内容のイベント/アクションを選択して、右クリックをして【Copy】を選択。そして、コピーした内容がイベントであれば【Click here to add an event…】を右クリック、アクションであれば【Click here to add an Action…】を右クリックして【Paste】を選択するだけです。これで簡単に似たようなワークフローを量産することが可能になります。
⑪1つのエレメントの親子関係を一瞬で把握する(Reveal in element tree)
Bubble開発ではエレメントの親子関係を把握するためには、上の画像のようにUI BilderにあるElement treeを使うのが一般的な方法だと思います。しかし、特定のエレメントの親子関係を調べる場合については、わざわざElement treeを何回も操作しなくても簡単に調べることができるようになっています。
その方法は、親子関係を知りたいエレメントに対して右クリックを行い、【Reveal in element tree】を選択するだけです。この操作を行うだけで、自動で選択したエレメントのElement treeだけを開いて親子関係を簡単に確認することができます。
⑫子供関係にあるエレメントを簡単に選択する(Select parent/child)
先ほども言いましたが「親子関係になっているエレメントを把握する」際はElement treeを使用するのが一般的です。しかし「親子関係にあるエレメントを選択するという動作」に関してもショートカットを行ってより簡単に行うことができます。
方法としては、まず親子関係にあるエレメントを選択します。
そしてProperty Editorの下の方にある【Select parent/child】をクリックします。
するとドロップダウンの薄い白の枠線の上には「親エレメント」が、薄い白の枠線の下には「子エレメント」が表示されるのでそこから選択したいエレメントを選択することができるようになります。
⑬Bubbleの言語設定を一瞬で変更する
Bubbleで新たなプロジェクトが始まると、必ず言語設定を行う必要が出てきます。そしてこの作業に非常に時間がかかってしまいます。しかし、実はその作業も一瞬で終わらせることができます。
その方法とは「言語設定のためのCSVファイルをインポートする」という方法です。以下の記事にて言語設定のCSVファイルを無料で配布してくれているため、そちらの記事にしたがって一瞬で言語設定を行ってみてください。
bubbleの言語設定が面倒！不自然な日本語を30秒で全部解決する方法
一つ注意点としては、プラグインの実装によって増えた言語設定の項目については対応していないため、その点は自分で設定する必要があります。実装するプラグインによってはそのままで大丈夫な場合もあるので、実際にインポートして自分の画面にて試して確認してみてください。
⑭Element Templatesを使って作業時間を減らす
Bubbleには、Element Templatesというパーツが初めから用意されており、以下の2種類のパターンが用意されています。
- Tab element：タブ切り替えの機能を持ったテンプレート
- Sign up Login form：アカウント登録、ログイン機能を持ったテンプレート
Element Templatesを使うことによって、上記2つの機能を用いる際は自身で0から作る必要がなくなり、作業時間を大幅に削減することができるようになります。
Element TemplatesはUI Bilderの一番下に配置されているので「タブの切り替え」「アカウント登録/ログインフォーム」を作成する際はぜひ使ってみてください。
⑮登録したユーザーを使って、迅速にテストログインを行う(Run as)
皆さんはBubbleでアプリのユーザーテストを行うとき、どのように行っていますか？「ログイン画面からメールアドレスとパスワードを入力してからテストを行う」というようなことはやっていませんか？
Bubbleでは最初のログインを飛ばして、いきなりホーム画面からユーザーテストをできるようになっています。
その方法としては、左側にある【Data】タブをクリックし【App date】に移動してAll Usersに表示されている【Run as】をクリックするだけです。この操作によって選択したユーザーを用いてテストを行うことができるようになります。
⑯デバッガーの機能を活用し、アプリのバグを効率よく取り除く
皆さんはBubbleでアプリを作成してプレビューで動作を確認する時に、画面の下に出てくる「デバッガー」という機能をご存じでしょうか？
デバッガーとは、名前の通り「アプリのバグを取り除くためのツール」になります。この機能は非常に便利で、デバッガーを正しく使えるようになるだけでアプリのデバッグにかかる時間を、使わない場合に比べて10分の1くらいに削減することができます。
なので普段はデバッガーを使わないという方は、この記事を読んでいち早くデバッガーの使い方を覚えて、すぐに試してみてください。
デバッグの機能の使い方
Bubbleのデバッガーの主な機能は以下の2つになります。
- ワークフローの動作確認
- エレメントのカスタムステイトや状態の動作確認
デバッグによる動作確認の方法
デバッグによる動作確認には上の画像のように「Normal」「Slow」「Step-by-step」の3つがあり、それぞれ以下の通りに動作確認を行うことができます。
- Normal : ワークフローの途中で止まることなくアプリを動作(通常の動作)
- Slow：ワークフローのステップ毎に約1秒ほど止まりながらアプリを動作
- Step-by-step：ワークフローのステップ毎に手動でアプリを動作
個人的には、デバッガーはアプリが思い通りに動かないときの原因を探るために使っているので基本的に「Step-by-step」を使うことを推奨しています(基本的に「Slow」は使っていません)。
実際に設定を「Step-by-step」にして動作を確認してみると、以下のように表示が行われます。
①現在のワークフローの動作の表示
②現在のワークフロー時点でのエレメントのカスタムステイトや状態の表示
上記の①と②の内容を見ることによって、どの動作をしているときにどのような挙動をしているのかが確認できるため、従来より簡単にデバッグが可能になります。
デバッガーを使う際の便利テクニック①(Break point)
先ほど「Step-by-step」を使ってデバッグを行うことを推奨しましたが、この機能を使うとワークフローが長くなればなるほど、デバッグにかかる時間が大きくなってしまうという問題があります。
しかし、Bubbleでは「Break point」という機能を使えば「Step-by-step」をデメリットなく使用することができるようになります。
Break pointとは、ワークフローの途中からStep-by-stepでデバッグを行うことができる機能になります。そのため、Normalで進めていたとしても途中で動作が自動でストップされるようになります。
この機能を使う方法としては、まず左のタブより【Workflow】タブをクリックして、デバッグを行いたいワークフローと、Break pointを適用させたいステップを選択します。すると、表示されたProperty Editorの下の方に「Add a breakpoint in a debug mode」という表記があるのでそこにチェックを入れます。
この状態で動作を確認すると、ワークフローの途中からStep-by-stepでデバッグを行うことが可能になります。
デバッガーを使う際の便利テクニック②(Disable workflow)
デバッグの際に、ワークフローを削除せずに無効化したい場合があると思います。その際に役に立つ機能が「Disable workflow」という機能になります。
この機能を使うことによって、特定の機能をテストする際に後続のワークフローが邪魔にならないようにすることができるため、さらに効率よくデバッガーを利用することができるようになります。
この機能を使う方法としては、「Add a breakpoint in a debug mode」と同じようにProperty Editorに表示されている「Disable workflow」にチェックを入れるだけで適用することができます。
⑰Bubbleの公式テンプレートを利用する
Bubbleでは公式的にアプリのテンプレートを配布していることをご存知でしょうか？
Bubbleのテンプレートを活用することによって、以下のようなメリットを得られるようになります。
- アプリを0から作る必要がなくなる
- プロが作ったアプリの構造を学ぶことができる
なのでまだテンプレートを使ったことがないという方は、以下の説明通りにぜひ一度ダウンロードして使ってみてください。
Bubbleのテンプレートを受け取る方法としては、まずBubbleのアプリ選択画面から【Marketplace】クリックします。
次に、その画面で【See all】をクリックします。すると、テンプレートがたくさん出てくるので【Category】などから自分の欲しいテンプレートを検索することができます。
Bubbleのテンプレートは無料で使えるようなものもたくさんあるので、ぜひ自分の目的に応じたテンプレートを探してみてください。
2. Bubbleの隠れた便利機能集
①グリッド機能を使って編集画面を分かりやすくする
Bubbleで開発を行うときに「エディターの画面が真っ白すぎて分かりづらい」と感じたことはないでしょうか？Bubbleでは、編集画面の背景にグリッド(格子状の線)を追加することができます。
方法は簡単で、エディターの右上にある【Grid & borders】をクリックし、一番上にある【Show grid】にチェックを入れるだけです。表示されているグリッドは【Show grid】の下に表示されている設定項目からカスタマイズすることができるので、皆さんのお好みのグリッドを作成してみてください。
②Property Editorを固定する
Bubbleでは以下の画像の赤枠の部分を「Property Editor」と言います。しかし、このProperty Editorは作業内容によっては、時に邪魔になってしまい作業効率を落とす要因となってしまいます。
そこで、ここではProperty Editorを固定する方法について紹介したいと思います。
Property Editorを固定する方法としては、まずBubbleの右上にある【Grid&borders】をクリックします。
そして、表示されるタブの下のほうにある【Lock Property Editor】をクリックします。
すると、Property Editorを固定することができるようになります。全ての作業をする際にこのテクニックが活用できるとは限りませんが、特定のシチュエーションでは役に立つので、ぜひProperty Editorが邪魔だと感じたらこのテクニックを思い出して使ってみてください。
③エレメントの表示/非表示切り替えを行う
Bubble開発において「エレメントがグループと重なってしまうことによって意図していない親子関係ができてしまって上手くいかない」ということはありませんか？
Bubbleではそういったときのためにエレメントの表示/非表示を切り替えることができるようになっています。
表示/非表示を切り替える方法としては、UI BilderのElement treeの赤枠の中にある「目のマーク」をクリックすることで切り替えることができます。画像だと少し分かりにくいですが、この目のマークの表示を見ることによって現在どのエレメントが非表示になっているのかということも確認することができます。
④ドラッグ&ドロップ以外の方法でエレメントを移動させる
Bubble開発ではエレメントの移動はドラッグ&ドロップが一般的ですが、実はドラッグ&ドロップ以外にもエレメントを移動させる方法があります。
それが「Shift + 矢印キー」を使って移動させる方法です。「Shift + 矢印キー」を使うとエレメントを矢印の方向に5pxずつ移動させることができます。
この方法はエレメントの移動に精度が求められる時に必須の機能になるので、ぜひ細かい移動操作が必要になったときは試してみてください。
⑤右クリックを上手く活用する
先ほど紹介した右クリックの機能のReveal in element treeを紹介しましたが、その機能以外にも右クリックにはたくさんの機能が存在します。
そのため、ここでは右クリックで表示される機能の中から「よく使う機能」と「たまに使う機能」に分けて紹介していきたいと思います。
よく使う右クリックの機能の一覧
Group elements in a group
「Group elements in a group」を使うと、選択したエレメントをグループ化することができるようになります。Bubbleでは通常は、グループの上にエレメントを配置することによって親子関係を構築しますが、この機能によって臨機応変にエレメントをグループ化できるようになります。特に複数のエレメントを選択して使うことが多い機能になっています。
Ungroup these elements
「Ungroup these elements」を使うと、選択したエレメントをグループから解除させることができるようになります。エレメントを動かさずにグループを解除できるのが便利な点となっています。
Copy with workfrows
「Copy with workfrows」を使うと、エレメントだけでなく、エレメントとエレメントに紐づいたワークフローをコピーすることができます。通常の「Ctrl + C(Macであれば⌘+ C)」ではワークフローはコピーできないので、非常に便利な機能となっています。
Paste with workflows
「 Paste with workflows」を使うと、コピーしたエレメントとエレメントに紐づいたワークフローをペーストすることができます。「Copy with workfrows」と組み合わせて使用します。
Bring to front
「Bring to front」を使うと、選択したエレメントを一番先頭に移動させることができます。エレメント同士が重なってしまった場合に非常に重宝する機能となっています。
Send to back
「Send to back」を使うと、選択したエレメントを一番後ろに移動させることができます。「Bring to front」と同様にエレメント同士が重なってしまった場合に非常に重宝する機能となっています。
Center horizontally
「 Center horizontally」を使うと、選択したエレメントを画面の横中央に移動させることができます。この機能だけでUIを簡単に整えることができるようになります。
たまに使う右クリックの機能の一覧
上記で紹介していない右クリックの機能については主に以下のようなものがあります。場面によっては役に立つので、余裕があれば覚えてみてください。
- Replace by another type：選択したエレメントを別のエレメントに変更する。
- Convert into a reusable element：選択したエレメントをReusable elementに変更する。
- Select all：全てのエレメントを選択する。
- Select first parent：一つ上の親のエレメントを選択する。
- Copy formatting：選択したエレメントのフォーマットをコピーする。
- Copy conditional formatting：選択したエレメントの元々のフォーマットをコピーする。
- Center vertically：選択したエレメントを垂直に中央揃えを行う。
- Align left：複数選択したエレメントを左揃えにする。基準は一番左のエレメントとなる。
- Align top：複数選択したエレメントを上揃えにする。基準は一番上のエレメントとなる。
- Align bottom：複数選択したエレメントを下揃えにする。基準は一番下のエレメントとなる。
- Align right：複数選択したエレメントを右揃えにする。基準は一番右のエレメントとなる。
- Distribute horizontally：複数選択したエレメントの水平方向の間を等間隔にして並べる。
- Distribute vertically：複数選択したエレメントの垂直方向の間を等間隔にして並べる。
- Swap element positions：選択したエレメント同士を交換する。
- Start/Edit workflow：選択したエレメントのワークフローに移動する。
⑥ワークフローに色をつけて視認性を向上させて管理する
Bubbleである程度複雑なアプリを開発しようとすると、ワークフローが多くなりすぎて整理できず、どのワークフローがどのような役割を担っているのか分からなくなってしまうという問題が出てきてしまいます。
それを解決するために、Bubbleではワークフローに色をつけて管理することができます。
色付けをする方法としては、ワークフローを選択した際に表示されるProperty Editorの【Event color】を変更するだけです。
ワークフローの動作毎に色を固定するとかなり見やすく整理することができるので、ぜひ使ってみてください。
⑦ワークフローのフォルダ分けを行う
ワークフローでは色をつけて整理できるだけでなく、フォルダを作って管理することもできるようになっています。
フォルダ分けをする方法としては、まずワークフローを選択した際に表示されるProperty Editorの【Workflow folder】をクリックします。
次に、Folder nameに好きな名前を入力します。以下の画像の例では、チームで作業している際に誰がどのワークフローを設定したかを明確にするために使うことを想定して、人の名前を入力しておきます。
次に、以下の画像の赤枠の部分をクリックします。
すると、ワークフローのフォルダの一覧を見ることができるので、そこから自分が閲覧したいフォルダーを選択できるようになります。
ワークフローでは、ここで紹介した「色付け」と「フォルダ分け」を徹底することによって分かりやすく管理することが可能です。ここではフォルダ分けはチーム開発を想定しましたが、個人開発を行う上でも役に立つので、用途に応じて使い分けてみてください。
⑧ページのフォルダ分けを行う
先ほどワークフローのフォルダ分けについて紹介しましたが、Bubbleではワークフローだけでなくページ毎にもフォルダ分けをすることができます。
その方法としては、まずBubbleの画面の左上にある【Pick an element…】をクリックします。
次に、現在のページの名前をクリックします(ここではIndexを指定しています)。
次にProperty Editorの一番下に移動し「Page folder」を選択し「Create a new holder…」をクリックします。
次にFolder nameに好きな名前を入力します。ここでも本記事ではチーム開発においてページの担当を明確にするために使うことを想定して、人の名前を入力しておきます。
次に、ページ選択画面の右上にある【Folder…】をクリックします。
そこで作ったフォルダーの名前を検索すると、そのフォルダーに入っているページのみを表示させることができます。
⑨セーブ機能を使って、安全に編集を行う
これは有料プランを契約しているアプリ限定の機能になってしまうのですが、Bubbleではセーブ機能を使って、アプリの編集履歴を保存することが可能です。この機能を使うことによって何か問題が起こったとしても編集履歴をを遡って、その時点のエディターから編集することが可能になるので、非常に安全にアプリ開発を行うことができるようになります。
セーブ機能を使う方法としては、Bubbleの画面の右上にある【Development】をクリックします。
そして表示された画面の【Create save point】をクリックします。
すると保存する時点でのエディターの名前を記入することができるので、自分にとって分かりやすい名前を入力し【Save】をクリックします。これで保存は完了です。
保存した編集履歴を見るには「Create save point」の右にある【History】をクリックすることによって、操作を行うことが可能です。
ちなみに、このデータを保存できる期間は契約している有料プランによって変わり、以下のようになります。
- Personal プラン : 過去1週間
- Professionalプラン : 過去30日間
- Productionプラン : 過去365日間
⑩保存していない過去の編集データを復元する
先ほどBubbleのセーブ機能を紹介しましたが、ときには「アプリをセーブしていない状態で何らかの問題が起きて、データが保存されずに終了されてしまった」というような場面も今後アプリ開発をしていれば起きる可能性がないとは言い切れません。しかし、Bubbleではこのような事態にも対応できるように「ログ」という機能が用意されています。
ログ機能とは簡単に言うと「時間を選択するだけでその時の編集データにアクセスできる機能」になります。時間を選択して編集データを復元するので、セーブ機能よりも明確な時点でのデータは取得はできないですが、ある程度の精度でデータを復元することが可能になります。基本的にはこまめにセーブをしておき、もしものことが起こった場合にのみこの機能を使うというイメージで考えておくと良いでしょう。
ログ機能を使う方法としては、Bubbleの画面右上の【Development】をクリックして、表示される画面から【History】をクリックします。
そして、以下の画像の赤枠の部分に時間を指定して【Revert to this time】をクリックすると、その時間での編集データを復元することが可能になります。
例えば、2021年の11月5日の10時24分57秒に戻りたいという場合は画像のように「11/5/2021 10:24:57」というように入力すれば適用することができます。
ちなみに、遡ることができる過去の編集データの期間は契約しているプランによって変わり、以下のようになります。
- Freeプラン ： 過去30分間
- Personal プラン : 過去24時間
- Professionalプラン : 過去14日間
- Productionプラン : 過去14日間
⑪エディターの拡大倍率を変更して、編集を行いやすくする
Bubbleで開発を行うとき「ページが大きすぎて編集しずらい」「小さなエレメントを編集するのが難しい」ということを感じたことはないでしょうか？
実は、Bubbleでは以下の3通りの方法でエディターの拡大倍率を変更し、編集環境を整えることが可能になります。
- Bubbleのエディターを拡大/縮小する
- Webブラウザの画面を拡大/縮小する
- 使用しているパソコンの画面を拡大/縮小する
Bubbleのエディターを拡大/縮小する方法
意外と知られていないのですが、Bubbleの設定でエディターの大きさを変更することができます。
その方法としては、Bubbleの画面右上にある【Grid&borders】をクリックし、一番下にある【ZOOM】に表示されている拡大倍率を変更するだけです。Bubbleの拡大/縮小で編集環境を整える場合はこの方法が一番使われると考えられるので、ぜひ積極的に使ってみてください。
Webブラウザの画面を拡大/縮小する方法
次に紹介するのが、BubbleのエディターではなくWebブラウザごと拡大倍率を変更してしまう方法です。ご使用のWebブラウザによってショートカットキーが違う可能性もあるのですが、Google Chromeの場合は以下のショートカットキーを使って操作することができます。
- 「Ctrl + ＋(Macの場合⌘+＋)」：画面の拡大
- 「Ctrl + ー(Macの場合⌘+ ー)」：画面の縮小
- 「Ctrl + 0 (Macの場合⌘+ 0)」：画面を元のサイズに戻す
一つ注意点としては、Webブラウザ自体の拡大倍率を変更すると以下の画像のように実際に編集する画面だけでなく、表示されているすべてのものが変更されるため、状況に応じて使い分けることを推奨します。
使用しているパソコンの画面を拡大/縮小する方法
次に紹介するのが、パソコンの拡大倍率ごと変更する方法です。こちらは完全にご使用のパソコンによって方法が異なるため、実際に「〇〇 部分拡大」と調べてみてください。
3. Bubble開発に役立つテクニック集
①Inputエレメントを計算に使う
Bubble内で計算を行う機能が必要になった際に、皆さんはどのように対処していますか？実は、Bubbleでは簡単な計算であればInputエレメントを応用することによって動作させることが可能となっています。
その方法としては、まずInputエレメントを設置して、Property Editorの【This element is visible on page load】のチェックを外します。
※この工程は、Inputエレメントを計算専用のエレメントとするために画面から見えなくするための設定になります。
そしてContent formatに「Integer」などのnumber型に変更します。この部分はnumber型以外にすると計算ができなくなってしまうので注意してください。そしてInitial contentに「+」「-」「*」「/」を用いて適当な計算式を入れます。
この設定によって、Initial content内の計算が自動で行われるようになります。
テキストエレメントにInputエレメントの値を表示するなどの設定を行うと、計算結果を出力することができます。
②スマホ専用ページを作って、レスポンシブデザインを簡単に行う
Bubbleで開発を行うとき「スマホとパソコンのレスポンシブデザインの作成がややこしい」と感じたことはないでしょうか？
実は、Bubbleではスマホを使ってアプリに接続したときにだけ自動で遷移するページ、つまりスマホの専用のページを作ることができます。
その方法としては、エディターにてパソコン用のページとスマホ用のページを別々で作成します。この際に、ページの役割を分かりやすくするために「〇〇-pc」「〇〇-mobile」といった名前を付けておくと分かりやすくなります。本記事では「home-pc」,「home-mobile」と名づけておきます。
次に、PC用のページ(〇〇-pc)に移動し、そのページを選択しProperty Editorを表示させます。そして「Mobile version」と書かれているところをクリックし「〇〇-mobile」を選択して、設定完了です。
これで、パソコンからアプリを開いた場合は「〇〇-pc」のページが、スマホからアプリを開いた場合は「〇〇-mobile」のページを表示させることができるようになります。必然と作るページの数は多くなってしまいますが、スマホページをより簡単に作れるようになるので、レスポンシブデザインに苦手意識がある方はぜひ使ってみてください。
③画像エレメントのレスポンシブデザインを整える
Bubbleではレスポンシブデザインに苦手意識を持っている人が多いと思います。その中でも、画像エレメントのレスポンシブ設定は他のエレメントと違っている部分があるため、ここで紹介していきたいと思います。
静的画像の縦横比を一定にする方法
ページに静的画像(内容が固定されている画像)を配置して初期設定のままにしておくと、アプリをパソコンで見た時とスマホで見た時で画像の縦横比が可変してしまうという問題が発生してしまいます。
しかし、画像エレメントのProperty Editorの「Keep element proportions as the page is resized」にチェックを入れると、画像の縦横比のみを固定し画面幅に応じて画像のサイズを自動で調整してくれるようになります。
動的画像のレスポンシブを設定する
ページに静的画像を使う場合は「Keep element proportions as the page is resized」以外は他のエレメントとレスポンシブ方法にあまり違いはないのですが、動的画像(内容が固定されていない画像)の場合はさらに設定する項目が1つ増えます。
動的画像の設定を行う方法としては、まず画像エレメントのProperty Editorの「Dynamic image」に適当なデータを入力します。
すると勝手に「Run-mode rendering」という項目が追加されるので、ドロップダウンに以下のような選択肢が出てくるので、目的に応じた項目を選ぶことができます。
- Stretch：ページのサイズに合わせて画像が引き伸ばされる。
- Rescale：画像が枠内に収まるように設定される。動的画像とエレメントの枠の縦横比が違う場合は、余白が残ることがある。
- Zoom：エレメントの枠に収まらない場合、縦横比に合わせて動的画像が切り取られる。
- Adjust element height：エレメントの枠の高さに応じて画像のサイズを変更する。
④文字の配置位置を縦方向の中央揃えにする
Bubbleでテキストエレメントを使用すると、通常は以下の画像のようにテキストの枠の一番上にテキストが表示されます。しかし、こちらは1つの設定で簡単に縦中央に文字を配置することが可能になります。
その方法としては、テキストエレメントを選択しProperty Editorから【Remove style】をクリックします。
そして、Property Editorの【center the text vertically】にチェックを入れます。この設定だけで、文字をテキストエレメントの縦中央に配置することができるようになります。
⑤Rich text editorを使って、一部のテキストのみの装飾を行う
BubbleでWebサイトを作成するときに「テキストエレメントの一部だけに装飾を行いたい」「【詳しくはこちら】の【こちら】の部分にだけリンクを挿入したい」というようなことを感じたことはないでしょうか？
このような問題は、 Rich text editorという機能を使えば簡単に解決することができます。
Rich text editorの使い方
Rich text editorは、テキストエレメントのProperty Editorにある【Rich text editor】をクリックすることで立ち上げることができます。
使い方は簡単で、装飾したいテキストを選択し、赤枠の部分からどのように装飾するかを選択するだけです。それだけでテキストを部分的に装飾することが可能になります。
ちなみに、テキストにURLを仕込みたい場合は一番右にあるマークからURLを埋め込むことによってできるようになります。
Rich text editorで編集を行うと、Property EditorにはHTMLのようなコードが記入されています。なので、Rich text editor画面からでは設定できない色を装飾したい場合などは、直接カラーコードを書き込んで編集することも可能です。
※以下の画像は、Rich text editorで「こちら」の部分を赤色に編集したときの画面になります。
⑥新規タブを開いて、ページ遷移を行う
Bubbleでは一般的な方法でページ遷移を行うと、現在のタブのままページ遷移を行ってしまうため、場合によってアプリの利便性が悪くなってしまう恐れがあります。しかし、Linkエレメントを使用すれば「新規タブでのページ遷移」を実装することができます。
設定は簡単で、LinkエレメントのProperty Editorから「Open in a new tab」にチェックを入れるだけで実装することができます。
Linkエレメントを用いてアイコンにURLを仕込む方法
Linkエレメントを使えば、テキストだけでなくアイコンに対しても「新規タブでのページ遷移』を実装することができるようになります。
その方法としては、LinkエレメントのProperty Editorより【Remove style】をクリックし、スタイルを解除します。
そして、Property Editorの一番上に「Show an icon instead of text」という表記が出現するので、そこにチェックを入れるだけです。するとアイコンを自由に選ぶことができるようになります。
ちなみに、アイコンの大きさについてはProperty Editorの文字の大きさを変更する部分を編集すれば、アイコンの大きさも変わるようになっています。
⑦複数回再利用することができるワークフローを作成する(Custom event)
意外と知られていないのですが、Bubbleでは複数回再利用できるようなワークフローを作成することができます。言葉だと何を言っているか上手く伝わらないと思うので、早速方法を紹介します。
まず【Workflow】タブをクリックしてワークフローの画面に移動し【Click here to add an event…】から【Custom】→【Create a custom event】を選択します。
次に「Event name」に適当な名前を入力し、任意のアクションを追加します。ここではCustom eventの機能を理解することが大事なので、どのようなアクションでも構いません。
最後に、他のワークフローのイベントを設定し(ここではエレメントをクリックした時のイベントを設定)の【Click here to add an action…】より【Custom events】→【Trigger a custom event】をクリックすれば、作成したCustom eventを呼び出すことができます。
⑧日付データの内容を日本の基準に変更する
Bubbleにて時間を表示する際、皆さんは正しく時間表示の設定をできていますか？例えば、現在の時間をテキストに反映させようとすると「Current date/time : formatted as 〇〇」というように設定をしますが、Bubbleは海外の会社であるため初期設定では〇〇の部分が海外の基準で設定されている(2021年11月8日の場合は11/08/21となっている)ため、日本の基準で再設定する必要があります。
再設定する方法は、まず「 : formatted as 〇〇」を選択したときに表示される「Data Formatting」の「Format type」の内容を「Custom」に変更します。
すると「Custom format」という項目が出てくるので「2021年01月01日」と表示したい場合は「yyyy年mm月dd日」と設定することで、正しく表記することができます。実際にどのように表示されるかは右側のProperty Editorに表示されているので、そちらを確認しながら設定することができます。
日付の記号のフォーマットについては以下のようになっています(かっこ内は実際に記入した時の例になります)。
これらの記号を応用して、自身が表記したい基準に合わせてぜひ使ってみてください。
- 年：yyyy(2021) ※2021年の場合
- 月：mm(01)、m(1) ※1月の場合
- 日：dd(02)、d(2) ※2日の場合
- 時：HH(15)、hh(3) ※午後3時の場合
- 分：MM(10) ※10分の場合
- 秒：ss(05) ※5秒の場合
- 曜日：ddd(金) ※金曜日の場合、またBubbleのSettingsよりLanguegeを日本語にしておかないと英語表記になります。
4. おわりに
本記事では、Bubbleショートカットや便利機能、開発に役立つテクニックについて解説してきました。
Bubble開発はテクニックを知れば知るほど効率よく開発を行うことができ、作成することのできるアプリの幅も圧倒的に広げることができます。なので、今回紹介した機能を少しずつ覚えて、ぜひとも自身のアプリ開発に活かしてみてください。
今後も各ノーコード開発ツールの使い方を分かりやすく紹介していきたいと思います。
また、ノーコードジャパンでは、ノーコード開発者たちが気軽に質問し合える無料のプラットフォームNoCode Forumを運営しております。ノーコード開発で分からないことがあったら一人で悩まず、気軽に質問してみましょう。
