ノーコード「Bubble」の使い方・機能別実装方法マニュアル
ノーコードツールの中でも、特に多くの注目を浴びている「Bubble」。このページでは、Bubbleを初めて利用する方から中上級者まで、さまざまなニーズに応えるための解説記事をまとめています。基礎的な知識から機能ごとの実装方法など、Bubbleを使用する皆さまの開発の一助になれば幸いです!
※記事内リンクが貼られていない箇所はComing soon…。開発していく中で重要な項目は随時追加しコンテンツの充実度を上げていきます。
Bubbleは常に進化し続けるプラットフォーム。新しい機能や改善のアップデートが定期的に行われている関係で解説記事の内容と最新版Bubbleのエディタが異なる可能性があります。できるだけ最新の情報を発信しようと心がけてはいますが我々も人間ですので漏れがあるかもしれませんのでご注意ください。
Bubbleエディタの基礎知識
- Design(Appearance・Layout・Conditional)の基本的な使い方
- Workflowの基本的な使い方
- Dataの基本的な使い方
- Stylesの基本的な使い方
- Pluginsの基本的な使い方
- Settingsの基本的な使い方
- デバッカーの使い方
- Work flowの色分け/フォルダ分けをする方法
サインアップ・ユーザーの新規登録
- サインアップ機能を作る方法
- パスワードの表示/非表示設定の実装方法
- 既存のユーザー名で新規登録を行えなくする方法
- Math.jsとArbitrarを使って複数Inputの値を連結する方法(確認コードの照合に使える)
- 数ページに渡る新規登録をページ遷移なしで実装する方法
- 既存ユーザーが新しい他のユーザーを追加する方法
- Data APIを使ってユーザーを新規追加する実装方法
- パスワードの文字数に制限や指定を設定する方法
- 招待コードを入力しての新規会員登録について
ログイン・ログアウト
- ログイン機能を作る方法
- ログアウト機能を作る方法
- Googleソーシャルログイン機能を実装する方法
- LINEログイン機能を実装する方法
パスワードリセット
チャット・SNS
検索
Date Time Picker
アップロードした動画や画像の加工関連
List of texts
よく見かける機能
- ランキング機能を実装する方法
- シンプルな横スクロールメニューを作る方法
- 商品一覧で使える!RepeatingGroupのGroupを横スクロールさせる方法
- クリップボードに文章やページURLをコピーする機能を作る方法
- 郵便番号から住所を自動入力する機能の作り方
- PictureUploaderを別要素クリック時に開かせる方法
- Gmailアカウント風、ユーザー名の頭文字からアイコンを設定する方法
- スマホのカメラ/ビデオを起動する方法
- 長文の末尾を三点リーダーで省略する方法(複数行に対応)
- スライドショーを作る方法
- データをランダム表示する方法
- ボタンのクリック時に動画ファイルを保存させる方法
- テキストがURLのときに自動でリンクにする方法
- ページネーション機能を実装する方法
- アコーディオンメニューを実装する方法【1つ開くと他は閉じる】
- トップへ戻るボタンを作る方法【Scroll toで簡単実装】
- スクロール連動型アニメーションを実装する方法【プラグインAOS】
- IntersectionObserver風のスクロール連動アニメーションを実装する方法!Visibility Detector
- RepeatingGroupのセルの背景色を交互に設定する方法
- QRコードを生成する方法
- CSVでRepeatingGroupのデータを出力する方法
- 複数チェックボックスをワンクリックで全選択する機能
- Howler.jsで音声ファイルの再生・一時停止機能を作る方法
- アプリ上にPDFデータを表示させる方法
- 閲覧履歴を表示させる方法
- 数字をカンマ区切りにする方法
- 数値の千単位を「K」に、百万単位を「M」に変換して表示する方法
- テキストエレメントの一部分だけBBコードを使ってリンクを貼る方法
- Font AwesomeとBBコードでボタンのテキストの隣にアイコンを入れる方法
決済
- Stripeプラグインで決済機能を実装する方法
- Stripe決済での仲介手数料の設定方法
お問い合わせフォーム
ヘッダー・ハンバーガーメニュー
Custom stateの使い方
- Custom stateの基本的な使い方
- Custom stateでタブ切り替えメニューを実装する方法
アプリの公開
- アプリを本番公開するときの手順
- 独自ドメインを設定してアプリを公開する方法
- アプリをPWAとして公開する方法
- BDK Nativeを使ってBubbleアプリをネイティブ化する方法
Bubbleサポートチーム
プッシュ通知
- Webプッシュ通知を実装する方法
WordPressのデータをBubbleで取得する
デザイン
- Figmaのインポート機能の使い方
ChatGPT
- ChatGPTとの連携
広告掲載
- Google Adsenseの設定方法
作ってみた・こんなこともできる
- linktree(リンクツリー)・lit.link(リットリンク)風の複数リンクまとめ機能を実装する方法
- お絵描きや手書きができる機能の作り方