ノーコード ラボ

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

Bubble

Algolia Integrationで全文検索を実装する(1)

Bubbleの標準機能であるAlgolia Integrationを使った検索の実装手順についてのご紹介です。Bubbleの全文検索では、検索処理が遅かったり詳細な検索設定が出来ないといった課題が多くありますが、今回そんな検索における課題を解決してくれるAlgolia検索を使…

iPhone のメッセンジャーもどきを Bubble で作ってみる(新レスポンシブ版)5:初めてのユーザーにメッセージを送信する画面を作成する

この記事は 【 iPhone のメッセンジャーもどきを Bubble で作ってみる(新レスポンシブ版) 】の第5回です。本コンテンツの記事が初めての方は、以下の記事でコンテンツの説明をしていますので、ご確認ください。 blog.nocodelab.jp 今回作成するページ 今…

Slackと連携してBubbleからメッセージを送る方法

こんにちは!今回はチャットツールの「Slack」のAPIを用いて、Bubbleからチャンネルにメッセージを投稿する方法をご紹介します。 Slack APIを活用することで、任意のチャンネルへの投稿やスレッドでの返信、投稿内容を取得することができるようになる等様々…

iPhone のメッセンジャーもどきを Bubble で作ってみる(新レスポンシブ版)4:プロフィール画面を作成する

この記事は 【 iPhone のメッセンジャーもどきを Bubble で作ってみる(新レスポンシブ版) 】の第4回です。 本コンテンツの記事が初めての方は、以下の記事でコンテンツの説明をしていますので、ご確認くださいね。 blog.nocodelab.jp 今回作成するページ …

iPhone のメッセンジャーもどきを Bubble で作ってみる(新レスポンシブ版)3:メッセージを表示する画面を作成する

この記事は 【 iPhone のメッセンジャーもどきを Bubble で作ってみる(新レスポンシブ版) 】の第3回です。 本コンテンツの記事が初めての方は、以下の記事でコンテンツの説明をしていますので、ご確認くださいね。 blog.nocodelab.jp 今回作成するページ …

BubbleのデザインシステムFramesを使った開発方法

こんにちは!今回は、Bubbleのレスポンシブデザイン開発に役立つモジュール式デザインシステム「Frames」をご紹介します。 Framesは2021年に公開されたばかりのBubbleデザイン実装お助けシステムで、Bubbleのエレメントを組み合わせて構成されたモジュールを…

Auth0と連携してBubbleでSSOを実装する方法

皆さん、こんにちは!今回は、Auth0を利用して Bubble でSSOを実装する方法について、ご紹介したいと思います。 今では様々なサービスに利用されているシングルサインオン(SSO)ですが、開発者、ユーザーどちらにもメリットの大きい機能ですので、ぜひ使い…

BubbleでGoogle Analyticsを設定する方法

みなさん、こんにちは! 今回の記事では「Bubble で Google Analystics を設定する方法」をご紹介します。 解析ツールを導入することで、ユーザーの傾向や行動を戦略的に分析することができます。Google Analystics は、企業でも個人でも誰でも利用できるア…

【Bubble 事例】オンライン個別指導サービス「スタディカルテLab」

スタディカルテ樋口さんへのインタビュー スタディカルテLab について 起業のきっかけ Bubble を選んだ理由 / 当社を選んだ理由 Bubble で実際に運用してみてどうか?良い点や悪い点は? 今後も Bubble のままで続けるのか?どこかの時点で乗り換えることが…

iPhone のメッセンジャーもどきを Bubble で作ってみる(新レスポンシブ版)2:メッセージを送信する相手を選択する画面を作成する

この記事は 【 iPhone のメッセンジャーもどきを Bubble で作ってみる(新レスポンシブ版) 】の第2回です。 前回の記事を確認されていない方は先にこちらの記事を確認してください。 blog.nocodelab.jp それでは続きを作っていきます! index ページを「メ…

Bubbleでの正規表現の書き方と実装例

こんにちは! 今回の記事では、Bubbleでの正規表現の書き方と正規表現を用いた機能の実装例をレベルごとにご紹介します。 正規表現はプログラミングだけでなくテキストエディタでも用いられることがありますが、Bubbleで正規表現を設定しようとすると手こず…

iPhone のメッセンジャーもどきを Bubble で作ってみる(新レスポンシブ版)1:新規アプリの作成及び、ユーザー登録、ログイン画面を作成する

iPhone のメッセンジャーもどきを Bubble で作ってみる(新レスポンシブ版)1:新規アプリの作成及び、ユーザー登録、ログイン画面を作成する

【TYOITETU】旧レスポンシブから新レスポンシブへの移行

