アクアリウム、爬虫類、小動物専用ホームページ(通信販売サイト・ネットショップ)の制作について

「一年の計は元旦にあり」
世の中が休みの時こそ、新しい事にチャレンジすることで、1歩も2歩も差が生まれます。っと思ってます。

2016年がはじまりましたね。

あけましておめでとうございます。
今年もどうぞよろしくお願いいたします。

2015年12月31日。そろそろ立ち上げてから1年を経過するスプラッシュさんのデザインリニューアルを実施いたしました。正確にはデザインではなく、フロント側のプログラムを全面的に変更しました。

昨日リニューアルを実施したスプラッシュさんをはじめ、私が現在デザイン、開発したコーラルラボさん、珊瑚堂さんのサイトもご紹介いたします。

アクアリウムだけでなく、爬虫類、小動物、鳥類も7拠点で取り扱うペットショップスプラッシュさんの通信販売サイト

アクアリウム、爬虫類、小動物専用ホームページ(通信販売サイト)の制作について

スプラッシュさんは、関東圏を中心に7店舗存在します。1年前、以下の設計コンセプトのもとサイトを立ち上げました。

  • サイトが成長するまでは一つのドメイン(管理画面)で7拠点分を処理する。
  • いずれは拠点の分散処理を柔軟に行うためAWS上で7拠点分の分割を見越したインフラ設計をする。
  • 負荷軽減のためNginxのキャッシュコントロールを最適化させる。
  • 通販対応可能商品(アクアリウム、用品機材)と、動物愛護法で対面販売が義務付けされている商品(爬虫類、小動物、鳥類)が一つのサイト上で混在する場合も、一つの管理画面操作に、「カート」設置なのか「問い合わせ」設置なのかを簡単操作で実現させる。
  • 7拠点分の商品、ブログ登録を一つの管理画面で実施させ、登録されたデータが画面表示上適切な場所に自動で表示されるように処理を最適化させる。
  • デザイン色は旧画面をベースにする。
  • プロモーションは、自己サイト(複数サイトで100万ページ以上保有してます。)から全面的に実施する。

今回フロント側をリニューアルした理由は、7拠点からの登録処理を行っているプログラムをPHPで実行させているのですが、通常のペットショップサイトと違い画面表示時に7倍の処理が実行される箇所があるため、画面がブラウザに表示されるまでのレンダリング処理がとても重たくなってきました。旧来のデザインも今回、全面的に変更しました。

1年前に比べると、登録データも蓄積してきて、更に7拠点分の処理が重たくなってきたことから、フロント側の分岐プログラム(if、else)を最適化させると共に、画面を構成するフレームワークを軽量化させました。

今回採用したフレームワークは、米国Twitter社でも利用されているオープンソースで、私のお気に入りです。

ただ、商品一覧を自動連続表示させるプログラム箇所で、本当は4件表示したら、divタグの影響を一度リセットさせるdivタグをかますようにプログラムを組みたかったのですが、ここは上手くいきませんでした。

なぜ、上記処理が必要かというと、画面上に表示される商品は商品名が長かったり、短かったりで、一覧表示させると、表示が一律綺麗に並列となりません。今回採用したフレームワークを用いて、綺麗に商品を並列表示できるように、商品一覧が折り返す地点で上位のdiv影響をリセットさせる処理をかましたかったのです。

本当は上記まで実装できると、更に表示の高速化ができたのですが(コンマ数秒の差ですが)、商品一覧は縦横固定のdivタグ中にフロートレフトをかまして、一覧表示させるようにしてしまいました。

なかなか素晴らしいサイトが立ち上がりました。
SPLASH

ただ、インターネットの世界はいつ何時、何が起こるか分かりません。「問題が発生しても以前の状態に戻せる。」「セキュリティが強固なクラウド上でシステム管理する。」などのリスク管理もあわせて実施することが本当にとても重要です。

「常に新着情報をトップページでスライドさせたい。」この要望をかなえたコーラルラボさんの通信販売サイト

アクアリウム、爬虫類、小動物専用ホームページ(通信販売サイト)の制作について

現状目にする世の中のサイトは、ほとんどトップページで動くスライダーの表示は変わりません。オーナーからシステムを管理している人に命令が下った時に差し替えているサイトがほとんどです。上記で立ち上げたスプラッシュさん、これから以下で紹介する珊瑚堂さんのサイトも同様です。

