Webアプリケーション制作一覧

映画情報サイト「Re:Movie」

URL: https://re-movie2024.vercel.app

技術スタック

  • フロントエンド: Next.js13（Pages Router） + TypeScript
  • バックエンド: Next.js API
  • データベース: MongoDB（ユーザー登録、レビュー投稿）
  • ホスティング: Vercel

工数

約40人日

詳細

映画のトレンドをチェックできるように映画情報サイトを制作しました。
映画情報はTMDB APIで取得、トップページはSSRで作成してプラグインのSwiperでカルーセルスライダーにしました。

サブページはCSRを採用して無限スクロールでデータフェッチを行い、コンテンツを展開することにストレスを感じさせない工夫をしました。

無限スクロールの課題である、「遷移したらページ最上部からスクロールし直す必要がある」といった課題は、カードをクリックしたらその場でモーダルを展開して詳細データを流し込み表示させるといった方法を取りました。遷移を回避することで再スクロールの必要がないようにしました。
↓モーダルで表示される。

ソート機能を設け、自分が関心のあるものを先頭にして表示を並び替えることも可能です。

映画の本数が最も多い国を選別し、世界中の映画をチェックできるようにしました。言語を選択すると選択した国の映画のみが表示されます。

サイドバーにはジャンルを設け、どのページからでもアクセスできるようにしました。

検索機能では作品名、俳優の名前等で検索できます。画像の例では「ジョニー」で検索し、「ジョニー」と名がつく作品が表示されていますが、「CASTS」をクリックすることで「ジョニー」と名がつく俳優が表示されます。

カードをクリックするとモーダルが展開して作品情報を見ることができます。

作品情報内ではトレーラー映像を観ることができます。

「注目度」では世界でどれだけ話題になっているのか知ることができます。（SNSや他のメディアを基準としたTMDB独自の評価システムを使用しています）

平均評価はログインしているユーザーだけが評価することができ、全ての評価の平均値が表示されます。

ログインしているユーザーは作品のレビューを投稿することができます。削除ボタンは投稿者本人にのみ表示され、本人によってのみ削除が行えます。

ユーザー新規登録ではニックネームとパスワードを登録し、ログインすることで作品のレビューを投稿できるようになります。メールアドレスの登録を必要とせず、誰でも気軽に登録できる仕様にしました。

ダークモードにも対応しています。

制作のきっかけ

簡単なアプリケーションをいくつか作成し、MongoDBとの連携を学習した後にオリジナルのアプリケーションサービスを作成しようと考えました。
私は映画やアニメが好きなので映画紹介サイトを作りたいと思って調べてみたところ、TMDBというサービスを発見しました。

制作してみて

Next.jsの学習を開始して3ヶ月目に作った作品になります。
これまでは小規模なアプリケーションをいくつか作成しており、そこで習得した知識を組み合わせて開発しました。
Pages Routerを採用した理由は、当時はApp Routerに関する情報が少なく、理解が難しかったためです。また、Pages RouterとApp Routerの違いを把握する目的もありました。
この作品を通じて、Vercelへのデプロイ方法やGitHubの基本的な使い方を初めて習得することができ、大変思い入れのある制作物となりました。

タスク管理ツール「manage-staff」

URL: https://manage-staff.vercel.app/

【ゲストログイン用メールアドレスとパスワード】
メールアドレス：sample@sample.com
パスワード：sample01

技術スタック

  • フロントエンド: Next.js13 AppRouter + TypeScript
  • バックエンド: Next.js API + TypeScript
  • データベース: MongoDB
  • ホスティング: Vercel

工数

約30人日

詳細

マルチテナントアーキテクチャのアプリケーションを作成しました。
テナントを新規に作成するとメンバーや取引先、配属先の登録を行うことができ、他のユーザーの情報は表示させないといった実装をしました。いくつものテナント（グループ）を管理し、それぞれが独立させて他のグループには情報等が干渉しないようにしています。

誰が、何処に、いつ派遣されるかを直感的に分かるようにしました。
オーナーやメンバーが直ぐに情報を見れるようにと、トップページではメンバーが「いつ」「何処に」配属されているのかを表示するようにしています。

