<p data-line="0" class="code-line">Atcoder の問題を提案してくれるタイマーアプリです。</p>
<p data-line="2" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__c7ebc94ea65d4" src="https://embed.zenn.studio/card#zenn-embedded__c7ebc94ea65d4" data-content="https%3A%2F%2Fclock.tada.page" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://clock.tada.page" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://clock.tada.page</a></p>
<p data-line="4" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/2715deabbb8f-20241224.jpeg" loading="lazy" class="md-img"></p>
<h2 id="%E6%A9%9F%E8%83%BD" data-line="6" class="code-line">
<a class="header-anchor-link" href="#%E6%A9%9F%E8%83%BD" aria-hidden="true"></a> 機能</h2>
<p data-line="8" class="code-line">普通のタイマーに Atcoder の問題の提案してくれる機能がついたアプリです。提案される問題は、ID で設定した Atcoder アカウントが現在から 2 週間までの提出した中からランダムで選んでいます。API は、<a href="https://github.com/kenkoooo/AtCoderProblems" target="_blank" rel="nofollow noopener noreferrer">AtCoder Problems API</a> を使っています。</p>
<p data-line="10" class="code-line"><img src="https://res.cloudinary.com/zenn/image/fetch/s---31aN8SC--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/v1/%21%5B%5D%28https://storage.googleapis.com/zenn-user-upload/3c662545706c-20241224.jpeg%29" loading="lazy" class="md-img"></p>
<h2 id="%E3%83%90%E3%83%83%E3%82%AF%E3%82%B0%E3%83%A9%E3%82%A6%E3%83%B3%E3%83%89%E3%81%A7%E5%8B%95%E4%BD%9C" data-line="12" class="code-line">
<a class="header-anchor-link" href="#%E3%83%90%E3%83%83%E3%82%AF%E3%82%B0%E3%83%A9%E3%82%A6%E3%83%B3%E3%83%89%E3%81%A7%E5%8B%95%E4%BD%9C" aria-hidden="true"></a> バックグラウンドで動作</h2>
<p data-line="14" class="code-line">タイマーは、Web Worker を使用してブラウザのバックグラウンド動作しています。なので、別タブで作業している時でも通知でタイマーが完了したことをお知らせします。</p>
<h2 id="ui%2Fux" data-line="16" class="code-line">
<a class="header-anchor-link" href="#ui%2Fux" aria-hidden="true"></a> UI/UX</h2>
<p data-line="18" class="code-line">正直現在のデザインだと使いにくいと感じる人もいると思います。ユーザビリティはあまり考えませんでした。それより Web で検索するとでるタイマーのように白い背景に数字が書かれているデザインだと Atcoder の問題を解くモチベーションが上がりません。</p>
<h1 id="%E6%8A%80%E8%A1%93" data-line="20" class="code-line">
<a class="header-anchor-link" href="#%E6%8A%80%E8%A1%93" aria-hidden="true"></a> 技術</h1>
<ul data-line="22" class="code-line">
<li data-line="22" class="code-line">TypeScript</li>
<li data-line="23" class="code-line">Vite(React)</li>
<li data-line="24" class="code-line">TailwindCSS</li>
<li data-line="25" class="code-line">HeadlessUI</li>
<li data-line="26" class="code-line">React Hook Form</li>
</ul>
<h2 id="%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4" data-line="28" class="code-line">
<a class="header-anchor-link" href="#%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4" aria-hidden="true"></a> デプロイ</h2>
<p data-line="30" class="code-line">Cloudflare Pages にデプロイしました。無料枠が大きく無料で運用できると思ったからです。Github Pages や Netlify などもありますが、Cloudflare を個人的に使ってみたかったのでデプロイしてみました。</p>
<h2 id="%E3%83%91%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%B3%E3%82%B9" data-line="32" class="code-line">
<a class="header-anchor-link" href="#%E3%83%91%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%B3%E3%82%B9" aria-hidden="true"></a> パフォーマンス</h2>
<p data-line="34" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/4a1c883c04e4-20240221.png" loading="lazy" class="md-img"></p>
<p data-line="36" class="code-line">思ったより Lighthouse のスコアが高かったので、よかったです。</p>
<h1 id="%E3%83%AA%E3%83%9D%E3%82%B8%E3%83%88%E3%83%AA" data-line="38" class="code-line">
<a class="header-anchor-link" href="#%E3%83%AA%E3%83%9D%E3%82%B8%E3%83%88%E3%83%AA" aria-hidden="true"></a> リポジトリ</h1>
<p data-line="40" class="code-line">MIT ライセンスで公開しています。<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__5c0ddd8a2726d" src="https://embed.zenn.studio/card#zenn-embedded__5c0ddd8a2726d" data-content="https%3A%2F%2Fgithub.com%2Ftada246%2Fatcoder-clock" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/tada246/atcoder-clock" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/tada246/atcoder-clock</a></p>
<h1 id="%E3%81%93%E3%82%8C%E3%81%8B%E3%82%89" data-line="43" class="code-line">
<a class="header-anchor-link" href="#%E3%81%93%E3%82%8C%E3%81%8B%E3%82%89" aria-hidden="true"></a> これから</h1>
<p data-line="45" class="code-line">時間などのセットを簡単に行えるようにしたら別のアプリを開発しようと考えています。もし機能を追加したい場合は、issues を立ててくれると助かります。このような開発は初めてなので間違ったことをしていたら教えてください。</p>


タイマーが完了するとAtcoderの問題を提案するアプリを開発しました

Discussion