ノーコード ラボ

NoCode 関連のツールの紹介、使い方などをやさしく説明します。質問やご指摘大歓迎です。わからないことがあったら、コメントや Twitter などで聞いてください!

Bubble

Zoomプラグインを使ってみよう!

Zoom Meetings プラグインページ 使い方 プラグインのインストール アプリの登録 作成するアプリの種類の中から「JWT」を選択します。 各項目を設定し、アプリを作成。 アプリを作成すると、API KeyとAPI Secretが取得できます。 プラグインページに、API ke…

Bubble の表作成にとても便利な Table / Grid プラグイン

Table / Grid プラグインとは 使用できる機能 使用方法 1. プラグインのインストール 2. Element の配置 3. 表示カラムの設定 ボタンを表示したい場合 リンクや画像を表示したい場合 テーブルオプション項目の設定 CSVダウンロード機能 テーブルの色設定 ま…

Bubble で CSS Flexbox をベースにした新しい Responsive Engine が登場

Bubble に新しい Responsive Engine (ベータ版)が登場しました。 今までより高速で簡単に Bubble アプリケーションがレイアウトできるようになっています。 今回は、新しい Responsive Engine について紹介していきたいと思います。 Bubble の公式マニュア…

【BubbleでSaaS構築】Sub app機能とアプリ連携プラグインApp Connectorを使ってみる

こんにちは! ここ数年でよく耳にするようになった業務改善やDXですが、SaaSで取り組みたいと考えているバブラーの方は多いはず。実はBubbleにはSaaSにぴったりなSub app機能というものがあるのをご存知ですか? 今回は、BubbleでSaaSを構築するときに便利な…

ノーコードを使って独自ドメイン宛のメール内容をメールクライアントで確認する

前回の記事でSendGrid経由でメールを送信する方法をご紹介しましたが、SendGridでは受信に相当する機能を利用して、送信されたメールの内容をメールクライアントで確認することもできます。 今回は、BubbleやIntegromatなどのノーコードツールを使って、独自…

BubbleのToolboxを使ってみよう!〜その③ Expression & List of Expression

どんな機能? Expression 数式の計算 リストを生成する テキストを合成する ドロップダウンとのマッピング List of Expression 生成したリストの値を使う データベースの値を使う 関連する別タイプのフィールドを参照する まとめ みなさんこんにちは! 前回…

独自ドメイン Bubble で SendGrid API key と Template ID を設定する

こんにちは! Bubbleとクラウドメール配信サービスSendGridの連携方法について、プラグインを使った方法を過去にご紹介しましたが、Bubbleが独自ドメインの場合異なる方法での設定が便利です。 今回は、SendGridを独自ドメインのBubbleアプリと連携するため…

Calendar tool プラグインでカレンダーをカスタマイズして表示する

こんにちは!Bubble標準のカレンダーであるCalendarエレメントを使っていて、もっと柔軟にカスタマイズしたいと思ったことはありませんか? 本日は、「Calendar tool」プラグインとRepeating Groupを使って、カスタマイズしたカレンダーを表示する方法をご紹…

独自ドメインのBubbleでGoogle Geocode APIキーとGoogle Map APIキーを設定する

こんにちは! Bubbleの地図とジオロケーション機能は、Google APIによって成り立っています。アプリを独自ドメインで運用する場合、地図とジオロケーションに関するGoogle APIの設定が必要になります。 今回は、独自ドメインでBubbleアプリを運用するときのG…

Bubbleで10,000件のデータを一括アップロードできる?!パスワードを含むユーザー情報をParabolaで一括登録する

こんにちは!「Bubbleに大量のデータを一括登録したい」「Bubbleで作ったサービスにユーザー情報を移行したい」といった大量データの一括登録方法が分からず困った経験はありませんか? 本日は、Parabolaを使ってパスワードを含む10,000件のデータを一括登録…

Bubble で Vimeo のビデオを管理できるプラグイン「Vimeo Connector (access token)」を作成しました!

