こんにちは!
てつごろう(@Te256g)です。
前回、Bubbleの概要について解説した記事を公開しました。
NoCodeでWebサイトやアプリの開発をしたいと思っても、英語が多くつまづいてしまっていませんか?
NoCodeツール全般に共通することですが、開発画面はもちろん、サポートや学習サイトもほとんどが英語表記なので、取っつきにくい方も多いと思います。
そこで今回から、日本語でBubbleの基本操作の解説をしていきます。
まずはBubbleの編集画面の見方を解説します。
この記事に記述している用語は、筆者が独自に日本語訳したんだよ。
他サイトでの表記とは異なる場合もありますのでご了承ください。
筆者について
てつごろう|@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など、様々なプラグインがあります。
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で指定した変化にかける時間と、変化のさせ方を指定できます。
9. 操作を戻す・進める
操作を戻したり進めたりできます。
WordやExcelなどと同じイメージです。
10. 要素の検索
作ったはずの要素が見つからないといった時に、探すことができます。
検索方法、要素のタイプなどを指定して「Search」ボタンを押すと、すべてのページから探してくれます。
11. 開発
例えば大きな変更をする前にSave pointを作っておくと、履歴から戻すことができます。
バージョン管理をする時に役立ちます。
12. プレビュー
ブラウザでの実際の表示状態を確認することができます。
13. アカウント管理
開発中のアプリ、プラグインやテンプレートの管理、アカウントの管理、ログアウトなどの操作ができます。
まとめ
Bubbleの基礎編と題して、編集画面の見方を解説しました。
チュートリアルや解説動画は豊富に揃っていますが、英語ばかりで”おっくう”に感じる方もいると思います。
この記事を読んでいただければ、基本的な見方はお分かりいただけたのではないでしょうか。
今後も引き続き、操作方法、実際にアプリを開発する手順を解説していきますので、ご期待ください!
コメント