ノーコード(no-code)

【超初心者日記】Day2:バブルで掲示板を1日で作った!作り方講座【Bubble.で1か月でSNSは作れるのか・・?!】

さて、『自作SNSを1か月で作らなくてはならなくなった!』という冷や汗もののプロジェクトが始まりました・・!

なぜなら、私は非エンジニア&非デザイナー!!

IT開発をするには超超ロースペックだからです!!

SNSはバブルというノーコードツールで作るという事は決まりましたので、今日は練習の為に比較的簡単そうな『掲示板』を作ることにしました。

【掲示板をつくる】
・名前、本文、画像、動画を入れれる掲示板を作る

 ↓ 完成ページ ↓

お花の好きな人の掲示板

いろんな方の動画やブログを拝見して「掲示板なら、簡単に出来そう♪」とか思っていたのも最初の10分。

そこから私はバブルの迷宮に入ってしまったのです・・

バブル初心者必見! バブルを基礎から丁寧に解説する

私は昨日一日、色々な方の動画やブログを読み漁っていました。

そこで感じたのは・・「『AしたらBになるよ』っていってるけど、AとBの間に10工程くらいあるのでは・・?」

ということです。

もともとエンジニアさんがノーコードの解説をされてたりしますので、非エンジニアの私にはわけがわかりません・・

魔法のようにすべてがスムーズに運ばれていくのです・・

「おかしい・・出来るはずなのに、出来ない・・」

そんな立ちふさがる大きな壁へのフラストレーションを、この挑戦日記にぶつけることにしました!

文系で『バブルに初めて触るよ』って方には、お役に立てるかと存じます。

(私も混乱しつつ掲示板を作り上げて参りましたので、工程の順番が完璧では無い事もあるかもしれませんが、あしからず・・)

バブルで『見た目』をつくる

ヘッダー部分を設定する

まずはバブルのアカウントを作ってログインし、『新しいアプリ・サイトを作る』を選びます。

そして開くと出てくるこのバブルのエディター画面。

あらかじめ入っているテンプレートが出てきます。

このテンプレートから作っていも良いのですが、今回はもっとシンプルな『掲示板』を作りたいので、左下にある『ブランクページから作成』をクリックします。

バブルのホーム画面

するとこのような真っ白な(基準線は入っていますが)画面になります。

ここから、自分の好きなようにサイトを構築していきます!

バブルの作業エリア

まずは、よくわかりませんが『トップ画像』でも入れてみようと思います!

左の『イメージ』ボタンを押し、右のエディター画面上でドラッグして画像を入れるエリアを決めます。

バブルの掲示板作り方1

画像のところを選んだまま左の『ワークフロー』タブを押してみます。

なにやら『ワークフロー』が出てきました! ここで動作の順番を決めるようです。

(ちなみに、下の画像のワークフローは無意味だったようで、あとで消しました・・)

バブルの掲示板作り方2

トップ画像を設置したので、「そうだ、ヘッダーも入れよう!」と思い、左側の下の方にある『ヘッダー』『フッター』のところから『ヘッダー』を選んでヘッダーのあるべき位置(画面の一番上)にドラッグで設置します。

ダブルクリック??しましたら、ヘッダー内の編集が出来るようになるようです。(最初、ヘッダー内を変更しようとしてもできなくて、一瞬あせりました・・)なにやら特殊な『編集専用画面』が出てくるようです。

ここで、もともとあったバブルのロゴを消して、自分のあらかじめ作成したpng画像をアップします。

右側に出てくる黒い編集画面の上部に『名前』を変えれるところがあるのですが、ここの名前は必ずわかりやすいものに変えておきましょう。のちのち「自分はいったいどこの作業をしているのか??」で混乱しなくなります。

バブルの掲示板作り方3

掲示板の入力エリアを設定する

では、ついに掲示板の入力エリアを作っていきます!

まずは名前を入力するところを作りたいので、左側から『インプット』を選んでエディター上でドラッグします。

右側の黒い編集画面で『ニックネームを入力してください・・』と、デフォルトの文言を消して好きな言葉に書き直します。

バブルの掲示板作り方4

次に『本文』を入力するところを作りたいので、左側から『マルチライン・インプット』を選びます。

ただの『インプット』は1行しか書けませんので、長い文章を入力して欲しい時には『マルチライン・インプット』の方を選びましょう。

右側の黒い編集ボックスに『ストレッチ』という項目があるので、ここにチェックを入れましたら、入力内容が長くなってもコンテンツに応じて箱が伸びて、入力できるようになります。

バブルの掲示板作り方5

次は、画像をアップロードをするエリアを作ります。

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

バブルの掲示板作り方6

次は動画ファイルのアップロードエリアを作ります。

左側には『ファイル・アップローダー』しかありませんから、それを選びます。

『動画をアップロード』などと書いておくと、使う人が分かりやすいでしょう。

バブルの掲示板作り方7

次は『投稿ボタン』をつくります。

左側から『ボタン』を選んでドラッグします。

まだ『ワークフロー』を設定していないので、このボタンを押しても、何も起こりません・・

とりあえず、見た目だけを作っていく作戦です!

バブルの掲示板作り方8

まずは『名前』『本文』『画像』『動画』の枠が出来ましたので、これを『グループ化』しておきます。

グループ化しておくと、後々『レスポンシブ化(スマホ対応など)』したときに表示が崩れず、綺麗です。

