J-starX 地域起業家コースに採択されました
【bubble】Reload on updateでリロードを効率化する
ノーコードツールbubbleではドラック＆ドロップをベースとした簡単な操作でアプリを作っていくことが可能です。その一方で、要素を移動させるなどの修正を加えるとプレビューモードのリロード（再読み込み）が必要になります。
アプリの更新をするたびにプレビューの更新を行うことは意外と手間がかかる作業です。
この記事では変更が行われたときにプレビュー画面のリロードを自動で行うプラグインをご紹介します。
Reload on updateの詳細
アプリの修正を加えるたびにプレビュー画面のリロードを行うためには「Reload on update」というプラグインを使います。
必要な設定は
- プラグインのインストール
- ワークロードの設定
の二つが必要です。これから一つずつ紹介していきます。
プラグインのインストール
プラグインの設定画面＞右上の「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にてお気軽にご相談くださいませ。
大分県ビジネスアイデア実現支援プログラム「GEAR」が始まりました
先日、9月4日に大分県ビジネスアイデア実現支援プログラム「GEAR」のキックオフイベントがありました。イベントにて、事業内容の説明やプログラムゴールの発表等させていただきました。
このプログラムを通じて、教室運営を10倍効率化するアプリWANTOの市場検証を本格的にスタートさせて参ります。
アプリについての詳細はこちらからご確認いただけます。ご質問やご不明点等ございましたら、お気軽にお問合せフォームからご連絡下さい。
【bubble】独自ドメインをお名前.comから取得・反映させる
ノーコードツール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】ワークロードが超えたときの対応
bubbleでプロダクト開発を行っておりますWANTOの西坂優希（@nishiyuki0501）と申します。
2023年5月からbubbleの有料プランの料金形態が変わりました。その変更では料金が上がっただけでなく、利用量を計測する「ワークロード（workload）」というものが導入されました。
この記事ではワークロードが超えた時の対処法をご紹介します。
ワークロードとは
ワークロード（workload）とは「アプリの利用量」を計測する指標です。プランごとにデフォルトで最大の利用量分のクレジットを与えられます。基本料金でアプリを動かせるアクセス数がこれにより大まかに決められております。
日本語） ワークロードはbubbleで開発したアプリケーションを動かすための一つの指標となるものです。アプリが支払い処理、API との通信、データベースの検索などのタスクを実行するよう要求されるたびに、毎月のワークロード使用量に計測されていきます。
ワークロードが超えた時の対処法
ワークロードが超えた場合はまず、以下の二つに大きく分けることができます。
- アプリの利用を制限する
- 利用量は制限せずに超過分を別途支払う
アプリの制限をする
アプリの利用を制限する場合はSetting>>App plan>>Overagesの設定を開きます。選択項目を「Disable overages」に設定することでワークロードが超過した地点でアプリへのアクセスができなくなります。
メリット）
- 月額利用料を基本料金内で抑えることができる
デメリット）
- アプリ利用者が急に使えなくなる可能性がある
超過分を後払いで支払う
アプリの制限画面から超過時もアプリの利用を制限することなく利用ができるように設定します（一つ目の設定項目を「Enable overages」に設定）。これにより、デフォルトで付与されているワークロードを超えた際にも制限なく、提供できるようになります。
メリット）
- 従来のbubbleの設定では利用量が増えると自動的にアクセス制限がかかっていたため、アクセス制限がかからなくなった
- 後払いのため、設定一つで制限をかけずに利用者に提供できる
デメリット）
- 超過分の料金が使った分だけとなるため、請求額が毎月変動する
- 事前購入（三つ目）よりも1000ワークロードあたりの料金が高めに設定されている
超過分に充当できるクレジットを事前に購入する
ワークロードが超過した際に充当できるクレジットを事前に購入しておくことができます。こちらは月額課金制になっており、毎月充当する量をプランから選択します。設定はSetting>>App plan>>「Workload tier」の設定を開きます。
メリット）
- 超過分の後払いよりも安価にワークロードを足すことができる
- 事前に購入するため、毎月の金額が変動しにくい
デメリット）
- ワークロード数を細かく指定して足すことができない
- 事前にどれくらいのワークロードを使うか測定することが難しい
最後に
ワークロードの計算は今年の5月から導入されたということもあり、bubbleエンジニアの中でもまだ目安を立てるのが難しいものとなっております。個人的には一日あたりの利用量を測定することや超過分を後払いに最初設定して次月から事前購入にするなどの方法でお試しすることをお勧めしています。
bubbleでの開発や技術的なご相談等はHPのお問い合わせまたはX（旧Twitter）のDMにてお気軽にご相談くださいませ。
【bubble】データベースのフィールドタイプを解説
この記事は、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などの画像形式でのファイルのみを登録できます。
使用例 ・プロフィール画像を保存する ・スマホで写真を撮って保存する
ファイル全般は「File Uploader」
geographic型
土地の住所を登録するときに用います。Google Map APIとの連携により、Google上の住所データを用いて登録することができます。
使用例 ・出発地と到着地の住所を保存する ・現在地からデータベース上に登録されている住所の距離を算出する
最後に
アプリケーションを作る際に必ず必要になるデータの管理について、基本的なデータの型についてご紹介しました。
bubbleでの開発や技術的なご相談等はHPのお問い合わせまたはX（旧Twitter）のDMにてお気軽にご相談くださいませ。
bubbleでAND検索とOR検索を実装する
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にてお気軽にご相談くださいませ。
Startup TVにて受賞
WANTOは7月に放映されましたJ:comのビジネスプランコンテスト企画「Startup TV」にてピッチを行い、金賞を受賞しました。
Startup TVは学生起業家の夢を応援するピッチコンテストプログラムである。経験豊富なアドバイザーが、学生起業家のプランを審査＆アドバイスをして評価する。
WANTO代表の西坂は「学習塾の運営を10倍効率化するアプリWANTO」をプレゼンした。アドバイザーからは高評価を頂いた。一方で、展開していくにおいての懸念点や課題感についての質問を頂戴した。
フィードバックを受け、西坂は「育成と管理にフォーカスしたアプリWANTOの改善につながりそうだ。気持ちを伝えることができた一方で、改善点もたくさん見つかった。今後も応援の程、よろしくお願いします。」と話した。
WANTOはこれで2つ目の受賞となった。なお、金賞はStartup TVが始まって以来3人目のことです。
改善点も含めて多くのフィードバックを頂いたので、今後のWANTOの発展をご期待ください。