ノーコード 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 の管理画面です）
ドロップダウンメニューはコピペで持ってくる
実はハンバーガーメニュー（スマホにした時に表示される３本線）を押した時に表示されるドロップダウンメニューがまだ E Header に来ていませんのでコピペで持って来ましょう。
左上.bマークの横でindexを選んでトップページへ行きます。
ドロップダウンメニューを表示させて右クリック、Copy
E Header に戻って
Pasteペーストします。（bubbleのバグでPasteが出来ない時は普通にcommand+V でも大丈夫です）
Reference elementがちゃんと指定してあるのに設置位置がおかしいよ？
これもバグなので、Header Menu〜 を一度違う物を選択して戻すと、、
issue（問題） を解決する
上を見ると赤で「１issue 」（問題）とあります。この問題を解決するにはまずこれをクリック＞問題箇所が表示されるのでそれもクリック＞Workflowのページに行くのでまた同じ所をクリックすると「ここが問題です」と言うようにElement のGroupFocus B がフワッと赤く表示されます。
トップページでは「GroupFocus B 」だったのですがE Headerに持って来てGroupFocusの後に付くアルファベットが自然と変更されたようです。「GroupFocus A」を選びます。
なのでこのAB問題は人によってCかもしれません
ワークフローを見比べる
トップページ（index）とリユーザブル（E Header） のWorkflowワークフローを見比べて足りない物を持ってきます。※間違ってロゴ（桜マーク）のワークフローを削除してしまいました。なので現時点でのワークフローの数はindex の方はAB2つでなく３つです。最後の方「Reusable element 再利用可能なエレメントの修正」で修正の説明をしています。
リユーザブル（E Header） のWorkflowにBのクローズアイコンが無いようです。
これもコピペで持ってきます。indexのWorkflowページでcloseアイコンのWorkflowをコピー、
E Header のWorkflowページに行き、Click〜と書いてある点線の四角の中でペーストします。左側に出来上がりました。
Elementに赤い表示が出ているので、、
closeアイコン（Icon fa fa-close）を選びます。
クローズアイコンのワークフローを持って来た事でまたアルファベットの違いから、上に赤で「１issue 」が出てしまいました。前回同様にクリックしてGroupFocus A に変更してください。
今回のHide（隠す）とは、、
ハンバーガーメニューを閉じる時にバツ印「×」を押すとメニューを”隠す”のワークフローでした。
ワークフローや不具合を直してこれでやっとReusable elementが完成しました。次はこれを新しく作ったページで実際に使ってみます。
新しいページにReusable elementを使う
新しいページを下記を参考に作ってください。
新しく作ったページ（ここでは「お問い合わせ contact」ページ）でUI Builder下のReusable elementsの中のE Headerを選択し右の画面でクリックします。
マウスホバーするとこんな表示になります。
X軸とY軸を０にすると画面の左上にピタッと配置されます。
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で作ると１ヶ所直せば全部に反映されるんだね
こんな感じでフッターFooter も作る事が出来ます◎
