ハッカソン体験｜第一回 Click Live 視聴型ハッカソンに参加してみた

No Code Japanさん主催の第一回 Click Live 視聴型ハッカソンに参加してみましたので、備忘録。

「Live 視聴型ハッカソン」って何・・！？

って最初思いましたが、「SandBox」なるwebサイトに、みんなが作成中のアプリの進捗を公開することでLive感が感じられる仕組みのことでした。
確かに、これまでのハッカソンイベントは他に何人参加しているのかもわからず、「作品を投稿して終わり」というのが主流だった気がします。Live視聴型って正直すごい楽しかった。これから主流になってほしいなー！

第一回 Click Live 視聴型ハッカソン

作ったアプリの概要

以前、Adaloで作ってみた保健指導アプリをClickでも作ってみました。Adaloに比べて、Clickは細かいフィルター制御とかが出来ないからこのアプリは無理かな～と諦めていたのですが、何とハッカソン直前のClick大型アップデートで実装されることに！

アプリの全体像解説

画面数は１４。キャンバスの全体構成はこんな感じ。
　サインアップ画面×１
　サインイン画面　×２
　入力フォーム画面×１
　リスト表示画面　×６
　静的画面　　　　×４

テーブル数は３。
　Userテーブル
　健康状態テーブル
　区分マスタ（「午前・お昼・夕方」のドロップダウンリスト用）

リレーションはこんな感じ。
「Userテーブル」（1）ー（多）「健康状態テーブル」（多）ー（1）「区分マスタ」
こうすることで、健康状態テーブルにフォームから入力した際にUser情報を格納できたり、ドロップダウンリストで区分マスタのレコードが使用できる様になります。

アプリのポイント解説

細かく書いていくのも大変なので、ハッカソン直前のClick大型アップデートで実装された機能を中心にポイントになる設定を載せていきます。

テキストエレメントの「Text」に「Login In User > Username」を指定することで、サインインしたユーザ名を表示。

リストの「フィルター」で「Login In User > User-健康状態」を指定することで、健康状態テーブルに格納されたサインインユーザに絞ってリスト表示。

リストの「カスタムフィルター」で「ALL User > FuLL Name」「等しい」「Empty」を指定することで、Usersテーブルに格納されているユーザーのうち、FuLL Nameが空白のユーザーに絞ってリスト表示。

トップ画面の作り方

元エンジニアあるあるですが、これまで細かい挙動には拘るもののデザイン面はあまり気にしてませんでした。
しかし「SandBox」に投稿されている他の方のアプリはトップ画面がとにかくおしゃれ・・さすがにデフォルトのサインイン画面はまずいと思い、作ってみることに。（ こういうのが事前にわかるのもLive 視聴型のメリット）

デザインツール「Canva（キャンバ）」で、こんな感じのスマホサイズの画像デザインをつくり、トップ画面（サインイン画面）の背景画像に設定。
（これくらいならClickのエレメントだけで作れるんじゃない、と思われた方、その通りです。デザインセンスがある方ならもっとCanvaのポテンシャルを引き出せるはず・・）

ハッカソン投稿

作ったアプリを「NoCodeBASE」に投稿すれば、これでハッカソン参加したことになる様です。

【第一回 Click Live視聴型ハッカソンエントリー作品】 遠隔保健指導 CLICK HEALTH

昨日投稿して、恐れ多くも10イイネほどいただけました。ありがたや・・
しかし上位の方々はイイネ数数百と、桁の違う争い(笑)上位争いが見れるのもLive視聴型の楽しみですね。NoCodeBASEのアカウントで他のユーザーへ1票できる様だったので、自分は「マチナカベンチ」さんへ投票しました。さすがに他の方の作品なのでリンクは載せられませんが、デザインセンスに脱帽です。。

ちなみにこのハッカソンに参加することで、これから出来るという有料コミュニティへの参加が無料になる特典が付くようです。これは楽しみ！気軽に投稿できるので、まだの方は是非参加してみてください～～