カテゴリー: ノーコード

ノーコードツールbubbleではドラック＆ドロップをベースとした簡単な操作でアプリを作っていくことが可能です。その一方で、要素を移動させるなどの修正を加えるとプレビューモードのリロード（再読み込み）が必要になります。

アプリの更新をするたびにプレビューの更新を行うことは意外と手間がかかる作業です。

この記事では変更が行われたときにプレビュー画面のリロードを自動で行うプラグインをご紹介します。

Reload on updateの詳細

アプリの修正を加えるたびにプレビュー画面のリロードを行うためには「Reload on update」というプラグインを使います。

必要な設定は

1. プラグインのインストール
2. ワークロードの設定

の二つが必要です。これから一つずつ紹介していきます。

プラグインのインストール

プラグインの設定画面＞右上の「Add plugin」を選択して、プラグインを検索します。

左上の検索ボックスに「Reload on update」と入力すると以下のプラグインが表示されます。

プラグインのボックス右下にある「Install」をタップすると開発中のプロジェクトにインストールが完了です。

ワークフローの設定

次にページ更新時に自動でリロードが行われるようにワークフローを設定していきます。

ワークフローページを開き、新規ワークフローを作成します。点線で囲まれた「Click here to add an event…」をタップしてください。その中からGeneral＞＞Page is loadedを選択してください。

これでワークフローのトリガーが「ページが更新されたときに中に設定された動きを開始する」となります。

このワークフローブロックの中に具体的な動きを設定していきます。今回の場合は「Reload on undapte」のプラグインの内容を動かすことを設定します。

先ほど作成した「Page is loaded」をクリックすると下に「Click here to add an action…」と出現します。こちらをタップしてPlugins＞＞Auto reload page on updateを選択してください。

設定は以上で完了です。これでアプリの編集が行われたときに自動でプレビューのリロードが行われ、毎度再読み込みする必要がなくなります。

注意

こちらはページ単位での設定となります。そのため、一つのページに設定したとしても他のページには適応されませんのでご注意ください。

最後に

bubbleでの開発規模が大きくなればなるほどリロードの手間を感じてきます。Reload on updateを使うことでストレスフリーな開発環境を構築してみてください。

bubbleでの開発や技術的なご相談等はHPのお問い合わせまたはX（旧Twitter）のDMにてお気軽にご相談くださいませ。

ノーコードツールbubbleでは有料プランに切り替えると独自ドメイン（本サイトのed-wanto.comにあたるもの）の設定が可能になります。

独自ドメインを取得することにより、bubbleで自動的に設定されるドメインに縛られずに設定できます。

本記事では独自ドメインを取得するサイト「お名前.com」から取得してbubbleアプリに反映する手順を紹介します。

bubbleの事前設定（前提要件）

bubbleで開発したアプリに独自ドメインを設定するためには有料プラン（Starterプラン以上）にしておく必要があります。ご注意ください。

ドメインを取得する

お名前.comで空き状況を検索する

本章ではお名前.comから独自ドメインを取得する手順について紹介します。

まず、お名前.comのサイトに移ります。こちらの「取得希望の文字列を入力」の部分に希望の文字列を入力してください。

取得希望の文字列にはサードレベルドメイン（セカンドレベルドメイン）と呼ばれる部分の文字列となります。

補足）ドメインの構成について

本記事のドメインを例にして説明します。

【.com】＝この部分はトップレベルドメイン と呼ばれています。

【ed-wanto】=この部分はセカンドレベルドメインと呼ばれています。

※co.jpのような三つに区切られている場合は右から「トップレベルドメイン」「セカンドレベルドメイン」「サードレベルドメイン」と表されます。

文字列を入力して検索をすると各ドメインの空き状況が表示されます。取得可能なドメインを選択すると画面右部に料金の確認ボタンが表示されます。

※ドメイン取得一覧の表にはアイコンの種類がいつくかありますが、その意味は以下の通りです。

ドメインの契約をする

選択したドメインの料金確認に進むとレンタルサーバーの契約の有無についての案内が表示されます。WordPressなどのレンタルサーバー下に構築するシステムや独自ドメインを用いたメールアドレスを使用する場合のみ契約が必要です。bubbleのみの利用の場合は「利用しないで進む」を選択してください。

