ノーコード bubble 解説_無料のテンプレート で勉強_2
無料テンプレート App Demoをダウンロード→編集画面で中を見ながら”これは使えそう！”を抜き出して解説する2回目です。
4月23日、YouTubeにこのサイト制作（と微妙に違う所もありますが）をアップしました。”動き”と合わせるとより理解しやすいかと思います。
１回目を参考にApp Demoをダウンロードしてご覧頂くとより分かりやすいと思います◎
ページ内スクロール
App DemoのメニューのABOUTをクリックすると同じページのABOUTまでスクロールします。
編集画面でABOUTのStart/Edit workflowを見ると、
下の方にWhen Text ABOUT is clicked（ABOUTがクリックされた時）どうするか、Step1に設定されています。
ちなみにテンプレートApp Demoは27個のワークフロー（四角が27個）がありました。左上３つの水色は前回「無料のテンプレート で勉強_1」で済んだ所なので水色に変更してみました。
Workflowを好みの色に変更
四角をクリック＞Event colorで変更出来ます。
色が変わるだけで動きは何も変わりません
本筋に戻ります◎
App Demoを参考にしながら作っているサイトのGroup Aboutの中にもTextでABOUTと書きます。フォントサイズは大きめの40px、
Define each border〜にチェックを入れてbottomに紺色の下線を付けました。
このABOUTをコピーして下のGroup Screenshotsの中にペーストしてSCREENSHOTSと書き換えます。こうする事で同じデザインが適用されます（が色だけ白に変更しました）。
その下にGroup（Group R、半透明の緑で表示）を配置しておきます
Group Rは後で必要になるのでここで作っておきます（後で作っても問題ありません）
ここまでをElements treeで見るとこんな構造です。Text SCREENSHOTSとGroup RはGroup Screenshotsの中、同じ階層にある状態です。
ABOUT＞Start/Edit〜でワークフローを設定します。
Click〜＞Element〜＞Scroll toでどこまでスクロールするかを設定します。
Group Aboutを選びます。SCREENSHOTSボタンを押した時のGroup Screenshotsまでのスクロールも同様に設定し、実際の動きを見てみます。
訂正：ここから暫く緑がSCREENSHOTSの文字にかかっていますが、本来はかりません。
ABOUTやSCREENSHOTSを押してその位置までスクロールすれば成功です。
でも、タイトルにかぶっているよ
微妙な調整はOffset(pixels)で調整、今度は綺麗な位置で止まりました。
ちなみに私はページ全体の長さを1500にしていたのですがスクロールの距離が足りなかったので1600に変更しました。そうゆう調整ももしかしたら必要かもしれません。
お気付きの方もいると思いますがFloatingGroupで作ったメニューの設定はまだ終わっていないのでABOUTを押しても反応しません。参考にしているApp DemoのWorkflowを見ると同じ物が２つあります。（緑の方は参考にし終わった印として色を変えました）
どうやら右のWhen ABOUT is clickedはFloatingGroupで作ったメニューのABOUTのWorkflowのようです
そう言われればSCREENSHOTSのも２つあるね
App DemoのFloating〜＞Text ABOUTのワークフローを押しても確認出来ました。
制作中のサイトの戻って、Floating〜＞Text ABOUT＞Start/Edit〜で設定します。
（こちらも済んだものは緑で表示しています）Click〜＞Element〜＞Scroll toでどこまでスクロールするか、、先ほど同様Group Aboutを選びます。SCREENSHOTSも同様に。
ここまでのWorkflowはこんな感じです。（水色は「無料のテンプレート で勉強_1」で済んだもの）同じボタンが２つずつ。
実際の動きを見てみます。今度はスクロールした後に出てきたメニューのABOUTでABOUTの画面までスクロールしたので成功です。
スクロールすると画像が出てくる設定
トップから何pxスクロールしたらこの画像を出す、と言うタイミングが設定できます。
App Demoはトップから2300pxスクロールするとFEATURESの下辺りから横向きのスマホ画像が出てくる設定になっていました。その上のSCREENSHOTもほぼ同様の設定ですが数が５枚と多いので今回は”横向きスマホ”１枚で行こうと思います。
まずはApp Demoの編集画面でどんな設定になっているのか見てみます。
横向きスマホはデフォルトだと隠れて見えません。探すにはFEATURESの大きい枠をクリックして黒い窓を出します。下のReavel〜をクリックするとこのエレメントの位置が分かりますので、
そこからは大体この辺かなと開いていくと見付かります。Group 4をクリック、
（Group 4は更に携帯の枠と中の画像に別れています）黒い窓を見てみるとThis element is〜のチェックが外れています。See referenceでさらに詳しくみると、
ページ読み込み時に表示される、のチェックを外して表示されないようにしている事が分かりました。
代わりにスクロールすると見える設定をしているんだもんね
そう、だからこのグループの中に入っている携帯の枠と中の画像は見えないのね
似た物を作ります。緑のGroup Rの中にImageでImage CとImage Dを作りそれぞれ画像をアップロードします。
Image CとImage Dの細かい設定はApp Demoですとどちらも同じでこんな感じです。
Previewで見てみます。※スクロールの設定がまだなので緑のGroup RのThis element is〜のチェックは外していません。
一見出来ていそうですが、画像がスマホの枠の前に出てしまって四隅が変です。
枠の後に画像をアップロードしたからかな
そんな時は枠の上で右クリック＞Bring to frontで前に出しましょう。
上手くいきました◎
デザインが出来たのでWorkflowを設定します。
App DemoのWorkflowの該当箇所、When Do when Current page〜を見るとRun thisはJust once、
１でやった「途中からヘッダーナビゲーションを固定」の時はEvery time に設定したのでナビゲーションが何度も出たり引っ込んだりしました
Only whenは2300pxスクロールしたらに設定しているようです。これを参考に、
自分のサイトのWorkflowでClick〜＞General＞Do when condition〜
Run thisをJust onceで１回だけに、Only whenにCurrent page scrolling〜（現在のページのスクロール位置）を選び、
「≧」、数字を入力します。次にClick〜＞Element〜＞Animate
AnimateさせたいElementに先ほど作ったGroup Rを選びます。
どんなAnimationの動きにするかを選びDefine〜にチェックを入れるとDurationが出るのでかけたい時間を設定します。
デザインの方に戻って説明のために付けていた緑色をNoneで無しにしてThis element〜のチェックを外します。実際の動きを確認します。
設定した数字（○px）スクロールした所で下からスッと携帯画像が現れれば成功です。 一度では位置もタイミングもしっくり来ないかもしれません、微調整してください◎
最後に今回（２）作ったワークフロー一覧です。
- ボタンを押したらそこまでスクロールする”ページ内スクロール”Floating用とで同じ物が２つずつ
- ○pxスクロールしたら画像が出てくる物が１つ
の計５個です。（１）は前回作ったものです。
参考にしたApp Demoにも済んだ印に同じ色分けをしました。
画像のサイズ比較、見え方比較
ここからは画像のデザインの話ですが興味のある方はぜひ。
今回、最初は上のpng（24）で保存した画像を使おうと思っていました。ただ画像が478KBと重いのです。これ１枚大した事では無いのですがなるべく軽くて綺麗な画像を使う方がサーバーの負担は少なくて済みます。
で、ちょっと面倒と感じた方もいるかも知れませんが スマホの枠→svgで保存（2KB）中の画像→ jpgで保存（74KB）２枚を使いました。合計してもpng24の6分の1ほどの軽さで見え方は（私の目では）変わりません。
ちなみにこの説明に使っている画像↑は61KBです
png24よりもpng8で保存する方が軽いのですがpng8は角だけ白い部分が出てしまいました。
複雑な写真でなく単純なイラストはgifで保存も有りですがsvgは拡大縮小しても劣化せず綺麗です。gifに比べれば重いですが◎
サイトの動きが遅くなったら重い画像も原因の一つかもしれません。
デザインもやり出すときりが無いですがスマホ横（Group R）のMinimum width〜（最小幅（現在の幅の％））を60％にした時の見え方と
90％にした時の見え方。
