<h2 id="%F0%9F%8E%AF-%E4%BD%95%E3%82%92%E4%BD%9C%E3%81%A3%E3%81%9F%E3%81%8B" data-line="0" class="code-line">
<a class="header-anchor-link" href="#%F0%9F%8E%AF-%E4%BD%95%E3%82%92%E4%BD%9C%E3%81%A3%E3%81%9F%E3%81%8B" aria-hidden="true"></a> 🎯 何を作ったか</h2>
<p data-line="2" class="code-line">ポモドーロタイマーWebアプリ <strong>Shun: Focus</strong> を作りました。<br>
日本語の「瞬」（瞬間的に集中する）と、<br>
英語の「shun」（避ける＝休む）という2つの意味をあわせ、<br>
「集中」と「意図的な休憩」をサポートするツールとして開発しました。</p>
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__5b43a13be77b3" src="https://embed.zenn.studio/card#zenn-embedded__5b43a13be77b3" data-content="https%3A%2F%2Fshunfocus.app%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span>
<h3 id="%F0%9F%8D%85-%E3%83%9D%E3%83%A2%E3%83%89%E3%83%BC%E3%83%AD%E3%83%86%E3%82%AF%E3%83%8B%E3%83%83%E3%82%AF%E3%81%A8%E3%81%AF" data-line="9" class="code-line">
<a class="header-anchor-link" href="#%F0%9F%8D%85-%E3%83%9D%E3%83%A2%E3%83%89%E3%83%BC%E3%83%AD%E3%83%86%E3%82%AF%E3%83%8B%E3%83%83%E3%82%AF%E3%81%A8%E3%81%AF" aria-hidden="true"></a> 🍅 ポモドーロテクニックとは</h3>
<p data-line="11" class="code-line"><strong>ポモドーロテクニック</strong>は、25分間の作業と5分間の短い休憩を繰り返す時間管理術です。この方法は、集中力を維持し、生産性を向上させるのに役立ちます。仕事や勉強など、集中して取り組みたい作業に特に効果的です。</p>
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__fe93a71a8f92" src="https://embed.zenn.studio/card#zenn-embedded__fe93a71a8f92" data-content="https%3A%2F%2Fasana.com%2Fja%2Fresources%2Fpomodoro-technique" frameborder="0" scrolling="no" loading="lazy"></iframe></span>
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__3f022935a4fb8" src="https://embed.zenn.studio/card#zenn-embedded__3f022935a4fb8" data-content="https%3A%2F%2Fzenn.dev%2Fseshat%2Farticles%2Ffcab0f71ecdfc3" frameborder="0" scrolling="no" loading="lazy"></iframe></span>
<h2 id="%F0%9F%8C%B1-%E9%96%8B%E7%99%BA%E3%81%AE%E8%83%8C%E6%99%AF" data-line="16" class="code-line">
<a class="header-anchor-link" href="#%F0%9F%8C%B1-%E9%96%8B%E7%99%BA%E3%81%AE%E8%83%8C%E6%99%AF" aria-hidden="true"></a> 🌱 開発の背景</h2>
<p data-line="18" class="code-line">何か作りたいなーと思った際に<strong>ポモドーロテクニック</strong>というものを知りました。<br>
似たようなWebアプリは色々な人が作ってたので「とりあえず作るか」ぐらいの勢いで作成しました。<br>
シンプルがいいなと思ったんですが差別化のためにちょっとした工夫はしました。</p>
<h3 id="%E2%9C%A8-%E7%89%B9%E5%BE%B4" data-line="22" class="code-line">
<a class="header-anchor-link" href="#%E2%9C%A8-%E7%89%B9%E5%BE%B4" aria-hidden="true"></a> ✨ 特徴</h3>
<ul data-line="24" class="code-line">
<li data-line="24" class="code-line">
<strong>シンプルで使いやすい設計</strong>
<ul data-line="25" class="code-line">
<li data-line="25" class="code-line">余計な機能を省き、直感的に操作できるUI</li>
</ul>
</li>
<li data-line="26" class="code-line">
<strong>フロントエンド完結</strong>
<ul data-line="27" class="code-line">
<li data-line="27" class="code-line">APIやDBは使わず、すべてブラウザストレージに保存</li>
<li data-line="28" class="code-line">ローカルストレージとCookieに各種設定などを保存</li>
</ul>
</li>
<li data-line="29" class="code-line">
<strong>カスタムカラー共有</strong>
<ul data-line="30" class="code-line">
<li data-line="30" class="code-line">好きな色を設定してリンクでシェア</li>
<li data-line="31" class="code-line">リンクから開いた人も同じ色が自動適用</li>
</ul>
</li>
<li data-line="32" class="code-line">
<strong>ガラス感のあるデザイン</strong>
<ul data-line="33" class="code-line">
<li data-line="33" class="code-line">Liquid glass風の見た目で視覚的に心地よい体験</li>
<li data-line="34" class="code-line">レスポンシブ対応</li>
</ul>
</li>
</ul>
<p data-line="36" class="code-line">Liquid glassに関してはちょうどニュースになったので参考にしました笑</p>
<hr data-line="38" class="code-line">
<h2 data-line="40" class="code-line">
<a class="header-anchor-link" href="#" aria-hidden="true"></a> <img src="https://res.cloudinary.com/zenn/image/fetch/s--oB82xW1R--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/03693615d3ce6111f34172e6.png%3Fsha%3Dd4e3959e6d0f0ea4fafd1fc49e587fc36a98f185" loading="lazy" class="md-img"><br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--79I937Ad--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/95bacd487894f8f548791d2d.png%3Fsha%3D99f62bc5095333bfa75d1a85c4be2056fcc099a6" loading="lazy" class="md-img"><br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--LthinNSi--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/b9868d612fd6818240b94758.png%3Fsha%3Dabacfe73ccafcef53dd862b4cfefb89d1c33b505" loading="lazy" class="md-img">
</h2>
<h2 id="%F0%9F%94%97-%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0%E3%82%AB%E3%83%A9%E3%83%BC%E3%81%AE%E5%85%B1%E6%9C%89%E6%A9%9F%E8%83%BD" data-line="45" class="code-line">
<a class="header-anchor-link" href="#%F0%9F%94%97-%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0%E3%82%AB%E3%83%A9%E3%83%BC%E3%81%AE%E5%85%B1%E6%9C%89%E6%A9%9F%E8%83%BD" aria-hidden="true"></a> 🔗 カスタムカラーの共有機能</h2>
<p data-line="47" class="code-line"><strong>カスタムカラーをXで簡単に共有できる機能</strong> は頑張って作りました。</p>
<ul data-line="49" class="code-line">
<li data-line="49" class="code-line">カスタムカラーを含んだシェア用リンクを発行</li>
<li data-line="50" class="code-line">X投稿用のテンプレートもあり、Xで自分のカスタムカラーを即シェアが可能</li>
<li data-line="51" class="code-line">リンクを開いた人は、そのカスタムカラーが反映できる</li>
</ul>
<p data-line="53" class="code-line">試しにモノクロテーマっぽいものを作ったので以下のリンク開いてみてください。</p>
<p data-line="55" class="code-line">例: モノクロテーマ<br>
<a href="https://shunfocus.app/?colors=eyJiZyI6IjMyMzIzMiIsInBnIjoiZmZmZmZmIiwiYWMiOiJmZmZmZmYiLCJwbiI6IkN1c3RvbSJ9" target="_blank" rel="nofollow noopener noreferrer">https://shunfocus.app/?colors=eyJiZyI6IjMyMzIzMiIsInBnIjoiZmZmZmZmIiwiYWMiOiJmZmZmZmYiLCJwbiI6IkN1c3RvbSJ9</a></p>
<p data-line="58" class="code-line"><strong>URLパラメータからカラー設定を取得</strong>することで  ユーザーがすぐ同じをカスタムカラーを試せるようにしています。</p>
<hr data-line="60" class="code-line">
<p data-line="62" class="code-line"><img src="https://res.cloudinary.com/zenn/image/fetch/s--8KJYowi1--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/e04a3b485ad79eab5c2b4725.png%3Fsha%3D9b36529ada700d077a24c54177ae014261a08131" loading="lazy" class="md-img"><br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--vdcgRqC---/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/1cda58761c5356f7e9f48e31.png%3Fsha%3D6bc732b62abbe09a2b4940b8738aca4adf42c88e" loading="lazy" class="md-img"></p>
<hr data-line="65" class="code-line">
<h2 id="%F0%9F%90%88-%E6%8A%80%E8%A1%93%E3%82%B9%E3%82%BF%E3%83%83%E3%82%AF" data-line="67" class="code-line">
<a class="header-anchor-link" href="#%F0%9F%90%88-%E6%8A%80%E8%A1%93%E3%82%B9%E3%82%BF%E3%83%83%E3%82%AF" aria-hidden="true"></a> 🐈 技術スタック</h2>
<ul data-line="69" class="code-line">
<li data-line="69" class="code-line">TypeScript</li>
<li data-line="70" class="code-line">Nextjs</li>
<li data-line="71" class="code-line">Tailwind CSS</li>
<li data-line="72" class="code-line">shadcn/ui</li>
<li data-line="73" class="code-line">Cloudflare Workers</li>
</ul>
<h2 id="%F0%9F%93%88-%E4%BB%8A%E5%BE%8C%E3%82%84%E3%82%8A%E3%81%9F%E3%81%84%E3%81%93%E3%81%A8" data-line="75" class="code-line">
<a class="header-anchor-link" href="#%F0%9F%93%88-%E4%BB%8A%E5%BE%8C%E3%82%84%E3%82%8A%E3%81%9F%E3%81%84%E3%81%93%E3%81%A8" aria-hidden="true"></a> 📈 今後やりたいこと</h2>
<ul data-line="77" class="code-line">
<li data-line="77" class="code-line">通知音の選択肢増やす</li>
<li data-line="78" class="code-line">色設定の拡張</li>
<li data-line="79" class="code-line">多言語対応</li>
</ul>
<p data-line="81" class="code-line">地道に改善していきたいなと思ってます。<br>
あとanalyticsツールとか使って勉強したいなと思ってます！</p>
<h2 id="%F0%9F%99%8C-%E3%81%9C%E3%81%B2%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84" data-line="84" class="code-line">
<a class="header-anchor-link" href="#%F0%9F%99%8C-%E3%81%9C%E3%81%B2%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84" aria-hidden="true"></a> 🙌 ぜひ使ってみてください</h2>
<p data-line="86" class="code-line">まだフロントエンドの知識も浅く、試行錯誤しながらの開発でしたが、なんとか形にすることができました。<br>
シンプルですが、自分なりにこだわって作ったポモドーロタイマーです。<br>
もしよかったら、ぜひ一度使ってみてもらえたら嬉しいです！</p>
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__46ede50ef817c" src="https://embed.zenn.studio/card#zenn-embedded__46ede50ef817c" data-content="https%3A%2F%2Fshunfocus.app%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span>


【個人開発】ポモドーロタイマー『Shun: Focus』をリリースしました

🍅 ポモドーロテクニックとは

🔗 カスタムカラーの共有機能

Discussion