お名前IDを作成（またはログイン）して、支払い方法を入力、申し込みを行えば完了となります。

bubbleに独自ドメインを接続する

bubble側の設定とお名前.com側の設定があるため、分けて紹介していきます。

bubble側の設定

本記事の最初にご紹介したようにbubbleのプランを有料に切り替えておく必要があります。

本記事では有料プランに切り替えたことを全体にして進めていきます。

右下の「Settings」＞「Domain / email」を開いてください。先ほど取得したドメイン名を「Domain name」に入力していきます（ed-wanto.comのような形です。）。入力が終わると「Set up this domain」を選択してください。

ドメイン名を入力すると設定に必要なDNSレコードと呼ばれるアドレスが表示されます。これからこのアドレスをお名前.comの設定画面に登録していく作業に入ります。

お名前.com側の設定

お名前.com側にはbubbleに表示されたアドレスを入力していきます。まず、お名前.comにログインして取得したドメインの管理画面に進みます。お名前.comのメニューバーの「ネームサーバーの設定」から「ドメインのDNS設定」を選択してください。

該当のドメインを選択して、DNS設定の一覧から「DNSレコード設定を利用する」の「設定する」を押してください。

設定画面を下にスクロールしていくと以下のような追加エリアが出現します。こちらにbubbleの設定で表示されたアドレス4つを一つずつ入力していきます。ホスト名は空欄で構いません。入力後に「追加」を押して順に登録してください。

登録が完了すると下の登録済み一覧に以下のように表示されているはずです。先ほど追加した4つが表示されていれば問題ありません。

あとはbubble側の「Settings」＞「Domain / email」からドメイン登録画面を開き、「Check my settings」をクリックして接続を確認します。

なお、こちらの接続は最大24時間要するため、設定が反映されていないときは一度時間を置いてから再度確認してください。

最後に

独自ドメインを取得することで信用につながることやbubble以外のツールに移行した時にもアドレスが変わらずにユーザーに別のリンクを知らせる必要がなくなるなど様々なメリットがあります。ぜひ、独自ドメインを取得したい方々はこちらの記事を参考にしてみてください。

bubbleでの開発や技術的なご相談等はHPのお問い合わせまたはX（旧Twitter）のDMにてお気軽にご相談くださいませ。

bubbleでプロダクト開発を行っておりますWANTOの西坂優希（@nishiyuki0501）と申します。

2023年5月からbubbleの有料プランの料金形態が変わりました。その変更では料金が上がっただけでなく、利用量を計測する「ワークロード（workload）」というものが導入されました。

この記事ではワークロードが超えた時の対処法をご紹介します。

ワークロードとは

ワークロード（workload）とは「アプリの利用量」を計測する指標です。プランごとにデフォルトで最大の利用量分のクレジットを与えられます。基本料金でアプリを動かせるアクセス数がこれにより大まかに決められております。

日本語）
ワークロードはbubbleで開発したアプリケーションを動かすための一つの指標となるものです。アプリが支払い処理、API との通信、データベースの検索などのタスクを実行するよう要求されるたびに、毎月のワークロード使用量に計測されていきます。

ワークロードが超えた時の対処法

ワークロードが超えた場合はまず、以下の二つに大きく分けることができます。

1. アプリの利用を制限する
2. 利用量は制限せずに超過分を別途支払う

アプリの制限をする

アプリの利用を制限する場合はSetting>>App plan>>Overagesの設定を開きます。選択項目を「Disable overages」に設定することでワークロードが超過した地点でアプリへのアクセスができなくなります。

メリット）

• 月額利用料を基本料金内で抑えることができる

デメリット）

• アプリ利用者が急に使えなくなる可能性がある

超過分を後払いで支払う

アプリの制限画面から超過時もアプリの利用を制限することなく利用ができるように設定します（一つ目の設定項目を「Enable overages」に設定）。これにより、デフォルトで付与されているワークロードを超えた際にも制限なく、提供できるようになります。

メリット）

• 従来のbubbleの設定では利用量が増えると自動的にアクセス制限がかかっていたため、アクセス制限がかからなくなった
• 後払いのため、設定一つで制限をかけずに利用者に提供できる

デメリット）

• 超過分の料金が使った分だけとなるため、請求額が毎月変動する
• 事前購入（三つ目）よりも1000ワークロードあたりの料金が高めに設定されている

