ツンデレ本管理プロジェクトの話
今回はプロジェクトの開始のお知らせです。
といっても、Version 1.0.0をリリースしました！w
概要
このプロジェクトでは、ツンデレ本（積んでる本）の管理を行います
要するに、買って積んでいる本を管理して書籍購入を抑制するってのです。
現在読んでいる本を表示すれば面白くない？ → サイドバーにスタティックに書いている現在読んでる本をDBで管理できればとか思っております
提供サービス
- ツンデレ本一覧
- ツンデレ本管理（新規追加、タイトル修正）
- 既読処理
- 現在読んでる本管理
経緯というやつ
スタティックでは前からありました。http://35.78.51.61/reserve_books
んで、Wordpressのアップグレードするに従い、プラグインが動かなくなりましたw
こんな感じで描けばでていましたが… 読み込みで死んでいますw
[amazonjs asin="4873118409" locale="JP" tmpl="Small" title="入門 Kubernetes (オライリー・ジャパン)"]
なら、自分で作ろう！なんて思ったり… 9/21の話でした
実装技術など
今回作成するにあたって、勉強すっかなぁ〜ということで、vue.jsを使ってみました。
キーワードを簡単にまとめますと
・Laravel (PHP)
・Laravel-mix
・node.js
・vue.js
・MySQL
・Docker
ま、こんな感じです。
ソースは公開していないのですが、ローカルの GitlabにてCIしていますw
v-1.0.0のリリースの話
とりあえずのリリースしました。2021-09-26 18:00
機能はこんな感じ
- ツンデレ本一覧画面 : http://35.78.51.61/tsundere/
- ツンデレ本管理画面
- 一覧表示
- ページング
- フィルタリング機能
- 新規追加機能
- 編集機能
- AWSアイテム検索機能
- 既読機能
- ログイン機能
- 一覧表示
ざっくりと書くとこんな感じでリリースしました！
管理画面の機能が多いので一般ユーザからするとツンデレ本一覧だけです
難しかったことなど
Vue.js
やっぱりVue.jsは難しかったです… さっさと読書中予定の本を読めw
ってかエラーの解析がめんどくさかったですw
ミスったらタグ自体がNGになるのでとかとか
vue.js <-> laravel : はapi(json)で最初から考えていたのは簡単にFixしました
まだ、調整中ですが、laravel-mix(npm)の成果物のファイルサイズが大きすぎるのは気になりますね
2.4M Sep 26 18:08 admin.js
2.1M Sep 26 18:08 app.js
0B Sep 26 18:08 auth.js
294B Sep 26 18:08 admin.css
3.1M Sep 26 18:08 app.css
143K Sep 26 18:08 auth.css
auth系は、ログイン画面ではvue使っていないので、読み込みを早くするために別に切っています…
deferっているから、読み込み完了までデザイン崩れのままだしね…
この辺りは要調査ですね
デザイン崩れは、今のところ
<body onload="document.getElementById('app').style.display = 'block'">
<div id="app" style="display: none">
めちゃダサですw
Amazon系は….
PAPIv5のリクエストを送って情報を取得しております
・ ASINコードから書籍タイトルの取得
・ キーワード（バーコード）から書籍情報(ASIN,タイトル）を取得
Scatchpad : https://webservices.amazon.co.jp/paapi5/scratchpad/
を使うと割とわかるかな… サンプルあるし… だいぶカスタマイズしたけど
キーワードは10件しか取れないけど、それを100件に対応はちょっとめんどくさかったかな
管理画面のログイン必須に関して
これは頭を使いませんでした（サンプルをそのまま流用）
php artisan ui vue --auth
で骨格作って、いらないものをガッツり削除しましたw
今のところ、DBにユーザ情報を直書きで管理予定でしたので
次回リリース予定
次回リリースする予定のものをまとめますと
- ブログにツンデレ本読書中のwidgetを追加
- Wedget通信用APIを実装
- 読書中の書籍管理機能実装
- ツンデレ本一覧のページング？（まだ登録していませんが、ツンデレ本… まだまだありますw）