皆さん初めましてこの度記事を書かせてもらうTYOITETUを運営している佐藤と申します。 blog.nocodelab.jp 今現在旧レスポンシブで作ったアプリを新レスポンシブに対応させている最中という方も多いのではないでしょうか?まさにTYOITETUもそうです。 この度…

Google Driveと連携してファイルをダウンロードする機能をBubbleで実装する

こんにちは! 今回は、Google Driveと連携して、自分のGoogle DriveのファイルをダウンロードできるアプリのBubbleでの実装方法をご紹介します。 Google Driveと言えばOne DriveやDropboxと並ぶクラウドストレージの代表格で、業務で使用されている方も多い…

iPhone のメッセンジャーもどきを Bubble で作ってみる(新レスポンシブ版)

ノーコードラボで過去にご紹介したiPhoneメッセンジャーもどきの作り方を「新レスポンシブ版」で解説していきます。

Bubble と Firebase Realtime Database を連携してみよう!

みなさん、こんにちは!今回は、以前の Buckendless や Xano に続きまして、Bubble の外部 DB の候補の一つである Firebase Realtime Database との連携方法についてご紹介したいと思います。 Firebase のデータベース には「Cloud Firestore」と「Realtime …

BubbleでGPS機能を利用する方法

こんにちは!今回はBubbleでGPS機能を利用する方法をご紹介します。 この機能を使えば、現在地から目的地までの計算もできます。ウーバーイーツや、タクシーの料金アプリ等に応用できるので ぜひご一読ください! 1.GPSとは 2.本記事の目的 2-1.(補足)Curr…

BubbleとGoogle Tag Managerの連携方法 - BubbleにGoogle Analyticsタグを埋め込む

こんにちは!今回の記事では、「BubbleとGoogle Tag Managerの連携方法 - BubbleにGoogle Analyticsタグを埋め込む」をご紹介します。 Google Tag Managerは、ウェブサイトやモバイルアプリにGoogle AnalyticsやFacebook広告などの複数のマーケティングタグ…

twitter のような簡単な SNS を bubble で作ってみる(新レスポンシブ版)4:ツイートとユーザーの紐付けと本番環境へのデプロイ

TwitterのようなマイクロSNSをBubbleで作成する(新レスポンシブ版)シリーズ、第4回は「ツイートとユーザーの紐付けと本番環境へのデプロイ」の作成について、ご紹介します!

BubbleでDiscordダイレクトメッセージ送信機能を実装する

こんにちは! 今回の記事では、Discordでダイレクトメッセージ(以下DM)を送信する機能をBubbleで実装する方法をご紹介いたします。以下の記事でご紹介したDiscordチャンネルにメッセージを送信するアプリをBubbleで作る方法の応用版となります。 blog.noco…

twitter のような簡単な SNS を bubble で作ってみる(新レスポンシブ版)3: プロフィール画面の作り方

TwitterのようなマイクロSNSをBubbleで作成する(新レスポンシブ版)シリーズ、第3回は「プロフィール画面」の作成について、ご紹介します!

twitter のような簡単な SNS を bubble で作ってみる(新レスポンシブ版)2: サインアップとログイン/ログアウト処理

TwitterのようなマイクロSNSをBubbleで作成する(新レスポンシブ版)シリーズ、第2回は「サインアップとログイン/ログアウト処理」の作成について、ご紹介します!

Bubbleの検索機能「App search tool」を使ってみよう!

みなさんこんにちは! 今回は Bubble の開発には欠かせない、非常に便利な機能「App search tool」についてご紹介します。App search tool は、その名の通りアプリ内を検索してくれるツールですが、アプリが大きくなるにつれて、その利用価値は大きくなりま…

BubbleとXanoの連携方法について

みなさんこんにちは! 前回の記事では Xanoでできることや簡単な操作方法をご紹介しました。 blog.nocodelab.jp 今回は第2弾として、Bubble と Xano の連携手順をご紹介します。 また、Xano の 開発者向けの APIドキュメントは以下となっていますので、合わ…

twitter のような簡単な SNS を bubble で作ってみる(新レスポンシブ版)1: ツイートと一覧表示

1. はじめに 2. 新規アプリを作る 3. 新レスポンシブモードへ変更 4. 画面のデザイン 4.1. 4つのレイアウトタイプの解説 4.2. ヘッダー部分のデザイン 4.3. ボディ部分のデザイン 5. データベースの設計 5.1. テーブルのデザイン 5.2. データの作成 6. Tweet…

twitter のような簡単な SNS を bubble で作ってみる(新レスポンシブ版)

みなさん、こんにちは!今回は、新しいシリーズ記事のご紹介です。 本シリーズでは、ノーコードラボで過去にご紹介した「 twitter のような簡単な SNS を bubble で作ってみる(入門者向け)」を、昨年11月にリリースされた新レスポンシブ機能に対応させた内…

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. 今回使用した各プロパテ…