超過分に充当できるクレジットを事前に購入する

ワークロードが超過した際に充当できるクレジットを事前に購入しておくことができます。こちらは月額課金制になっており、毎月充当する量をプランから選択します。設定はSetting>>App plan>>「Workload tier」の設定を開きます。

メリット）

• 超過分の後払いよりも安価にワークロードを足すことができる
• 事前に購入するため、毎月の金額が変動しにくい

デメリット）

• ワークロード数を細かく指定して足すことができない
• 事前にどれくらいのワークロードを使うか測定することが難しい

最後に

ワークロードの計算は今年の5月から導入されたということもあり、bubbleエンジニアの中でもまだ目安を立てるのが難しいものとなっております。個人的には一日あたりの利用量を測定することや超過分を後払いに最初設定して次月から事前購入にするなどの方法でお試しすることをお勧めしています。

bubbleでの開発や技術的なご相談等はHPのお問い合わせまたはX（旧Twitter）のDMにてお気軽にご相談くださいませ。

この記事は、Bubbleでのデータベース管理について初級から中級者に向けて解説します。データベースを構築する際にはデータの型を設定しますが、どの型がどういったものなのか理解することは意外と難しいです。この記事ではデータ型の特徴から実際の用途についても例を挙げながら紹介していきます。

データ型の一覧

• text：文字列。テキストを表すために使用されます。
• number：数字。整数から小数まで数字として扱う際に使用されます。
• number range：数字の範囲。最小と最大を指定することができます。
• date：日付。年、月、日、時間、分、秒の全ての時間を扱う時に使用します。
• date range：日の範囲。
• date interval：間隔。単位は秒になっているので「何秒間隔」を表す時に使用します。
• yes / no：2択のフラグ。二つの状態を管理する時に使用します。二つの状態（完了と未完了など）の管理の際に使われることが多いです。
• file：ファイル全般。画像や動画からPDF、csv形式のファイルなどをアップロードする時に使用します。
• image：画像。pngやjpegなどの画像形式のファイルをアップロードする時に使用します。
• geographic address：住所。土地の住所を登録する際に使用します。Google APIとの連携をすることで郵便番号と住所を登録できます。

データ型別の説明

text型

文字列を登録する場合に用いるものです。

使用例

・ひらがな、カタカナ、漢字、アルファベットで構成される文字列を表示
・IDを作る（数字型の場合、最初の数字が0になると自動的に省略させるため）

number型

数字として使うデータを登録する場合に用いるものです。四則計算が必要になるものはこのかたで登録します。

使用例

・お金の計算をするとき
・投稿数を数えてデータとして保存する
・ある地点からの距離データを保存するとき

number range型

数字の範囲を登録する場合に用います。最大値と最小値を登録することができるため、そこから中央値を求めたりすることができます。

使用例

・ユーザーの年齢管理のデータベースを構築して、最小と最大、平均などを計算する
・データベースに最大値と最小値を事前に登録しておき、その範囲内に該当するか検索する

date型

日付を登録するときに用いるものです。

使用例

・公開日データの設定
・誕生日の登録

date range型

日付の範囲を登録する場合に用います。開始と終了の範囲を登録する形になります。データを作る際には「”開始範囲のデータ”<>”終了範囲のデータ”」という型に合わせてデータ作成の型を設定します。

使用例

・カレンダー表示のためのデータを登録する
・公開日範囲の設定

date interval型

日付間隔を登録するときに用います。日付間隔は2つの日付の差を数値化する。その間の日数/時間/分/その他を表します。

使用例

・開始と終了の時間の差分を日数/時間/分などの指定の型で登録する

yes / no型

ステータス管理に用います。2択で分類したいときに使用していきます。これによって「conditional」という条件分岐の設定から表示を条件分岐することが可能になるなどします。

使用例

・タスクの完了や未完了
・メール配信の受信設定

file型

ファイルデータ全般を保存するときに用います。

使用例

・PDFファイルを保存する
・CSVファイル（Excel形式のファイル）を保存する

image型

画像データを用いるときに用います。PNGやJEPGなどの画像形式でのファイルのみを登録できます。

使用例

・プロフィール画像を保存する
・スマホで写真を撮って保存する

geographic型

土地の住所を登録するときに用います。Google Map APIとの連携により、Google上の住所データを用いて登録することができます。

