【掲示板をつくる】
・名前、本文、画像、動画を入れれる掲示板を作る
↓ 完成ページ ↓
いろんな方の動画やブログを拝見して「掲示板なら、簡単に出来そう♪」とか思っていたのも最初の10分。
そこから私はバブルの迷宮に入ってしまったのです・・
バブル初心者必見! バブルを基礎から丁寧に解説する
私は昨日一日、色々な方の動画やブログを読み漁っていました。
そこで感じたのは・・「『AしたらBになるよ』っていってるけど、AとBの間に10工程くらいあるのでは・・?」
ということです。
もともとエンジニアさんがノーコードの解説をされてたりしますので、非エンジニアの私にはわけがわかりません・・
魔法のようにすべてがスムーズに運ばれていくのです・・
「おかしい・・出来るはずなのに、出来ない・・」
そんな立ちふさがる大きな壁へのフラストレーションを、この挑戦日記にぶつけることにしました!
文系で『バブルに初めて触るよ』って方には、お役に立てるかと存じます。
(私も混乱しつつ掲示板を作り上げて参りましたので、工程の順番が完璧では無い事もあるかもしれませんが、あしからず・・)
バブルで『見た目』をつくる
ヘッダー部分を設定する
まずはバブルのアカウントを作ってログインし、『新しいアプリ・サイトを作る』を選びます。
そして開くと出てくるこのバブルのエディター画面。
あらかじめ入っているテンプレートが出てきます。
このテンプレートから作っていも良いのですが、今回はもっとシンプルな『掲示板』を作りたいので、左下にある『ブランクページから作成』をクリックします。

するとこのような真っ白な(基準線は入っていますが)画面になります。
ここから、自分の好きなようにサイトを構築していきます!

まずは、よくわかりませんが『トップ画像』でも入れてみようと思います!
左の『イメージ』ボタンを押し、右のエディター画面上でドラッグして画像を入れるエリアを決めます。

画像のところを選んだまま左の『ワークフロー』タブを押してみます。
なにやら『ワークフロー』が出てきました! ここで動作の順番を決めるようです。
(ちなみに、下の画像のワークフローは無意味だったようで、あとで消しました・・)

トップ画像を設置したので、「そうだ、ヘッダーも入れよう!」と思い、左側の下の方にある『ヘッダー』『フッター』のところから『ヘッダー』を選んでヘッダーのあるべき位置(画面の一番上)にドラッグで設置します。
ダブルクリック??しましたら、ヘッダー内の編集が出来るようになるようです。(最初、ヘッダー内を変更しようとしてもできなくて、一瞬あせりました・・)なにやら特殊な『編集専用画面』が出てくるようです。
ここで、もともとあったバブルのロゴを消して、自分のあらかじめ作成したpng画像をアップします。
右側に出てくる黒い編集画面の上部に『名前』を変えれるところがあるのですが、ここの名前は必ずわかりやすいものに変えておきましょう。のちのち「自分はいったいどこの作業をしているのか??」で混乱しなくなります。

掲示板の入力エリアを設定する
では、ついに掲示板の入力エリアを作っていきます!
まずは名前を入力するところを作りたいので、左側から『インプット』を選んでエディター上でドラッグします。
右側の黒い編集画面で『ニックネームを入力してください・・』と、デフォルトの文言を消して好きな言葉に書き直します。

次に『本文』を入力するところを作りたいので、左側から『マルチライン・インプット』を選びます。
ただの『インプット』は1行しか書けませんので、長い文章を入力して欲しい時には『マルチライン・インプット』の方を選びましょう。
右側の黒い編集ボックスに『ストレッチ』という項目があるので、ここにチェックを入れましたら、入力内容が長くなってもコンテンツに応じて箱が伸びて、入力できるようになります。

次は、画像をアップロードをするエリアを作ります。
左側から『ピクチャー・アップローダー』を選んで、エディター上でドラッグします。

次は動画ファイルのアップロードエリアを作ります。
左側には『ファイル・アップローダー』しかありませんから、それを選びます。
『動画をアップロード』などと書いておくと、使う人が分かりやすいでしょう。

