【掲示板をつくる】
・名前、本文、画像、動画を入れれる掲示板を作る
↓ 完成ページ ↓
いろんな方の動画やブログを拝見して「掲示板なら、簡単に出来そう♪」とか思っていたのも最初の10分。
そこから私はバブルの迷宮に入ってしまったのです・・
バブル初心者必見！ バブルを基礎から丁寧に解説する
私は昨日一日、色々な方の動画やブログを読み漁っていました。
そこで感じたのは・・「『AしたらBになるよ』っていってるけど、AとBの間に10工程くらいあるのでは・・？」
ということです。
もともとエンジニアさんがノーコードの解説をされてたりしますので、非エンジニアの私にはわけがわかりません・・
魔法のようにすべてがスムーズに運ばれていくのです・・
「おかしい・・出来るはずなのに、出来ない・・」
そんな立ちふさがる大きな壁へのフラストレーションを、この挑戦日記にぶつけることにしました！
文系で『バブルに初めて触るよ』って方には、お役に立てるかと存じます。
（私も混乱しつつ掲示板を作り上げて参りましたので、工程の順番が完璧では無い事もあるかもしれませんが、あしからず・・）
バブルで『見た目』をつくる
ヘッダー部分を設定する
まずはバブルのアカウントを作ってログインし、『新しいアプリ・サイトを作る』を選びます。
そして開くと出てくるこのバブルのエディター画面。
あらかじめ入っているテンプレートが出てきます。
このテンプレートから作っていも良いのですが、今回はもっとシンプルな『掲示板』を作りたいので、左下にある『ブランクページから作成』をクリックします。
するとこのような真っ白な（基準線は入っていますが）画面になります。
ここから、自分の好きなようにサイトを構築していきます！
まずは、よくわかりませんが『トップ画像』でも入れてみようと思います！
左の『イメージ』ボタンを押し、右のエディター画面上でドラッグして画像を入れるエリアを決めます。
画像のところを選んだまま左の『ワークフロー』タブを押してみます。
なにやら『ワークフロー』が出てきました！ ここで動作の順番を決めるようです。
（ちなみに、下の画像のワークフローは無意味だったようで、あとで消しました・・）
トップ画像を設置したので、「そうだ、ヘッダーも入れよう！」と思い、左側の下の方にある『ヘッダー』『フッター』のところから『ヘッダー』を選んでヘッダーのあるべき位置（画面の一番上）にドラッグで設置します。
ダブルクリック？？しましたら、ヘッダー内の編集が出来るようになるようです。（最初、ヘッダー内を変更しようとしてもできなくて、一瞬あせりました・・）なにやら特殊な『編集専用画面』が出てくるようです。
ここで、もともとあったバブルのロゴを消して、自分のあらかじめ作成したpng画像をアップします。
右側に出てくる黒い編集画面の上部に『名前』を変えれるところがあるのですが、ここの名前は必ずわかりやすいものに変えておきましょう。のちのち「自分はいったいどこの作業をしているのか？？」で混乱しなくなります。
掲示板の入力エリアを設定する
では、ついに掲示板の入力エリアを作っていきます！
まずは名前を入力するところを作りたいので、左側から『インプット』を選んでエディター上でドラッグします。
右側の黒い編集画面で『ニックネームを入力してください・・』と、デフォルトの文言を消して好きな言葉に書き直します。
次に『本文』を入力するところを作りたいので、左側から『マルチライン・インプット』を選びます。
ただの『インプット』は1行しか書けませんので、長い文章を入力して欲しい時には『マルチライン・インプット』の方を選びましょう。
右側の黒い編集ボックスに『ストレッチ』という項目があるので、ここにチェックを入れましたら、入力内容が長くなってもコンテンツに応じて箱が伸びて、入力できるようになります。
次は、画像をアップロードをするエリアを作ります。
左側から『ピクチャー・アップローダー』を選んで、エディター上でドラッグします。
次は動画ファイルのアップロードエリアを作ります。
左側には『ファイル・アップローダー』しかありませんから、それを選びます。
『動画をアップロード』などと書いておくと、使う人が分かりやすいでしょう。
次は『投稿ボタン』をつくります。
左側から『ボタン』を選んでドラッグします。
まだ『ワークフロー』を設定していないので、このボタンを押しても、何も起こりません・・
とりあえず、見た目だけを作っていく作戦です！
まずは『名前』『本文』『画像』『動画』の枠が出来ましたので、これを『グループ化』しておきます。
グループ化しておくと、後々『レスポンシブ化（スマホ対応など）』したときに表示が崩れず、綺麗です。
グループ化したいものをすべて選んで、右クリックで出てくる選択肢から『グループ化』を押します。
ついでに『ホリゾンタル』も押して、中央ぞろえにしておきましょう！
投稿された内容（データ）を表示する場所を作る
では、『投稿する場所』が出来ましたので、次は『投稿内容を表示する場所』を作ります。
左から『リピーティング・グループ』を選んで、表示させたいところをドラッグします。
デフォルトは4列ですが、増やしたり減らしたりも出来ます。
ただし、1列とかを選びますと、何度もリロードして重くなるようです。
このタイミングで、データベースを作りました！
混乱しすぎてスクショ忘れたのですが（公開すると、データベースのスクショが撮れないようです・・もしかしたら撮れるのかもしれませんが、今はやり方が不明です・・）
データベースの名前は何でも良いようです。わかりやすいものをつけましょう。
ちなみに私は『keijiban-naiyou』という、わかりやすすぎるかんじでつけました・・
このデータベースを設定していなければ、ここから先の作業がほとんど進みません・・（動かない！ の連続に）
データベースは、このタイミングでしっかり設定しましょう！！！
というわけで、データベースを設定しましたら、リピーティング・グループの中に表示させたいデータを設定していきます。
まずは名前を表示させたいので、右の黒い編集画面からデータベースの『keijiban-naiyou』を選択→その後『’s name』を選択します。
次は本文を表示させたいので、『keijiban-naiyou』→『ディスクリプション』を選択します。
その前に、リピーティング・グループ全体を選択して、データベースの設定をしておきます。
ここでデータベースを作成していないと、何も選べず混乱の海に放り出されて泣きそうになりますので、絶対にデータベースはこのタイミングで作っておいて下さいね！！
右側の編集画面の『データソース』に『サーチフォーkeijiban-naiyou』を設定しておかなければ、これまたリピーティンググループに何も起こらず、泣きそうになりますので、お気をつけて・・
動画を表示させるにはバブルのプラグイン『video.js』が良いです。
プラグインから接続しておきましょう。無料です。
ワークフローの正方形の箱の下に出てくる長四角を押すと、右に黒い編集画面が出てきます。
これもデータベースと紐づいていますので、設定を絶対忘れないで下さいね！！
設定を忘れると、表示されるべきところに何も表示されなくて、叫び出したくなります。。
ちなみにですが・・リピテーション・グループ内の『青い長四角』同士が１pxでもかぶっていると、正常に動作しません。。
かぶせないように、気を付けて下さいね！
そうだ！ ボタンの色を変えよう！
と思いつきました。デフォルトは青のボタンですが、今回はトップ画の花の色に合わせてピンクにしてみます。
左の『スタイル』をクリックして、該当のボタンを探します。
右側の編集画面で好きな色を入力しましたら、完成！ 無事ピンク色のボタンになりました。
最後に『レスポンシブ』も確認します。
スマホでもタブレットでも、PCでもちゃんと表示されるかしら・・？
レスポンシブはデザインタブの赤四角のところにあります。
そして、デプロイ（公開）したら完成です！！
右上にある『ディプロップメント』を押さえると出てくる『ディプロイ』の文字。ここを押します。
出来たっぽいですね！！
ここで喜んでURLを打ち込んだら・・あれれ？？ プレビューでは見えていた『掲示板投稿内容の表示』が真っ白・・！！
なんと、データベースを『ライブ』にしておかなければダメなようです。
データベースをライブにしましたら、無事、表示がされました！！
やったね！ 完成！！！！ おつかれさま、自分！！
↓ 出来たのはこの掲示板です！！ ↓
お花が好きな人の掲示板
よかったら、投稿してみて下さいね。
