大きいバージョン
小さいバージョン
特徴
- 情報の取得をLaravelが、データの表示をVue、装飾をBootstrapがそれぞれ担当
- Vueを使って遅延表示
- iframeの大きさに応じて表示内容をレスポンシブに変更する
- 商品リンクもAmazon Product Advertising APIのものを使う
- 割引がある場合、その表示に対応
- APIへのアクセスはCloudFrontでキャッシュ
情報の取得をLaravelが、データの表示をVue、装飾をBootstrapがそれぞれ担当
これまではSymfonyで情報の取得から表示まで作っていたんですが、今回は担当を分けました。「やってみたかったから」が一番大きな理由ではありますが、機能毎に分割した方がメンテナンスしやすいし、それぞれの使い方について学ぶに当たってちょうど良い小ささのプロダクトだったので。結果的に段階を踏んで開発出来たので良かったかなと思います。
Vueを使って遅延表示
正直、Vueの使い方はまだ稚拙です。他の管理サイトでGoogleカレンダーからデータを取得してカレンダーを作成する機能を実装したときの方が使いこなせてた気がしますが、あれは機能全部をVueで組み立てた（装飾はBootstrap）し、CDNを使ったことで1ファイルに全部書くスタイルだったのでわかりやすかったんですね。ルーティングも使わないし。
今回はLaravelがNode前提になっているしVueの機能がフルに使えるので、ルーティングもするし、Vueファイル使ってコンポーネントも作るし、って欲張ったら理解が追いつかなくて大変でした。まあ動くようになったので良かったんですが、まだまだ改善の余地がありそうです。
ていうかそもそもで言うと、商品を1つ表示したら終わりっていう機能なので、SPAでなくても良いんですけどね。やってみたかったということで。
iframeの大きさに応じて表示内容をレスポンシブに変更する
今まではURIでスタイルを分けていました。
- /asin/B07KYKJLRD → ブログ記事中に掲載する大きめの表示
- /item_small/B07KYKJLRD → サイドバーなどに表示する小さめの表示
大きさが決まっているのでそれで十分ではあるのですが、どうせなら同じURIでレスポンシブに対応したいということで、Bootstrapを使って対応してみました。悩んだのはスペースの処理と文字サイズの処理。小さくすると言ってもスペースは小さくし過ぎないようにしたい、逆にフォントは小さくしたい。
スペースに関してはビューポートのサイズによって分割方法を変えることで対応。フォントの方は、Bootstrap4.3からの新機能「レスポンシブフォントサイズ」を参考にして対応しました。テンプレートが1種類で済んで管理が楽になりました。
商品リンクもAmazon Product Advertising APIのものを使う
商品リンクはこれまで結構適当にやってました。自分のコードが含まれてれば良いんでしょ、って感じで。それでも一応売上はカウントされるらしいんですけど、本当はAmazon Product Advertising APIが返してくる商品リンクを使うことが推奨されているんですよね。今まで特に不便は感じてきませんでしたが、まあそう言うならそうしとこかってことで対応。なのでリンクにいいろいろ引数が付いてます。
割引がある場合、その表示に対応
今までこの対応が出来なかったのが結構不満でした。実際の販売価格が定価の1割ぐらいになってても商品紹介すると定価しか出ないっていう。記事内で「安い」って書いてるのに安くないじゃん的な。なので今回対応をしてみたいんですが、でも返り値の値段の構成って結構複雑なんですよね……ざっくり書くとこんな感じ。
- 定価
- 販売する価格
- 割引価格
- 新品の最安値
- 中古の最安値
それぞれあるときと無いときがあって、条件分けがいろいろ必要です。もうさ、Amazonの実際の画面に表示されてる情報を取得するラッパーみたいの用意して欲しいよ。一応頑張ってはみたんですが、それでもまだ上手く価格が表示されないパターンがあるみたいなので、その辺は今後の課題かな。
APIへのアクセスはCloudFrontでキャッシュ
パーツの表示部分はキャッシュしていませんが、AmazonのAPIに回数制限があるのでその節約のために商品情報取得部分はキャッシュしてます。といってもこのサイトぐらいの規模では全然リミット掛からないとは思いますが、AmazonのAPIって結構遅いんですよね。CloudFrontを採用することで速度は随分改善されました。
まとめ
初めてLaravelで作ったにしては良く出来たかなと思います。DBもなんもない、ほとんどフロントエンドだけのシンプルなものですが、個人的には満足しています。LaravelもVueも使いやすいですね。1回わかればすごい触りやすい。
いやこんなんで満足してないで、そろそろ開発スピードを上げていかないとどんどんコストが掛かっちゃうんですけどね。次行きましょう、次。
