コーディング

「ヴァーム×VAAM 最安値デイリーウォッチ」をリリース!

ヴァーム×VAAM by you.

個人的にあったらいいな、って思っていたサイトを作りました。

ボクはフィットネスジムに行くときなどVAAMを愛用しています。繰り返し使うので1本当たりの値段も安ければ安い方が良い。なので、ダース買いしたりするし、最安値を求めて楽天やその他のECサイトを回って比較検討して買うお店を選んでます。

そんなボクのようなVAAM愛用者で安さを求めている人向けのサイトです。

ヴァーム×VAAM 最安値デイリーウォッチ ~ 最安値・激安ECサイトを毎日チェック! ~

このサイトでPHPを勉強して作ったサイトは2サイト目となります。

まだ不十分なところ、勉強不足なところはありますが、同じ商品を1ページの中にAmazon、楽天、ヤフーからひっぱってきたものを混ぜてなんとか表示しています。楽天とヤフーに関しては商品単位でごちゃまぜにして安い順番にして並べ替えています。

ヴァーム×VAAM by you.

苦労したところは各ECサイトのリクエストパラメータやレスポンスフィールドの違いをどのように吸収するかです。

値段やリンク先URL、ショップ名、説明文、商品名などはそれぞれのECサイトにあるので、それほど難しく無かったのですが、画像サイズが違っていたり、ポイント数がレスポンスに含まれているものと含まれてないものがあったりなど、違いがありました。

特に画像サイズに関しては一覧にしたときにサイズの違いが目立ちます。カッコ悪いです。

それをいかに同じサイズに見せるか、というCSSの修正作業が一番苦労しました。

基本的に同じサイズの黒い枠を作り、その中に画像をセンタリングすることでサイズを揃っているように見せようとしたのですが、そのセンタリングをCSSでやるにはかなり面倒臭いことが発覚しました。

結局参考にしたところのやり方をそのまま踏襲することに。

CSS+αで縦横混在の長方形画像を、正方形枠でセンタリングさせる方法 : Media Technology Labs (MTL) : メディアテクノロジーラボ ブログ

とりあえず動くものが作れたのでほっとしていますが、実はAmazonのサブストアの扱いとかをちゃんと理解していないので、ところどころ、定価のまま載せているところもありますが、そこはAmazonのWebサービスを理解する過程で治していければ、と思います。

また、今回初めてキャッシュ(Cache_Lite)を導入したのですが、これがないと重くて使えないWebサービスもあるし、お互いの負荷を軽減するためにもうまく使っていきたいと思います。

今回のキャッシュは原始的な方法でxmlデータをそのままキャッシュしていますが、画面に書き出した内容(XMLから取り出す部分や計算が済んでHTML化されているもの)をこれからキャッシュできるようにしていきたいです。

今回経験したことを通じて、同じようなアプリケーションを作ってみたい人に教えられるレベルに早くなりたいです(期限4/19w)。

  • この記事を書いた人
  • 最新記事

wackey

Webディレクター・プロデューサーなどで大手企業サイトの構築に携わった後、インターネット広告営業やWebコンサルティングなどを行う。フリーランスを経て2012年にプラス・ムーブメント合同会社を設立。Webサイト・システムの制作やブロガーツアー・イベントなどの企画・運営を行う。地域ブログをまとめたLocketsというサービスの事業責任者としてビジネスを展開。 2015年にアジャイルメディア・ネットワーク株式会社に入社。 レビューズにてインフルエンサーマーケティング事業の立ち上げに関わり運営。またアンバサダープログラムの運営など多くの企業の支援をバックアップしていた。 現在プラス・ムーブメント合同会社を経営しつつ、新しい働き方について模索している。 主な著書に「アフィリエイターのための Web APIプログラミング入門(ビー・エヌ・エヌ新社)」がある。

-コーディング