グループ化したいものをすべて選んで、右クリックで出てくる選択肢から『グループ化』を押します。

ついでに『ホリゾンタル』も押して、中央ぞろえにしておきましょう!

バブルの掲示板作り方9

投稿された内容(データ)を表示する場所を作る

では、『投稿する場所』が出来ましたので、次は『投稿内容を表示する場所』を作ります。

左から『リピーティング・グループ』を選んで、表示させたいところをドラッグします。

デフォルトは4列ですが、増やしたり減らしたりも出来ます。

ただし、1列とかを選びますと、何度もリロードして重くなるようです。

バブルの掲示板作り方10

このタイミングで、データベースを作りました!

混乱しすぎてスクショ忘れたのですが(公開すると、データベースのスクショが撮れないようです・・もしかしたら撮れるのかもしれませんが、今はやり方が不明です・・)

データベースの名前は何でも良いようです。わかりやすいものをつけましょう。

ちなみに私は『keijiban-naiyou』という、わかりやすすぎるかんじでつけました・・

このデータベースを設定していなければ、ここから先の作業がほとんど進みません・・(動かない! の連続に)

データベースは、このタイミングでしっかり設定しましょう!!!

というわけで、データベースを設定しましたら、リピーティング・グループの中に表示させたいデータを設定していきます。

バブルの掲示板作り方11

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

バブルの掲示板作り方12

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

バブルの掲示板作り方13

その前に、リピーティング・グループ全体を選択して、データベースの設定をしておきます。

ここでデータベースを作成していないと、何も選べず混乱の海に放り出されて泣きそうになりますので、絶対にデータベースはこのタイミングで作っておいて下さいね!!

バブルの掲示板作り方14

右側の編集画面の『データソース』に『サーチフォーkeijiban-naiyou』を設定しておかなければ、これまたリピーティンググループに何も起こらず、泣きそうになりますので、お気をつけて・・

動画を表示させるにはバブルのプラグイン『video.js』が良いです。

プラグインから接続しておきましょう。無料です。

バブルの掲示板作り方15

ワークフローの正方形の箱の下に出てくる長四角を押すと、右に黒い編集画面が出てきます。

これもデータベースと紐づいていますので、設定を絶対忘れないで下さいね!!

設定を忘れると、表示されるべきところに何も表示されなくて、叫び出したくなります。。

バブルの掲示板作り方16

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

かぶせないように、気を付けて下さいね!

バブルの掲示板作り方17

そうだ! ボタンの色を変えよう!

と思いつきました。デフォルトは青のボタンですが、今回はトップ画の花の色に合わせてピンクにしてみます。

左の『スタイル』をクリックして、該当のボタンを探します。

右側の編集画面で好きな色を入力しましたら、完成! 無事ピンク色のボタンになりました。

バブルの掲示板作り方18

最後に『レスポンシブ』も確認します。

スマホでもタブレットでも、PCでもちゃんと表示されるかしら・・?

レスポンシブはデザインタブの赤四角のところにあります。

バブルの掲示板作り方19

そして、デプロイ(公開)したら完成です!!

右上にある『ディプロップメント』を押さえると出てくる『ディプロイ』の文字。ここを押します。
バブルデプロイ

出来たっぽいですね!!

ここで喜んでURLを打ち込んだら・・あれれ?? プレビューでは見えていた『掲示板投稿内容の表示』が真っ白・・!!

バブルデプロイ完了

なんと、データベースを『ライブ』にしておかなければダメなようです。

データベースをライブにしましたら、無事、表示がされました!!

やったね! 完成!!!! おつかれさま、自分!!

バブルデータベースをライブに変更

↓ 出来たのはこの掲示板です!! ↓
お花が好きな人の掲示板

よかったら、投稿してみて下さいね。

しかし・・喜んだのも束の間。

ここで課題が発見されます。

スマホで見ると、投稿内容が細くなりすぎて、見えない・・!!

これは・・明日の課題ですね。

【今日(Day2)できたこと】

・バブルで1日で掲示板サイト(名前・本文・画像アップ・動画アップ)を完成させた!!

【これからすること】

・作った掲示板サイトのレスポンシブの設定を詰める事
・そもそもスマホ専用のサイトをつくること

ホッとひといき、カフェコーナー

いや~~もう、大変でした!!!

優しい方に泣きつきながら、なんとか完成させた『初めてのバブル・サイト』。

本当にデータベースにやられました・・!

そもそも私は非エンジニア。データベースの存在すら知らなかったのです・・こんなに重要なものだったとは・・!!!

ワークフローで動作をつけたり、データベースと見た目をくっつけたりすることも大事だと学びました・・

「そんなところに隠れていたの・・!!?」という場所に、重要なデータベースへの入り口があったり・・

もうほんと、1日で完成できたのは奇跡に近いです。。

まだ先ほど気が付いたレスポンシブ(スマホ表示)という課題は残っておりますが、PCではきちんと動作するサイトが出来たはずです!!

もう泣けてきます。。がんばったなぁ~自分。。(そして、ありがとう優しい方!)

まだ、完全にバブルを理解したわけではありませんが、ともかく大きな一歩を歩めた気がします。

これで、『1か月で自作SNS!』という夢にも、一歩近づけたかしら。

こんな状態の私ですので、1か月は短いですが、なんとかリリースに漕ぎつけたいと思います!