これは、a-blog cms Advent Calendar 2017 の９日目の記事です。

弊社のフォトストックサービス「YAMAGATA IMAGES」。「山形を旅するように楽しむ」をコンセプトに、これまで撮影してきた写真を公開しています。

商用販売を考え、EC-CUBE で構築したのですが、いろいろと、全体的に見直し、a-blog cms で再構築することになりました。目下、制作中です。そこで今回は、まだ途中ではありますが、考慮したポイントをいくつかご紹介します。

膨大な量を分散するため子ブログを利用

山形県は、35の市町村からなり、４つの地域に分けられています。また、現時点の写真点数は、約1,800点にのぼります。これを１つのサイトで管理、運用するには、大変そう。サーバーも、システムも、人間も、負荷分散が必要だと考えました。
そこで、カテゴリーは使わず、市町村ごとに子ブログ化して管理することに決めました。これなら、バックアップやメンテナンスなど、何かとメリットもありそうです。

縦写真と横写真

一覧で表示するとき、写真はトリミングしたくなかったため、IFブロックで、縦か横か、写真の向きを判断して、全体が表示されるように作りました。

表示サンプル

<!-- BEGIN image:veil -->
<!-- BEGIN_IF [{imgX}/gt/{imgY}] -->
<img src="%{ROOT_DIR}{path}" alt="{alt}" class="yoko">
<!-- ELSE -->
<img src="%{ROOT_DIR}{path}" alt="{alt}" class="tate">
<!-- END_IF -->
<!-- END image:veil -->

{imgX} が {imgY} より大きければ横位置、そうでなければ縦位置、と判別。あとは、CSSで画像表示を整えました。レスポンシブのときはメディアクエリでそれぞれ設定が必要です。

スクロールしてどんどん画像表示

これも一覧ページで表示するときの話。ページャーで次ページに移動するより、SNSのようにスクロールにより次々と表示したいという要望で、ポストインクルードを利用。スマホやタブレットで見るのにとても便利な機能ですね。

問い合わせにカート機能を利用

リニューアル版では、クレジット決済は見送り。商用目的で購入する場合、弊社にメールが届くように設定します。複数の写真を選択して送信できるように、カート機能を利用。ユーザーの動作が１回で済むような仕組みで制作中です。

このほかにもいろいろと設定していますが、すべて a-blog cms に備わっている機能でとても助かっています。タスクはたくさん残っていますが、新年早々の公開に向けてコツコツと。公開したらご覧いただけると幸いです。