①フォントファイルをローカルにダウンロード ②CSSファイルを新規作成し→下記を記述→そのまま開いておく @font-face { font-family: 'フォント名'; src: url('https:パス');} ※ファイル名は適当に設定してよいが、フォントファイルと同名がわかりやすい。 ③Bu…

表示順Fieldを持つData typeに、List型のFieldを設け、そこに表示したいData typeを紐づける方法 １．Option sets、Data typeを設定、作成する ２．入力フォームを作成する ３．ワークフローを設定する ４．Repeating Groupの設定 Data typeの情報を、紐づけ…

リンクプレビューとは、URLに設定されたタイトル、イメージ、説明文などを表示する機能です。 １．Link Previewのプラグインを追加＆設定 ①下記リンクからLink Preview公式サイトにてユーザー登録 http://Link Preview ②ダッシュボードに表示されるYour API …

１．Mapを設置 ①Singleを選択 ②Arbitrary textを選択 ③任意の住所や電話番号や店名を入力

タブの切替 ページの切替 １．アカウントA用のページを作成 ２．アカウントB用のページを作成 ３．マイページボタンの設定 タブの切替 タブによる表示切替はこちら ①タブＢのワークフローををコピペ ②When…を右クリック⇒Replace by another typeをクリック ③…

①ログイン時に表示するパーツ、ログアウト時に表示するパーツを設置 ②Layoutを下図の通り設定 ③ログアウト時のパーツに下図の通りConditionalを設定 ④ログイン時のパーツのConditionalに、 ⑤とは表示/非表示を逆に設定

デザイン ワークフロー １．GroupFocusを表示するワークフロー ２．GroupFocusを非表示にするワークフロー デザイン IconとGroupFocusを設置 ワークフロー １．GroupFocusを表示するワークフロー ①Iconクリック時にGroupFocusを表示する設定 ② ①の後に、Set …

１．APIキーの取得と設定 nocodesemi.epic-s.co.jp ※Google Cloud側でBubbleアプリのドメインを指定する際は、 「・・・io」までを指定する ２．デザイン ①SaerchBoxを設置 ②Placeholderに文言を入力 ③Chonces StyleにてGeographic placesを選択 ④Singleを選…

１．デザイン ２．ワークフロー １．デザイン ① 下図のように、上部にタブを、 下部に、タブと連動して表示させるコンテンツを縦に配置する。 タブ内に、マーカーの役割をするShapeを配置する。 ② タブBのShapeのThis element is visible on page load のチ…

メニューバーが表示しきれない画面幅で、横スクロールを表示 任意の画面幅以下で、メニューバーからハンバーガーメニューに切り替える 任意の画面幅以下で、縦複数列表示から縦1列表示へ切り替える メニューバーが表示しきれない画面幅で、横スクロールを表…

①タイムラインを表示したい場所に、HTMLを設置 ②Display as an iFrameにチェック ③こちらのページにて表示したいアカウントのURLを入力 ④Embdded Timelineを選択 ⑤コードをコピー ⑥ ①で設置したHTMLにコードを張り付け

①エレメントにIDを付与できる設定にチェック ②CSSを適用したいエレメントにIDを設定 ③Popupを設置し、その中にHTMLを設置 ※Textでタイトルを付けておくと後で分かりやすい ④CSSを記述

Privacy設定 User その他のデータベースの例 運営ページ（個人情報一覧画面） その他の閲覧を制限をしたいページ Privacy設定 User ①データベース：Userに、「運営者」というFieldをyes/no型で作成しておく。 ②運営者には、yesを入力 ※運営者設定は、運営画…

Ⅱ．ワークフローを設定する １．削除用アイコンクリック時 ２．Popupの各ボタンクリック時 「削除する」クリック時 「キャンセル」クリック時 Ⅰ．デザインを作成する ①RepeatingGroupを設置＆表示項目を設定 ②RepeatingGroupの中に、削除用のアイコンを設置…

ドロップダウン検索（Option setsの設定をしているFieldの場合） １．Dropdownを設置し、下記の通りAppearanceを設定 ２．RepeatingGroupのAppearanceを下記の通り設定 数値検索 １．Dropdownを設置し、下記の通りAppearanceを設定 ２．RepeatingGroupのAppe…

