HapInS Developers Blog

HapInSが提供するエンジニアリングの情報サイト

BubleのTips


このページでは、Bubbleの小技や部分的な発見などを記載

①ローディングアニメーション

やりたいこと

ページにアクセスしたとき、ゲーム起動画面のようなスプラッシュ画面を表示させたい

作成方法

  1. プラグイン>canvas ui elements選択
  2. Visual element>loading screen選択
  3. Lottiというサイトからアニメーションコードをコピー
  4. Visual elementのAppearanceにコードをペースト

ローディングアニメーションデータの参考サイト

lottiefiles.com

②レスポンシブヘッダー1

やりたいこと

バイス別で以下のように表示をさせたい

  • PCの時:通常のメニュー表示
  • SPの時:通常メニューは隠してハンバーガーメニューのみの表示

作成方法

  1. Preset page wide>Full wodeにする
  2. ヘッダーはRowでレイアウト選択
  3. Groupエレメント配置
  4. Textエレメントなど必要な要素をGroup内に入れていく
    1. 各要素位置を設定したい場合、marginで配置する
    2. アイコン+テキストのメニューの場合は、Group配置してからエレメント配置すると良い
    3. Groupのレイアウトは「Fixed」でOK(完成まではここをFixedにしておかないとサイズ変更しづらい)
  5. 配置したメニューGroupをひとまとめのGroupにする
    1. Containerを右寄りにすると良い配置になる
  6. ここまでできたら、ページに配置したい要素を置いていく
    1. ページのレイアウトは必ずcolumn
  7. 画像の配置がある場合は、比率が崩れないようにする
    1. keep element aspect radio fixedをチェック
    2. Aspectの数値を「1920:1080」が適宜

補足

固定でスクロール追従にするには、Type of contentsを「FloatingGroup」にする

参考サイト

qiita.com

③レスポンシブヘッダー2

やりたいこと

ヘッダーメニューのレスポンシブ切り替え調整を設定をしたい

作成方法

  1. PCのヘッダーメニューが768px前後(任意)で非表示になるようにする
    1. Conditionalの設定
      1. When:Current page width ≦ 768
      2. This elemnt is visibleのチェックを外す
      3. When:Current page width ≧ 768
      4. This elemnt is visibleのチェックを入れる
    2. Layoutの設定
      1. Collapse when hiddenにチェックを入れる
      2. エレメントの存在自体が物理でなくなる
  2. SP用のハンバーガーメニューアイコンが768px前後(任意)で非表示になるようにする
  3. PCのヘッダーGroupに設定したConditionalをコピー
    1. 右クリック>copy conditional
  4. SP用のハンバーガーメニューアイコン選択でペースト
    1. 右クリック>paste conditional
    2. Conditionalの設定(不等記号を反対にするだけでOK)
      1. When:Current page width ≧ 768
      2. This elemnt is visibleのチェックを外す
      3. When:Current page width ≦ 768
      4. This elemnt is visibleのチェックを入れる
    3. Layoutの設定
      1. Collapse when hiddenにチェックを入れる
        1. エレメントの存在自体が物理でなくなる

補足

SP用のハンバーガーメニューアイコンは、PC用ヘッダーGroupに入らないように配置する

Gifアニメーション

やりたいこと

ページに、Gifのanimationを入れたい

作成方法

  1. 透明の「Floating Group」を配置する
    1. Floating GroupのStyleをRemove styleで消して、Styleを外して設定すればOK
  2. 「1.」の中にimageエレメント配置
  3. 「2.」の中にHTMLエレメント配置
  4. LottieFileアニメーションコード(任意のGifアニメに配布されている)をコピー
  5. 「3.」に張り付ける

参考サイト

webpia.jp

⑤画像アップロード

やりたいこと

ページに、画像のアップロード機能を設定したい

作成方法

  1. Picture Uploader設置
  2. Dynamic Imageをクリック
  3. Parenet Group’ UserまたはCurrent Page User(現在の編集対象ユーザー)を指定
    1. Parent Group(親グループ)とは何を指す?これは、直上のグループ
  4. profile_imageを「3.」の後に候補から追加
    1. 「データの参照元として指定したCurrent Page Userのデータのうち、profile_image列に格納されている画像データを参照して表示せよ」という実行命令になる
  5. Apperaranceで任意のサイズ、Styleにする
  6. 必要に応じて、Placeholderも変更する

参考サイト

note.com

⑥動的背景

やりたいこと

背景データをページ最背面に置きたい

作成方法

  1. 任意のページ選択
  2. ページのエディター>Appearance>BackgroundStyle>imageまたはvideoにする
  3. uploadで任意のファイルを入れる

⑦ダウンロード機能の制限

やりたいこと

ログインしていない状態の時、ダウンロードはできない状態にしたい

作成方法

  1. ダウンロードButtonのエディターのConditionalを以下に設定する
    1. When :Current User is loggedout
    2. This element is visibleのチェックを外す
  2. 「ログインしているときのみ表示」という設定になり、制限がかかる

SEO分析

やりたいこと

Bubbleで作成したページを、サイト分析したい

作成方法

GoogleAnalytics、Microsoft Clarity
Bubbleからプラグインで導入すればOK
GoogleSearchConsole
1. GoogleSearchConsole起動 2. 「所有権の確認」>HTMLタグを選択 3. メタタグをコピーする 4. ページのエディター内に、「3.」のメタタグを貼る

参考サイト

note.com clarity.microsoft.com www.nocodeforum.orgwww.nocodeforum.org

⑨Favorite Icon(ファビコン)

やりたいこと

Bubbleで作成したAppのファビコンを任意の画像にしたい

作成方法

Settings - General の General appearance に Favicon に画像をアップする 注意:有料プランじゃないと反映されない可能性あり

⑩ページサイズの基本設定

やりたいこと

PCviewの幅、SPviewの幅、それぞれ平均的サイズ設定を作業前に決めておきたい レスポンシブにするときに、決め打ちの数値あると、エレメントのサイズや配置もスムーズ

作成方法

以下を基本でページ作成及びレスポンシブ設定すると良い

  • SP:320(iPhone:375、android:360)
  • iPad:768(500、520)
  • ブレイクポイント:520
  • PC:指定しない、960(左にメニューがある場合)、1280

参考サイト

zenn.dev