<p>大学研究室でのアルバイトで作成した、漫画台詞のアノテーション用Webアプリです。</p><p><a href="http://www.manga109.org/ja/index.html" target="_blank" rel="noopener noreferrer">Manga109データセット</a>には台詞と登場キャラクタの領域データが含まれているのですが、ある台詞がどのキャラクタによって発話されたかのデータは含まれていません。そのデータセットを作成するための作業を楽に行うために作成しました。</p><p>台詞をドラッグ、キャラクタの顔にドロップすることで紐付けられます。紐付けデータはサーバに送られ保存されます。</p><p>フロントエンド・サーバ両方を開発しました。サーバではGoogleアカウントを用いたユーザ管理、漫画データの配信、紐付けデータの記録などを行っています。</p><p><img src="https://images.microcms-assets.io/assets/82cead10ee8b4201aa778ba16c21e731/c7b0b32273a546278cc73b761e55a115/output-palette.gif" alt="" width="640" height="431"></p><p>画像内の漫画はManga109より めもり星人<span style="color:#333333">©</span>海野 螢 です。</p><p><br></p><h2 id="h48162eced8">使用技術</h2><h3 id="h5dc0967264">フロントエンド</h3><ul><li>TypeScript</li><li>Next.js</li><li>React</li><li>Bootstrap</li><li><span style="color:#24292f">Recoil</span></li><li>React DnD</li></ul><h3 id="h6d1ec67e88">サーバサイド</h3><ul><li>TypeScript</li><li>Node.js</li><li>Express</li><li>MongoDB</li><li>Mongoose</li><li>Typegoose</li><li>passport.js</li></ul><h3 id="h9dcc071ccd">デプロイ</h3><ul><li>Docker</li></ul><p><br></p>

漫画アノテーション用Webアプリ

comic-annotation

.css-kvj8dg{position:static;}.css-kvj8dg::before{content:'';cursor:inherit;display:block;position:absolute;top:0px;left:0px;z-index:1;width:100%;height:100%;}Works

使用技術

フロントエンド

サーバサイド

デプロイ

Works