NowLoading...

me-shi

https://github.com/kanko-dori/me-shi
https://me-shi.ga/
TypeScript

TypeScript

CSS

CSS

DynamoDB

DynamoDB

Azure

Azure

AWS

AWS

ハッカソンが終わった後もあと少しだけ繋がってみるアプリ

ユーザーアイコン

Takamichi Omori

MacBook
サムネイル

推しアイデア

ハッカソンが終わったら捨ててしまいがちな名刺をWebアプリで管理することで、あと少しだけ繋がってみることができます！ また、ハッカソンで出会える人は図鑑の形で表示されます。まだ出会ってない人も表示することで、”集める楽しさ"も味わってもらえると思います！

作った背景

「ハッカソンは夏休みである」 ハッカソンも夏休みも、終わって思い返せば心残りがあるものです。そんな思い出の日の終わりに、何か他のハッカソン参加者と時間を共有した証を残したい。また、今後もこの繋がりを大切にしたい。

推し技術

フロントエンドはSvelteを使用しました。バックエンドはAWS AppSyncを採用し、フロントエンドとはGraphQLを通じて通信を行います。また、OGPの生成には wasm が用いられ、最新技術をふんだんに使用した構成になっています。

プロジェクト詳細

me-shi

me-shi とは、ハッカソンで使う名刺をモチーフとした Web アプリです。 同じハッカソンに参加した人とのコミュニケーションのきっかけになることを願っています。

イチオシ機能

  • 名刺交換
  • 図鑑機能
  • コメント機能
  • OGP 生成

名刺交換

  • 名刺から、名刺を交換するためのQRコードが生成できます。
  • このQRコードをスマートフォンのカメラなどで読み込んでもらい、ブラウザで遷移すると名刺を交換することができます。 01FG5TGK6BKGMKQCBRC1TVHAPQ.png 01FG5NVBS234KEVV5VS4A1RMCR.png

図鑑機能

  • 同じイベントに参加していた人のリストを図鑑形式で表示することができます。
  • この図鑑を見て、まだ出会っていない人とコミュニケーションをとるきっかけになれば嬉しいです。 01FG5TFX6YYTZGEH80P2SMD76D.png

コメント機能

名刺を交換した人のプロダクトに対してコメントをつけることができます。 Screen Shot 20210922 at 14.22.28.png

コメントを貰うととてもうれしいので、面白かったプロダクトにはコメントを付けてみましょう！

OGP 生成

名刺のURLをSNSなどにシェアすると、 OG Image として 名刺がプレビューされます。 Screen Shot 20210922 at 13.05.05.png

名刺は SVG で動的に生成しているのですが、 OG Image として使用することはできません。 そのため、 SVG を何らかの方法で PNG にする必要があります。 今回は、SVG から PNG を作成するライブラリ(svg2png-wasm, svg2png-deno-deploy )を作成して、使用しています。

使用した技術

フロントエンド

  • Svelte
  • SvelteKit
  • TypeScript
  • Tailwind CSS
  • Post CSS
  • ESLint
  • Prettier
  • SVG
  • GitHub Actions

Tag の表示や、フォームなどは今回自前で全部実装しています。 すでに存在しているイベントや、チームの補完機能も存在しています。

OGP生成

バックエンド

  • AWS AppSync
  • AWS DynamoDB
  • AWS Lambda

バックエンドは上記のサービスから構成されています。サービスに加え、GraphQL Schema なども AWS-CDK を用いてコード上で管理されています。

もし何かあったときにも戻せることや、同じコードを使えば同じ環境が再現できることがコードで構成を管理することのメリットとして挙げられます。

また、ユーザ認証のために Auth0 を利用しています。 Auth0 のプロバイダーとして GitHub を用いることで、ハッカソンで活用した GitHub を用いてログインすることができます。

構成図

サービス全体の構成図は以下のとおりです。 Screen Shot 20210922 at 8.34.34.png

  • Web フロントは Azure App Service にデプロイしています。
    • Svelte は Azure Static Web Appsにもデプロイできます。
    • しかし、今回は OGP画像の生成や、SvelteKit を用いた SSR をするために Azure App Service を選択しました。
  • バックエンドのサービスは AWS AppSync を選択しました。
    • もともと、Webフロントとの通信は GraphQLを用いることを想定していました。
      • 理由としては、 query で返り値を選択することができるため、無駄のないリクエストが可能であるためです。
      • また、subscription という リアルタイム通信が今回の要件に最適でした。
    • AWS AppSync は、 lamba とのつなぎ込みが用意されており、制御が簡単です。
    • また、 subscription に必要な WebSocket サーバも標準で用意されているなど、ハッカソン中の短期開発に向いていると感じました。
  • 今回は、 IDaaS として Auth0 を選択しました。
    • セキュリティ上の理由から、エンドポイントを認証無しで運用するのは危険です。
    • AppSync は AWS Cognito などを認証サービスとして利用できますが、独自ログインを実装する必要があり、ユーザにも手間をかけると考えました。
    • ユーザのログインの手間を減らすことを考えると、先述したように GitHub からのログインがハッカソンという場であることを加味すると最適だと考えました。
    • そこで今回は、Auth0 を OpenID Connect プロバイダーとして用い、 GitHub との Integration を設定することで GitHub を用いたログインを実現しました。
      • GitHub を用いて Auth0 上に作成した me-shi app にログインしてもらい、その token を用いて GraphQL サーバへリクエストを行うことできます。
      • GraphQL サーバは token を Auth0 に対して検証し、正しいユーザからのアクセスであることを認可してもらいます
Takamichi Omori

Takamichi Omori

@onsd