見出し画像

Bubbleを使った自己紹介カード交換アプリ開発の経過報告③（〜8/4）

あやさい

こんにちは！Bubbleを使った自己紹介カード交換アプリ開発の経過報告3回目をお届けします。
この開発の目的は、オンラインサロンメンバー同士のつながりを増やし、サロンの活性化、新規入会者の獲得を促進することです。
進捗報告フォーマットに基づいて、各メンバーが取り組んだこと、苦労した点、それをどのように解決したか、振り返りをしていきます。


リードエンジニア：じょん（@john01tgmck）

◾️ 取り組んだこと
・text shadowのCSS設定方法確認
・color pickerプラグインの設定確認
・複数ユーザーと複数の好きなツールの複数×複数の検索の実装テスト
・ChatGPTを使ったユーザーニックネームの作成

◾️ 苦労したこと
・backend workflowを使ったon a listの2重設定方法

◾️ どうやって解決したのか
・ChatGPTを使い、2重for文の概要を作成し、実装。一度紙に書き出し、AIに整理させることで実装時に迷いがなくなる

◾️ 振り返り
・機能実装前にはフローを書き出すことが大事
・メンバーに共有するために、FigJamを使ってナレッジを残している

できること、やりたいことなどを相談した結果、全て解決してくれました。聞くとだいたいすぐ答えが返ってくるので、普段どんだけインプットとアウトプットしているのか考えるとゾッとします。いや、すごいことなんですけどね？やっぱりそこなんだと思い知らされる感、、すごい。

エンジニア：トシ（@Craft_Sound_St）

◾️ 取り組んだこと
・Discordログイン時に、NoCodeCampメンバーでは無ければログインを弾く構造実装
・Discordログイン後に、NoCodeCampメンバーかどうかを判断して、ログイン後の挙動を変える処理実装開始

◾️ 苦労したこと
・Pop up上でDicord Login時に所属しているサーバーの情報を取得して、custom stateに記憶しようとすると429Error発生！custom stateに入れないで、通常のページ上でサーバー情報を引っ張ってくれば、問題なく動く
・上記のcustom stateへ入れたのち、Top pageでのPop upの表示分けにcustom state値を利用しようとしているが、実行順序の問題で上手く行かない

◾️ どうやって解決したのか
・原因不明で解析中。。。→Pop upのcustom stateは利用せず、pageのcustom Stateを利用で429Errorは解決
・Pop up振り分けの不具合は、新規登録ボタンクリック時に実行しているDiscordのサーバー名取得動作がPageLoadでもダブって実行されていたため。ここを解消させたら、custom stateを使用しても問題なく動作した

◾️ 振り返り
・APIのReturnを使って、その後の動作を処理するのは、実行順序が直列に行われなかったりするので、毎回プチ悩みするところ

ログイン周りの実装、ありがとうございます！まずはここがうまく機能しないと、アプリが始まらないので是非とも頑張っていただきたい。朝会でも、よく報連相してくれるので、とても助かっています。

エンジニア：ひろすぎ（@mt_hrk250）

◾️ 取り組んだこと
・Topページの作成
・フォントの文字を調整するためにCSSをかけないか検討
・マイページの作成

デザイン（Figma）で赤枠部分のテキストの太さに＋2px（これ以上の太さが用意されていないため）しているが、Bubbleでは同じ機能がないためどうするか

◾️ 苦労したこと
・フォント周りにボーダーを入れられなかった
・CSSを記載したもののうまく当たってくれず

◾️ どうやって解決したのか
・CSS TOOLSのpluginを導入し、CSSを記載した
・class指定、ID指定の概念を教えてもらった
・Align to parentと組み合わせてシャドウも表現した

やっとデザインが出来たので、ひろすぎさんもついに本格的に始動です。デザインカンプに沿って、1~2pxの差も見逃さず忠実に再現しようと手を尽くしてくれました。本来なら画像でもいいと思いますが、ひろすぎさんのように色々と思考錯誤すると、スキルアップにつながると思います。

PM兼デザイナー：あやさい（@ayasai27）

◾️ 取り組んだこと
・デザイン作成
・Bubbleを触って仕様確認
・チームに確認

枠のデザインを実際にBubbleを触って確認して提案

◾️ 苦労したこと
・Bubbleのプラグイン探しと実際に使用できるのかの判断

◾️ どうやって解決したのか
・やりたかったことは、色を変更する際にこちらで決めた色でしか変更できないよりも、カラーピッカーから自分の好きな色を選んで変更すること。これが出来ると、より個人の良さを出せる幅が広がると思った。その際にそういうプラグインがないかどうか、それが実際に今回のアプリで実装できそうなのか、じょんさんに検証してもらった。

左のカードの背景色や文字色を変更する際に、カラーピッカーから選べると選択肢が広がり、より個性が出せると判断

◾️ 振り返り
・朝会の時間をほぼほぼもらって、3日ほどかけて全ての画面をみんなに確認してもらった。たくさんフィードバックをもらえたので、良い改善ができたし、画面の移行もスムーズにいくイメージができた。また、アプリ内で使用するプラグインも、最終的には決めてもらったが、実装に入る前に提案できることは効率が良いなと思う。実際にBubbleを触って、仕様を提案できたことは、個人的にかなり嬉しかった！

デザインの確認をメンバーにしてもらい、FBもらえたことが何よりも大きい！修正は多かったけど、これで認識のすり合わせもできたので、開発が進みそうです。

まとめ

PMとしての役割が全うできずにいますが、それぞれが積極的に動いてくれるので、本当に助かっています。デザインの確認作業も3日に渡ったにも関わらず、細かい部分まで修正・改善案を考えてくれて、良きチームだなと感じました。これからはいよいよBubbleでの構築がメインになってくるので、盛り上がってきそうです。
最後まで読んでいただき、ありがとうございました！
次回の更新も頑張ります！

この記事が気に入ったらサポートをしてみませんか？