Prototyping
練習その2
ここまで学習した内容を使って、実践的なアプリを制作。
BookShelfNote
- 制作条件・仕様
-
- Vue3.js + Composition API + TypeScriptを使用。
- 楽天ブックス書籍検索APIから書籍情報を取得。
- 書籍の追加は、「書籍名・著者名から検索」「ISBNから検索」「バーコードを読み取って検索」「手入力」から選択可能。
- 書籍の表紙画像はISBNから取得する以外に、任意の画像をアップロードすることもできる。
- LocalStorageで取得した書籍の情報を保存。
- 書籍名から巻数の表記を削除し、シリーズ名を自動で登録。。
- シリーズ名一覧、著者ごとの作品一覧が表示可能。
- シリーズ名と著者名が一括編集ができる。
- 新刊チェックができる。
- 貸出中と貸出済のラベルがつけられる。
- TOPページでは表示の絞り込み(すべての書籍/貸出中/貸出済/検索)ができる。
- URL
- https://book-shelf-note.5ecodework.com/
個人的に欲しいと思った機能を盛り込んだ書籍管理ができるアプリ。
NewBookCheck
- 制作条件・仕様
-
- Vue3.js + Composition API + TypeScriptを使用。
- 書籍情報の取得は楽天ブックス書籍検索APIを使用。
- カレンダー表示にFullCalendarを使用。cssはTailwind CSSを使用。
- 書籍の検索は、登録したキーワード「書籍名」「著者名」の両方、またはいずれかで自動で行う。
- キーワードは「書籍名」や「著者名」に合わせて「書籍のサイズ(文庫・コミック・新書・単行本)」を選択すると、ある程度は絞り込みも可能。
- LocalStorageで登録したキーワードや取得した書籍の情報を保存。
- 新刊情報から、各書籍の「予約済」「購入済」「保留中」のタグを付けることができる。
- 新刊情報はカレンダー表示に切り替え可能。
- 「購入済」と「保留中」の付いた書籍は「本棚リスト」「保留リスト」で確認可能。
- 「予約済」タグの付いた書籍は、発売日を過ぎると自動でタグ購入済に変更され、本棚に追加される。
- 新刊の定義は発売から3か月で、それ以降は新刊情報に表示されない。
- 発売から3か月以上たった書籍が「本棚リスト」「保留リスト」から削除された場合、復元できない。
- URL
- https://new-book-check.5ecodework.com/
購読している書籍、作家の新刊がチェックできるアプリ。