1. Vimeo とは? 2. Vimeo Connector (access token) プラグインのご紹介 3. プラグインを使うための準備 3.1. Vimeo 側の設定 3.1.1. Vimeo のアカウントを作り、Vimeo の新しいアプリを作成しよう 3.1.2. My Apps ページで動画の Upload の申請をしよう 3.…

Bubble で calendly クローンを作ってみる!(初級者向け)5:イベントの編集ページの作成

この記事は 【 Bubble で calendly クローンを作ってみる!(初級者向け) 】の第5回です。 前提条件等、確認されていない方は先にこちらの記事を確認してください。 blog.nocodelab.jp みなさん、こんにちは!前回は、ユーザーによって指定された「1回限り…

Bubble で写真や動画を撮影できる Camera Capture and Video Recorder Plugin の使い方

1. プラグインなしでもワンアクションのカメラ起動は可能か? 2. カメラ起動のプラグインの比較 2.1. Mobile Camera Input 2.2. Simple Mobile Camera Input 2.3. Camera Capture and Video Recorder Plugin 3. Camera Capture and Video Recorder Pluginを…

BubbleのToolboxを使ってみよう〜その② Javascript to Bubble & Run Javascript

どんな機能? Run Javascript Javascript to Bubble 作成するサンプルについて 使ってみよう! #1 Run Javascript #2 HTML エレメントのスクリプトタグ イベント生成機能を使おう 活用例 別ウインドウを開く 日時の差分を計算する まとめ みなさんこんにちは…

BubbleのToolboxプラグインを使ってみよう!〜その① List of Numbers

Toolboxとは? 事前準備 プラグインインストール List of Numbers どんな機能? 使ってみよう 活用例 まとめ こんにちは! 今回は、Bubble の人気プラグインのひとつ「Toolbox」プラグインについて紹介します。 Toolbox プラグインはとても便利なプラグイン…

Bubble で calendly クローンを作ってみる!(初級者向け)4:イベントの新規作成ページの作成

この記事は 【 Bubble で calendly クローンを作ってみる!(初級者向け) 】の第4回です。 前提条件等、確認されていない方は先にこちらの記事を確認してください。 blog.nocodelab.jp みなさん、こんにちは!前回は、ユーザー(管理者)のダッシュボード…

Bubble で calendly クローンを作ってみる!(初級者向け)3:ダッシュボードとイベントカレンダー一覧ページの作成

この記事は 【 Bubble で calendly クローンを作ってみる!(初級者向け) 】の第3回です。 前提条件等、確認されていない方は先にこちらの記事を確認してください。 blog.nocodelab.jp みなさん、こんにちは!前回は、ログイン周りとアカウントの設定ペー…

Bubble のプライバシールールのデフォルト値の変更について

仕様変更の概要 プライバシールールをあとから変更するには 仕様変更の概要 2021年4月17日、Bubbleのプライバシールールにかかる変更がアナウンスされました。 https://forum.bubble.io/t/improvements-to-working-with-data-privacy-rules/146554 data type…

Bubble で calendly クローンを作ってみる!(初級者向け)2:ログイン周りとアカウントページの作成

この記事は 【 Bubble で calendly クローンを作ってみる!(初級者向け) 】の第2回です。 前提条件等、確認されていない方は先にこちらの記事を確認してください。 blog.nocodelab.jp みなさん、こんにちは! 前回は、アプリの全体像を把握しやすくするた…

Bubble で作った Web アプリを Nativator を使って簡単にネイティブ化する方法

1. Web アプリとネイティブアプリの違い 2. ネイティブ化してみよう 2.1. Bubbleで作ったアプリをネイティブ化できるプラグインの比較 2.1.1 BDK Native 2.1.2 codeless academy 2.1.3 Nativizer 2.1.4 Nativator(2021年4月21日追記) 2.2. Nativator.io と…

