Bubbleの基本的な使い方（その3）ードロップダウンメニューとページ遷移
前回の記事ではテキスト・ボタンなどのエレメントをデザイン画面に配置しました。
今回はこれらのパーツを使って、ドロップダウンメニューを作ってみようと思います！
完成したページは下記のような動きをします。
indexページの「MENU」ボタンをクリックするとドロップダウンメニューが表示され、ドロップダウンメニュー内の「ページ2へ」ボタンをクリックするとリンク先のページが表示されます。
また、indexページに戻れるように、page2には「戻る」ボタンも設置します。
ページの現在位置確認
ボタンなどのエレメントを作成する前にページの現在位置を確認しておきます。左上に「Page:index」とあるので今はindexページを編集していることが分かります。
リンク先ページ（page2）の作成
次にドロップダウンメニューの項目をクリックした時に遷移する画面「Page2」を作ります。
「Page:index」部分をクリックするとページの一覧が表示されます。
ページ一覧の部分を簡単に説明します。
ページはあらかじめ「index」「404」「reset_pw」の３つが用意されています。
下段部分は「Reusable elements」に登録されているエレメントが表示されています。こちらもHeader、Footer、Loginなど再利用可能なエレメントがあらかじめ用意されています。
それでは「Add a new page...」をクリックして新規ページを作成します。
「Page name」は「page2」とします。
「Clone from」で複製元のページを選択できますが、ここでは新規にページを作成することとします。
「CREATE」ボタンを押すと「page2」のページが作成されました。
「page2」にページタイトルと、「戻る」ボタンを追加
「page2」にテキストエレメントの「ページ２」と「＜戻る」を追加します。
後で「戻る」ボタンにでindexページに戻る ”Workflow” を設定しますが、今はとりあえずこの状態で置いておきます。
MENUボタン配置
indexページに戻ってドロップダウンメニューを作成します。
まずメニューを表示させる起点となるボタンを配置します。
Visual elementsの「Button」をクリックし、デザイン画面上をクリックするとボタンが作成されます。
プロパティが表示されるので「...edit me」と表示されている部分を変更しボタンのテキストを「MENU」と書き換えます。
Group Focusを配置
次にMENUボタンの下に表示されるエリアを作っていきます。
MENUボタンにマウスオーバーされると、ボタンを含むリストが表示されるようにしたいと思います。
マウスオーバーなど、フォーカスが当たっている時だけ表示されるグループを作るには「Group Focus」を利用します。
まずメニューのContainersからGroup Focusを選択した後、デザイン画面上をクリックしてGroup Focusを作成します。
デフォルトで画面左上にGroup Focusが作成されました。
Group FocusをMENUボタンの下に配置します。
Group Focusのプロパティ内の「Reference element」からMENUボタンのエレメントを選択します。
するとMENUボタンの下にGroup Focusが配置されました。
MENUボタンからの位置を微調整するには「Offset top」「Offset left」に値を入力して位置調整します。
Buttonを作成してGroup Focus上に配置
次にドロップダウンメニュー内に配置するボタンを作ってGroup Focus内に配置します。
すでにあるGroup Focusエレメントをクリックして選択状態にした後、左メニューから「Button」をクリックし、さらにGroup Focusエレメントをクリックシます。これでGroup Focus内にボタンが作成できました。
ボタン内のテキストを「ページ２へ」としておきます。
ボタンのスタイルをremove styleで削除して、Background StyleをFlat colorにし、Colorで好きな色にボタンの色を変更します。
ボタンとGroup Focusのサイズを調整します。
「ページ2へ」ボタンをドラッグ＆ドロップでメニューボタンの下に移動させます。また、Group Focusを選択すると周囲に白四角が表示されるので、そこを掴んでサイズを調整します。
Tipsになりますが、Group Focusを「ページ2へ」ボタンと同等の大きさにすると、ボタンの下にGroup Focusが隠れて選択しづらいことがあります。
そんな時はElement treeからGroup Focusエレメントを選択すると、デザイン画面上でもGroup Focusエレメントが選択状態となります。
さて、ここでいったんプレビュー画面を見てみましょう。
右上の「Preview」を押すと別ウインドウにプレビュー画面が表示されます。
プレビューで見るとMENUボタンのみが表示されています。
ボタンになにもアクションを設定していないので、悲しいですがボタンを押しても無反応です。
MENUボタンにワークフローを設定する
いよいよMENUボタンにワークフローを設定して動きをつけていきます。
「MENUボタン」が押されたらGroup Focus（ページ２へボタン）が表示され、「ページ２へボタン」が押されたらPage２に画面遷移するように設定します。
MENUボタンのプロパティから「Start/Edit workflow」を押してワークフロー設定画面に移動します。
こちらがワークフローの画面です。
①MENUボタンがクリックされたら...
②アクションを設定する、
という流れになります。
「Click here to add an action...」を押してアクションを設定しましょう。
「Click here to add an action...」を押すと、アクションメニューが表示されます。今回は「Element Actions」の「Show」を選択します。
「Show」のプロパティが表示されるので、「Element」から「Group Focus A」を選択します。
ワークフローの設定ができたので、プレビューで見てみましょう。
「MENUボタン」をクリックするとGroupFocus Aに含まれる「ページ2へボタン」が表示されました！
「ページ２へ」ボタンにワークフローを設定する
次に「ページ２へ」ボタンが押されたら、indexページからページ２へ画面遷移する挙動を設定します。
デザイン画面に戻り、「ページ２へ」ボタンのプロパティから「Start / Edit workflow」を押してワークフロー画面に移動します。
「Click here to add an action...」から「Navigation」「Go to page...」を選択し、Destinationに「page2」を設定します。
いったんプレビューで見てみます。
「MENU」ボタンを押すと「ページ2へ」ボタンが表示され、「ページ2へ」ボタンを押すとindexページからpage2ページへ遷移しました！
「＜戻る」ボタンにワークフローを設定する
最後に、page2に配置した「＜戻る」ボタンのワークフローを設定します。
デザイン画面に戻って、indexページからpege2に切り替えます。
「＜戻る」ボタンをダブルクリックして、プロパティ画面から「Start / Edit workflow」を選択します。
アクションは先ほど使った「Navigation > Go to page...」を使用します。
Destinationにindexページを指定します。
プレビューで確認してみましょう！
ページ2の「＜戻る」ボタンを押すと、無事indexページに遷移したかと思います。これで完成です！
今回はドロップダウン・ボタン・Group Focusの各エレメントの作成と、ワークフローを使ってページ間を遷移する方法を学びました。
次回はエレメントの位置を固定できる「Floating Group」について解説したいと思います！
ちょっと気になった、更に知りたくなったという方は、
ぜひ、気軽に相談できるMentaをしております。
Mentaでメンターサポート
https://menta.work/user/22914
ストリートアカデミーで毎月講座も開催しています
https://www.street-academy.com/steachers/198346
また、Twitterではブログに書いていないこともつぶやいているので、ぜひフォローしてください。
https://twitter.com/HAMA3san
webデザイナーもくもく制作サロンへの招待について
https://note.mu/hamasan918/n/ne4d98f9db9ec
もくもく制作サロンの入会
サロンではチャットで制作の質問を受け付けたり、相談会を開いて直接現役のデザイナーになんでも聞けるコミュニティです。
月額500円となります。
入会条件
業界未経験、経験者、Webデザインエンジニアに興味がある方まで！
誰でも匿名参加OKです。
参加方法
こちらのWebデザイナーフリーランスマガジンの購読購入をいただき、下記にてSlackコミュニティにご招待させていただきます。