ノーコード ラボ

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

BubbleとBackendlessの連携方法

みなさんこんにちは! 前回の記事では Backendless でできることや簡単な操作方法をご紹介しました。 blog.nocodelab.jp 今回は第2弾として、Bubble と Backendless の連携手順をご紹介します。今回作成するサンプルアプリについては、以下のドキュメントに…

バックエンドの機能をノーコードで構築できるツール「Xano」

前回はBackendlessというサービスをご紹介させて頂きましたが、今回はバックエンドに特化した機能をノーコードで作成できるツール、Xano(ゼノ)についてご紹介します。 Xanoをご紹介する背景としまして、 3月17日にbubbleの新料金プランが公表されましたが…

ノーコードで使用できるBaaS「Backendless」について

みなさんこんにちは! 今回は、ノーコードで簡単な画面作成・DB操作ができる BaaS(Backend as a Service)の Backendless をご紹介したいと思います。 1. Backendlessとは? 2. Backendlessでできること 3. 実際の画面について 3-1. フロントエンド 3-2. バ…

ユーザーが任意のタイミングでcsvを出力可能!csv creator プラグインについて

1. csv creator とは 1.1. 使用方法 1.1.1. プラグインのインストール 1.1.2. Element の配置 1.1.3. 出力したいデータテーブルの設定 1.1.4. csv creatorの設定 1.1.5. 実際に出力する 1.1.6. 必要なデータのみ出力したい場合 1.2. 今回使用した各プロパテ…

Bubble でリンクプレビューを実装する方法

みなさん、こんにちは! 今回は、Bubble で LinkPreview というサービスを利用して、Slack や Twitter などでURLを貼り付けた時に表示される、ページのタイトルやディスクリプション、OGP(Open Graph Protocol)を取得するリンクプレビュー機能を実装していき…

Bubble のリリース前チェックリスト

みなさん、こんにちは! さて、早速ですが、ノーコード開発したサービスをリリースする際、みなさんは、安全に、そして確実にリリースするために、どのような準備をされていますか? どんなに準備していても、リリース前後は多少の緊張感を感じるという方、…

PDF作成プラグイン「PDF Conjurer」と「Google Doc to PDF | Unlimited」を実装する

こんにちは!今回は、BubbleでおすすめのPDF作成プラグイン「PDF Conjurer」と「Google Doc to PDF | Unlimited」の実装方法をご紹介します。 請求書、イベントの予約確認、ユーザーへの各種書類など、BubbleでPDFを作成したいシーンはたくさんありますよね…

Bubble で calendly クローンを作ってみる!(初級者向け)9:予約一覧ページの作成(後半)

この記事は 【 Bubble で calendly クローンを作ってみる!(初級者向け) 】の第9回です。 前提条件等、確認されていない方は先にこちらの記事を確認してください。 blog.nocodelab.jp 本シリーズ最終回となりました。今回も、前回と同じ管理者が予約一覧…

Bubble で calendly クローンを作ってみる!(初級者向け)8:予約一覧ページの作成(前半)

この記事は 【 Bubble で calendly クローンを作ってみる!(初級者向け) 】の第8回です。 前提条件等、確認されていない方は先にこちらの記事を確認してください。 blog.nocodelab.jp 今回は、本シリーズの最後の画面となる、管理者が予約一覧を確認でき…

BubbleでDiscordログイン・メッセージ送信機能を実装する

こんにちは!今回は、BubbleでDiscordと連携してOAuth2.0ログインやチャンネルへのメッセージ送信機能を実装する方法をご紹介します。 Discordはオンラインゲームプレイヤーの間でユーザー拡大中のコミュニティアプリです。そんなDiscordアカウントでログイ…

LINE Message プラグインの機能追加

1. 画像の送信 引数 2. 動画の送信 引数 3. メッセージオブジェクトの送信 引数 メッセージオブジェクトの JSON LINE絵文字 LINEスタンプ その他 余談 こんにちは!ノーコードラボの岡崎です。 昨日(2022年2月5日)、久しぶりに LINE Message プラグインに…

Bubble の Workflow の実行順序について

1. 概要 2. 全体図 3. Workflow のロジックに関する基本知識 4. Workflow の実行順序のルール 4.1. 必ずしも前の Step が完了するのを待ってから次の Step がトリガーされるわけではない 4.2. Backend Workflow がトリガーされるタイミング 4.3. Custom Even…