Bubble で calendly クローンを作ってみる!(初級者向け)1:作成するページの役割とデータベースの構成について

この記事は 【 Bubble で calendly クローンを作ってみる!(初級者向け) 】の第1回です。 前提条件等、確認されていない方は先にこちらの記事を確認してください。 blog.nocodelab.jp 1. 作成するページと役割について 2. データベースの構成について Eve…

Bubble で calendly クローンを作ってみる!(初級者向け)

みなさん、こんにちは! 今回は、Bubble の初級者向けコンテンツの新シリーズで、スケジュール調整で有名なWebサービス calendly のクローンを作成していきたいと思います。 calendly は、会議などの時間を調整できるサービスで無料プランもあり、本家サービ…

Bubbleでループ処理をする方法(List Shifter を使ってみよう)

1. 準備 1.1. List Shifter をインストールしよう 1.2. 使用するリストを作ろう 2. List Shifter を動かしてみよう 2.1. List Shifter でリストをReverse しよう 2.2. List Shifter でリストを回転(Rotate)しよう 2.3. List Shifted とShifted List の違い…

Parabola を使った Bubble DB の集計方法

題材となる DB User Type WorkingHours Type WorkingHoursPerMonth Type Privacy 設定 Bubble の Data API の設定 Parabola の設定 Bubble からデータを持ってくる API Endpoint URL の設定 API Token の設定 Parabola で必要なデータだけ抽出する Parabola …

Bubble Agency プランと Agency との Webアプリの共有方法について

Bubble Agency プランについて Bubble の全機能を利用可能 他のユーザーとコラボレーション可能 独自ドメインとホワイトラベル パスワード保護 Agency 一覧への登録 2021年3月12日 追記 2021年3月16日 追記 利用条件 弊社との Webアプリの共有について まと…

意外と簡単!?Bubble で作った Webアプリを PWA にする方法

1. PWA とは 2. A2HS とは 2.1 iOS の場合(Safari) 2.2 Android の場合(Chrome) 3. iOS への対応(Web Clip の作成) 3.1 apple-mobile-web-app-capable 3.2 apple-mobile-web-app-status-bar-style 3.3 apple-mobile-web-app-title 3.4 apple-touch-ico…

Bubbleで名言SNS「SHarK!!!」の簡易版を作ってみる(初級者向け)5:独自ドメインの設定方法

第5回 独自ドメインの設定方法 1. 事前確認 2. ドメインの取得 2.1 ドメインの決定・検索 2.2 ドメイン確認・サーバー選択 2.3 料金確認 2.4 支払い方法確認・購入手続き 3. Bubbleへの紐づけ 3.1 Bubble の有料プランについて 3.2 Bubble の Personal Plan …

じゃんけんゲームをBubbleで作ってみる!(入門者向け)

概要 アプリを作ってみよう Bubbleでアプリを新規に作ろう 画面サイズの設定 データの作成 オプションセットとは? データの準備 コンテンツの配置 テキスト「じゃんけんぽん!」の設置 グーチョキパーの図の設置 結果と「もう一回」ボタンの表示(ポップア…

Bubbleで名言SNS「SHarK!!!」の簡易版を作ってみる(初級者向け)4:レスポンシブデザイン対応

第4回 レスポンシブデザイン対応 1. レスポンシブデザイン対応の基礎知識 1.1 レスポンシブと設定ページについて 1.2 画面を狭めた時のレスポンシブ 1.3 画面を広げた時のレスポンシブ 2. レスポンシブデザイン対応実装 2.1 事前確認と設計 2.2 タイムライ…

Bubble と Googleカレンダーを連携してみよう!

2021/02/22 追記 Zeroqode の Calendar from Google プラグイン更新(v1.11.0 ⇒ v1.14.0)に伴い、以下でご紹介しているGoogleカレンダーの「イベント一覧の取得」「イベントの新規作成」「イベントの削除」は Calendar from Google の設定値を API Connecto…