使用例

・出発地と到着地の住所を保存する
・現在地からデータベース上に登録されている住所の距離を算出する

最後に

アプリケーションを作る際に必ず必要になるデータの管理について、基本的なデータの型についてご紹介しました。

bubbleでの開発や技術的なご相談等はHPのお問い合わせまたはX（旧Twitter）のDMにてお気軽にご相談くださいませ。

bubbleでプロダクト開発を行っておりますWANTOの西坂優希（@nishiyuki0501）と申します。

bubbleでデータを絞る際に用いる「Do a search for」。条件を複数指定することで表示するリストを絞ることができる機能です。そして、この機能は一覧表示に用いることが多いかと思います。

そんなbubbleユーザーの皆様が使っている中でこうした悩みはございませんでしょうか？

通常、bubbleのDo a search forの設定ではAND検索になります。しかし、状況によってはOR検索にして抽出するデータの制限を和らげたいケースも存在します。この記事ではbubbleでOR検索を実装する方法について紹介いたします。

AND検索とOR検索の違い

AND検索とは「完全一致検索」のことを指します。つまり、設定した条件全てに当てはまるデータを抽出します。一方でOR検索とは「部分一致検索」のことを指します。こちらは設定した条件のいずれか一つでも当てはまるものがあれば抽出します。

Do a search forの特徴

bubbleでデータに条件を指定して絞る際には「Do a search for」という構文を用います。リピーティンググループ（一覧表示するためのエレメント）のData sourceは表示するデータの引用元を指定する必要があります。ここでDo a search forはよく使われます。

今回、User（ユーザー）を一覧表示する画面を作ります。Data sourceを「Do a search for」に設定するとデータを指定する画面が横に現れます。「Add a new constraint」から条件を追加していきます。

今回の場合は「学年が中学一年生」かつ「年齢が16歳」という条件を指定したことになります。このように、Do a search forを使うと条件全てを含む検索を実装することができます。

bubbleでOR検索の実装

bubbleでOR検索を実装するための一つの方法として。「Do a search for」と「filtered」を組み合わせることで実装が可能になります。

Do a search forは前述の通り「かつ」を意味するAND検索の条件を指定することになります。一方でfilteredの中には「Advanced…」という指定方法があります。このAdvanceでは複数の条件をORで結ぶことが可能です。（ANDでも可能です）

filteredは親元（Do a search for）で絞られた条件に付け加える設定です。そのため、「Search for “データベース名”」にMoreをクリックすると「filtered」が見つかります。設定後はList filterの設定画面が現れます。

List filterの画面を開くと「Add a new constraint」から「Advanced…」を選択し、「This “データベース名”」を選択してください。今回の場合はUserというデータベースにフィルターをかけておりますのでThis Userとなっております。あとは任意の条件を指定してください。

条件一つを指定して、Moreを押すと「and」や「or」という接続するための構文が表示されますのでこの中から「or」を選択するとOR検索が可能になります。

最後に

アプリケーションを作る際に必ず必要になるデータの管理について、AND検索とOR検索を使い分けることでより高度なデータ表示や検索が可能になります。

bubbleでの開発や技術的なご相談等はHPのお問い合わせまたはX（旧Twitter）のDMにてお気軽にご相談くださいませ。

こんにちは。

bubbleでプロダクトの開発を行っておりますWANTOの西坂優希（@nishiyuki0501）と申します。

ここ数年でIT業界ではAIやノーコードと新しい技術が出てきております。そして、この変化によって難しく感じている方も少なくはないと思います。また、ツールもたくさん存在して、違いがわからないことも少なくはないかと思います。そこで今回はノーコードツールの「bubble」について紹介していきます。

bubbleとは「直感的に開発ができるサービス」

bubbleは、ノーコード開発プラットフォームの一つです。ユーザー数は200万人を超えており、世界的に人気のノーコード開発プラットフォームです。

一切のプログラミングスキルなしに、ウェブアプリケーションを作成することができます。ドラック&ドロップと直感的でシンプルな操作で独自のデザインと機能を持つウェブアプリケーションを開発できます。

また、従来の画面遷移を開発するツールではできなかったデータベース管理やユーザ認証、外部サービスとの連携などの機能も含めて設定することができます。これにより、多岐にわたる開発が可能になります。

