第2章で作成したアプリケーションを元に、まずはヘッダーから作成しましょう。

※このチュートリアルで使用する図（画像）が皆さんが作成最中のアプリのレイアウトとは若干異なる場合があります。レイアウトの細かい設定は12章のレスポンシブ対応にて行うので12章より前では、絶対に図（画像）と同じにしなければいけないとは思わずに進めていただいて問題ありません。

ヘッダーの作成

第3章では、簡易版Twitterのページレイアウトを作成していきます。

第2章で作成したアプリケーションをコピーして始めます。

アプリケーションのコピー

ログイン後のHome画面で、My appsのうち、第2章で作成したアプリケーションのコピーボタンをクリックします。

ポップアップが表示されるので、アプリケーション名を入力します。ここでは、「funrepeater-202204」とします。

「Copy the application database content」にはチェックを入れないでおきます。チェックをしておくと、データベースの内容もコピーされます。

アプリケーションがコピーされるとビジュアルエディタに移動します。

第2章で作成した画面が残っていることが確認できます。

Reusable elementsの作成

デフォルトで用意されるページとReusable elements

ビジュアルエディタで左上の「Page: index」と表示されている部分をクリックすると、既存のページとReusable elementsが表示されます。

ページ名やReusable elements名をクリックして編集するページを切り替えます。

アプリケーションを新規作成した際に以下のページが自動的に作成されています。3つのページは削除できません。

ページ
index	https://アプリ名.bubbleapps.io/でアクセスした時に表示されるページ
reset_pw	パスワードをリセットするためのページ
404	指定したURLが存在しなかったときに表示するページ

Reusable elements

Reusable elementsはコンテナタイプの要素であるGroup、Popup、Floating Groupの3タイプのうちどれかを設定できます。

Reusable elementsの編集

最初に、各ページ共通に利用するヘッダーをReusable Elementsで作成しましょう。

ヘッダー要素を配置する

それでは、以下のヘッダーを作成していきます。（Figmaを参照）

サイズ	横 1512px　高さ 100px
背景色	オレンジ（#F2994A）
境界線（ボーダー）	グレー（#BDBDBD） 太さ1px
エレメント間のスペース（Gap）	24px
文字色	白（#FFFFFF）

「Add a new reusable element…」をクリックします。

新たにポップアップが表示されるので、以下の画像のように設定し、「Create」をクリックしてください。

しばらくするとこのような画面が出てくるので、画面上をダブルクリックし、headerのプロパティエディタを表示させます。

Width と Height をそれぞれ入力します。リアルタイムでサイズが変更されていることが確認できます。

ヘッダーのStyle設定

背景色や文字色、ボーダーの指定などはStyleとして設定を保存しておくことができます。

ここではヘッダー背景色、ボーダーを指定し、新しいStyleを保存してみましょう。

Background styleは「Flat color（塗りつぶし）」を選択、Colorにカラーコード#F2994Aを入力します。

Border style – all borders では「Solid（直線）」を選択、Width「1」を選択、Colorにカラーコード#BDBDBDを入力します。

※ カラーピッカーから選択して設定することもできます。

この設定を保存するために、Styleをクリックし、選択肢から「Create a new style …」を選択します。

ポップアップが表示されるので、わかりやすいStyle nameに設定します。

今回は「Header」にします。

「CREATE」をクリックして保存します。

保存したスタイルは同じ種類のエレメントに適用できます。この場合、他のGroupエレメントにも同様のスタイルを指定できるようになりました。

アプリケーション名の配置

次に、アプリケーション名の「bubble チュートリアル」を配置します。表示のみのため、Textエレメントを配置し、名前とテキストを編集します。

Textエレメントを配置すると、デフォルトのStyleが設定されています。スタイルを破棄する場合は、Remove styleをクリックしてください。

スタイルの設定が解除されると、フォントの設定が可能になりますので、Figmaの設定に基づき以下の通り設定します。

Center the text vertically にチェックを入れると、文字をエレメントの高さ中央に配置します。

今後利用する可能性もあるので、スタイルに名前をつけて保存しておきましょう。ここでは「App Name」とします。

※ スタイルの名称の指定について、用意するスタイルが少ない場合は Section Title、Header Titleといったセクションごとの名前をつけていくのが一般的です。ただし大規模で複雑なアプリケーションだったり、さまざまなスタイルが必要な場合は、「16px Bold Left」など名前からスタイルの内容が連想できるように名前をつけるのも一つの技です。

アプリケーション名のサイズ調整

さて、今の状態では「bubble チュートリアル」の文字は全体が表示されていないかと思います。

ここで、エレメントのサイズ調整を行います。Figmaを参考に高さ・幅を調整します。

(Figma)

横幅：267px、高さ：72px、親要素の左端からの距離：27pxを入力します。

Y（縦位置）はヘッダーの高さ中央に表示する簡単な方法を利用します。

Arrangeメニュー

要素をクリックした状態で上部の「Arrange」をクリックすると、エレメントの位置設定を中心とした編集メニューが表示されますので、「Center vertically」を選択してください。

エレメントにマウスカーソルをあてて、上下の余白サイズが同じになっていることが確認できます。

リンクメニューを配置

次に、ヘッダーの重要な要素であるリンクを配置します。

Visual elements > Link を配置し、エレメント名とテキストを編集します。

リンク先はあとから設定しますので、アプリケーション名と同様にエレメントのサイズやスタイルを設定します。

同じように全てのリンクを作成します。

スタイル等が同じなので、エレメントを選択した状態でコピー&ペーストをすると、簡単にエレメントがコピーできます。

それぞれのエレメント名、テキストを編集します。

複数の要素の縦位置を一括設定

3つのLinkエレメントを選択した状態で、「Arrange」メニューから「Align vertical centers」をクリックすると、全てのエレメントを高さ中央に設定できます。

Figmaを参考に、それぞれのエレメントの位置を調整します。

これでヘッダーが作成できました。