m19e/mePORTFOLIO OF m19eFRONTEND DEVELOPER
OUTLINE
ゲーム「Blue Archive」公式Twitterで連載している4コマ漫画3種類を登場キャラクターで横断検索できるサービスです。
FEATURE
ゲーム内UIを参考にし、ユーザーにひと目で伝わるようなサイトデザインを心がけました。 ブルーアーカイブはグローバル展開されているゲームなので、日本語だけでなく英語にも対応しています。 GitHub Actionsで毎日4コマ情報の更新チェック・自動更新を行い、データ更新がある時だけDeploy Hooksで再ビルド(SSG)しています。
COMMENT
ブルーアーカイブの公式4コマを簡単に検索できる仕組みが欲しかったので作りました。 また、日本語版・英語版を横断検索できると便利なのでそのように設計しました。 グローバル展開しているコンテンツということで以前から触れてみたかったi18n対応を行いました。 いずれ韓国語にも対応できればと考えています。
TECHS
Front-end Next.js / TypeScript / Tailwind CSS / daisyUI / Jotai / Ky / Fuse.js / Vercel / Deploy Hooks Back-end Deno / TypeScript / Ky / Velociraptor / GitHub Pages / GitHub Actions / GitHub Webhooks
DEVELOP
2023年3月
OUTLINE
アイマスEXPOにて頒布された合同誌の告知サイトです。 頒布情報を掲載しているほか、タグ付きでツイートできるX共有機能があります。
COMMENT
ページデザイン ・合同誌のコンセプトと表紙のデザインに合わせたオープニングアニメーションを実装しました ・キャラクター3人のイメージカラーが混ざり合うグラデーションを取り入れました アクセシビリティ ・iOSの「アニメーション画像自動再生」が無効の場合、アニメーションSVGアイコンが表示されない現象に対応しました
TECHS
Deno / TypeScript / Next.js 15(App Router) / Tailwind CSS / daisyUI / GSAP / iconify / Vercel 選定理由 ・Next.js 15リリース直後だったので触れるタイミングのなかったApp Routerを導入しました ・開発環境でのランタイムとパッケージマネージャーにDenoを採用しました ・依頼をいただいた段階でnpm以外のものを使おうと決めていた ・pnpmと迷ったがどうせなら新しい環境でNext.jsを書きたかった ・Deno 2.0リリース直後だったのもありNext.js開発ができるか試しておきたかった ・オープニングアニメーション実装のためGSAPを採用しました
DEVELOP
2024年11月
FEATURE
エディタ下部の書式設定より ・明朝、ゴシック ・文字サイズ ・行間の広さ ・一行の文字数 が素早く変更できます。 アプリ上部メニューの表示設定より ・ダークモード ・字数カウントの表示 ・行番号の表示 の切り替えが可能です。 他にも執筆に役立つ ・自動保存 ・自動字下げ ・選択範囲の字数カウント ・縦書き対応したカーソルキー操作 ・キャレット移動時のスクロール自動追従 ・一部半角記号を全角記号へ自動変換 などの機能があります。
COMMENT
縦書き小説執筆・投稿サービス「Clara」のエディタ部分をデスクトップアプリ化しました。 初代Clara EditorはClaraに採用していたDraft.jsで開発していましたが、リリース前にDraft.jsがアーカイブされてしまいました。 後継フレームワークLexicalへの移行に伴って機能を削ぎ落とし、よりシンプルな2代目Clara Editorへ生まれ変わりました。
TECHS
Electron / Next.js / TypeScript / Tailwind CSS / daisyUI / Recoil / Lexical
DEVELOP
2022年10月
OUTLINE
ゲーム「Genshin Impact」の聖遺物スコアを計算して保存・管理できるサービスです。
FEATURE
聖遺物のスクリーンショットからOCRで情報を取得してスコアを計算できます。 その他の機能 ・ビルド別にステータス重要度の切り替え ・ユーザーが自由に重みづけを決められるカスタムビルド ・Twitter共有(カスタムビルドを含む) ・保存聖遺物の並び替え ・保存聖遺物のインポート/エクスポート(jsonファイル) ・カラーテーマ変更
TECHS
Next.js / TypeScript / Tailwind CSS / daisyUI / Tesseract.js
DEVELOP
2022年5月