「配属登録する」をクリックすると下からメニューが現れてタスクを登録することができます。配属先登録を行う事ができるのはテナントのオーナー（創設者）と権限が付与されたメンバーのみです。

「取引先」や「メンバー」を専用ページで登録する事で「配属先登録」する事ができます。

登録したメンバーは「メンバー一覧」から見ることができます。こちらでは「メンバーの削除」と「管理者権限の切り替え」が行え、権限が有効になったメンバーは「配属先登録」が行えるようになります。
↓テナントのオーナー（創設者）の画面。

↓メンバー側の画面。管理者ステータスの変更とメンバーの削除を行うことができません。

チームメンバーでチャットができるようにしました。
リアルタイム通信は未実装になります。

プロフィール編集画面では「名前」「メールアドレス」「パスワード」を変更することができます。

アカウント削除では、テナントを作成したパスワードを入力して「削除する」をクリックするとグループが削除されデータが消去されます。

制作のきっかけ

このアプリケーションを制作しようと思ったキッカケは、自分専用のToDoアプリを作成し、それを知り合いに見せたことがキッカケです。（自分専用のToDoアプリは、ToDoを登録するとカレンダーに予定が追加、同時に自分宛に詳細メールが送信されて、指定した時間の数分前にリマインドメールが送られるといったものです。）
「社員の状況をエクセルで管理していて、状況の把握に手間取ることが多い」とのことでした。
また、私の以前の職場（運送業界）でも、従業員の配送先は「鉛筆で書いた配車表」を使って管理していました。（予定の変更があれば消しゴムで消して書き直す、事務所にある配車表を見なければ予定がわからない状態。）
管理者や従業員がインターネットでいつでも自分の予定の確認や登録ができ、自宅でもスマホから操作と確認が可能、そういったものがあれば需要がありそうだなと思ったことが「manage-staff」を作ろうと思ったキッカケでもあります。
PC操作が不慣れな人がなるべく簡単に使えるようなシンプルなアプリケーションを目指し、あえて機能を削った部分もあります。
私が住む新潟ではまだまだ紙と鉛筆で管理するといった文化が残っています。そういった、「PC操作に不慣れな人たち」でも使いやすいアプリケーションを目指しました。ターゲットを明確にして、使い手を想像しながら作ったアプリケーションです。

キャラクターチャットアプリケーション（仮）

注意事項
本アプリケーションは、個人や身内で楽しむことを目的に開発されたものです。
また、OpenAI API を使用しており、利用には課金が発生しています。クレジットを使い切ると会話ができなくなるため、タイミングによっては使用できない場合がございます。
現在はポートフォリオとして掲載しておりますが、アクセスが過度に集中した場合、パスワードを設定することがありますのであらかじめご了承ください。

URL: https://character-chat-app.vercel.app/

技術スタック

  • フロントエンド: Next.js14 AppRouter + TypeScript
  • バックエンド: Next.js API + TypeScript、OpenAI API、WordPress Rest API（お知らせ更新）
  • ホスティング: Vercel

工数

約30人日

詳細

ゲームやアニメキャラクターと会話できるアプリケーションです。Open AI APIを利用して作成しました。
本来Chat GPTでは「〇〇のキャラクターを演じてください」等の命令を投げなければ演じてくれません。しかし、あらかじめキャラクターを演じるためのプロンプトを用意しておくことで、ユーザーが第一声を投げかけた時点でAIは目的のキャラクターになりきって返答してくれるようになります。
音楽も再生することができ、音楽を再生しながらキャラクターと会話することで圧倒的な没入感を再現しました。また、特定のキーワードを投げかけることでBGMが変わったりと、特殊な演出も用意しました。
ifの世界を楽しめるようにと、ユーザーが特定のキャラを演じて対象に話かけることで原作では実現できなかった対話を楽しむこともできます。

制作のきっかけ

