ノーコード ラボ

NoCode 関連のツールの紹介、使い方などをやさしく説明しています。Chatbot の運用実験は終了しました。ご協力いただいたみなさん、ありがとうございました。

2019-01-01から1年間の記事一覧

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

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

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

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

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

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

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

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

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

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

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

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

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

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

BubbleでAPIを使ってみよう!

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

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

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

ノーコードでウェブアプリ、ネイティブモバイルアプリが作れる!Adalo の使い方

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

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

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

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

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

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

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

Bubbleで検索してみよう!

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

Podia vs Teachable オンラインコースのプラットフォームで使うならどっち?

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

Udemy のようなオンライン学習サイトを「Teachable」で作ろう!

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

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

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

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

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

ノーコードでタスク化!Integromatを使ってみる!

Integromatとは 『Integromat』というWebアプリをご存知でしょうか? www.integromat.com Web上には様々なWebアプリがありますが、それらを連携させたり、手動でしていたものを自動でできたら良いなと思うことはありませんか? 例えば、Google Calendarに登…

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

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

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

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

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

今回は、Bubbleでフェードインしてくるような動きのあるメニューの作成方法についてご紹介したいと思います。 1. Designタブの設定 2. Workflowタブの設定 3. まとめ 4. おすすめ記事 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のプラグインを使ってみよう。 1-1.はじめに 2. プラグインを準備しよう。 2-1. プラグインをインストールしてみよう。 2-2. HTMLのIDを利用できるように設定しよう。 3. プラグインを使用してみよう。 3-1.画像をグループ化しよう。 3-2.プラグイ…

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」について、ご紹介したいと思います。 2020/03/23 Bubble の inspector 機能を使用して「Custom state」の作成する方法について追加しました。また、Page Load 時に行っていた「Custom state」…

Airtableでシフト表を作成してみよう

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