次は『投稿ボタン』をつくります。
左側から『ボタン』を選んでドラッグします。
まだ『ワークフロー』を設定していないので、このボタンを押しても、何も起こりません・・
とりあえず、見た目だけを作っていく作戦です!

まずは『名前』『本文』『画像』『動画』の枠が出来ましたので、これを『グループ化』しておきます。
グループ化しておくと、後々『レスポンシブ化(スマホ対応など)』したときに表示が崩れず、綺麗です。
グループ化したいものをすべて選んで、右クリックで出てくる選択肢から『グループ化』を押します。
ついでに『ホリゾンタル』も押して、中央ぞろえにしておきましょう!

投稿された内容(データ)を表示する場所を作る
では、『投稿する場所』が出来ましたので、次は『投稿内容を表示する場所』を作ります。
左から『リピーティング・グループ』を選んで、表示させたいところをドラッグします。
デフォルトは4列ですが、増やしたり減らしたりも出来ます。
ただし、1列とかを選びますと、何度もリロードして重くなるようです。

このタイミングで、データベースを作りました!
混乱しすぎてスクショ忘れたのですが(公開すると、データベースのスクショが撮れないようです・・もしかしたら撮れるのかもしれませんが、今はやり方が不明です・・)
データベースの名前は何でも良いようです。わかりやすいものをつけましょう。
ちなみに私は『keijiban-naiyou』という、わかりやすすぎるかんじでつけました・・
このデータベースを設定していなければ、ここから先の作業がほとんど進みません・・(動かない! の連続に)
データベースは、このタイミングでしっかり設定しましょう!!!
というわけで、データベースを設定しましたら、リピーティング・グループの中に表示させたいデータを設定していきます。

まずは名前を表示させたいので、右の黒い編集画面からデータベースの『keijiban-naiyou』を選択→その後『’s name』を選択します。

次は本文を表示させたいので、『keijiban-naiyou』→『ディスクリプション』を選択します。

その前に、リピーティング・グループ全体を選択して、データベースの設定をしておきます。
ここでデータベースを作成していないと、何も選べず混乱の海に放り出されて泣きそうになりますので、絶対にデータベースはこのタイミングで作っておいて下さいね!!

右側の編集画面の『データソース』に『サーチフォーkeijiban-naiyou』を設定しておかなければ、これまたリピーティンググループに何も起こらず、泣きそうになりますので、お気をつけて・・
動画を表示させるにはバブルのプラグイン『video.js』が良いです。
プラグインから接続しておきましょう。無料です。

ワークフローの正方形の箱の下に出てくる長四角を押すと、右に黒い編集画面が出てきます。
これもデータベースと紐づいていますので、設定を絶対忘れないで下さいね!!
設定を忘れると、表示されるべきところに何も表示されなくて、叫び出したくなります。。

ちなみにですが・・リピテーション・グループ内の『青い長四角』同士が1pxでもかぶっていると、正常に動作しません。。
かぶせないように、気を付けて下さいね!

そうだ! ボタンの色を変えよう!
と思いつきました。デフォルトは青のボタンですが、今回はトップ画の花の色に合わせてピンクにしてみます。
左の『スタイル』をクリックして、該当のボタンを探します。
右側の編集画面で好きな色を入力しましたら、完成! 無事ピンク色のボタンになりました。

最後に『レスポンシブ』も確認します。
スマホでもタブレットでも、PCでもちゃんと表示されるかしら・・?
レスポンシブはデザインタブの赤四角のところにあります。

そして、デプロイ(公開)したら完成です!!
右上にある『ディプロップメント』を押さえると出てくる『ディプロイ』の文字。ここを押します。
出来たっぽいですね!!
ここで喜んでURLを打ち込んだら・・あれれ?? プレビューでは見えていた『掲示板投稿内容の表示』が真っ白・・!!

なんと、データベースを『ライブ』にしておかなければダメなようです。
データベースをライブにしましたら、無事、表示がされました!!
やったね! 完成!!!! おつかれさま、自分!!

↓ 出来たのはこの掲示板です!! ↓
お花が好きな人の掲示板
よかったら、投稿してみて下さいね。