Better Tab

カスタマイズ可能な新しいタブページ。
時計、天気、カレンダー、トレンド記事を一つのページに集約した、
モダンで使いやすい新しいタブ用のページです。

使用方法

拡張機能

1. Releaseからzipをダウンロードする
2. ダウンロードしたzipを展開する
3. chrome://extensions/ を開く
4. デベロッパーモードを有効にする
5. パッケージ化されていない拡張機能を読み込むを押す
6. 先ほどの展開したzipの中のextensionを選択

もしくは

1. Custom New Tab 拡張機能をインストール
2. Custom New Tabの設定を開く
3. urlをペーストしてセーブ

機能の使い方

1. 背景画像の設定

   • 設定アイコンをクリック
   • 「背景」タブを選択
   • 画像をアップロードするか、URLを入力
   • 必要に応じて画像をクロップ

2. ウィジェットの表示/非表示

   • 設定アイコンをクリック
   • 「表示設定」タブを選択
   • 各ウィジェットの表示/非表示を切り替え

3. 検索

   • ページ中央の検索バーに検索語を入力
   • Enterキーを押すか検索ボタンをクリック

🛠️ 技術スタック

• フレームワーク: Next.js 16
• UIライブラリ: React 19
• 言語: TypeScript
• スタイリング: Tailwind CSS 4
• UIコンポーネント: Radix UI
• データ保存: IndexedDB
• フォント: Geist

📦 主要な依存関係

• next: Next.jsフレームワーク
• react / react-dom: Reactライブラリ
• @radix-ui/react-dialog: ダイアログコンポーネント
• @radix-ui/react-slot: スロットコンポーネント
• lucide-react: アイコンライブラリ
• next-themes: テーマ管理
• react-easy-crop: 画像クロップ機能
• tailwindcss: CSSフレームワーク

🔨 ビルド

ローカル開発

# 依存関係のインストール
pnpm install

# 開発サーバーの起動
pnpm dev

拡張機能用ビルド

拡張機能用のビルドを実行する場合：

pnpm build:scripts

# 拡張機能用のビルドを実行
pnpm build:extension

注意: 通常のbuildコマンドを実行した後は、.nextディレクトリを削除してからbuild:extensionを実行してください。

🌐 API

このプロジェクトは以下のAPIを使用しています：

• 気象庁API: 天気予報と警報・注意報
• OpenStreetMap Nominatim API: 位置情報から市名を取得
• holidays-jp.github.io API: 日本の祝日情報
• Qiita API: トレンド記事

📝 ライセンス

このプロジェクトは Apache License 2.0 の下で公開されています。