Bubbleのチュートリアル４：Building a slideshow

# はじめに
Bubbleというノーコード/ローコードでアプリを作るサービスがあり、ちょっと言葉に癖があったりするので、チュートリアルをやってみる記録です。Bubble用語は、Bubbleのように網掛けします。
なるべく細かくキャプチャしていくので、見るだけでもBubbleってこうやるんだと感じていただければ。

https://bubble.io/

## これまでのチュートリアルをやってみた記事
1. [Saving data](https://qiita.com/yo16/items/d77a5cf8df18419b079e)
    - 位置情報をDBへ登録して、地図にマーカーを表示
    - データのInsert
    - 地図
2. [Building a sign-up system](https://qiita.com/yo16/items/1ac9467ad5bb5ed6ba52)
    - ユーザー登録とログイン、ログオフ
3. [Saving and modifying data](https://qiita.com/yo16/items/449b9e0b15ff76ec9584)
    - SNSっぽい、投稿といいね
    - `Repeat Group`の利用
    - データのInsert、Update
4. **Building a slideshow** ＜＜今回＞＞
    - スライドショー形式のアプリ
    - `Plugin`の利用

# チュートリアルの記録
## チュートリアルを選択
ログイン後のトップページ
＞左メニューのAcademy
＞Learn your way
＞By watching
＞Interactive lessons
＞Building a slideshow

今回のサブタイトルは、「Create a beautiful picture slideshow」だそうです。いつもそうなんだけどBubbleのチュートリアルは、最終的にどういうのができるのか、何が学べるのか、わからないですｗ この文言だけ。

見るだけのシステムなら、なんとなく、簡単にできそうではありますね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/1ae7850b-c8fb-88a9-cfe3-58740d612cb8.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/2e88e119-251c-f82e-751e-eb6f8315e566.png)
あー見た目のプロパティの練習なのかな。

では開始！

## スライドショーElementを作る
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/0e2b943d-04bc-801c-6ae8-4f1a99c5340d.png)
写真を表示するスライドショーを描きます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/b6bdcd10-1cde-69ac-00cb-2d622241c461.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/9c740cb4-316f-a051-faff-392031187a2c.png)
おぉ！プラグインの練習！

Bubbleの`plugin`は、標準の`Elements`だけでなくほかの機能を使いたいとき、追加して、機能拡張をする機能です。ちなみに、`plugin`は自分で作って売ることもできます。実は私はそれを狙っています。:money_mouth:

作る人になるためには、もちろん使い方はしっかり知っておきたいところなので、がぜんやる気が出てきました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/fb4c2ba6-192c-1e24-c625-69d315a627a9.png)
左の`Plugin`から、"Add plugins"。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/14abfebc-915d-4730-cf33-86dfd32c982f.png)
ロード画面。
ライバルは5,805個か。なるほど。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/0f7145e9-c870-3992-d041-c1a6bd10c7d5.png)
こんな、プラグインのインストール画面から、今回はBubble社製の"Slick Slideshow"というプラグインを使います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/6506efb9-a09d-f391-71e8-ebbdc5b95463.png)
インストールされたら、`Design`に移ると～

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/4d6818af-ad26-a55c-1341-b892c7a33868.png)
ボタンとかテキストの並びに、"Slideshow"という`Elements`が現れていて利用できるようになってます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/3c4cfa1d-46a9-f0cb-c83d-f30960ce25fd.png)
それをページに置いて、プロパティから写真をアップロード・・・ん？自分で用意するのか。まぁいいけど。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/470b2aff-b76f-7ce2-1829-9e1047271c04.png)
と思ったら、画像のリンクもつけてくれてて親切。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/e24027e5-a3fa-a248-8af1-9bda1c89e72a.png)
リンクにマウスカーソルオンでURLを見ると、S3に置いてある写真の模様。リンクをコピーして、"Dinamic image"に入れて見ます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/04130fc9-a629-2085-878e-20aa673ba7f2.png)
ベトナムの米屋さんみたい。Googleレンズで翻訳してもらったら、ジャスミンの香りとか出てきたから、お米にそういう香りがついているんですかね。ベトナムの１人あたりのコメ消費量は世界第4位。日本は50位くらいらしいです。あ、話がそれてる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/2c3665f9-50c0-ff1d-8e2e-fbd49ecb7d62.png)
次の画像も、次々登録できるんですね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/bc77add0-2303-f47a-2045-affb12ccdad1.png)
またリンクが・・・ワクワクｗ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/2927c684-1fe0-5ef5-ae5c-7fc1a569c96e.png)
どこかわからないけど漢字とCASINO LISBOA。調べたら、マカオのカジノらしいです。脱線はちょっとにして次。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/3cce77b7-e00e-2de1-d543-7cba1187a1f6.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/546d03fc-6e10-0e3d-6bb4-177a1161b3e0.png)
でた。勝手に追加するパターン。まぁ今回はURL貼るだけだからいいけど。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/ac3688fe-6f72-d625-7570-db1f309e119b.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/e298b5a7-8a58-d8ce-feee-824fbeb3f0b8.png)
これはもしや、このままプロパティをいじって終わるのでは・・・。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/07e026a3-c084-8a05-68a4-266398f2bdbc.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/129983a2-2d83-ee32-6b1b-a62d9aa067a0.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/f716e82a-cd5d-473e-8f1b-78602034cae2.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/ee3a68b7-9b0e-7e6b-002d-6bd634a7e5e7.png)
うん・・・境界線が10pxで灰色になった。それは教わらなくてもわかるよ！
次は背景色・・・

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/a7e60919-9db2-8c87-875a-e7fff7ee7c00.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/304523bb-fd0d-49e3-f486-b6e29dd4c5a6.png)
何もないところをクリックすると、ページ全体のプロパティになると。

