Amazonの検索を簡易に行うツールをLaravel + BootstrapVueで作ってみました【#np2020】

Amazon Search

簡単な解説

前提として、特にWebサービスとしてリリースしたいということではなくて、自分がブログに商品を貼り付ける時なんかに軽く使いたいツールであって、僕以外の人間が使うことは想定していないということがあります。なんで、あくまでデモであって動作は保証してません。ただ仕事でもBootstrapVueを使い始めたこともあって、一通り出来ることはやってみようじゃないかという方針で組み込んではいます。割と軽快に動くし、bookmarkletも使えるしいい感じです。

基本はLaravelがAmazon APIとの通信処理部分を担当しJSONで出力、それをVue.jsが受けて描画、装飾部分はBootstrapが担当するという感じです。

作成するに当たって苦労したところはデザインの調整ですかね。Bootstrap4の癖にはだいぶ慣れてきたんですが、細かい調整「こことここを合わせたい」だとか、「ここもう少しスペースを空けたい」とかそういうのをするのにいちいちビルドするのが面倒に感じました。デベロッパーツール使えば良いんですけど。まあ、ナビとかレスポンシブとかでかなり楽させてもらってるのでプラスマイナスゼロですかね。

Vueの処理部分についてはさほど大変なことはやっていないので、先日作った商品情報表示用のアプリの一部分を切り分けて共通化して、APIからのレスポンスをそれで処理して表示して終わり。このあたりはLaravelとVueのおかげでものすごく簡単です。ありがたい。