kitazawa.dev Portfolio

第 34 回全国高専プログラミングコンテスト福井大会に向けて作成しました。

UIデザインとフロントエンドの実装を担当しました。

virtuAI（バーツAI）は生成AIではなく人の手によって描かれたイラストであることを証明することで、生成AIを活用しやすくするwebプラットフォームです。

機能

• イラストなどの画像投稿
• AI用に学習されないようにする保護
• モデル作成のためのイラストダウンロード機能
• モデル作成に利用された際の収益分配機能

デザイン

多くの機能をいかにまとめ、求めている機能にたどり着きやすくするかという点に苦戦しました。

イラストレーターやモデル作成者など、様々な人が利用するプラットフォームなので機能が分散しがちであり、何度も修正を繰り返しました。

結果的に、オブジェクトを選択してから行動を指定してもらうことを徹底することで正確に操作できるようになりました。

実装

初めてweb系の技術を触ったため、JSXやCSSの書き方に慣れるのが大変でした。

APIはチームのメンバーが作成したものを使用し、GraphQLでデータの取得をしました。

実装に予想以上の時間がかかってしまいチームのメンバーに迷惑をかけてしまったので、以降細かい進捗報告など心がけています。（本当にすみませんでした）

パーティーで使用するために作成しました。

簡単に好きなテーマで人狼ゲームをすることができるwebアプリです。

機能

• 匿名の回答入力
• ランダムで回答を表示

実装

パーティーが始まってから作成し始めたので短い時間の中頑張りました。

作成時にほかのプロジェクトで使用していたSolidJSを使用しました。

今ならReactを使用してCSRで実装します。

これまでに作成したアプリや web サイトなどを紹介するために作成しました。

デザイン

多くの人が操作することを想定してシンプルで見やすいサイトを目指しています。

2024年夏のインターンシップでデザイナーの方にフィードバックをいただいたのですが全然修正できてない...

実装

Next.jsとTailwindCSSを用いて作成しています。

markdownを多用することによって拡張性を高め、今後作品を追加するときの手間を減らしました。

デジタルアート同好会の活動を紹介するためのサイトを作成しました。

フロントエンド

Astroを使用して、静的サイトを生成しデプロイしています。

素早い表示と部分的な動的コンテンツを実現するために、SSGとSSRを行うことができるフレームワークを選定しました。

使い慣れたNext.jsも選択肢には上がりましたが、サイトの規模に対して大規模すぎると考えたため、よりシンプルなAstroを採用しました。

チームのメンバーが作成したデザインとHTML・CSSでのマークアップをAstroに落とし込み、コンポーネント等を作成しました。

バックエンド

Honoでバックエンドを実装しました。

もともと作品に対するリアクション機能などを実装する予定だったため、バックエンドを作成しました。

作品のアップロードと更新、削除が行えるようになっています。

ストレージに cloudflare KVとcloudflare R2を使用しました。

キャッシュを活用して画像や動画など、比較的容量の大きいファイルを高速で表示できるようにしています。

また、APIを活用して画像を指定した解像度のwebp形式にするスクリプトを作成し、サムネイルの画像を高速に表示できるようにしました。

管理画面

Reactを使用してAPIエンドポイントを叩くためのGUIを作成しました。

作品の募集期限と文化祭での展示が近く、作品のアップデートを素早く行う必要があったため、簡単に操作できるように工夫しました。

KadaiHub は学校の課題をサポートする web アプリです。

学生が学校の課題を効率よく管理し、締め切りを忘れることなく、友達と一緒に頑張れる環境を作ります。

背景・目的

学校の課題は量が多い上に提出期限がばらばらで、その提示方法も様々です。 これらを一人で管理するのは大変であり、以下のようなことがよく起こります。

• 締め切りを間もちいてもちいて
• 存在を忘れる
• やる気が起きない

KadaiHub は、友達と課題の進捗や締め切り、内容を共有することで自然とやる気が引き出される仕組みを提供します。

主な機能

1. 課題の共有・締め切り管理

   • 課題をグループ内で共有し、締め切りや進捗を一覧表示

2. ランキング表示機能

   • 課題の進捗度をランキング形式で表示します
   • グラフを使い、自分が今どの位置にいるかを直感的に把握できます
   • 「友達に追いつこう」「もっと先に進みたい」 という気持ちが自然と湧き上がります
   • 自分の順位や友達との差がひと目でわかります

3. 進捗確認機能

   • 他のユーザーが特定の問題を解き終えたかどうかを確認

   • 「みんな頑張ってるから自分もやろう」と、自然とやる気が出ます

   • 友達の進捗がわかると、自分も頑張ろうという気持ちになります

4. タイムライン機能

   • 誰がどの課題をリアルタイムで進めているか表示
   • 深夜に頑張っている友達を見つけると、**「自分も頑張ろう！」**と安心感ややる気が湧いてきます

