ノーコード ラボ

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

Bubble

bosyu さんのような OGP画像をかんたんに作れる Web アプリ の作り方

こんにちは!ノーコード ラボの岡崎です。 先日から bosyu さんっぽいものを bubble で作ってみて、その作り方を bubble の初級コースとして記事にできないかなと考えています。 その調査段階で「bosyu さんのような OGP画像をかんたんに作れる Web アプリ」…

Bubbleでログイン処理をしてみよう!~第4回ソーシャルログインをしよう

第4回ソーシャルログインをしよう Bubbleでノーコードライフ楽しんでいますか? ログイン処理シリーズのブログも第4回、ついに今回が最終回になりました。 第3回で予告しましたとおり、ソーシャルログインに触れていきます。 これまでのログイン処理シリ…

Bubble で SendGrid を使ってみる

SendGrid を bubble で使いたい 前回に引き続き、SendGrid 関連の記事となります。 当 nocodelab でお馴染みの bubble ですが、こちらの Plugin 機能を使って SendGrid 経由で bubble からメールを送信することができます。 今回は、そのやり方についてご説…

Bubble でハマってしまった場合にやるべき唯一のこと(Application rights の設定)

明けましておめでとうございます。 今年もどうぞよろしくお願いいたします。 年末年始、Twitter を見ていると、Bubble に挑戦している方を何人か見かけました。 独力で挑戦するのは NoCode と言えど、大変だと思います。 何時間もハマってしまった場合は、誰…

Bubbleでログイン処理をしてみよう!~第3回パスワードポリシーについて

第3回パスワードポリシーについて Bubbleでノーコードライフ楽しんでいますか? ログイン処理シリーズのブログも第3回になりました。 第1回はユーザ登録~ログインまで blog.nocodelab.jp 第2回はパスワードをリセットする、でした。 blog.nocodelab.jp …

Bubble の人気プラグインランキング トップ20(2019年12月25日調べ)

こんにちは!ノーコード ラボの岡崎です。 Bubble には、より早く簡単で安全にアプリを作れるようにするためにプラグインが多数用意されています。 Bubble 純正のプラグインの他、サードパーティも多くのプラグインを作っています。 そこで、今回は 2019年12…

Bubbleでログイン処理をしてみよう!~第2回パスワードをリセットしよう

第2回パスワードをリセットしよう Bubbleでノーコードライフ楽しんでいますか? 先日Bubbleのユーザ登録についてブログを書かせてもらいました。 blog.nocodelab.jp 前回でユーザ登録~ログインまでを説明しましたが、 今回はログイン処理のパスワードを忘…

twitter のような簡単な SNS をBubble で作ってみる(入門者向け)5: レスポンシブデザイン対応

こんにちは! ノーコード ラボの岡崎です。 twitter のような簡単な SNS をBubble で作ってみる(入門者向け) ということで前回までで4回連載させていただき、完結と思っていたのですが、「スマホでみるとレイアウトが崩れる」というご質問をいただきまし…

Bubbleでログイン処理をしてみよう!~第1回ユーザ登録をしてみよう

第1回 ユーザ登録をしてみよう Bubbleでノーコードライフを楽しんでいますでしょうか? Bubbleでは、今までの記事でもあったように、様々な機能がノーコードで実現できますよね! なんとログイン処理も簡単に実装できてしまうんです! エラーチェックもして…

Bubble ヘッダーの固定とレスポンシブメニュー

今回は、質問いただきました「ヘッダーを固定する方法」と「レスポンシブメニュー(スマホの時はハンバーガーメニューにする方法)」について、ご紹介したいと思います。 以下にサンプルページも用意していますので、ご参考くださいね。 https://nocode-samp…

twitter のような簡単な SNS をBubble で作ってみる(入門者向け)4: ツイートとユーザーの紐付け、本番環境へのデプロイ

前回の記事を書いてから随分と開いてしまいました。 今回の記事でこの「twitter のような簡単な SNS をBubble で作ってみる(入門者向け)」シリーズは最終回となります。 今回は、ユーザーとツイートを紐付けて、誰がどんなツイートをしているのかを表示さ…

BubbleでAPIを使ってみよう!

BubbleでAPIを使ってみよう! 巷では様々なAPIが提供されていますが、Bubbleでも簡単にAPIを使うことができます。 今回はサンプルとして、よく入力画面である「郵便番号から住所を取得する」を行います。 画面を作成しよう 今回のサンプルは、入力された郵便…

Bubble で作成!「学習サポートアプリ」をリリースします。

今回は、Bubbleを使用して実際に作成したアプリについてご紹介したいと思います!本アプリは、英語を始め語学を学習中の方や、試験勉強のツールとして活用できるように作成している「学習サポートアプリ」ですが、是非 Bubbleを学習中の方もサンプルアプリと…

Bubbleでのバリデーションチェック方法

ノンコーディングでアプリが作成できるプラットフォームとして、このブログで何度も登場している bubble ですが、今回はバリデーションチェックのやり方についてご説明します。 アプリを作成する際、データの整合性を担保するためにはバリデーションチェック…

Bubble でドラッグ&ドロップの並び替えをする方法(発展編)

今回は、前回の記事でご紹介した、基本の並び替えを発展させて、もう少し複雑な並び替えについてご紹介したいと思います。 並び替えの仕様は以下の通りです。 従業員はチーム内でも、もしくはチームを移動しても並び替えを行うことができます。 また、チーム…

