[{"data":1,"prerenderedAt":30},["ShallowReactive",2],{"work-n7hq4fozj-m":3},{"id":4,"createdAt":5,"updatedAt":6,"publishedAt":5,"revisedAt":5,"category":7,"title":12,"href":13,"period":14,"time":15,"description":16,"detail":17,"repo":18,"images":19},"n7hq4fozj-m","2026-04-11T08:05:45.715Z","2026-04-11T08:05:54.6Z",{"id":8,"createdAt":9,"updatedAt":10,"publishedAt":9,"revisedAt":9,"name":11,"slug":8},"products","2026-04-11T02:19:53.996Z","2026-04-23T03:51:41.607Z","プロダクト制作","Sync-Task for mine","https://nmst0811.github.io/Sync-Task-for-mine/","2025年10月～2025年11月","約25時間","「Sync-Task for mine」はReact、TypeScript、Tailwind CSS を使用し、ローカルストレージでデータを永続化した「自分のためのTodoアプリ」です。","\u003Ch2 id=\"h5c73b905dd\">主な機能とUI/UX\u003C/h2>\u003Ch3 id=\"h1fca949fdb\">独自性：期限前30分間を確保するカレンダー連携機能\u003C/h3>\u003Cp>タスクの「期限」を設定すると、その期限の30分前から期限時刻までの間を自動的に作業時間として計算し、ワンクリックでカレンダーに登録できます。\u003C/p>\u003Cp>\u003C/p>\u003Cp>\u003Cstrong>着想と経緯\u003C/strong>: 単なる提出締切の通知ではなく、「提出に向けて集中して取り組む時間」を能動的に作るという、行動習慣のデザインを目的にしています。\u003C/p>\u003Cp>\u003Cstrong>技術的な工夫\u003C/strong>: タスク作成画面から、日付操作ライブラリ（dayjs）を用いて、正確に開始時刻`（期限-30分）`を逆算し、GoogleカレンダーおよびOutlookカレンダーのURLフォーマットに合わせた時刻文字列を生成しています。\u003C/p>\u003Chr>\u003Ch3 id=\"h64f28900af\">柔軟なタスク分類を実現するカスタムタグ機能\u003C/h3>\u003Cp>タスク分類の柔軟性を高めるために、「固定カテゴリ」と「可変タグ」の二重構造を採用しました。\u003C/p>\u003Cp>\u003C/p>\u003Cp>\u003Cstrong>着想と経緯\u003C/strong>: カテゴリ（自分が使用するため）は固定ですが、タスクの性質（重要度、種類）は流動的であるため、この二重分類が必要だと考えました。\u003C/p>\u003Cp>\u003Cstrong>技術的な工夫\u003C/strong>: タグ管理画面（）を設け、タグ名と色を自由に設定・管理できるようにしました。タスク（Todo）にはタグIDの配列を持たせることで、データの正規化と柔軟なフィルタリングを可能にしています。\u003C/p>\u003Chr>\u003Ch3 id=\"hd0f62964e8\">UI/UXの工夫\u003C/h3>\u003Cp>カテゴリの最適化: アプリのカテゴリを私個人の学習・作業環境（**mine**na）に合わせて設定することで、汎用性を捨てて使用感の最適化を追求しました。\u003C/p>\u003Cp>レスポンシブデザイン: モバイルでの利用を最優先に考え、素早いタスク作成・編集が外出先でも行えるよう、全てのコンポーネントをレスポンシブに対応させました。\u003C/p>\u003Ctable>\u003Ctbody>\u003Ctr>\u003Cth colspan=\"1\" rowspan=\"1\">\u003Cp>項目\u003C/p>\u003C/th>\u003Cth colspan=\"1\" rowspan=\"1\">\u003Cp>詳細\u003C/p>\u003C/th>\u003C/tr>\u003Ctr>\u003Ctd colspan=\"1\" rowspan=\"1\">\u003Cp>主要技術\u003C/p>\u003C/td>\u003Ctd colspan=\"1\" rowspan=\"1\">\u003Cp>React (Hooks, Functional Components), TypeScript\u003C/p>\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd colspan=\"1\" rowspan=\"1\">\u003Cp>スタイリング\u003C/p>\u003C/td>\u003Ctd colspan=\"1\" rowspan=\"1\">\u003Cp>Tailwind CSS (レスポンシブ対応)\u003C/p>\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd colspan=\"1\" rowspan=\"1\">\u003Cp>ライブラリ\u003C/p>\u003C/td>\u003Ctd colspan=\"1\" rowspan=\"1\">\u003Cp>dayjs (日付操作), uuid (ID生成)\u003C/p>\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd colspan=\"1\" rowspan=\"1\">\u003Cp>データ永続化\u003C/p>\u003C/td>\u003Ctd colspan=\"1\" rowspan=\"1\">\u003Cp> LocalStorage (ブラウザストレージ)\u003C/p>\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\u003Chr>\u003Ch2 id=\"hf966f322ba\">開発期間・体制\u003C/h2>\u003Cul>\u003Cli>開発体制: 個人開発\u003C/li>\u003Cli>\u003Cstrong>開発期間\u003C/strong>: 2025.10.23 ~ 2025.11.19 (約25時間)\u003C/li>\u003C/ul>","https://github.com/nmst0811/Sync-Task-for-mine",[20,24,26,28],{"url":21,"height":22,"width":23},"https://images.microcms-assets.io/assets/a5c6151b0c1041689525abf41944b74c/93cef28f2fe540749fd546dcfc279083/03.png",924,1859,{"url":25,"height":22,"width":23},"https://images.microcms-assets.io/assets/a5c6151b0c1041689525abf41944b74c/6eb1390cf1a5467fbb8c044924c73607/04.png",{"url":27,"height":22,"width":23},"https://images.microcms-assets.io/assets/a5c6151b0c1041689525abf41944b74c/6b48bc4301a5406088bac3933a9aaf16/05.png",{"url":29,"height":22,"width":23},"https://images.microcms-assets.io/assets/a5c6151b0c1041689525abf41944b74c/5bde27be670b409c9e8f6cc6169e47ef/06.png",1790706744744]