このサイトのサブディレクトリで管理していた本棚ページをサブドメインに移行しました。

移行先は下記のとおりです。

bookshelf.yoshinorin.net

在りし日の姿

ブログを見返せば作成したのは去年の11月中旬ということで、半年も経たずして散ってしまった儚い命となってしまいました。

移行後の姿

そして、こちらが新生本棚です。散っていったもののデザインは気に入っていたので基本的には踏襲しています。

動機


さて、動機ですがいくつかあります。

一つ目。このサイトに組み込むとなれば、このサイトのレイアウトに依存せざるを得ないというのが大きく、そこから逸れたものを作成するのが難しくなります。要するに自由度が低くなり、やり辛い側面がありました。

二つ目。このサイトは基本JavaScript非依存とする方針街道を邁進していますが、こういうページはそれらに反することもあり、そういったサイトそのものの実装方針に反して動かすために結構無理やりな実装を採用するなどしていました。そういのもやめたい。とにかくこのサイトは基本的にJavaScript非依存を維持したいという感じです。もちろん、本棚をこのサイトから分離してもJavaScriptを使わざるをえないページは存在するのですが、それはあくまでもこのサイトそのものに関わるものに抑えておきたいというのがありました。

三つ目。前述の理由と被る部分はありますが、コンテンツという観点では本棚はこのブログには基本的に関係ない(= 独立できる)存在なので独立させた方がアーキテクチャ的にも綺麗だろうというのがあります。

四つ目。本のリストのJSONを埋め込んでいたので、読了リストを更新するたびにこのサイト自身もデプロイする必要がありめんどくさかったです。

五つ目。去年に作成したときにExcelの列の命名とかASIN周りでやらかしたのをキリのいいタイミングで清算したかったというのもあります。

後は、CloudFormationで静的サイトを大量生成するスキルを会得したのと、S3のライフサイクルポリシーを設定すれば死後自爆機能を実装できることに気付いたのも大きいです。

インフラ


S3とCloudFrontはCloudFormationで生成してます。

  • AWS ACM
  • Route 53
  • S3
  • CloudFront

証明書の取得と割り当ては手でまごころこめてやってます。

コード的な部分


本のリストのJSONは基本的に前回の通りですが、Excelの列の見直しや生成する列の修正など負債を返済しました。

肝心の表示部は下記のスタックです。

  • Vue.js: 2.6.x
  • TypeScript: 3.8.3
  • Vuetify: 2.2.18

実装の話など


プロジェクトの初期部分を作るのはめんどくさいので自分が運用しているサイトのいろいろ表示するやつをコピーしてきて作りました。なので、なんかレイアウトが似通ってますが、まぁしゃあないです。

そのコピーしてきたものに、もともとのコードを移植したような形です。なのでコード自体はほとんど変わっていません。とりあえず作業開始したその日のうちに公開することを優先したため、コンポーネント分割とかもしていないです。そういうのもあって、数時間でできるかな?と思っていたのですが、レイアウトをごにょごにょしていると結局5~6時間くらいかかってしまいました。

実のところ、当初はペライチであればReactでもできるのでは?Reactでやってみようかな?と思っていました。

ですが、実際やるとなるとやはり数週間くらいはかかりそうですし「フロントエンドエンジニアではないし、Vue.jsができれば覚えなくてよい。覚えなくてよい。覚えなくてよい。覚えなく…」という強い心でVue.jsでいくこととしました。

後はデザイン的な側面でVuetify以外のライブラリも使ってみようかと思ったのですが、そうすると時間がかかってしまうのでやめました。

感想


新生本棚はこのサイトのシンプルで爆速というコンセプトから解放されました。これらに従わないのであれば自由度が上がるので選択の幅が広がります。例えばこのサイトでは使うことのないWebフォントも使えます。そうなると、フォント変えて雰囲気も変えてみようとかいう遊び心もでてきます。

このサイトはこのサイトで物書き部分に、本棚は本棚としての役割を全うできる。となり、結果的によかったのではないかと思います。

今後


いくつかこういったものが欲しいというアイデアはあるのでほどほどに実装していきたいです。おわり。