でも、コーラルラボさんからのご要望は、「ブログアップしたらその情報が即座にトップページのスライダーに表示されるようにしたい。」というものでした。このような要望もプログラミング設計すれば、問題無く実現できます。

またあわせて、5000円以上のお買い物をされて、更に要望があったお客様だけに閲覧ができるようにする「会員制ブログ」も開設しました。

やはり専門のプロショップさんだけあって、世の中にオープンに発信できない情報も沢山あります。でもここは流石プロショップさん、お買い物をしてくれたお客様には、ちゃんと保有されている情報を「会員制」というカタチで日本全国の愛好家の皆様に情報発信したいというご要望があり、私はそれをプログラムで実現させました。

コーラルラボさんの通信販売サイトも、私のお気に入りです。
コーラルラボ

1000件以上の過去データを手動で移行させた珊瑚堂さんの通信販売サイト

アクアリウム、爬虫類、小動物専用ホームページ(通信販売サイト)の制作について

次は珊瑚堂さんです。珊瑚堂さんは、旧来のシステムにもの凄く大量のデータがたまっていて、しかも私のシステムにはそれが自動で移行できない状況でした。でも要望としては、「過去、店舗を立ち上げた時からの思い出のデータを全て移行させて欲しい。」っというものでした。

自動が駄目なら、手動(気合)です。手動作業は、ヒューマンエラーが多発するので本当は避けたかったのですが、「店舗立ち上げ時からの思い出のデータ」っという言葉に気持ちが負けて、手動で全てのデータを一つ一つ1000件移行させました。

でも結果、手動で対応してよかったと思いました。

理由は、珊瑚堂店舗立ち上げ時からの毎日の歴史が把握できたからです。珊瑚堂さんがお店を立ち上げられた当初、私が購入していた生体たちの写真もいろいろ出てきました(笑)。

珊瑚堂さんの通信販売サイトも、私のお気に入りです。
珊瑚堂

ちなみに珊瑚堂さんは、バーも経営されています。
バー側の予約サイトも私が立ち上げました。
アクアリウム、爬虫類、小動物専用ホームページ(通信販売サイト)の制作について

鳥のから揚げ500円で食べ放題!超おすすめです。
#終わっている可能性もあるので、終わっていたらスイマセン。

そして、まだ作ったものがあります。

珊瑚堂さんの表の看板も私が作りました。
kanban

私は上記に限らず、様々な通販サイト、予約サイトなどなど、一人でデザインから開発まで行っています。

企業(組織)と勝負になった時には、見積価格と技術で勝てます。個人と勝負になったら技術で勝てます。運用はクラウド上の優秀なプログラムたちが上手くやってくれるので、問題が発生したらスマホにも通知してくれるので助かります。

アクアリウムに限らず、通販サイト、予約サイトなどなど、インターネットに関する事であればなんでもできます。

「こんなサイト欲しい!」、「もっと在庫が動くサイトが欲しい!」、「新しい変化や改善を起こしたい!」、「他には実現できないものが欲しい!」、「形式ばかり気にして出来が悪い旧来の企業や組織とは付き合いたくない!依頼したくない!」っという方がいらっしゃいましたら、こちらのお問い合わせフォーム、もしくはこちらのメールアドレス( info@ebihara.asia )でいつでもご相談受付ます。

今年も様々なウェブサイト開発を手がけていきます。

不正アクセス防止のため、コメント入力いただいた方の送信元ホスト名、IPアドレスを記録しています。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

新着記事

アクアギフトさんのブラックバンド5万円台...激安!

アクアギフトさんのブラックバンド5万円台…激安!

趣味がアクアリウム好きな男って、どんな男?

趣味がアクアリウム好きな男って、どんな男?

アロワナ華僑紅龍魚、古代魚が泳ぐ18BAR(横浜馬車道)

アロワナ華僑紅龍魚、古代魚が泳ぐ18BAR(横浜馬車道)

連結オーバーフロー水槽のメリット、デメリット

連結オーバーフロー水槽のメリット、デメリット

ユーザ評価1.2「カニシャコホイホイ」

ユーザ評価1.2「カニシャコホイホイ」

全ての記事を確認する