ノーコード ラボ

NoCode 関連のツールの紹介、使い方などをやさしく説明しています。

初級者向け

Bubble で作るシンプルなマッチングサイト(初級者向け)

みなさん、こんにちは!今日は新シリーズのご案内です!今回は、Bubble でシンプルなマッチングサイトを作成していきます。作成するのは、CrowdWorks のような仕事の募集や応募ができるサービスです。 また、本シリーズは初級者編ということで、Bubble を初…

【Bubble初級者向け】オンラインショップにStripe Payment Linksを使ってクレジット決済機能を実装する

こんにちは!今回は、オンライン決済サービスStripeのPayment Linksという機能を使ってBubbleで簡単にクレジット決済機能を実装する方法をご紹介します! Payment Linksは、Stripeが提供している決済機能の実装方法の中でも特に実装が簡単な方法です。その方…

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

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

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

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

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

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

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

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

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 みなさん、こんにちは!本シリーズについて、前回記事から随分と期間…

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

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

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

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

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

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

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 は、会議などの時間を調整できるサービスで無料プランもあり、本家サービ…

Softr と Stripe を連携して、収益化できる Webアプリを構築してみよう

1. Softrの新しい機能 2. Softr の新機能を使ってみよう! 2.1. Airtableと連携しよう 2.2. 有料会員限定コンテンツの作成 2.3. Stripeチェックアウトの設定 2.4. ルールに基づいた可視化設定 2.5. 動作確認 2.6. ユーザーの手動管理機能 2.7. サインアップ…

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

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

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

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

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

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

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

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

bosyuさんもどきをBubbleで作ってみる!(初級者向け)

bosyuさんもどきをBubbleで作ってみる!(初級者向け) 前提条件 目的 作成方針 機能内容 コンテンツ bosyuさんもどきをBubbleで作ってみる!(初級者向け) Bubbleでノーコードライフ楽しんでいますか?? Bubble初級者向け講座として、 第1弾は、iPhoneメ…

iPhone のメッセンジャーもどきを Bubble で作ってみる(初級者向け)

前提条件 目的 作成方針 作成予定 コンテンツ Bubble の初級者向けコンテンツを作成すると言っておきながら、ひと月ほど経ってしまいましたが、本日から少しづつ作っていこうと思います。 このシリーズで作成するのは、iPhone のメッセンジャーのような Web…