a-blog cms オンライン勉強会 カスタムフィールド編
やながわ里山農園は、福島県北部にある梁川町（やながわまち）の自然農・有機農の農園です。 今回は、この農園の情報発信や商品販売のためのサイトをa-blog cmsで制作しました。
クレジットカード決済サービス「Square」と連携できるECサイトテーマ
このサイトは、a-blog cmsの公式テーマの「UTSUWA」を利用しています。 主な機能やデザインはUTSUWAを利用し、カスタマイズが必要な部分を、UTSUWAを継承した子テーマで制作しています。
下の画像は、左がUTSUWAで、右がUTSUWAをカスタマイズした当サイトのテーマです。
記事やカテゴリー一覧を表示するモジュールも、UTSUWAが提供しているものを使いまわす事でトップページをカスタマイズしています。
例えば、トップページに表示している「栽培暦・日誌」のエントリー表示の箇所では、UTSUWAのトップページで利用されている「募集職種」のモジュールに少し手を加えて利用しています。
このモジュールはテンプレートファイルと、モジュールIDの設定を変更しています。
UTSUWAで用意されているモジュールIDの設定は、「採用情報」のカテゴリーのエントリーを表示させるようになっていますが、このテーマでは、任意のエントリーを指定して表示させるようにしています。
コードを書かないでも表示内容を管理画面から変更できるので、カスタマイズも容易でした。
また、サイトの色の変更も、CSS変数を変更することで簡単に対応できました。
UTSUWAテーマは、用途に応じたカスタマイズがしやすい構造になっているため、スピーディにコーポレートサイトを立ち上げるのに適したテーマだと実感できました。
今後は、決済サービスのSquareと連携できるECサイトテーマ「Square」を活用した商品販売機能や、カスタムフィールドや拡張アプリを活用した多言語化も行っていきたいと考えています。
あしかクッキーは通販と委託で販売している焼き菓子店です。 元々自社のホームページはあったのですが、ホームページに決済の仕組みはなく決済はBASEのショッピングサイトを利用していました。
今回、新商品の発売に伴い、BASEのショッピングサイトとは別に自社のホームページでも直接決済が導入できればと考えていました。要件として『頻繁に改修を行いたい、且つ気軽にカートを利用したい』と考えていたところ、良いタイミングでECサイトテーマがリリースされましたので導入を決意しました。
クレジットカード決済サービス「Square」と連携できるECサイトテーマ
また、マニュアルが丁寧で、簡単セットアップがあったのも採用した理由の一つです。 丁寧なマニュアルのおかげで比較的スムーズにクレジットカード決済まで構築を進めることができました。
豊富なマニュアルがあり安心
簡単セットアップですぐに導入可能
しかし、公式のECサイトテーマではクレジットカード決済を利用することが可能でしたが、『お気に入り』や『最近見た商品』、『購入履歴』などのマイページ機能は備わっていませんでした。
具体的なカスタマイズとして、『お気に入り』や『最近見た商品』については、 まず、閲覧したエントリーやお気に入りに登録したエントリーのEIDを閲覧順、お気に入りに登録した順でJavaScriptを利用して取得しています。 取得したEIDをもとに、ポストインクルードを利用して、商品データを表示するようにしました。
『お気に入り』ボタンを追加
お気に入りの商品を表示できるように
また、履歴関係はログイン時のみ取得するようにしており、ユーザー自身がデータを削除できるように「削除ボタン」も準備しています。
最近見た商品を閲覧順に表示できるように
『購入履歴』については、通常のカスタマイズとは少し異なるため、詳細については割愛させていただきますが、ビジネスパートナーが購入できる拡張アプリを使用することでカスタマイズが可能です。
購入履歴を残せるように
このように必要なものだけ追加したいなど、柔軟にカスタマイズできるのもa-blog cmsの魅力ですね。 こちらの機能はログイン時のみ動作するようになりますので、ぜひ会員登録してみてください。
また、次のようなサイト構成を想定し、ショッピングカーとは別に通常のページや特集ページなど用意したいと考えました。 また、特集のページ内にフォームを設置したい箇所がありましたので、こちらは動的フォームを利用して実現しました。 この点も、ショッピングカートを利用しつつ通常のサイト制作と同じ要領で制作することができた点が良かったです。
サイトマップ
特集からのお問い合わせには動的フォームを利用
このリニューアルで、ECサイトで、頻繁に改修を行いたいという要望と、気軽にカートを導入したいという要件を十分に満たすことができ、非常に満足のいくサイトとなりました。
お客様からの初めてのご相談は、a-blog cms2.0.1.1 php 5.3のウェブサイトをSSL化したいという内容でした。 a-blog cmsの2.6系からは常時SSL対応が可能ですが、2.11までバージョンアップしても、すぐにサポートが終了してしまいます。
そこで、『この機会に最新の3系にアップデートするのはどうでしょうか』と提案いたしました。 お客様は現状のWebサイトの機能には満足しておりましたので、今回は3系へのアップデートを目指すこととなりました。
今回、限られた制作期間と予算のなかで使い心地は変わらず安心して運用できるサイトを実現するため、元のサイトの雰囲気を保ちながらUTSUWAテーマに組み込むことにしました。
リニューアル以前のサイト
UTSUWAテーマを利用しつつテイストは残す
具体的なカスタマイズとしては、元のサイトのカテゴリー構造がやや複雑になってきていたため、ページを洗い出しリニューアル用のサイトマップを作り直しました。特にサービス案内の情報を整理することに重点を置いて取り組みました。
新たにサイトマップを作成
整理してみるとサービス案内では、『親カテゴリは2カラムで表示され、子カテゴリは4カラムで表示される』など、柔軟な変更が必要となりました。 そこで、全てのカテゴリーで個別にテンプレートを変更するのは手間がかかるため、管理画面からテンプレートを選択できるようにUTSUWAテーマのカスタマイズを行いました。
一覧のテンプレートを選択できるように修正
一覧の上に表示させたい場合
これにより、今後カテゴリーの表示を変更したい場合も、テンプレートを変更することなく表示を変更することが可能になりました。
また、ブログを含め1000件以上の記事がありましたが、こちらはa-blog cmsからの移行ということで特に問題もなく、スムーズに3系のUTSUWAテーマに移行することができました。
既存の記事も無理なく移行
ユニットも基本大きな崩れはなかった
a-blog cms の記事データはユニットで管理されているため、サイトの構造に依存せず新しいテーマに移行可能です。これまで書いてきた記事を無駄にせず、綺麗に再レイアウト出来たことも嬉しいですね。これで過去の資産を守りつつ最新の環境を使っていただくことが出来ました。
今回のリニューアルでは3系へのアップデートを目的としていましたが、アップデートによりメディア、テーブルユニットなど新しい機能も使えるようになりました。 お客様からリニューアル後は、使い勝手が上がり、更新がよりスムーズになったとの感想をいただきました。
古いユニットを残しつつ新しいユニットを取り入れることができた
モジュールフィールドを利用することでより直感的な更新が可能になった
さらに表示の速さに関しても、リニューアルによりページの読み込み時間が短縮されたことが実感できていただけたようです。 結果、お客様の満足のいくリニューアルとなり大変喜んでいただけました。
株式会社銭辰堂様は仏壇・仏具の販売、葬祭ホールを運営している会社です。事業が2つあり、一度にリニューアルできないため、昨年は葬祭ホール、今年は仏壇・仏具のように段階を追ってリニューアルしました。
銭辰堂様は江戸時代に創業した老舗で、大阪市内に自社ビルで常時100本以上の仏壇を展示しています。また葬儀を行うことで仏壇を購入するお客さまもいらっしゃることから、ウェブサイト上で仏壇・仏具を売るのではなく、来店者を増やすことが目標となっています。そのため、ウェブサイトの目に見える部分はオーソドックスな作りになっています。
サイトリニューアルを行う中で、銭辰堂様より印刷用のカタログを作ることができないかという相談を受けました。今までは紙のパンフレットを印刷していましたが、掲載したい仏壇が変わったり、廃番になったりするため、何百部も印刷しても、使い切れないという状態が続いていました。
そこでCMS上に商品のデータを登録することで、最新のカタログをその時にプリントアウトして来店者に渡すことができるようになりました。
カタログの表示については、商品エントリーに「商品ページに表示」「カタログに表示」というカスタムフィールドを設けることで、どちらに出すかを選べるようにしています。
コラム一覧ページ
カタログには印刷用CSSを当てることで、カタログの表示を実現させています。表紙にはグローバル変数でその日の日付を、最終ページにはその他のサービスと地図・アクセスなどをまとめた画像を配置することで、紙のカタログと同じような機能を果たせるようにしました。
商品の一覧表示にはカテゴリーエントリーサマリーモジュールを使っています。添付のサンプルでは仏壇のみの表示になっていますが、その他の商品も表示させることができます。
今回の実装は単純な一覧表示で十分でしたが、特定の商品カテゴリーだけを印刷するなどのカスタマイズも可能なはずです。
カタログの印刷例
商品の一覧には管理者だけが見える一覧ページを設け、その一覧から商品のデータを編集できるようにしています。
機能的には基本的なものしか使っていませんし、ミニマムの実装で高度なカスタマイズは行っていませんが、クライアントの希望・ビジネスに沿ったものをa-blog cmsで実装できました。
お仏壇はカタログだけで売れるものではないことと、実際に来店した方への参考資料として渡すものなので、リニューアル後間も無いこともあり、売り上げが見える形で上がったわけではありません。
しかしながら、これまでのようにただ公開のみのウェブサイトではなく、さまざまな形で活用できる可能性を感じていただくことができました。それによって更新の頻度や商品の登録が進んだり、今回のリニューアル対象ではなかった葬祭ページの内容についても、社内で議論が行われ新たな要望が出るようになっています。