１．デザインの作成 ２．クレジットカード情報の表示設定（下図の通り） ３．「クレジットカード変更」と「クレジットカード登録」それぞれに、下図の通りワークフローを設定する ４．コンディショナルを設定 １．デザインの作成 ２．クレジットカード情報の…

１．いいね残数用のFieldを作成 ２．決済後のフローにいいね残数を増やすフローを追加 ３．いいね残数が有る場合にいいねできるように設定する ４．いいねしたら、いいね残数が１つ減るように設定する ５．いいね残数が無い時にいいねしようとした場合に、ポ…

１．Stripeにてアカウントを作成 stripe.com ２．Stripeのプラグインをインストール ①Add pruginsをクリック ②「stripe」で検索＆Install ３．APIキー等を設定 以下、Stripeのページでの操作 ①「開発者」をクリック ②「APIキー」をクリック ③「公開可能キー…

データベースの作成 １．チャットに参加するユーザー情報を格納するデータベースの作成 ２．メッセージを格納するデータベース（以下、Chatと称す）を作る デザインの作成 １．マッチングページの作成 ２．チャットページの作成 ３．チャットリストページの…

①Navigationをクリック ②Go to previous pageをクリック

マッチング機能 いいねをくれた人リスト マッチング機能 １．いいね機能を設置 詳しくはこちら ２．マッチング時に表示するページを作成する ３．いいねしていない時アイコンにページ遷移の設定 ①"Navigation"をクリック ②"Go to page"をクリック ③"Destinat…

１．データベースに「いいね」用のfieldを作成 ※"this field is a list"にチェックを入れる ２．アイコンの設置 いいねしてない時と、している時のアイコンをrow型でグループ化する ３．いいねしてない時のアイコンにワークフローを設定 ①Dataをクリック ②Ma…

手順 ①ShapeかButtonかGroupを設置し、幅、高さを設定 ②Background styleにて、Imageを選択 ③Center the imageにチェックを入れる ポイント 単に画像を張り付けたいのなら、Shape。 画像の上にテキストを重ねたいなら、ButtonかGroup。 比較的小さなサイズで…

POST形式 GET形式 POST形式 １．遷移前、遷移後のページを用意 ２．ページ遷移のきっかけとなるエレメントにワークフローを設定する ①"Navigation"をクリック ②"Go to page..."をクリック ③"Destination"にて、遷移したいページを選択 ④"Data to send"にて、…

全ユーザー情報を表示する ログイン中ユーザーと異なる性別のみ表示する ログイン中ユーザーと同じ居住地の場合に"Font color"を変える OR条件 高度な条件設定 全ユーザー情報を表示する ①"Repeating group"を設置 ②"Repeating group"内に"text"等エレメント…

１． ①"Containers"内"Floating Group"を設置 ②"Vertically float relative to"にて、"Bottom"を選択 ③"Layout"タブの"Container Layout"にて、"Row"を選択 ④"Make this element fixd-width"のチェックを外す ⑤"Min width"を設定 ⑥"Min height"を設定 ⑦外観…

基本の変更 ログイン情報の変更 基本の変更 １．デザインを作成（紐づけるフィールドも用意しておく） ※エレメントにより名称が異なるが、 Initial content、Default value、Dynamic image等に 設定したデータが、初期値として表示される。 Placeholderに設…

１． ①"Text"を設置 ②"Insert dynamic data"をクリック ２． ①"Current User's"を選択 ②表示したいフィールドを選択

1レコードの1フィールドの情報を表示する 1レコードの複数フィールドの情報を表示する 複数レコードの情報を表示する（一覧表示） list型のFieldのデータをRepeating Groupで表示する "Option sets"を設定した場合の注意点 データが入力されていない場合に、…

１．デザインを作成する "Input"=文字入力 "Multiline"=複数行入力 "Picture Uploader"=画像入力 "Dropdown"=選択肢入力（詳しくはこちら） ※空欄では登録できないようにする設定は、下図の通り。 ※空欄で登録ボタン押下時に、背景色を変える設定は下図の通…