NoCode Ninja@Bubbleを中心にプロトタイプの制作過程をアウトプット

プログラミング不要の「NoCode」について発信します。作ってみたいサービスや企画などありましたらDMくださいー。

【Bubbleで実装#1「掲示板」】Bubble初学者がぶつかる意外なハードル・・レスポンシブ(responsive)への意識について

f:id:nocodejp:20200104153015p:plain

年も明けました。

今年もよろしくお願いします。

No Codeの一年にしていきたいと思います♪

晦日も正月も、蕎麦食ったりおせち食ったりお餅食ったりしながら

No CodeツールのBubbleで初学者がわしわしと作っています。

何事も最初は既存の作品のコピーから・・ということで某サイトを参考にさせていただいています(見たまんまです・・)。

 

沼りながら喜びながら・・

ある程度の形は出来てきたので残しておこうと思います。

https://girlsmirror01042020.bubbleapps.io/version-test

 

1、良かった点

 

・慣れ始めたらそれなりに効率的に作業できるようになった。

 →そして理解が進むと、 作るイメージが明確になってきます。ここ大事。

 

2、苦戦した点

 

・やや重複しますがとにかく慣れるところ

→英語なのもあって、何をどうしたらどうなるか最初はなかなか入って来づらかった

 

ある程度カーソルをポチポチ押したりいじったり作ったりすると当然ですが慣れてきます。

しかしここのハードルは意外と高く、Bubble初心者や更にプログラミング経験ない方だとやる気奪われるポイントでもあると感じます。

感覚的に作れるというNo Codeの良い部分はあるよなぁと感じますし、それは使っててわかるのですが、、

わからないことにわからないことをどんどん積み重ねられる感がありますのです。。

No Codeなんで、すぐにサクっと作れるっしょ!と思っていると、なんとまぁそこにあるハードル。

抜け出すと、何てことないんですけどね♪

 

 

・responsive(レスポンシブ)

(PCサイズやタブレットスマホサイズでそれぞれ見られるように調整すること)

 

Bubbleだけではないのでしょうが、いやぁこれ大変・・英語わからない上に思い通りになかなか動いてくれない、その原因が結構意外なところにあるという感じです・・。

例えば・・・

f:id:nocodejp:20200104152408p:plain

スマホサイズにするとヘッダー途切れる事件

インデックス(トップサイト)ではスマホサイズまで落とすと途切れてしまうのです。

どう調整しても解決せず、まぁ困りました・・

 

ヘッダーそのものは悪くないように見えていたのです、が・・・

f:id:nocodejp:20200104153015p:plain

うーん、ピンクの部分長すぎる

ピンクの部分(ヘッダー)の上のグレー部分が画面の大きさを表しているので、これで中央いけてんじゃん、などと軽く見ていましたが後にこれが原因だと感じ調整したり・・・。

 

結局twitterでヘルプしてみましたら、なんとブログ見て勉強させてもらってた方から直接アドバイスいただけたりしまして・・(チビりそうなくらい有難かった)

更にサンプルまで作っていただいて送ってくださったのです(優しい・・)。

有識者の方からのご意見は本当に有難いです。

f:id:nocodejp:20200104153434p:plain

無事解決!

 

 

インデックス部分に直接入れてみましたら、無事解決しました。

 

ヘッダーを分けて作っていたのですが、そのヘッダーそのものの設定が何かしら合っていなかったと思われます。

ここはまだ右も左もわからない頃に作ったのもあり、どこをどういじったのかがもはやわからずで・・この形に執着するのは非効率でしたので丸ごと移しました。

 

いやー。

 

常にレスポンシブを意識しながら作っていくことは本当に大事です。

 

初学者が最初からこれをやるのはそもそも難しい話なんですけど、

気づいて意識するのは出来るだけ早いほうがいいです。

後で間違いなく後悔することに・・後戻りは進めば進むほどハードモードになるの助。

 

 

3、これからの課題

 

・おそらくこの手のサイトはデータベースが肝になってくると予測します。

逆にシステムさえ確立させてしまえば、あとはユーザーが作っていく性質かなぁと。

ところがこのデータベース、何ともとっつきづらい感じがしています・・。

何とも拙い感じがするのが自分でもわかるのですが、一歩一歩進むしかないっすね。

 

あとは画像のアップや検索システム、各種プラグインも覚えてこのブログで紹介出来るくらいになれたらなぁと思っています。

 

まだ何ともまとまりがないというか、学習フェーズがまだ上がっていない感じがビシビシするので数か月後に読み返したら赤面必死間違いなしなのですが(笑)

 

・・赤面できるくらい進化しまぁす!!