ノーコード bubble 解説_無料のテンプレート で勉強_1
無料テンプレートをダウンロードして編集画面で中を見てみれば
- こんな感じのデザインにするには？ →フォント、フォントのサイズ、色使い、間の開け方など
- この動きはどうやったら？ →ワークフローを見る
- こんなボタンやアイコン、デフォルトでは無いよ？ →どんなプラグインを入れたのか
など色々と勉強になりますし1から作るより近道です◎無料テンプレート App Demoを使わせて頂き、これは！と言う所を抜き出して解説して行きます。
目次
なお、今回レスポンシブ対応まで解説するとボリュームが一杯で横道に逸れるためしていません。スマホや画面を狭くした時はレイアウトが崩れますのでそれは
無料テンプレートをダウンロード
Bubbleのサイトへ行き上のメニューMarketplaceをクリック＞Templatesで、
App Demoをクリック、（無料のテンプレートは右下にFreeとあります）
Use template＞
無料テンプレートを編集画面で見てみる
まずはざっと見て、後ほど詳しく解説します。
ダウンロードした物を編集画面で色々クリックしてみます。実際の画面でスクロールすると出てくる隠れた要素もあるので編集画面ではこんな感じが、、
Workflowワークフローを見て勉強
実際にPreviewで見るとスマホの写真が右からスーッと出てきたり
一定の距離（高さ）スクロールすると黒いヘッダーナビゲーションが降りて来たりで、自分のサイトを作る時に参考になりそうです。この辺の動きはWorkflowを見ると分かります。
Pluginsプラグインを見て勉強
これまでBubbleでテンプレートを使わず作った人ならもしかして気付くUI Builderに見慣れない項目。もしくはヘッダーAPP LOGOの横の「いつものIconの中にこんな柄あったかな？」のマーク。クリックしてみるとIonicIcon〜との表示。
こんな時はPluginsを見てみましょう◎
２つ無料のプラグインが入っていました。App Demoの作者がこの２つをインストールしてこのサイトを作ったという事です。
Ionic Elementsをクリックすると右にElementsに４つの項目を追加したと書いています。
１番下Ionic Iconは先程見た物、Ionic Checkbox など編集画面左のUI Builderに項目が増え、１２３のように使えました。
Elements treeエレメントツリーを見て勉強
Elements treeを見ると親子関係の構造がよく分かります。この構造がおかしいと同じ要素を使って同じ見た目にしても実際にはデザインが崩れたり予定通り動かなかったりの原因に。
＋マークをクリックしてどんどん奥に入って行くと一番小さな単位が見えます。
例えばGroup Header＞Group E＞Group image＞Group 1 の中にImage Cと言う「スマホの枠画像」とImage Eと言う「女性の画像」が入っているのが分かりました。
エレメントの場所をすぐに見付ける
いちいち＋を押して探すのは面倒だなぁ
そんな時は見たい要素（例：ABOUT）をクリック＞黒い窓の一番下Reveal in the Elements treeで
隠れているエレメントを表示
実際の表示では見えるのに編集画面では隠れているエレメントはonly show hideable（非表示のみを表示）のチェックを入れ、
「目」のマークをクリックすると見れます。
大まかな説明は終わりにしてここからは使えそうな所を詳しく説明していきます。
サイト全体の背景に画像を表示
テンプレートでは背景に鳥の画像があり固定されていてその上を色々な内容がスクロールして行きます。
ページ全体（index）はElements treeには表示されません。サイズを見るには編集画面の何も無い部分をクリックします。幅1200高さ5979でした。Styleを空欄にしてBackground styleにImageを選ぶと画像がアップロードできます。
サンプルを参考に今から作るサイトは（撮影の都合で小さめ）幅1200高さ1500としました。ミニチュアシュナウザーの写真を背景全体（indexいっぱい）に、その中にこれからコンテンツを作るためのGroup ABCを３つ配置します。
配置は手動でも出来ますがピタッと付けたい時にX軸、Y軸の考え方を知っていると便利です。Group AとCはStyleを空欄にしてBackground styleをFlat colorにして黒を選び透明度を50％にしてサンプルと同じように背景画像が透けて見えるようにしました。
Group BはFlat colorでベージュっぽい色の100％なので透けません。
indexに使った画像はこんな感じです。
Center〜、Apply a parallax effect（視差効果を適用）などサンプルと同じ設定にしました。
途中からヘッダーナビゲーションを固定
スクロールして途中からヘッダーナビゲーションを画面上部に固定表示させる方法です。
サンプルではトップから600px（ABOUTの上すれすれ位、画面サイズによって微妙な差あり）スクロールすると出てくる設定でした。
サンプルのFloatingGroup headerをクリックして見えるようにし参考にします。
まずはサイトを表示した時に出ているメニューから作ります。Group Headerの中にGroupを配置します。色は無し、横幅はindexと同じ1200高さは適当に45としました。
その中にTextでメニューを３つ作ります。
サンプルはもっとメニューがありますが簡易版です◎
次はスクロールした時に途中から出て来るメニュー、FloatingGroup headerを作ります。FloatingGroupで幅、高さは先ほどと同じで色は紺色にしました。中に同じようにメーニューを３つコピーなどして配置します。
デザインは出来たのでWorkflowで動きを付けます。
Workflowへ
Click here〜をクリック＞General＞Do when condition is true（条件がtrue(onのような意味）の場合に実行）
その条件を定義します。Run this実行はEvery timeに
ここをJust onceにすると１度だけしか実行されないので気をつけてください
Only when をCurrent page scrolling position、＜、500（この数字はGroup Headerの高さなど考慮して設定します）
Click〜＞Element Actions〜＞Animateでどんなアニメーションの動きを付けるか決めます。
ElementにFloatingGroup headerを、AnimationにTransition SlideUpBigOutとします。
もう１つWorkflowが必要ですのでClick〜＞General＞Do when〜
先ほどとほぼ同じ設定で「＞」だけ向きが違います。
Click〜＞Element〜＞Animate
Elementには同じFloating〜でAnimationはTransition SlideDownBigInとします。
Previewで実際の動きを見てみます。
上から500pxスクロールした所でFloatingGroup headerで作った紺色のメニューが降りて来たので成功です。
ページ読み込み、時間差で画像を表示
サンプルのサイトを開いた時に右からフワッと画像（携帯）が２つ時間差で出てくる様にする方法です。
サンプルのWorkflowを見てみると左上のWhen Page is loaded（ページが読み込まれた時）がこの動きを作っているようです。Step１〜４を参考に進めていきます。
同じ様に携帯の画像を用意しました。
これもサンプル同様PNG画像を使いました。
PNG？
背景部分を透明に出来るのよ
大きいGroup（水色、サンプルではGroup E）の中に小さいGroup（濃い水色、サンプルではGroup XZ）。その中にTextでサンプルの文面をコピーして来ました。
画像はGroup Eの中にGroupでGroup imageと言う枠を作り、その中にGroup1と言う枠を作り、ImageでImage Bを作って画像をアップロードしました。
少し遅れて出てくるこちらの画像も同じ構造です。
When Page is loaded ページが読み込まれた時
２つのWhen〜は先ほどメニューの動きを設定した時のものです。右端の点線四角Click〜をクリックします。Generel＞Page is Loaded
ページが読み込まれた時にどうするか、、Element Actions＞Set state
Elementはトップページのindexです。Custom stateはCreate a new custom stateで新しく作ります。State nameをtabとし、State typeにはnumberを選びCREATEで保存します。
State typeをnumberにした事でValueと言う項目が出来たので「１」を入力します。Step 1が出来ました。Click〜でStep 2を作ります。Element〜＞Animate
アニメーションで動かしたいElementはGroup 1、
サンプルと同じ様に右からフワッと出てくるTransition SlideRightBigInに。
Step 3を作ります。Click〜＞Navigation＞Add a pause〜（次のアクションの前に一時停止を追加します）
２枚目の画像を動かすStep4を作ります。１枚目同様Click〜＞Element〜＞AnimateでElementはGroup 2、
で同じ右から出るのを選びます。
Define a custom duration（カスタム期間を定義する）にチェックを入れるとアニメーションにかかる時間が設定できます。数字が大きいほど時間がかかります。
これでWorkflowの設定が終わりました。
仮に入れておいた水色と濃い水色２つのGroupのColorをNoneにして色を消しました。Previewで動きを確認します。
手前の携帯が出終わった直後に後ろの携帯が出たので成功です。
次回も同じApp Demoを参考にページ内スクロールなどをやります。お付き合いください◎
