このページでは、Bubbleの小技や部分的な発見などを記載
- ①ローディングアニメーション
- ②レスポンシブヘッダー1
- ③レスポンシブヘッダー2
- ④Gifアニメーション
- ⑤画像アップロード
- ⑥動的背景
- ⑦ダウンロード機能の制限
- ⑧SEO分析
- ⑨Favorite Icon(ファビコン)
- ⑩ページサイズの基本設定
①ローディングアニメーション
やりたいこと
ページにアクセスしたとき、ゲーム起動画面のようなスプラッシュ画面を表示させたい
作成方法
- プラグイン>canvas ui elements選択
- Visual element>loading screen選択
- Lottiというサイトからアニメーションコードをコピー
- Visual elementのAppearanceにコードをペースト
ローディングアニメーションデータの参考サイト
②レスポンシブヘッダー1
やりたいこと
デバイス別で以下のように表示をさせたい
- PCの時:通常のメニュー表示
- SPの時:通常メニューは隠してハンバーガーメニューのみの表示
作成方法
- Preset page wide>Full wodeにする
- ヘッダーはRowでレイアウト選択
- Groupエレメント配置
- Textエレメントなど必要な要素をGroup内に入れていく
- 各要素位置を設定したい場合、marginで配置する
- アイコン+テキストのメニューの場合は、Group配置してからエレメント配置すると良い
- Groupのレイアウトは「Fixed」でOK(完成まではここをFixedにしておかないとサイズ変更しづらい)
- 配置したメニューGroupをひとまとめのGroupにする
- Containerを右寄りにすると良い配置になる
- ここまでできたら、ページに配置したい要素を置いていく
- ページのレイアウトは必ずcolumn
- 画像の配置がある場合は、比率が崩れないようにする
補足
固定でスクロール追従にするには、Type of contentsを「FloatingGroup」にする
参考サイト
③レスポンシブヘッダー2
やりたいこと
ヘッダーメニューのレスポンシブ切り替え調整を設定をしたい
作成方法
- PCのヘッダーメニューが768px前後(任意)で非表示になるようにする
- Conditionalの設定
- When:Current page width ≦ 768
- This elemnt is visibleのチェックを外す
- When:Current page width ≧ 768
- This elemnt is visibleのチェックを入れる
- Layoutの設定
- Collapse when hiddenにチェックを入れる
- エレメントの存在自体が物理でなくなる
- Conditionalの設定
- SP用のハンバーガーメニューアイコンが768px前後(任意)で非表示になるようにする
- PCのヘッダーGroupに設定したConditionalをコピー
- 右クリック>copy conditional
- SP用のハンバーガーメニューアイコン選択でペースト
- 右クリック>paste conditional
- Conditionalの設定(不等記号を反対にするだけでOK)
- When:Current page width ≧ 768
- This elemnt is visibleのチェックを外す
- When:Current page width ≦ 768
- This elemnt is visibleのチェックを入れる
- Layoutの設定
- Collapse when hiddenにチェックを入れる
- エレメントの存在自体が物理でなくなる
- Collapse when hiddenにチェックを入れる
補足
SP用のハンバーガーメニューアイコンは、PC用ヘッダーGroupに入らないように配置する
④Gifアニメーション
やりたいこと
ページに、Gifのanimationを入れたい
作成方法
- 透明の「Floating Group」を配置する
- Floating GroupのStyleをRemove styleで消して、Styleを外して設定すればOK
- 「1.」の中にimageエレメント配置
- 「2.」の中にHTMLエレメント配置
- LottieFileアニメーションコード(任意のGifアニメに配布されている)をコピー
- 「3.」に張り付ける
参考サイト
⑤画像アップロード
やりたいこと
ページに、画像のアップロード機能を設定したい
作成方法
- Picture Uploader設置
- Dynamic Imageをクリック
- Parenet Group’ UserまたはCurrent Page User(現在の編集対象ユーザー)を指定
- Parent Group(親グループ)とは何を指す?これは、直上のグループ
- profile_imageを「3.」の後に候補から追加
- 「データの参照元として指定したCurrent Page Userのデータのうち、profile_image列に格納されている画像データを参照して表示せよ」という実行命令になる
- Apperaranceで任意のサイズ、Styleにする
- 必要に応じて、Placeholderも変更する
参考サイト
⑥動的背景
やりたいこと
背景データをページ最背面に置きたい
作成方法
- 任意のページ選択
- ページのエディター>Appearance>BackgroundStyle>imageまたはvideoにする
- uploadで任意のファイルを入れる
⑦ダウンロード機能の制限
やりたいこと
ログインしていない状態の時、ダウンロードはできない状態にしたい
作成方法
- ダウンロードButtonのエディターのConditionalを以下に設定する
- When :Current User is loggedout
- This element is visibleのチェックを外す
- 「ログインしているときのみ表示」という設定になり、制限がかかる
⑧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の幅、それぞれ平均的サイズ設定を作業前に決めておきたい レスポンシブにするときに、決め打ちの数値あると、エレメントのサイズや配置もスムーズ
作成方法
以下を基本でページ作成及びレスポンシブ設定すると良い