はじめに
こんにちは！
お世話になっております。T4ko0522です！
今回はブラウザを起動した際に出てくる新しいタブが気に入らなかったので、自作したみました！
Better Tab です！
Better Tab は、時計・天気・カレンダー・トレンド記事を1画面にまとめた、タブページです！
※背景は自分で用意してください。デフォルトではフリー画像しかありません。
なぜつくったの？
既存の拡張機能にも似たようなものは存在するんですが、動画を背景にできて、UIが気に入るものが存在しなかったからです！
どんなことができるの？
- 背景画像を好きなメディアに変更（mp4, gif, png...etcのように様々な拡張子に対応）
- 今日から3日先までの天気予報を表示
- カレンダーを表示（元号の表示の切り替え、祝日の表示）
- 時計のデザインの切り替え(アナログ時計、もしくはデジタル時計)
- Qiitaのトレンド記事の表示
技術スタック
- Next.js 16
- React 19
- TypeScript
- Tailwind CSS 4
- shadcn/ui
- IndexedDB, Local storage（設定などの保存）
APIは主に以下を使っています。
- 気象庁API（天気）
- OpenStreetMap Nominatim API（位置情報）
- holidays-jp.github.io API（祝日）
- Qiita API（トレンド記事）
開発で意識したこと
1. 「なんども開く画面」だから軽くする
新しいタブは1日に何回も開くので、重いとすぐストレスになります。
表示の速さを意識して、cache, fallbackなどを活用しました。
2. カスタマイズ性
人によって「必要な情報」が違うので、ウィジェットのオンオフや背景変更などのオプションを多く用意しました。
3. 見た目と実用性のバランス
おしゃれなだけじゃなく、時計や天気など「実際に使う情報」をすぐ見られる配置にしました。
苦労したところ
- 自分の気に入るデザインを作成する部分
- 拡張機能として配布するためのビルド手順の整理
- 重い動画をどう違和感なくロードして背景として繁栄するか
特に3つ目については実装方法を悩みました。
背景が動画の場合は、動画のサムネイルをfallbackとして、Local storageに保存して、動画のロード、反映が終わるまでそのfallbackを表示する。という形で実装しました。
おわりに
Better Tabは自分自身が毎日使いたいツールとして作りました。
ですので、粗い部分、分かりづらい部分があるかもしれませんが、温かい目で見ていただけると幸いです。
これからも改善を続けていくので、良ければ使ってみてください！
issue等歓迎しております！