---
zenn:
title: "【リリースノート】Bookshelf v0.3.0 - 漫画個別ページの追加とUI/UXの大幅改善"
emoji: "✨"
type: "tech"
topics:
- react
- typescript
- ui-ux
- huggingface
- vite
published: true
qiita:
title: "【リリースノート】Bookshelf v0.3.0 - 漫画個別ページの追加とUI/UXの大幅改善"
tags:
- React
- TypeScript
- UI
- UX
- HuggingFace
private: false
updated_at: null
id: null
organization_url_name: null
slide: false
ignorePublish: false
wordpress:
title: "【リリースノート】Bookshelf v0.3.0 - 漫画個別ページの追加とUI/UXの大幅改善"
post_status: "publish"
post_excerpt: "Bookshelf v0.3.0をリリースしました。本バージョンでは、待望の漫画個別ページ機能を追加し、UIデザインを全面的に刷新するなど、ユーザー体験を大幅に向上させるアップデートが含まれています。"
featured_image: "https://raw.githubusercontent.com/Sunwood-ai-labs/bookshelf/main/generated-images/release-v0.3.0-20251130_161323/imagen-4-ultra_2025-11-30T16-14-17-522Z_A_micro_book_terrarium_scene_featuring_a_tiny_clay_1.png"
taxonomy.category:
- リリースノート
- フロントエンド
taxonomy.post_tag:
- Bookshelf
- React
- TypeScript
- UI/UX
- HuggingFace
custom_fields.lead: "Bookshelf v0.3.0がついに登場！本バージョンでは、待望の漫画個別ページ機能の追加や、より直感的に使えるトップナビゲーションへのUI刷新など、使いやすさを大きく向上させる改善が満載です。この記事では、v0.3.0の技術的な詳細と変更のポイントを分かりやすく解説します。"
---
## はじめに
Bookshelf v0.3.0をリリースしました。今回のアップデートでは、ユーザーの皆様からご要望の多かった漫画の個別ページ機能を追加し、UI/UXを全面的に刷新しました。より快適に、そして直感的に作品を楽しめるようになった本バージョンの主な変更点と技術的な詳細について解説します。
## 主な変更点
v0.3.0のハイライトは以下の通りです。
- **📖 漫画の個別ページを追加**: 表紙をクリックすると、作品の詳細情報や全ページが一覧できる専用ページに移動できるようになりました ([cced929](https://github.com/Sunwood-ai-labs/bookshelf/commit/cced929))。
- **🎨 UIデザインを刷新**: サイドバーを廃止し、ヘッダーに機能を集約したトップナビゲーションUIに変更しました ([de80160](https://github.com/Sunwood-ai-labs/bookshelf/commit/de80160))。
- **🎞️ リッチなローディングアニメーション**: 本棚や個別ページの読み込み中に、本がパラパラとめくれるような新しいアニメーションを表示します ([c6f917f](https://github.com/Sunwood-ai-labs/bookshelf/commit/c6f917f), [c8196ed](https://github.com/Sunwood-ai-labs/bookshelf/commit/c8196ed))。
- **👤 著者アイコンの表示**: 著者名の横にX (旧Twitter) のプロフィール画像を表示し、視認性を向上させました ([3e87e55](https://github.com/Sunwood-ai-labs/bookshelf/commit/3e87e55))。
## ⚠️ 破壊的変更
### 環境変数の変更
Hugging Faceリポジトリを指定する環境変数が `VITE_HF_TOKEN` から `VITE_REPO` に変更されました。v0.3.0へアップデートする際は、`.env` ファイルの更新が必要です。
- **旧:** `VITE_HF_TOKEN=hf_xxxxxxxx`
- **新:** `VITE_REPO=datasets/username/repo-name`
この変更 ([c8196ed](https://github.com/Sunwood-ai-labs/bookshelf/commit/c8196ed)) により、Hugging Faceのトークンではなく、データセットリポジトリのパスを直接指定する形となり、設定がより直感的になりました。
## 技術的な詳細
### 新機能
#### 漫画個別ページのルーティング
これまで本棚表示のみでしたが、本バージョンから各漫画作品の詳細ページを追加しました。React Routerを利用し、`/manga/:title` というパスで各ページにアクセスできます。これにより、特定の作品をブックマークしたり、URLを共有したりすることが容易になりました。
#### トップナビゲーションレイアウトへの刷新
従来のサイドバーレイアウトを廃止し、画面上部に検索機能などを集約したトップナビゲーションレイアウトへ全面的に刷新しました ([de80160](https://github.com/Sunwood-ai-labs/bookshelf/commit/de80160))。これにより、特にモバイルデバイスでの操作性が向上し、よりシンプルなUIを実現しています。
### 改善点
#### アスペクト比に応じた画像幅の調整
表紙画像の視認性を高めるため、正方形に近いアスペクト比の画像を検出して、表示幅を自動的に1.5倍に拡大する処理を追加しました ([4692778](https://github.com/Sunwood-ai-labs/bookshelf/commit/4692778))。これにより、縦長の表紙と横長の表紙が混在していても、レイアウトのバランスが保たれます。
#### サイトタイトルとファビコンの導入
アプリケーションのアイデンティティを明確にするため、サイトタイトルを「Bookshelf」に設定し、新しいSVGファビコンを導入しました ([be8005b](https://github.com/Sunwood-ai-labs/bookshelf/commit/be8005b), [ec0a764](https://github.com/Sunwood-ai-labs/bookshelf/commit/ec0a764))。
### バグ修正
#### URLエンコードの問題修正
`#` などの特殊文字をタイトルに含む作品の場合、URLが正しく機能しない問題がありました。これを解決するため、URLのパスには作品タイトルではなく、作品が格納されているフォルダ名を `encodeURIComponent` でエンコードして使用するように修正しました ([41f2cdc](https://github.com/Sunwood-ai-labs/bookshelf/commit/41f2cdc))。
## まとめ
Bookshelf v0.3.0は、個別ページの追加とUIの全面的な刷新により、機能性と使いやすさを大きく向上させたメジャーアップデートです。特にトップナビゲーションへの変更は、今後の機能拡張を見据えた重要な基盤となります。
今後もコミュニティからのフィードバックを反映し、より良い読書体験を提供できるよう開発を進めていきます。ぜひ新しいBookshelfをお試しください。
---
📚 参考リンク
- **GitHubリポジトリ**:
github.com(https://github.com/Sunwood-ai-labs/bookshelf)
- **変更点の比較**:
github.com(https://github.com/Sunwood-ai-labs/bookshelf/releases/tag/v0.3.0)【リリースノート】Bookshelf v0.3.0 – 漫画個別ページの追加とUI/UXの大幅改善
リリースノート
コメント