ふと、「アニメやゲームのキャラクターと会話してみたい」と思い立ちました。
試しにChatGPTに「○○になりきって話して」と指示してみると、本当にキャラクターのように返答があり、その自然さに驚きました。
しかし、毎回キャラクター名を入力するのは手間に感じ、「一度選んだキャラクターと自然に会話できる仕組みがあれば便利だな」と考え、開発を始めることにしました。
最初は、私と息子が好きな『UNDERTALE』のキャラクターと会話できるアプリを作り、息子を驚かせようという思いで進めていました。
開発を進める中で、有名なアニメやゲームのキャラクターなら幅広く対応できることが分かり、今後はシリーズとして展開していくことを決めました。
アップデートをお知らせするためにCMS機能を実装しました。CMS機能はWordPress Rest APIを使用し、記事を投稿するとトップに表示されるようにしています。

メモアプリ「Notetion」

URL: リンク

※使用するにはExpo Go アプリが必要です。

技術スタック

  • フロントエンド: React Native
  • データベース: SQLite

工数

約15人日

詳細

React NativeとSQLiteを使用して簡易的なメモ帳とカレンダーが一緒になったアプリケーションを作成しました。
メモ一覧画面では保存したメモ一覧が表示され、紐づいているカテゴリーも表示されます。

カテゴリーを作成して任意の記事に紐づけることができます。

↓カテゴリーに紐づいている記事のみ一覧表示

↓メモの削除

↓カテゴリー新規作成

↓カテゴリー情報修正

カレンダーページでは-5年~+5年を表示することができます。予定を登録することで対象に日付のセルに「予定」と表示されます。

カレンダーの対象の日付をタップすると予定を入力することができます。

制作のきっかけ

このアプリを作ろうと思ったきっかけは、「もっとシンプルで直感的に使えるメモアプリが欲しい」と感じたことでした。
さらに、メモだけでなくカレンダー機能も一体化していれば、このアプリひとつで日々の記録や予定管理をすべて完結できると思い、制作を始めました。
既存のメモアプリは、課金しないとメモの追加数に制限がかかるものも多く、使いづらさを感じていました。また、機能が多すぎて使いこなせなかったり、画面に情報が溢れていて迷ってしまうこともありました。
そこで、必要な機能だけに絞った、シンプルで迷わないデザインのメモ＋カレンダーアプリを、自分のために無料で使えるように作成しました。
現在はアプリストアには公開していませんが、Expo Go経由で個人的に使用しており、日常生活で非常に役立っています。

リアルタイム通信チャットアプリケーション

注意事項
※Supabase未更新のまま一定時間が経過してしまったため2025/06/06現在新規登録とログインができない状態です。

URL: https://fe-astro-chat-app-5jwt.vercel.app/

技術スタック

  • フロントエンド: Astro + TypeScript
  • バックエンド: Next.js API + TypeScript、OpenAI API、WordPress Rest API（お知らせ更新）
  • データベース: Supabase
  • ホスティング: Vercel

工数

約15人日

詳細

Supabaseのリアルタイムリスナーを使用して作成したリアルタイムチャットアプリケーションです。フレームワークAstroとReactコンポーネントを併用して作成しました。
認証機能はSupabase標準のEmail機能を使用し、新規登録の際は登録したメールアドレス宛に確認メールが送信されるようになっています。

登録が完了するとサインインページにリダイレクトされ、サインインに成功するとダッシュボードが表示されます。

チャットページでは「投稿」「編集」「削除」を行うとリアルタイムで反映されます。
一覧表示、投稿、編集、削除はCSRで実装しuseStateで状態を管理しています。ベースはAstroですが、これらの動作はReactコンポーネントで実行されます。

制作のきっかけ

これまでにAstroを使って簡単なWebサイトを試作したことはありましたが、Reactをインポートしてインタラクティブなアプリケーションを構築した経験はありませんでした。
リアルタイム通信にも興味があったため、Supabaseを使えば比較的簡単に実現できるのではないかと考え、学習も兼ねて「Astroでどこまでできるか」に挑戦することにしました。
以前、Next.jsとSupabaseを組み合わせたアプリケーションの開発に取り組んだこともありましたが、リレーションの設定が難しく、当時はNext.jsの理解も浅かったため、途中で挫折してしまいました。
現在はフレームワークに関する知識も深まり、改めてSupabaseを取り入れて開発に挑戦しています。

トップに戻る