第３回パスワードポリシーについて パスワードポリシーって？ 1. パスワードポリシーを設定しよう 2. エラーメッセージを表示しよう 2段階認証について ログアウトについて 予告 Bubble でログイン処理をしてみよう！コンテンツ一覧 第３回パスワードポリシ…

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

第２回パスワードをリセットしよう パスワードリセットの流れ 1.パスワード変更用のメールアドレスのポップアップを作ろう 2.パスワードリセット用メールを送信しよう 3.パスワードをリセットしよう エラーについて 予告 Bubble でログイン処理をしてみよう…

2020/9/2 追記 あぽとさんに協力していただき、このページの内容を動画にし、YouTube にアップしました。 動画の方が入門者の方にはわかりやすいと思いますので、是非見てみてください！ twitter のような簡単な SNS をBubble で作ってみる（入門者向け）５…

第１回 ユーザ登録をしてみよう ユーザ登録の流れについて 1.サインアップをしよう！ 2.仮登録から本登録へ 3.ログインについて 2020/01/10 補足（Q&A） Q1: 仮登録時（ユーザーがメールを確認する前）には User テーブルに該当のユーザーは登録されるのか？…

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

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

BubbleでAPIを使ってみよう! 画面を作成しよう APIを使おう APIConnetorをインストールしよう APIConnetorの設定をしよう APIConnetorを実際に呼んでみよう まとめ おすすめ記事 BubbleでAPIを使ってみよう! 巷では様々なAPIが提供されていますが、Bubbleで…

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

Adalo とは？ www.adalo.com Adalo という no-code のツールをご存じでしょうか？ このブログで過去に登場した Glide に少し似ていて、このプラットフォームを利用すれば、コードを記述せずに Webアプリやネイティブのモバイルアプリ（Android, iOS）を作る…

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

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

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

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

Podiaとは？ オンラインコースのプラットフォームとしてはTeachableが老舗的存在ですが、Podiaという名前を聞いたことがあるでしょうか？ Podiaは、Teachableの競合として近年良く名前が挙げられているサイトです。 https://www.podia.com/ 日本語での解説記…

最近は Youtube をはじめ、色々なところで動画で学習する機会が増えてきています。 Youtube は無料で見れますが、もう少し詳しい動画が見たいとなると、私の場合は Udemy を調べてみたりしています。 Udemy は学習に特化した有料の動画配信サイトです。日本…

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

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

Integromatとは 『Integromat』（現 Make）というWebアプリをご存知でしょうか？ www.make.com ※ 2022年2月に「Integromat」は「Make」へとリブランドされました。 Web上には様々なWebアプリがありますが、それらを連携させたり、手動でしていたものを自動で…

1.はじめに 2.DataにTypeを追加しよう。 3.元号の画像を作成しよう 3-1.新規画面を作成しよう。 3-2.ページロードで画像を作成しよう。 3-3.画像のURLをDataに登録しよう。 4.Twitter連携してみよう。 4-1.Zapierを登録しよう。 4-2.BubbleからZapierを設定…

Zapierとは？ Zapierってご存知でしょうか？ zapier.com 普段行っているWebアプリケーションを使用する業務で、自動化できたら良いな、と思うことはありませんか？ 例えば、TwitterやFacebookの情報をSlackに一元管理するとか。 それを自動化できるのがZapie…

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

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

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

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

1. Bubbleのプラグインを使ってみよう。 1-1．はじめに 2. プラグインを準備しよう。 2-1. プラグインをインストールしてみよう。 2-2. HTMLのIDを利用できるように設定しよう。 3. プラグインを使用してみよう。 3-1.画像をグループ化しよう。 3-2.プラグイ…

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

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

今回は「4択クイズアプリ」を通して、Bubble の 「Custom state」について、ご紹介したいと思います。 2020/03/23 Bubble の inspector 機能を使用して「Custom state」の作成する方法について追加しました。また、Page Load 時に行っていた「Custom state」…

Airtableでシフト表を作成 1.新規作成 「＋Add a base」をクリックし、「Start from scratch」を選択します。 新規作成のbase名を「シフト表」とし、色を選択します。今回はカレンダーと連携をしますので、下記の画像のカレンダーアイコンを選択します。 2.…