デザイン

視覚的に課題の進捗の「やばさ」が伝わるように意識してデザインをアップデートしました。

以前のバージョンの KadaiHub から、ユーザーは主に 2 点の動機によって課題を進めることがわかりました。

• 友達に取り残されているから追いつくために課題を進める - 同調圧力
• 友達よりも順調に進んでいる達成感 - 優越感

移行するにあたり、この 2 点を特に強く感じてもらえるようなアプリ設計・デザインになっています。

1. ランキング表示

• 課題の進捗割合に応じて順位付けて表示しており、自分の順位がわかりやすく表示されます。
• 表示に棒グラフを用いることで数字よりも直感的に他のユーザーとの差を確認できます。

2. 問題表示

• 問題を表示している画面でもほかのユーザーが終わっているかどうか確認することができ、常に友達を感じさせる工夫をしています。

• タイムライン機能により、リアルタイムで誰が課題を進めているか見ることができ、「友達もやってるならやるかぁ」という感じでモチベーションを上げることができます。

実装

• フロントエンド （SolidJS, Less）

  • 状態管理の容易さ
  • 軽快な動作による使いやすさ

• バックエンド （SolidJS, Firebase）

  • SolidStart を用いてサーバーサイドの処理を実装
  • ユーザー認証、データ管理に Firebase を使用

結果

• クラスメートを中心に 50 人超に使用していただきました。

• 「課題が早く終わるようになった」や「モチベが高くなる」といった声をいただきました。

• デザイン・設計の狙い通りの効果を生むことができた。

Every Thing 2 TOEIC は、TOEIC の問題を簡単に作成できる Web アプリです。 AI を活用して、ユーザーが指定したお題から即座に TOEIC の問題を生成できます。 すべての問題は一度限りの生成で保存されず、手軽に練習できる仕様になっています。

特徴

• 簡単操作: アクセスしてすぐに問題を生成可能
• 全パート対応: TOEIC の Part1 ～ Part7 の問題を作成
• カスタマイズ可能: ユーザーのお題に基づいて AI が問題を生成
• Markdown 出力: 生成した問題を Markdown 形式で共有可能
• 認証機能: Google でログイン可能
• レート制限: Cloudflare D1 を活用して無料利用の範囲を管理し、将来的に課金機能を導入可能

システム構成

プロジェクトはMonorepo 構成で管理され、フロントエンドとバックエンドが 1 つのリポジトリで管理されています。

every-thing-2-toeic/
│── frontend/          # フロントエンド
│── backend/           # バックエンド
│── shared/            # 共通コード（API定義、型定義など）
│── package.json       # ワークスペース管理
│── .gitignore
│── README.md

Monorepo の利点

• 統一された開発環境: フロントエンド・バックエンドを一つのリポジトリで管理することで、開発フローを簡潔化。
• コードの再利用: shared/ ディレクトリに共通の型や関数をまとめ、重複コードを削減。
• 一括ビルド & デプロイ: CI/CD を活用し、フロントエンドとバックエンドを同時にデプロイ可能。
• 依存関係の管理が容易: npm ワークスペースを利用することで、各パッケージの管理を効率化。

認証方式

• フロントエンドで Firebase Auth を利用し、idToken を取得
• Authorization: Bearer <idToken> をバックエンドへ送信
• Hono で Firebase Admin SDK を用いてトークンを検証し、ユーザー情報を取得

Hono の利点

• 軽量 & 高速: Node.js ベースのフレームワークよりも軽量で、エッジ環境での動作に最適化。
• Cloudflare Workers に最適: Hono は Cloudflare Workers 上で動作するため、バックエンドのレスポンスが高速。
• 簡潔なコード: ミドルウェアの設定やルーティングがシンプルで、メンテナンス性が高い。

工夫した点

1. レスポンスの速さを追求

• Cloudflare Workers を活用し、API の低レイテンシーを実現
• フロントエンドとバックエンドを同じエッジ環境にデプロイし、データ取得を高速化

2. 使いやすさと直感的な UI

• ユーザーがアクセスしてすぐに問題を生成できる設計
• シンプルな UI と最小限のステップで問題作成を完了できる UX 設計

3. スケーラブルなアーキテクチャ

• Cloudflare D1 を活用し、ユーザーごとのレート制限を管理
• Monorepo 構成でフロントエンド・バックエンドを統一管理し、開発効率を向上

4. セキュリティとデータ管理

• Firebase Auth を活用し、ユーザーごとの認証とデータアクセス管理を強化
• Firestore Security Rules を設定し、不正アクセスを防止

5. 将来の拡張性を考慮

• 課金機能の導入を見据えたレート制限設計
• Firestore のデータを分析し、ユーザーに最適な問題を提供する機能の追加を計画