ちなみに、弊社が開発および市場検証中の「学習塾の運営を10倍効率化するアプリWANTO」もbubbleで開発しております。

bubbleでできること

bubbleは「Webアプリ」開発を得意とするツールです。

前提として、アプリには主に2種類あります。

Webアプリ・・・Google ChromeやSafariといったブラウザソフトの中で使うアプリです。
ネイティブアプリ・・・iPhoneの方はApp Store、Androidの方はGoogle Play Storeからダウンロードするようなアプリです。

bubbleでネイティブアプリの開発も可能ではありますが、Webアプリを作ることを想定されているツールであるため、ネイティブアプリ開発の場合は他のツール（AdaloやFlutter Flowなど）をお勧めします。

それではbubbleでできることを見ていきましょう。できることの一部は以下の通りです。

高度なアプリを高速で開発

bubbleはノーコードツールの中では最も汎用性の高いツールとされています。そのため、基本的には実装ができないことはありません。

かなり複雑な開発ができる上に、大規模な開発も可能であるという特徴があります。

そして、開発の操作においてもドラック&ドロップで配置していくため直感的にデザインを反映させることができます。バックエンド（データの編集などのアプリの裏の動き）の設定も選択肢が準備されているため、簡単かつ高速に開発が可能です。

bubbleで機能を実装する

ノーコードツールを検討している方の多くが感じていることとして、「ノーコード開発ってセキュリティ面は大丈夫なの？」というご相談をお見受けします。

bubbleは詳細なセキュリティ設定ができるほか、構築自体がAmazon Web Services (AWS)上に構築されているため、AWS自体が持っているSOC2、CSA、ISO 27001などのセキュリティ資格の認定を受けています。

そのため、bubbleはセキュリティ面においても厳重に管理することができる機能を備えているツールであると言えるでしょう。

外部サービスとの連携

bubbleはプラグイン（拡張機能）やAPI（外部のサービスと連携する際に必要なもの）の設定があります。そのため、外部サービスとの連携をすることでより多岐にわたる開発が可能です。

例えば、外部サービスとの連携によってできるようになる機能は以下の通りです。

• LINEやGoogleなどのSNSを使った連携
• Googleマップの地図を用いてルート検索
• Googleカレンダーにイベントを追加する

こちらで紹介したものはほんの一部に過ぎませんがこうした外部サービスとの連携ができることもbubbleの強みです。

bubbleの利用料金

Bubbleは、個人ユーザーから大企業まで幅広いユーザーのニーズに対応するため、異なるプランを提供しています。
最初のフリープランでは基本的な機能を提供しますが、StarterプランやGrowthプランやTeamプランでは、より高度な機能とリソースが提供されます。詳細は以下の通りです。

– bubbleのプランは以下の通り（為替レートは1ドル134円で計算）
　- Freeプラン
　　- 無料
　- Starterプラン
　　- ＄32+workload超過分（4,284円）
　- Growthプラン
　　- ＄134+workload超過分（17,939円）
　- Teamプラン
　　- ＄399+workload超過分（53,416円）
　- Customプラン
　　- コンタクト（お問い合わせして下さい）

※ワークロードについては簡単に説明すると「使用量」です。こちらの計算についてはbubbleエンジニアの中でも現在調査中です。（5月からの新プランのため）

bubbleが向いているフェーズの人の特徴

bubbleは、ビジネスアイデアを具現化したい起業家、自分のアイデアを形にしたい方、または既存の業務フローをデジタル化したい企業の方々にとって理想的なツールです。

また、プログラミングスキルを持っていない初心者や、すばやくプロトタイプを作りたい開発者にとっても有用です。bubbleは、あなたの創造性を制限することなく、アイデアをより早く、より安価に実現できるプラットフォームです。

最後に

bubbleはアイデアをより早く、そしてより自由に開発することができるプラットフォームです。bubbleを使うことで今まで頭の中で思い描いていた「あったらいいな」を形にできます。皆さんもこれを機にぜひbubbleの世界へ。

私、西坂優希は、ノーコード にてシステム開発のご支援をさせていただいております。
ノーコードによる開発依頼やノーコードに関すること、業務効率化などでご質問やご相談等がございましたらご遠慮なく、下記よりご連絡頂けますと幸いです。
下記のTwitterのDM、もしくはHPからご連絡ください。