ノーコード bubble 解説_無料のテンプレート で勉強_4
無料テンプレートをダウンロードして編集画面で中を分析し「これは！」という所を抜き出して解説します。
前回はスライドショーを作りました。今回も「Ez Marketplace – Shop」を使い、
トップページのアイテムを選んだらカテゴリーページに飛ぶ、ページが変わった時既に選んだアイテムが強調表示されているようにします。
リピーティンググループを使ったカテゴリー分け
次にRepeating Group リピーティンググループを使った左のパーツを作ります。（これはEz〜のダウンロードした物ではなくテンプレートのプレビューを見ています）データベースが絡んで来ます。例えばLaptopsを押すと、
categoryのページへ飛びます。データベースに情報を入れるとここに表示されます。
Ez Marketplace〜のこの部分の構造はこうです。これを真似します。まずは上のGroup Eとその中から。
GroupでGroup Categoriesを作ります（Type of contentにはまだEz Market〜と同じCategoryが選べません。この後解説するデータベース設計の後で選べます）。その中にGroupで水色部分Group Eを作ります。その中にIconでハンバーガーボタン（三本線）とclose用の×を配置します。
アイコンはEz Marketplace〜ではプラグインで入れた物を使っていますが最初からある物を使いました。なのでbarsもcloseも太さが違います
Textで「カテゴリー」と書きます。
次にGroupでGroup Category（先程作ったGroup Categoriesと間違わないよう注意してください）を作ります。Type of contentにEz Marketplace〜と同じcategoryを選びたいのですが、データベースで作っていないので当然まだありません。
データベース設計
Data＞Data typesのNew typeにCategoryと書いてCreateを押します。
右側、Type nameにCategoryが出来ました。この中にCreate a new fieldを押してフィールド項目を追加します。
Ez Marketplace〜は項目が沢山有りますが今回は画像を表示する「image」とその名前「name」の２つを作ろうと思います。Field nameにimageと記入しField typeはimageを選びCREATEを押します。
Field typeは適切な「型」を選ばないといけないので気をつけて下さい。逆にField nameは分かればimage2などでも良いのです◎
同じようにField name：Name、Field type：textも作ります。
データベースが終わったのでDesignの方に戻ります。
データベース設計の前に作ったでGroup CategoryのType of contentの選択項目にCategoryが出来ました。※Group CategoriesのType of contentにも同様にCategoryを選択してください。するとGroup CategoryのData sourceでParent group’s Categoryが選べます。
データ設計をしてからデザイン編集すればもっと分かり易く解説できたと反省します
その中にRepeating GroupでRepeatingGroup Categoryを作ります。
Type of contentにCategory、Data sourceにDo a search forを選ぶと左側に小さい黒い窓が出ます。TypeにCategoryを選びます。
RepeatingGroup Categoryの設定はこんな感じで参考にしているEz Market〜と同じです◎ SeparatoなどはStyleを無し（空欄）にすると出てきます。
データソースで設定した画像や名前を表示させる設定をします。
GroupでRepeatingGroup Categoryの中にGroup Categoryを作ります。Type of〜にCategory、Data sourceにCurrent cell’s Categoryを選択します。
その中にImageを設定します。Dynamic imageを押すと＞Insert dynamic dataが出ます。
Dynamic imageにGroup Category、 ‘s Category 、’s imageを選択します。
データベースで設定した「image」だね
そうよ。次は同じ様にデータベースで設定した「Name」を設定します
Group Categoryの中にTextを配置、edit〜の所を長押しして＞Insert〜
Group Category、’s Category、’s Nameとします。
デザイン編集画面はこんな感じです。ここまでの所をPreviewで見てみます。
データベースにimageとNameの項目は作りましたがその中には何も入れていないのでまだ何も表示されません◎ 今から画像などをデータベースに入れます。
ハーフチョーク（犬用の首輪）画像を４つ用意しました。Data＞App data＞All Categoriesを選択してNew entryで１枚ずつ登録します。
Imageに画像をアップロードしてNameにアイテム名を入れたらCREATE、１つエントリーされました。
これを必要な数繰り返してPreviewで確認します。
データベース入れた物がちゃんと表示されました◎
画像の角を少し丸くソフトな印象にするなど微調整をして、、
見た目完成です。
この後は簡単なカテゴリーページを作ってそこに飛べるようにし、ハンバガーボタンやクローズボタンのワークフローも設定します。
カテゴリーページの制作
その前にどうしてカテゴリーページを作るのかですが、Ez〜のhome-bannerのWorkflowを見るとワークフローは３つあり一番左のWhen〜を見るとカテゴリーをクリックした時、（下のStep1）categoryのページへ行くと書いてあるからです。
Ez〜のcategoryページを見ながら、
作って行きます。
と言っても全部は大変なので上の部分だけです
新しいページを追加する
Add a new page＞Page nameをcategoryにし＞CREATE
ページ自体の大きさは1200×400としました。
Groupで1200×157の枠を作ります（分かり易く水色にしました）。その中にRepeating GroupでRepeatingGroup Categoryを作ります。Type of〜はCategory、Data sourceデータ元はどこかはDo a search forにすると左に小さい窓が出るのでType＞Categoryを選びます。するとData sourceがSearch for Categorysと変わります。
データソースのCategoryから探して持っ来てという指示です
RepeatingGroup Categoryの中にGroupでGroup Categoryを作り上記のように設定します。大きさ、位置（X、Y）などはEz Market〜と同じです。
さらにその中にGroupでGroup Category（名前が同じなのはどうしてか分かりませんがサンプルと同じにしました）を作ります。上記のように設定して角Roundnessを20で丸くします。
同じGroup Categoryに対して、トップページで選んだカテゴリー（ハーフチョーク Mサイズ）がカテゴリーページで水色の太線で強調表示され他もホバーすると浮き上がる表現を追加します。
Conditional＞＋Define〜
Conditionalの横に１が付きました。WhenをThis Group、is hoveredにします。
ホバーした時、だね
下のselect a property to change when true（trueの場合に変更するプロパティを選択します）をクリックして線の色を変更します。
またSelect a〜＞Boxshadow styleなどで影や線の太さなどをEz Market〜と同様に設定しました。２つ目のconditionを作るために＋Define〜をクリックします。
Horizontal offsetはBoxshadow styleを設定すると選択肢に出てきます◎
２つ目のconditionは他の設定が済んでからやります。他の設定をする事で必要な選択肢が出来るからです。
次はGroup Categoryの中にまたGroupを配置します。StyleをRemove styleで空欄にすると出てくるBackground styleをImageにして画像が入るようにします。
Dynamic image＞Insert〜で下のように設定します。(Parent group’s Categoryまでが一続きでした）データベースのimageが入ります。
Group Categoryの中にTextを配置します。
上記のように設定します。
編集画面は上のような感じでPreviewで見ると下のように表示されます。６個枠がありますが４つしかデータを入れていないので右が余っています。マウスホバーの変化も確認できればここまでは成功です。
（超簡易版）Categoryページが出来たのでindexトップページからリンクを貼ります。
例えば「ハーフチョーク Mサイズ」をクリックしたらCategoryのページに飛ぶようにします。
indexトップページの編集画面へ。
サンプルにしているEz Market〜はReusable elementのhome_bannerを参考にします。
Group CategoryのStart/Edit workflowをクリック、
四角が１個出来て濃いグレーで表示されています。選択中という事です。Click〜＞Navigation＞Go to pageで
Destination目的地にcategoryページを選びます。Data to sendはCurrent cell’s Categoryを選びます。すると上に黄色の付いた「カテゴリコンテンツタイプが設定されていません。現在送信しているデータはタイプカテゴリです」が出るのでグレーの中「クリックして、カテゴリのコンテンツタイプをタイプカテゴリに変更します」をクリックします。
先ほど「２つ目のconditionは他の設定が済んでからやります」と言っていたGroup Categoryをここでやります。＋Define another conditionをクリックして２つ目を作ってください。WhenにCurrent Page Category、、
あっ、さっきは選択肢に無かったCurrent Page Categoryがあるよ
is、Parent group’s Categoryと続け他も上記のように設定します。この設定はトップページのカテゴリーで選んだアイテムをカテゴリーページで”３”の太さの”水色の枠”で表示するためのものです。
Previewで見てみます。
トップーページで選んだ物がカテゴリーページで水色の太枠で表示されていて、他のアイテムをホバーしてこんな感じで浮き上がればリンクは成功です◎
closeボタンでリストの開閉
次に「×」closeを押したらカテゴリーリストが閉じてアイコンが変化、変化したアイコンをクリックすると再びリストが表示される仕組みを作ります。リストの方から行きます◎
Group Category＞Conditional＞＋Define another condition
WhenにThis Group、’s menu_state、is、と選択してclosedは自分で書きます。Select a〜をクリックして、
This element is visibleここはチェックしません。＋Defineで条件を増やします。
When にThis Group、’s menu_state、is でopenedは自分で書きます。このThis element〜にはチェックを入れます。
続いて「×」closeボタンです。
「×」＞Conditional＞＋Define〜
Conditional条件が１になりました。WhenをGroup E、is hovered にし、Select〜でホバーした時の色の変化を追加します。Icon colorを選び好きな色にします。＋Define〜で更に条件を追加します。
WhenにGroup Categoryを選び、’s menu_state、is、「closed」は自分で書きます。
closedしている時のIconを選びます。
続いてワークフローを設定します。
Click〜＞Element〜＞Set state
ElementをGroup Categoryにし、Custom stateをCreate a〜で作ります。State nameをmenu_stateにし、State typeはtextを選択します。
State typeは決まった型を選ぶ事でこの後の選択肢の内容が変わって来ます。
サンプルを見ながらサイトを作ろうとして選択肢が同じ物が無い時はこのState typeの「型」が間違っている場合があるのでチェックです。
Valueに自分でclosedと書きます。
このままだと閉じっぱなしですのでリストを開くワークフローも作ります。
３つ目のワークフローです。点線の四角をクリック＞Elements＞An element in clicked
ElementにIcon fa fa-closeを選択します。
Only whenにGroup Category、’s menu_state、 is 、closedは自分で書きます。閉じている時だけ開く、とこの後設定します。
Click〜＞Element〜＞Set stateで
上記のように設定します。openedは自分で書きます。
previewで実際の動きを確認します。
×にカーソルを当てると（赤く）色が変化します。クリックすると、、
カテゴリーリストが閉じた状態になりアイコンも下矢印に変化します。下矢印をクリックして元に戻れば成功です。
お疲れ様でした◎
