推しアイデア
ハッカソンが終わったら捨ててしまいがちな名刺をWebアプリで管理することで、あと少しだけ繋がってみることができます! また、ハッカソンで出会える人は図鑑の形で表示されます。まだ出会ってない人も表示することで、”集める楽しさ"も味わってもらえると思います!
ハッカソンが終わったら捨ててしまいがちな名刺をWebアプリで管理することで、あと少しだけ繋がってみることができます! また、ハッカソンで出会える人は図鑑の形で表示されます。まだ出会ってない人も表示することで、”集める楽しさ"も味わってもらえると思います!
「ハッカソンは夏休みである」 ハッカソンも夏休みも、終わって思い返せば心残りがあるものです。そんな思い出の日の終わりに、何か他のハッカソン参加者と時間を共有した証を残したい。また、今後もこの繋がりを大切にしたい。
フロントエンドはSvelteを使用しました。バックエンドはAWS AppSyncを採用し、フロントエンドとはGraphQLを通じて通信を行います。また、OGPの生成には wasm が用いられ、最新技術をふんだんに使用した構成になっています。
me-shi とは、ハッカソンで使う名刺をモチーフとした Web アプリです。 同じハッカソンに参加した人とのコミュニケーションのきっかけになることを願っています。
名刺を交換した人のプロダクトに対してコメントをつけることができます。
コメントを貰うととてもうれしいので、面白かったプロダクトにはコメントを付けてみましょう!
名刺のURLをSNSなどにシェアすると、 OG Image として 名刺がプレビューされます。
名刺は SVG で動的に生成しているのですが、 OG Image として使用することはできません。 そのため、 SVG を何らかの方法で PNG にする必要があります。 今回は、SVG から PNG を作成するライブラリ(svg2png-wasm, svg2png-deno-deploy )を作成して、使用しています。
Tag の表示や、フォームなどは今回自前で全部実装しています。 すでに存在しているイベントや、チームの補完機能も存在しています。
バックエンドは上記のサービスから構成されています。サービスに加え、GraphQL Schema
なども AWS-CDK
を用いてコード上で管理されています。
もし何かあったときにも戻せることや、同じコードを使えば同じ環境が再現できることがコードで構成を管理することのメリットとして挙げられます。
また、ユーザ認証のために Auth0
を利用しています。
Auth0 のプロバイダーとして GitHub を用いることで、ハッカソンで活用した GitHub を用いてログインすることができます。
サービス全体の構成図は以下のとおりです。
Azure App Service
にデプロイしています。
Azure Static Web Apps
にもデプロイできます。Azure App Service
を選択しました。AWS AppSync
を選択しました。
query
で返り値を選択することができるため、無駄のないリクエストが可能であるためです。subscription
という リアルタイム通信が今回の要件に最適でした。AWS AppSync
は、 lamba とのつなぎ込みが用意されており、制御が簡単です。subscription
に必要な WebSocket サーバも標準で用意されているなど、ハッカソン中の短期開発に向いていると感じました。Auth0
を選択しました。
AWS Cognito
などを認証サービスとして利用できますが、独自ログインを実装する必要があり、ユーザにも手間をかけると考えました。GitHub
からのログインがハッカソンという場であることを加味すると最適だと考えました。Auth0
を OpenID Connect プロバイダーとして用い、 GitHub
との Integration を設定することで GitHub
を用いたログインを実現しました。
GitHub
を用いて Auth0
上に作成した me-shi
app にログインしてもらい、その token を用いて GraphQL サーバへリクエストを行うことできます。Auth0
に対して検証し、正しいユーザからのアクセスであることを認可してもらいます