ノーコード ラボ

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

Bubble

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…

LINE Login Plugin and Line Message Plugin for Bubble!

※この記事は下記のブログ記事を英訳したものです。海外からの問い合わせが増えてきたため英訳しました。 blog.nocodelab.jp Background Preparation Plugin installation Register to LINE Developers Create a provider channel with LINE Developers LINE …

Bubble のアプリを誰かにプレゼントする方法

Bubble のアプリを誰かにプレゼントする方法 (1) プレゼントするアプリをコピーして、重要な情報を削除する (2) アプリを Transfer する まとめ こんにちは!ノーコード ラボの岡崎です。 今回は Bubble のアプリを誰かにプレゼントする方法についてご説明し…

Bubble の Repeating Group の使い分け

① Vertical scrolling(垂直スクローリング) ② Ext. vertical scrolling(拡張型垂直スクロール) ③ Full list(完全リスト) ④ Fixed number of cells(セル数の固定) ⑤ Horizontal scrolling(水平スクロール) まとめ みなさんこんにちは! 今日は、Bub…

bubble camp 生徒の方々からいただいた Bubble に関する質問集 part.3

皆さん、こんにちは!ノーコードラボの bubble camp 内で、生徒さんからいただいた質問まとめの第3回目です!今回も Bubble 開発におけるテクニックやアイデアなども含め、色々ご紹介していきたいと思いますので、どうぞお付き合いください! 1. Field type …

Bubbleで名言SNS「SHarK!!!」の簡易版を作ってみる(初級者向け)3:音声の録音&投稿、再生機能の作成方法

第3回 音声の録音&投稿、再生機能の作成方法 1. 音声録音機能導入 1.1 音声録音プラグインのインストール 1.2 「Popup tweet」の編集 1.2.1 録音開始マーク、録音中マークの設置 1.2.2 Audio Recorder & Vizualiserの設置 1.2.3 保存ボタンの設置 2. 音声再…

Bubbleでデバッガーを使ってみよう!

皆さんこんにちは。今回はプレビュー画面で使用できる、debugger(デバッガー)の使い方について説明していきます。これが分かると、アプリの開発がとても効率的にできるようになりますのでぜひ覚えていきましょう! デバッガーとは? デバッガーの機能 事前…

Bubble プラグイン:Twitterのツイートができる「Twitter Tweet」を作成しました

Bubble プラグイン:Twitterのツイートができる「Twitter Tweet」を作成しました Bubbleからツイートする方法 プラグイン公開URL デモサイト 使用方法 元号ジェネレータについて 準備をしよう TwitterのApp設定をしよう プラグインのインストールをしよう プ…

Bubbleで名言SNS「SHarK!!!」の簡易版を作ってみる(初級者向け)2:SNSに欠かせない「いいね機能」の導入と「いいねTOP」の表示方法

第2回 SNSに欠かせない「いいね機能」の導入と「いいねTOP」の表示方法 1. いいね機能の追加 1.1 アイコンとテキスト配置 1.2 データベース設計 1.3 ハートアイコンをクリックしたときの処理 1.3.1 クリックしたユーザーの情報をTweet dataに入れる 1.3.2 カ…

Bubbleの新機能 Slugを使ってみよう!

皆さん、こんにちは!今回は最近Bubbleに新しく追加されたSlugの機能を紹介していきます。 Slugとは 突然ですが、Bubbleの開発画面から Dataタブ -> App dataタブ を開いたときに、下図の赤枠のように、各データベースに「Slug」という項目が増えていること…

思考の発展をアシスト!Bubbleで作るWebアプリ「nukadoco -ヌカドコ-」を紹介!

今回は、ノーコード ラボが提供するBubbleの個別指導サービス「Bubble Camp」の受講生である西村さんが作った「nukadoco -ヌカドコ-」(https://app.nukadoco.com/)をご紹介します。 nukadoco -ヌカドコ- とは 作者からのメッセージ nukadocoの活用方法 実…

Bubbleで「LINEログイン」と「LINEメッセージ送信」ができるプラグインを作成しました

皆さんこんにちは!今回はノーコード ラボで開発した以下2つのプラグインについて紹介していきます。 LINEアカウントによるソーシャルログインを実現する「LINEログイン」のプラグイン BubbleからLINEへメッセージを送信できる「LINEメッセージ送信」のプラ…

Bubble で作った Webアプリをかんたんに多言語対応する方法(Weglot)

Weglotとは? Weglotを使うメリット 簡単! メンテナンス SEOに対応している 翻訳の精度 100以上の言語ペアに対応 Weglotのサインアップ方法 Weglotのプライスプラン 実際にWeglotを使ってみよう! 翻訳の修正 終わりに みなさんこんにちは! みなさんのホー…

Bubbleで名言SNS「SHarK!!!」の簡易版を作ってみる(初級者向け)1: twitterの共有ボタンや、タイムラインの埋め込み

みなさんこんにちは。NoCodeCamp杯にて、「ノーコードラボ賞」を受賞させて頂いたチームリアルカレッジのしげです。 受賞作品「SHarK!!!」の簡易版を作ってみるということで、初級者さん向けに解説していきます!ちなみに「SHarK!!!」の公式twitterはこちら…

Bubble で名言SNS「SHarK!!!」の簡易版を作ってみる(初級者向け)

前提条件 目的 作成方針 コンテンツ 動画コンテンツ このシリーズでは、書籍の名言やセリフを投稿できるSNSサービス「SHarK!!!」の簡易版を作成していきます! 完成版は次のリンクから確認できます。 https://sharkclone.bubbleapps.io/version-test?debug_m…