背景のことを、"Backdrop"ともいうんですね。（英会話）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/ca2d9c80-bc34-926f-9af2-038cf89205d6.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/18d0d4d3-077d-8f03-b349-097c127ecb1e.png)
色はカラーパレットで選べます。

たぶん、カラーパレットの下のサンプル色みたいな８色は、アプリの主な色をあらかじめ決めておいて、そこから選べるようになっているんだと思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/cd02587f-68cf-1899-ed24-00c83cfd719e.png)
あれ、でもおかしいな。灰色を選んでいるのに、#FFFFFF（白）。フローティングのメッセージも、入力ボックスも、そして実際の画面も白。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/144a3c08-7804-10f2-0571-8d3f4c1f4521.png)
たぶんこれ、"Background"という色を定義するとき、間違って不透明度を0＝完全に透明にしている！この小さい正方形が灰色に見えるのは、透明でダイアログの背景色が見えているのでは疑惑。

"edit →"というリンクがあるので押してみると・・・

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/23d622e1-1255-d39a-433e-c38b9392d3c8.png)
こんな画面に飛びました。Backgroundは、"#FFFFFF"になってるから、適当に変更しておこう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/85be60dd-71db-425b-179b-6c28c1afb47c.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/c4917b8e-70ac-2492-37d4-f59fb2792ab0.png)
変更したことがわかるように、変な？色＋微妙な不透明度にしてみました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/e249f4cb-5562-a137-2916-fa26ddf2f1b1.png)
ふと気づいたけどこの色の設定は、左のアイコンの`Styles`でできるみたいです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/13a7032d-804f-e3f1-15e9-aeff272171fd.png)
`Design`に戻ると、ちゃんとピンク色の不透明39%になってました。もうー。
"Color variables"の正方形は、ダイアログの背景色に対するピンクの半透明の色が出ている感じ。わかりづらいなぁ。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/8a29a886-86eb-75de-9c84-dc236b542937.png)
あーやっぱ終わった。`Preview`！

## プレビューで確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/a592f61f-df23-e8fc-d0ba-52d0f19b616d.png)
写真の下に３つの点があって、それが順番に移って写真も変わっていきます。ホームページとかによくあるやつですね。左右の＜と＞のボタンも機能します。

右端に微妙な隙間があるのが気になりますね。写真は縦横いろんなサイズがあるから、これをどうするかですが、これもあり。ただセンタリングはしてほしいけど・・・。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/9d293c1f-979f-74f6-f35e-94f110e56dcc.png)
隙間をはっきりさせるために枠を横長にして、プロパティを見ていたら、"Run-mode rendering"という項目が、私が求めるもののようでした。"Stretch"（枠に合わせて伸ばす）か、"Rescale"（縦横比固定でスケール）のどちらか。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/d8f465ec-83a1-f72b-1f9f-32092d85c810.png)
先ほどは"Rescale"でしたが、"Stretch"にしたらこんな感じ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/7bbcbbe9-d557-5c7b-d3b4-c034f67f1d36.png)
"Rescale"だとこんな感じ。センタリングされてる。さっき右端に隙間があったから、ちょっと右が広いのかな。

今回は以上です！

# おわりに
これだけといえばこれだけなんだけど、プラグインをインストールすれば、この機能が超簡単にできるよという話ですね。Bubbleでは簡単すぎて、なんだこれってなりますが、自分で作るとなると結構大変なので、ありがたいです。"作るのは結構大変"ということを知らない非エンジニアは、なんだこれ、フーン・・・て終わるかもしれない。

抽象化すると、**プラグインを探せば、やりたいことは割とあるよ、探してね！** というチュートリアルでした。

終わってみないとテーマがわからないチュートリアル。これはこれでいいのかな。ちょっと考えさせられました。

ではよきBubbleライフを！

# Next
次はチュートリアル５に挑戦。
[Bubbleのチュートリアル５：Sending data to pages](https://qiita.com/yo16/items/0b0a847b0e4fa382e07c)