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

bootstrapvue



Amazon Search

Amazon Search



簡単な解説

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


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


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

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


この後は

とりあえずここまででAmazon関連は終わりですね。十分なテストが出来、個人として十分実用的なものは作れたので。まあでも次も多分、Laravel + BootstrapVueで作るサンプル的な機能かな。

候補

  • RSSフィードを読み込んで指定したスタイル(リスト表示、サムネイル一覧、スライドショーなど)で書き出す機能
  • Chart.jsを使ったグラフ描画







スポンサーリンク

スポンサーリンク