ノーコード bubble 解説_共通パーツの書き出し
サイトのヘッダーやフッターはトップページの他にも共通で使う場合が多いので「共通パーツ」としてReusable element(リユーザブルエレメント=再利用可能)にして書き出しておくと便利です。
目次
Reusable element 再利用可能なエレメントの書き出し
リユーザブルエレメント、、
こんな感じでヘッダーに「E Header」(分かりやすい自由な名前)と言う名前を付けてReusable elementsに登録します。
それでは行きます。ヘッダーは分かり易いように一時的に黄色にしました。最後白に戻します◎
ヘッダーをグループにする
indexページ(トップページ)を開きます。ヘッダーの一番親の部分をクリックして選択します。
一番親の部分 Group A(AとかBは違っても気にしないでください)を選択した状態で右クリック>Group element〜 でまるっとグループを作ります。
reusable element にする
Group Dを選択してリユーザブルエレメント( reusable element )にしたいのですが、このままクリックするとGroup Aが選択されてしまいます。
なので(Mac の場合)commandキーを押しながらヘッダーをダブルクリック、又は左のElements tree のGroup Dをクリックして
Group Dの枠を少し下に伸ばします。黄色い部分は伸びません。青い枠が伸びていればOKです。次に伸ばした部分の上で右クリック>Convert into a reusable elementを選びます。
再利用可能なエレメントに名前を付けてCREATE で保存します。
E Headerとしました。ヘッダーなら○○Header フッターなら○○Footer とすると後からでも分かりやすいと思います◎
少し待つと、、
E Header 画面が出ました。
余談ですがElements treeを見ると先ほど作った Group D が無くなって一番上は Group A になっています。このように一番親に当たる部分はリユーザブルエレメントを作ると無くなってしまうため、Group Dを作った訳です。
先ほど下に伸ばした部分を戻します。(現在 E Header の管理画面です)
ドロップダウンメニューはコピペで持ってくる
実はハンバーガーメニュー(スマホにした時に表示される3本線)を押した時に表示されるドロップダウンメニューがまだ E Header に来ていませんのでコピペで持って来ましょう。
左上.bマークの横でindexを選んでトップページへ行きます。
ドロップダウンメニューを表示させて右クリック、Copy
E Header に戻って
Pasteペーストします。(bubbleのバグでPasteが出来ない時は普通にcommand+V でも大丈夫です)
Reference elementがちゃんと指定してあるのに設置位置がおかしいよ?
これもバグなので、Header Menu〜 を一度違う物を選択して戻すと、、
issue(問題) を解決する
上を見ると赤で「1issue 」(問題)とあります。この問題を解決するにはまずこれをクリック>問題箇所が表示されるのでそれもクリック>Workflowのページに行くのでまた同じ所をクリックすると「ここが問題です」と言うようにElement のGroupFocus B がフワッと赤く表示されます。
トップページでは「GroupFocus B 」だったのですがE Headerに持って来てGroupFocusの後に付くアルファベットが自然と変更されたようです。「GroupFocus A」を選びます。
なのでこのAB問題は人によってCかもしれません
ワークフローを見比べる
トップページ(index)とリユーザブル(E Header) のWorkflowワークフローを見比べて足りない物を持ってきます。※間違ってロゴ(桜マーク)のワークフローを削除してしまいました。なので現時点でのワークフローの数はindex の方はAB2つでなく3つです。最後の方「Reusable element 再利用可能なエレメントの修正」で修正の説明をしています。
リユーザブル(E Header) のWorkflowにBのクローズアイコンが無いようです。
これもコピペで持ってきます。indexのWorkflowページでcloseアイコンのWorkflowをコピー、
E Header のWorkflowページに行き、Click〜と書いてある点線の四角の中でペーストします。左側に出来上がりました。
Elementに赤い表示が出ているので、、
closeアイコン(Icon fa fa-close)を選びます。
クローズアイコンのワークフローを持って来た事でまたアルファベットの違いから、上に赤で「1issue 」が出てしまいました。前回同様にクリックしてGroupFocus A に変更してください。
今回のHide(隠す)とは、、
ハンバーガーメニューを閉じる時にバツ印「×」を押すとメニューを”隠す”のワークフローでした。
ワークフローや不具合を直してこれでやっとReusable elementが完成しました。次はこれを新しく作ったページで実際に使ってみます。
新しいページにReusable elementを使う
新しいページを下記を参考に作ってください。
新しく作ったページ(ここでは「お問い合わせ contact」ページ)でUI Builder下のReusable elementsの中のE Headerを選択し右の画面でクリックします。
マウスホバーするとこんな表示になります。
X軸とY軸を0にすると画面の左上にピタッと配置されます。
Reusable elementを作ったページがちゃんと表示、動作するか確認します。
右上Previewを押します。画面の横幅を狭くして、、
ハンバーガーメニューを表示させ、クリックすると下にメニューが出る、×を押すとメニュが消えれば成功です◎
気づいた方もいるかもしれませんがトップページにもE Header を使えばいいので、、
トップページのGroup D をDelete で削除して、、
E Headerを設置、X軸Y軸を0にして左上にぴったり配置します。ここでも「 issue 」が出ているのでクリックしてReference〜を E Header A にして(実際の動作確認をして)完了です。
Reusable element の修正
E Hearer のページに行きます。色を白に変更します。
「トップページ」のヘッダーも「お問い合わせページ」のヘッダーもE Header を使っている所は変更が反映されました。
最後に、間違えて削除してしまった
ヘッダーのロゴ(桜マーク)にトップページへのリンクを前回(「ノーコード bubble_リンク、新規ページ、レスポンシブ」の「画像にリンクを貼る」)貼ったのですがそのワークフローを間違って削除していました。ここE Headerで追加しておきます。失礼しました。
ロゴをクリック>黒い窓の下の方、Start/Edit workflow をクリックします。
Click here 〜をクリック
Navigation>Go to page
飛ばしたいページindexを選びます。この変更もE Hearerを使っているページにちゃんと反映されます。
Reusable element にするとメンテナンスなど管理が楽
ヘッダーをコピペで作らなかったのは色やメニューなど変更した時に全部に反映されないからです。
Reusable elementで作ると1ヶ所直せば全部に反映されるんだね
こんな感じでフッターFooter も作る事が出来ます◎