　はじめに

はじめまして。Qiitaでの投稿が初めてになります。daichi(だいち)です。プログラミング歴も浅く、ノーコードも初めて触れた駆け出し者です。

今回はそんな私がパーツを組み合わせるだけで簡単に実装出来てしまうノーコードツールのBubbleを利用して、初心者の私でも簡単にアプリぽいものを作る事が出来たので、これからノーコードを学ぶ初学者の皆さんに向けてフロントエンドのheader部分を解説していきたいと思います。

今回はheader部分を解説するのですが、headerを学ぶだけでもBubbleの実装の仕方がほぼ理解できるかと思います。これからBubbleを始めようとする方にはとてもおすすめです。

多様なノーコードツール

まず、ノーコードについて軽く説明を挟んでおきます。
ノーコードには何種類物のツールがあるので、ツールによって成果物を作る方法が全く異なります。

・テンプレートが事前に用意されており、テンプレートのデザイン部分のみ、アレンジして簡単にアプリを作成するツール。
(メニュー一覧画面やデータベースは既に完成されている)　　
　ex) Adalo, webflow

・スプレッドシートでデータベースを管理するツール。
　ex) Glide, Airtable

・デザイン、ワークフロー、データベースを自分で１から実装するツール。
　ex) 今回解説するBubble

代表格はこんな感じです。今やGoogleが買収したAppsheet やAmazonが提供するHoneycodeのように、一気にノーコード界は盛り上がりを見せています。

今回解説するBubbleはテンプレート無しに１から自分で実装していくので、他のノーコードツールに比べて覚える操作が多少多いですが、覚えてしまえばプログラミングで実装するよりも簡単に、より早く実装することが出来ます。

コードで書いて実装となると、それぞれに適したHTMLタグやCSSで色や文字の大きさ、設置する場所も一つ一つ細かく設定しなければいけません。

加えてレスポンシブデザインも設定するとなると、header部分だけでも時間が結構かかってしまいます。

Bubbleで行うフロントエンド部分の実装は、文字や画像の配置はもちろん簡単に実装出来てしまうのですが、レスポンシブデザインや、動的なJavaScriptやjQueryを用いたハンバーガーメニューやクリック操作と言った複雑な仕組みも、ノーコードを使えば、コードを長々と書かずにきれいなデザインを一瞬で実装出来てしまいます。
あまりの早さに驚きが隠せないはずです。

Group化が操作性を上げてくれる

まず実装する上でのポイントがGroup化です。header以外も同じなのですが、
必ず、コンテンツの親Group(黒い部分)→各項目の親Group→子要素のGroupを設置する必要があります。一つ一つ丁寧にGroup化させなければいけません。

それぞれの項目をGroup化させるのには理由があります。それはGroup化をしておかなければ、Workflowというアニメーションを加える画面内で、ハンバーガーメニューの操作やクリック時の操作が実装出来ないからです。
単体のログインボタンでさえもその親Groupが必要になります。

またノーコードでは、Groupでの集団移動→設置が基本となります。
例えば、画像内のLINEのサービス、会社概要、ヘルプ部分で説明していくと、
①それぞれTextとして画面に表示させる。(この時は単体)
②親GroupをそれぞれのTextが満たされるように設置(ここで集団化される)

集団化によってそれぞれのtextを等間隔にできるDestibute horizontalyや
高さを同じにできるcenter vertivallyもあり、操作性が格段に上がります。

高さも間隔もまとめてGroup化すれば簡単に実装出来ます。

また、style画面で背景色、色、文字のサイズ、文字体、hover時の変化についても簡単に設定することが可能です。

アニメーションの実装の早さは異常

header部分でのアニメーションを加える部分は主に、ログインボタン、登録ボタン、レスポンシブ時に適用されるハンバーガーメニューになります。
そこで登場するのがWorkflowの画面です。

画像のようにユーザー登録画面を見てみると、
1.ユーザー登録ボタンをクリック
2.ドロワーメニュー一覧のドライバー登録ボタン、ユーザー登録ボタンをクリック
3.ドロワーメニュー一覧を非表示にさせる×ボタンをクリック
がアニメーションとして考えられます。

画像のようにWorkflowの画面で、各項目のアニメーションの動きを選択肢から選んで設定することができます。このWorkflow内はアニメーションを実装する上での知識が多少必要になりますが、公式のrefelenceを見ればすぐに理解できるはずです。

抑えておくべきアニメーションは主に、
・ドロワーメニューを下に登場させる時のanimate
・新たに登録用のフォームを表示させる時のshow
・ドロワーメニューを非表示にさせる時のhide です。

ちなみに、登録用のフォームはsignup/login popupという名前のテンプレートがBubble内にあるので、それを用いて文字の変更やオリジナルで項目の追加をすればそのまま利用することが出来ます。

※ただし、オリジナルで項目の追加をした場合にはWorkflowの追加が必要になります。

ここまでが主なheaderのフロントエンド部分の実装になりました。次回以降はBubbleのデータベースやその他のスプレッドシートを利用したツールによる成果物の内容について触れていきたいと思います。私もノーコードは始めたばかりでまだまだ実力不足ですが、一緒に頑張っていきましょう。