ノーコード bubble 解説_共通パーツの書き出し

 

 

サイトのヘッダーやフッターはトップページの他にも共通で使う場合が多いので「共通パーツ」としてReusable element(リユーザブルエレメント=再利用可能)にして書き出しておくと便利です。

 

 

Reusable element 再利用可能なエレメントの書き出し

リユーザブルエレメント、、

こんな感じでヘッダーに「E Header」(分かりやすい自由な名前)と言う名前を付けてReusable elementsに登録します。

 

 

それでは行きます。ヘッダーは分かり易いように一時的に黄色にしました。最後白に戻します◎

ヘッダーをグループにする

indexページ(トップページ)を開きます。ヘッダーの一番親の部分をクリックして選択します。

 

 

一番親の部分 Group A(AとかBは違っても気にしないでください)を選択した状態で右クリック>Group element〜 でまるっとグループを作ります。

 

Group Aの上の階層Group Dが出来ました。

 

 

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 に来ていませんのでコピペで持って来ましょう。

ノーコード bubble 解説_ハンバーガーメニュー

左上.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かもしれません

上の赤い「1issue 」マークが消えました◎

 

 

ワークフローを見比べる

トップページ(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を使う

新しいページを下記を参考に作ってください。

ノーコード bubble_リンク、新規ページ、レスポンシブ

 

新しく作ったページ(ここでは「お問い合わせ 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 も作る事が出来ます◎