Bubble でドラッグ&ドロップの並び替えをする方法

今回は、Bubbleでドラッグ&ドロップのプラグイン「Draggable Elements」を使用して、並び替えを行う方法についてご紹介します。 では、早速はじめましょう!今回のゴールは以下のようにドラッグ&ドロップで並び替えをすることです。ドラッグすると青色のボ…

Bubbleで検索してみよう!

Bubbleで検索してみよう! Webアプリを作る時に、検索画面、というのはよくありますよね。 外部のDBを使用する場合もあるかと思いますが、ここでは、BubbleのDataを使って検索する方法をお伝えします。 検索画面を作ってみよう まずは簡単に検索画面を作りま…

Bubble開発の小技集!便利な機能3つ

今回は、これから Bubbleで開発したい!もしくは、Bubble開発を始めたばかり!という方に、Bubble の小技集として、知っておくと便利な機能3つをご紹介したいと思います。 その1:セーブポイントを利用しよう! その2:レイアウトには Arrange メニュー そ…

Bubbleで作成したアプリをネイティブ化する方法

今回は、Bubbleで作成したアプリを Jasonelle を使用してネイティブ化する手順について、ご紹介します。 Jasonelle では、JSONを利用してアプリ化を行います。JSONは、サーバにファイルとして直接配置するか、もしくは Bubbleの API Workflows を利用する2種…

BubbleでTwitterと連携してみよう!

1.はじめに 先日Bubbleで元号ジェネレータの作成方法について説明しました。 (その時の記事はコチラ↓) blog.nocodelab.jp さらに、プラグインを利用して、画像ダウンロードのところまで次の記事で説明しました。(その時の記事はコチラ↓) blog.nocodelab.…

Bubble で データの新規登録と更新を行う方法

今回は、Bubble の基本的なデータ操作である「新規登録」と「更新」する方法について、サンプルページの作成を通じて ご紹介したいと思います。 1. 作成するサンプルページ 1-1. 画面イメージ 1-2. 仕様 1-2-1. 更新 1-2-2. 新規登録 2. 手順 2-1. Dataタブ…

Bubble で フェードインしてくるメニューを作成する方法

今回は、Bubbleでフェードインしてくるような動きのあるメニューの作成方法についてご紹介したいと思います。 1. Designタブの設定 2. Workflowタブの設定 3. まとめ 1. Designタブの設定 まず メニューのアイコンから配置していきましょう。今回はプラグイ…

Bubble 値を受け渡す「Data to send」を使いこなそう!

前回の記事で、ページ間の値の受け渡し方法である「QueryString」と「Data to send」をご紹介しましたが、今回は後者の「Data to send」について、もう少し詳しくご紹介したいと思います。 blog.nocodelab.jp 「Data to send」まとめ 「Data to send」で出来…

Bubble ページ間の値の受け渡し方法について

今回は Bubble でページ間において、値をどのように受け渡すかを、以下の2種類の方法でご紹介したいと思います。 QueryString(クエリ文字列、URLパラメータ)で受け渡す Data to send を利用する 1. クエリ文字列(QueryString、URLパラメータ)で受け渡す …

Bubbleのプラグインを使ってみよう。

1. Bubbleのプラグインを使ってみよう。 Bubbleでは、様々なプラグインが用意されています。 自作でもプラグインはできますが、既に公開されているものがあればそれを利用する方が便利ですよね。 ただ、有料、無料とあり、有料のものは、有料プランを利用し…

Bubble で作る「フラッシュカード」: カウントダウンタイマーの作り方

今回は「4択クイズアプリ」に引き続き、Bubbleを使った「フラッシュカード」の作り方について、カウントダウンタイマーを中心にご紹介したいと思います。 1. アプリ概要 1-1. 作成するアプリ 1-2. 前提条件 1-3. アプリの主な機能 2. 必要項目の洗い出し 2-1…

Bubble で作る「4択クイズアプリ」4:ワークフローの設定

今回は、4択クイズアプリ の最終回です。設定するワークフローについて解説したいと思います。なお「Set state」となるワークフローの設定については、前回の記事をご参考ください。 関連記事 Bubble で作る「4択クイズアプリ」1:アプリ概要とデータベース…

Bubble で作る「4択クイズアプリ」3:Custom state の使い方

今回は「4択クイズアプリ」を通して、Bubble の 「Custom state」について、ご紹介したいと思います。 関連記事 Bubble で作る「4択クイズアプリ」1:アプリ概要とデータベース作成 Bubble で作る「4択クイズアプリ」2:エレメントの配置と設定 関連記事 …

Bubble で作る「4択クイズアプリ」2:エレメントの配置と設定

今回は前回の記事で解説した「4択クイズアプリ」で使用するエレメントを、実際に「Design」タブに配置して設定していく方法を解説したいと思います。 blog.nocodelab.jp 1. 枠組みの作成 2. データベースと連携する「Repeating Group」の配置と設定 3.「…

Bubble で作る「4択クイズアプリ」1:アプリ概要とデータベース作成

元号ジェネレータ、Twitter風SNS に続き、今回は「4択クイズアプリ」を Bubble で作成する手順について、ご紹介します!まずアプリの全体を把握するため、画面要素などの基本的な構成やデータベース作成について解説したいと思います。 アプリ概要 作成する…