Bubbleの基礎①|編集画面の見方【日本語で解説】

Bubbleの基礎 編集画面NoCode

こんにちは!
てつごろう(@Te256g)です。

前回、Bubbleの概要について解説した記事を公開しました。

NoCodeでWebサイトやアプリの開発をしたいと思っても、英語が多くつまづいてしまっていませんか?

NoCodeツール全般に共通することですが、開発画面はもちろん、サポートや学習サイトもほとんどが英語表記なので、取っつきにくい方も多いと思います。

そこで今回から、日本語でBubbleの基本操作の解説をしていきます。

まずはBubbleの編集画面の見方を解説します。

てつごろう
てつごろう

この記事に記述している用語は、筆者が独自に日本語訳したんだよ。
他サイトでの表記とは異なる場合もありますのでご了承ください。

NoCodeとは?

NoCode(ノーコード)とは、プログラミング不要でWebサイトやアプリの開発環境です。
WixやWordPressを始めプログラミングせずに開発ができる技術はすでに存在していましたが、近年は特に目覚ましい技術の進歩を見せ、GoogleやAmazonも参入するなど大きな動きも起きているなど、注目を浴びています。
詳しくはこちらの記事で解説しています。

≫ NoCode(ノーコード)とは?今注目を浴びる開発ツールを解説


 筆者について

大学時代に情報システム系学科でC、Java、VC++を学ぶ。IT企業ではハードウェアエンジニアとしてWindows/UNIX系システムの保守・運用を担当。現在は個人でWebサイト制作を請け負っています。NoCodeの可能性に惹かれ、Webサービス開発に向けて勉強中。

てつごろう|@Te256g


スポンサーリンク

編集画面の構成

まずは編集画面の全体の構成です。

数字は次章以降の数字に対応しています。

編集画面
編集画面

1. タブ

まずは開発作業の中でも頻繁に使うタブについて。

編集画面の左側に6つのタブがあります。

タブを上から順番に解説していきます。

1-1. Design

ページのデザインをするためのタブです。

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とTransitionについて

ConditionalとTransitionsの指定について具体的なイメージをお見せします。
例えばそれぞれ下記のように設定します。

Conditional
Transitions

見出しのテキストがクリックされたら、色を変えるというアクションを付けています。
その際、時間を1000ms(1秒)で完了するようにしています。
プレビューで見た時のイメージはこちら。

要素に動きをつけるイメージ

9. 操作を戻す・進める

操作を戻したり進めたりできます。

WordやExcelなどと同じイメージです。

10. 要素の検索

要素の検索

作ったはずの要素が見つからないといった時に、探すことができます。

検索方法、要素のタイプなどを指定して「Search」ボタンを押すと、すべてのページから探してくれます。

11. 開発

セーブポイントを作れる
セーブポイントを作れる

例えば大きな変更をする前にSave pointを作っておくと、履歴から戻すことができます。

保存履歴
保存履歴

バージョン管理をする時に役立ちます。

12. プレビュー

ブラウザでの実際の表示状態を確認することができます。

13. アカウント管理

開発中のアプリ、プラグインやテンプレートの管理、アカウントの管理、ログアウトなどの操作ができます。

まとめ

Bubbleの基礎編と題して、編集画面の見方を解説しました。

チュートリアルや解説動画は豊富に揃っていますが、英語ばかりで”おっくう”に感じる方もいると思います。

この記事を読んでいただければ、基本的な見方はお分かりいただけたのではないでしょうか。

今後も引き続き、操作方法、実際にアプリを開発する手順を解説していきますので、ご期待ください!

コメント

タイトルとURLをコピーしました