ノーコード(no-code)

【超初心者日記】Day3-4:バブルのレスポンシブ対応(スマホ対応)とツイッターもどきに挑戦【Bubble.で1か月でSNSは作れるのか・・?!】

非エンジニア・非デザイナーのよーこふが『1ヶ月で自作SNSを作る!』というこの企画。

昨日は『バブルで掲示板を作った』までは良かったのですが・・なんとスマホ対応が微妙で、

スマホ対応している表示としていない表示が混在する・・という事態になっておりました。

バブル(Bubble.)とは?】

コードなしでプログラミングできる(webサイトやwebサービスやアプリが作れる)いわゆる『ノーコード(No-Code)』ツールです。

ビジュアル・エディターで直感的に操作できるのが、非エンジニアの強い味方!!

しかし、けっこう高機能なせいか、まともに使えるようになるには2~3ヵ月はかかると言われています。

バブルもプログラミングも超初心者なよーこふ。

さて、たった1ヶ月でバブルでの自作SNSはリリースできるのか・・?!

バブルのレスポンシブ対応(スマホ対応)のやり方

それでは、今日の課題『バブルのスマホ対応』についてみて参りましょう!

以下のオレンジ色の枠の所が、問題の『細くなりすぎている所』でした。

ここを広げてスマホ対応にしたのが以下のスクショなのですが、赤い四角で囲まれたところの数値を『350px』にしただけです。

これで、オレンジの枠がぐいーんと広がってくれました!

バブルのスマホ対応

他にもよくわからずに色々設定を変更した気がするのですが・・ちょっとうろ覚えです・・

またしっかりレスポンシブのやり方を把握しましたら、記事にしたいと思います。

あれ? テスト投稿が真っ白です・・?

よし、スマホ対応したよ♪ と確認しにサイトに行きましたら、

なんと『投稿内容』が真っ白になってるではありませんか??!

あら・・? さっきまではきちんと表示されてたはずなのに・・

この現象は、『テスト環境』から『本番環境』に移行した時に生じる『あるある』の状況らしいです。

テスト環境のデータベース(DB)は『Development DB』、本番環境のデータベースは『Live DB』とのことです。

この2つは、全くの別物として考えた方が良く、

本番環境に移行した時に、データベースもデータベースのページから移行しなくてはならないのです。。

なんと、このデータベース、デプロイ(公開)しただけでは自動では移行されず、手動でコピーする必要があったのです・・!!

以前のデータは『Switch to development』をクリックすると見えるようです。

今回は気が付いた時には2人の方が掲示板に書き込みをしてくださっていたので、今からデータベースを触ると『上書き』されてしまい、残念なことになってしまいますので、今回は触らない事にします。

特にログイン情報とかはうっかりすると真っ白になってしまいますので、要注意です!!

ツイッターもどきに挑戦!

さて、これで『お花が好きな人の掲示板』はひとまず完成という事にいたしましょう!!

(これ以上触ったら、また真っ白になりそう・・こわ)

ということで、さっそく次の課題です!

次の課題は『ツイッターもどきを作ろう!』です。

ツイッターもどきを作る理由

私が1か月後にリリースしたいのは、なに?

そう、『SNS』です!

ということは、SNSの基礎を知らなくてはなりません。

投稿はもちろん、ログイン情報、会員情報、プロフィールページ、フォロー・フォロワー、イイネ・・学ぶことは山ほどあります。

ツイッターもどき・・さあ、つくろう!

では、今度は『旅行好きの為のツイッターTravetter』を作ろうと思います。

まずは『新しいアプリを作る』を押してアプリを新規作成します
ツイッターもどき1

ブランクページを開いたら、ツイッターに必要なページをまずは追加していきます。

左上の『アド・ニューページ』で追加します。

・インデックス(最初からあるページ):ログインなどします
・ホームページ:ツイッターの一覧を表示します
・プロフィールページ:個人プロフィールのページです

をとりあえず作成します。
ツイッターもどき2

とりあえず必要なページを作れたら、インデックスページから作っていきます。

まずはヘッダーからつくろうかしら。前回は『ヘッダー』を使いましたので、今回は別のもので作ってみたいと思います。

ドラッグして一番上に『フローティング・グループ』を作成します。

右の黒い編集画面から、背景色を選びます。

ツイッターもどき3

アイコンも入れてみましょう!

左の『アイコン』を選んで、表示させたい位置にドラッグします。

右の黒い画面から、好きなアイコンを選びます。

今回は『旅行好き』な人の為のツイッターという事で、飛行機のアイコンにしてみました!

ツイッターもどき4

またデータベースのスクショを忘れましたが、今回は前回の反省を活かして最初にデータベースを入れています。

データベースは基本的に『ドロップダウン』から選択していけば良いのですが、『List of ~』という選択をしたい場合には、赤四角の中のチェックにチェックを入れておきます。

『List of~』の使い方は、まだいまいちよく分かっていないのですが・・

おそらく何かをリストにするときに必要なのでしょう。

ツイッターもどき5

では、インデックスの『見た目』に戻って、作って参ります。

文字を装飾したいときは2通りあるかと思います。

①この場所の文字だけ装飾したいとき
②全ページに同じ装飾をしたいとき

①の場合は、右の黒い編集画面の一番下の赤四角の隣の黒い所(赤四角するのを忘れてました・・)の『リムーブ・スタイル』をクリックして設定します。

②の場合は、右の黒い編集画面の一番下の赤四角の所をクリックして、設定します。

ツイッターもどき6

リピーティング・グループ全体の設定をします。

リピーティング・グループの中に、ツイート内容が表示されるようになるはずです!

ツイッターもどき7

リピーティング・グループの中の設定をしていきます。

ツイッターもどき8

細かい設定をきちんとしていきます。

右側の黒い編集画面の青い文字は、データベースとの紐づけですので、非常に大事です!!

データベースを先に作っておかなければ、ここに文字は何も出てこないので、混乱必須。

必ずデータベースは極初期に作成しておきましょう!!

ツイッターもどき9

ログイン情報などは『インプット』という項目で作成します。

『テキスト』を選んでしまうと、ユーザーさんが『何も入力できない・・!』という事態になりますので、くれぐれもお気をつけて!

ツイッターもどき10

そしてワークフローも設定します。

ワークフローはボタンなどの設定に大活躍です。

『このボタンを押したら、こうなる』という順番を設定しておきます。

「ボタンを押したのに、何も起こらない・・?」という事態は避けたいですものね!

ツイッターもどき11

と、ここまで出来ましたが・・もう良い時間です。

というわけで、今日はここまで!!

明日はどんな課題を設定しようかしら・・?

ホッと一息、カフェコーナー

ふぅ~~~、今日も1日がんばりました!!

データベースがかなりあやしいので、非常に心配ですが、とにかく「最初にデータベースを作っておくこと!!」という超重要事項を覚えましたので、まあ良しとしましょう。

ワークフローは少し設定しましたが、『見た目』を作るのに思いのほか時間がかかってしまって、ワークフローまではほとんど手が回りませんでした・・

『グループ』の使い方もまだまだあやしいですし・・左側の各ツールの使い方を、もっとしっかり覚えなければ・・と思いました。

明日から作業に入る前に、基本チュートリアルを何度も見ることにします!!

「急がば回れ」ですものね!

というわけで、明日の課題が決まりました!

【Day:5の課題】

・ツイッターもどきを完成させる!

あらまあ・・ずいぶん壮大な目標を立ててしまいました・・

大丈夫でしょうか・・?!

ともかく、行けるところまで行きたいと思います!!!