GMT+0900自分が読了した本の一覧を載せまくる本棚ページを作りました。以前書いたツイッター・オルタナティヴという記事で少し言及しているのですが、hail2u.netというサイトで著者の方が読んだ本の一覧が表示されており、自分もやろうと思ったのがきっかけです。露骨に真似るのもどうかとは思ったのですが、やってみました。載せてる本について買った本のうち、読み終わったものです。積読になっているものは載せていません。2017年くらいから前のものはマンガが多かったのですが、後述する事情によりあまり載せてないです。2013年以前の本は諸事情により大半が実家で保管されているためほとんど記録がないです。マンガについてですが...。以前、後輩に「YoshinoriNさんマンガ読むんですか???」などという謎の質問を受けた(どういう人間だと思われてるんだ...??)のですが、私は普通にマンガ読みます。なんなら2012年くらいまでは週刊誌を5冊くらい買ってました(家に来た友達に雑誌で壁ができてるといわれました)し、単行本もかなり持ってました。最近はかなり減ってきており、当然雑誌は購入してないですし、単行本も継続して購入しているものは5つ前後です...。この通りマンガは過去多く読んでいたのですが、それらは冊数が多くてAmazon購入履歴からコピペすると腱鞘炎が加速しそうなので途中から載せるのをあきらめました。載せてるリストは全てAmazonアフィリエイトになっています。私はこのサイトでユーザーフレンドリーな広告の表示の仕方(記事の最下部にしか広告を載せてない)をしている自負があって(本当にユーザーフレンドリーならそもそも広告を載せるべきでもないと思うんですが)大して儲かってもないので、別にここにのせるものくらい全部アフィリエイトになっててもいいだろう。そもそも、たぶん誰もページ自体を見に行かないし。後は、画像は全部Amazonから引っ張ってきているんですが、Amazonから引っ張ってきている以上はAmazonのアフィリエイトになっていないとAmazonに申し訳ないような気がしたというのもあります。自分で実装したものを見たらマンガの好みも偉く変わったなぁ。以前はこんなに表紙が女の子女の子したやつはなかったと思う。実装についてExcelに登録したものをJSONにしてそのJSONをHTMLに埋め込んで、Vue.jsで加工して表示しているだけです。ExcelこんなかんじのExcelを用意しました。読了日を設けています。購入日と読了日は結構適当に入力しています。ASINはAmazonの商品管理番号です。これをもとに画像と商品へのリンクを生成しています。書籍の場合にKindleではASINが存在するのですが、紙の書籍の場合はASINが存在せず、代わりに10桁のISBNがASINに相当するようです。付け加えると、ISBNには10桁と13桁が存在します。ExcelのISBN欄は正確にはISBN13が正しく、加えて紙の本のASINがISBNの10桁と同じとはいえ、ASIN欄にISBNの10桁を混在させるのは誤りであり、ISBN10の欄も設けておくべきだとは思いますが、やってしまったので後の祭りです。ひさしぶりにExcelを使ったのですが、なんだかんだ言えExcelは便利だなぁ。JSONへconvert-excel-to-jsonというExcelをJSONにしてくれるいい感じのnpmパッケージがあったのでこれをつかいました。JSON.stringify(result));これを実行すると./dist/books.jsonに下記のようなJSONが生成されます。...]JSONの取得と表示こっちに書いてるやり方でEJSにJSONを埋め込みました。それをJavaScriptで読み込んで加工してVue.jsを使って表示してます。JSONは別にHTMLに埋め込まなくてもAjaxで取得するでもいいと思います。JavaScriptは雑に下記のような感じにしました。別途、EJS側でCDNのVue.jsを参照しています。}});これに対応するHTML(EJS)は次のとおりです。興味ある人がいるとは思えませんが、スタイルシートは開発者ツールで確認してください。私はHTMLのことをちゃんと勉強したことがないので正しいHTMLなのかどうかは不明です。<sub>ちゃんと最後まで読んだ本の一覧です。昔読んだマンガは途中から載せるのを諦めました。</div></div>レイアウトについてモバイルだと一列3冊、そうでなければ6冊表示するようにしました。デフォルトで18冊表示します。表示するを押すと18冊ずつ読み込みます。CSSも前述のhail2u.netさんのものを参考にしようかと思ったのですが、私には理解できない実装(皮肉ではなくてホントにCSSわからないので...)だったので全く異なるやり方で強引に突っ込んでます。実のところ、実装よりもExcelにひたすら購入履歴を打ち込むほうが時間がかかった(APIでなんとかできたんじゃないかという気もする)のですが、入力の過程で購入履歴を見返すといろいろと面白かったです。2016年くらいまでは書店で本を買っていたらしく、あまり履歴らしい履歴がありませんでした。そもそもAmazonでの買い物の頻度が少なかったようです。Amazonで買ったものを見ていくと、実店舗でなかったので仕方なしにAmazonで買うというやり方をしていていたようです。Amazonでの初めての購入は以外と古くて2006年でした。カプースチンのエチュードと信長の野望のサントラを購入したっぽいです。8つの演奏会用エチュード「信長の野望」究極音盤~烈風伝、将星録/覇王伝、風雲録カプースチンのエチュードは今でも聴くのですが、カッコよくてこれもいつかやりたいなぁ。なんてことを無謀ながらにもひっそりと思っていたりします。これハイレゾで出し直してくれたらもっかい買うんだけどなぁ...。信長の野望のサントラはたぶん、この時に烈風伝をやっててサントラが欲しくなって買ったんだと思います...たぶん。烈風伝のBGMは(いい意味で)耳に残るBGMで、今でも優れたゲーム音楽の一つだと思ってます。現在は日用品もとりあえずAmazonで雑に購入するというやり方をしているのですが、こうやって見ると生活スタイルも大きく変わるものだなぁ。書店でザッピングしたり、発売日に本屋に行ったのを思い出したりして懐かしくなった反面、そういったことをもうやらないんだろうなぁ。思ったりして少し寂しい気持ちにもなりました。YoshinoriN)。