こんにちは！
てつごろう（@Te256g）です。
前回、Bubbleの概要について解説した記事を公開しました。
NoCodeでWebサイトやアプリの開発をしたいと思っても、英語が多くつまづいてしまっていませんか？
NoCodeツール全般に共通することですが、開発画面はもちろん、サポートや学習サイトもほとんどが英語表記なので、取っつきにくい方も多いと思います。
そこで今回から、日本語でBubbleの基本操作の解説をしていきます。
まずはBubbleの編集画面の見方を解説します。
この記事に記述している用語は、筆者が独自に日本語訳したんだよ。
他サイトでの表記とは異なる場合もありますのでご了承ください。
NoCode（ノーコード）とは、プログラミング不要でWebサイトやアプリの開発環境です。
WixやWordPressを始めプログラミングせずに開発ができる技術はすでに存在していましたが、近年は特に目覚ましい技術の進歩を見せ、GoogleやAmazonも参入するなど大きな動きも起きているなど、注目を浴びています。
詳しくはこちらの記事で解説しています。
筆者について
てつごろう｜@Te256g
編集画面の構成
まずは編集画面の全体の構成です。
数字は次章以降の数字に対応しています。
1. タブ
まずは開発作業の中でも頻繁に使うタブについて。
編集画面の左側に6つのタブがあります。
タブを上から順番に解説していきます。
1-1. Design
ページのデザインをするためのタブです。
Visual elements
テキストやボタン、画像、アイコンなど、視覚的な要素を追加します。
Containers
複数の要素を一つのグループにまとめたり、ブロック単位で動きを付けたりできます。
Input forms
入力フォームやチェックボックス、ラジオボタン、画像アップロードなどのフォームがあります。
Reusable elements
ヘッダーやフッターなど、サイト全体で共通利用する要素はここに登録しておくと、いつでも呼び出すことができます。
Element templates
タブやサインアップ／ログインフォームがテンプレートとして用意されています。
1-2. Workflow
要素のアクションを設定することができます。
例えばフォームに文字を入力して送信ボタンをクリックしたらデータベースに登録され、その内容を表示する、といったアクションを定義します。
1-3. Data
データベースの定義、ユーザー権限の設定などを行う項目です。
例えば利用者の情報としてユーザー名、メールアドレス、登録日などを登録するための定義をしたい時などに利用します。
1-4. Styles
スタイルを定義することができます。
例えば見出しの文字サイズ、色などをあらかじめ定義しておいて、Designタブでそのスタイルに指定すれば、定義された見た目になります。
1-5. Plugins
プラグイン（拡張機能）のインストールや管理ができます。
例えばスマホでよく利用されるボタンを実装できるIonic Elements、API（他サービスとの連携機能）を利用するためのAPI Connectorなど、様々なプラグインがあります。
Bubbleのおすすめプラグインについては「ノーコード ラボ」さんのサイトで紹介されています。
興味のある方はぜひ参考にしてください。
1-6. Settings
プランの変更、基本設定、独自ドメイン設定、SEOなど、アプリ全般の設定をすることができます。
1-7. Logs
アプリの利用状況、実行中のワークフローの確認、スケジュールされたワークフローの制御などを行うことができます。
2. ページ管理
Bubbleロゴ「b」の右にある「Page:」をクリックすると、作成中のページ一覧とReusable elements（サイト全体で共通利用する要素）が表示されます。
ページ名をクリックすれば、編集するページを切り替えられます。
新規ページを作成する場合は「add a new page」をクリックしてください。
3. 要素の管理
現在選択されている要素が表示されています。
ここをクリックすると、ページに配置されている要素が表示され、それぞれクリックすればその要素にフォーカスされて編集できるようになります。
4. 編集
作業をやり直したり、要素のコピーや切り取り、貼り付けなど、編集作業はここから選ぶことでも可能です。
5. ヘルプ
操作方法の説明動画を編集画面上に表示したり、学習（Academy）ページ、フォーラムサイトにアクセスしたりできます。
6. グリッドやボーダーの設定
画面右上「Grid & borders」からグリッド（補助線）の表示、ボーダー（枠線）の設定を行うことができます。
ここではその一部を解説します。
6-1. Show grid
「show grid」をチェックすると、グリッド（補助線）が表示されます。
この補助線に従えば、要素の縦横や大きさを綺麗に揃えることができます。
グリッドの幅を広げる時はstepの数字を増減させます。
余白を均等に作りたい場合はInclude guttersにチェックして数字を調整してください。
6-2. Snap elements
Snap elementsの4つは、要素を配置した時にグリッドやエッジ（端）にスナップ（ピタッとくっつく）させるかどうかを指定します。
6-3. Lock property editor
プロパティエディター（要素の詳細設定画面）を常に表示しておきたい時はここにチェックします。
7. アレンジ
要素の順番や並びを調整する時に使います。
複数の要素を左端で揃えたり、ページの中央に持ってくることが可能です。
例えばボタンを選択したいのに、その前に透明の枠があって選択できない場合は、前面の枠を「Send to back」で後ろに配置する、といったこともできます。
8. 要素の詳細設定
要素をダブルクリックすると、右側に詳細設定画面が開きます。
Appearance
スタイルやサイズの変更など、主に要素の見た目を変更する項目です。
Conditional
要素の状態を操作します。
例えばボタンにホバーしたら（マウスカーソルを乗せる）色を変えるなどの設定ができます。
Transitions
Conditionalで指定した変化にかける時間と、変化のさせ方を指定できます。
ConditionalとTransitionsの指定について具体的なイメージをお見せします。
例えばそれぞれ下記のように設定します。
見出しのテキストがクリックされたら、色を変えるというアクションを付けています。
その際、時間を1000ms（1秒）で完了するようにしています。
プレビューで見た時のイメージはこちら。
9. 操作を戻す・進める
操作を戻したり進めたりできます。
WordやExcelなどと同じイメージです。
10. 要素の検索
作ったはずの要素が見つからないといった時に、探すことができます。
検索方法、要素のタイプなどを指定して「Search」ボタンを押すと、すべてのページから探してくれます。
11. 開発
例えば大きな変更をする前にSave pointを作っておくと、履歴から戻すことができます。
バージョン管理をする時に役立ちます。
12. プレビュー
ブラウザでの実際の表示状態を確認することができます。
13. アカウント管理
開発中のアプリ、プラグインやテンプレートの管理、アカウントの管理、ログアウトなどの操作ができます。
まとめ
Bubbleの基礎編と題して、編集画面の見方を解説しました。
チュートリアルや解説動画は豊富に揃っていますが、英語ばかりで”おっくう”に感じる方もいると思います。
この記事を読んでいただければ、基本的な見方はお分かりいただけたのではないでしょうか。
今後も引き続き、操作方法、実際にアプリを開発する手順を解説していきますので、ご期待ください！
コメント