Auth0と連携してBubbleでパスワードレス認証を実装する

こんにちは!今回は、Bubbleでパスワードレス認証を実装する方法をご紹介します。 パスワードレス認証の代表的な例は、パスワードの代わりにメールやSMSで受け取る数桁の数字を利用したサインアップ・ログインです。最近はキャッシュレス決済アプリや銀行ア…

BubbleからIntegromatを使ってOneDriveにファイルをアップロード

こんにちは。今回は、Integromatと連携してOneDriveにファイルをアップロードするWebアプリをBubbleで作っていきます。 OneDriveと言えばOneDrive APIを使う方法がまず思い浮かびますが、今回はOneDrive APIを使わずIntegromatとBubbleを連携する方法をとり…

Bubble で calendly クローンを作ってみる!(初級者向け)7:予約機能の考え方とデータベースへの登録

この記事は 【 Bubble で calendly クローンを作ってみる!(初級者向け) 】の第7回です。 前提条件等、確認されていない方は先にこちらの記事を確認してください。 blog.nocodelab.jp みなさん、こんにちは!今回は、いよいよユーザー(お客様)が予約を…

Bubble の Database trigger event 機能を使ってみよう!

Database trigger event とは サンプル1(Signup 時の自動画像追加) 事前準備 SignUp 処理の作成 Backend workflows の作成 サンプル2(ログ自動追加) 事前準備 Backend workflows の作成 Create 時のログ書き込み処理の作成 Make Change 時のログ書き込…

BubbleでOAuth2.0をマスター!API Connectorを使ってSpotifyアカウントでのログイン機能を実装する

こんにちは!今回は、BubbleでOAuth2.0をマスターするためにAPI Connector「OAuth2 User-Agent Flow」の設定方法を解説します。 これまでにもOAuth2.0ログインの実装方法をいくつかのサービスを例に紹介してきましたが、今回はOAuth2.0の仕組みや各サービス…

Bubble で calendly クローンを作ってみる!(初級者向け)6:Repeating group カレンダーの作成方法とイベントカレンダーページの作成

この記事は 【 Bubble で calendly クローンを作ってみる!(初級者向け) 】の第6回です。 前提条件等、確認されていない方は先にこちらの記事を確認してください。 blog.nocodelab.jp みなさん、こんにちは!本シリーズについて、前回記事から随分と期間…

Microsoft Teamsオンライン会議作成機能をBubbleで実装する方法

皆さんこんにちは。今回は、Microsoft Graph APIを使って、ビジネスオンライン会議ツールの代表であるTeamsのオンライン会議を作成できるBubbleアプリの実現方法をご紹介します。ぜひ業務効率化アプリの開発に活用してくださいね! Microsoft Graph APIは、M…

【PR記事】bubbleで作ったお手伝いマッチングサイト「TYOITETU」であなたの空き時間を宣伝拡散!

皆さんこんにちは。ノーコードラボの bubble campに参加し「TYOITETU」を作った佐藤です。プログラマーではない私がどんなアプリを作成したのかご紹介していきます。 アプリ概要 TYOITETU(ちょいてつ) は「ちょいっとお手伝い」をテーマに、皆さんの「求人…

Bubble から Google meet の予約をしてみよう!

API Connectorのインストール Google APIsでプロジェクト作成 Bubbleアプリの構築 API Connector のOAuth設定 ソーシャルログインで接続 API Connector の呼び出しポイントを初期化 ユーザーのカレンダーリストを取得 カレンダーにイベントを新規作成 + Goog…

Bubble でアプリからCSVファイルのアップロードとインポートができる 1T - CSV Uploader プラグイン

1T - CSV Uploader プラグインとは 今回利用するCSVファイル 1T - CSV Uploader プラグインの利用方法 プラグインのインストール Dataの設定 Design の設定 Backend workflow の有効化 Backend workflow の設定 ①CSVファイルを受け取る API の作成 ②CSVファ…

Bubble で簡単にファイルの zip & ダウンロードができる Zip and download files プラグイン

Zip and download files プラグインとは Zip and download files プラグインの利用方法 プラグインのインストール 事前準備 1つのファイルをダウンロード 複数のファイルをダウンロード まとめ こんにちは! Bubble で簡単に複数ファイルを zip 化してダウ…

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アプリと連携するため…