CS-Cart v3に960グリッドシステム

CS-Cart ver3以降が「960GridSystem」を採用するということを少し考えてみる。

CMS採用の大きな理由に、サイトリリースまでの短期化というものがある訳だけど、それ以上に重要なのは「運用のしやすさ」だと思う。

そしてどのCMSを使うのかという選定の部分で重要な指標もいくつかあるんだけど、そのうちのひとつに「自由度」を求める向きが多い。

これはイチからECを始める場合にはさほど重要ではないかもしれないけど、既に他のシステムで運用しているサイトのプラットフォームを変更する場合とか、既にある会社のローカルルールに則したサイトを作る場合などに重要度が増してくる指標。

ぶっちゃけ機能面はなんとかなる。PHPで作られていれば「無ければ作れば良い」。

じゃぁデザインは?まぁこれも「作れば良い」。
とはいえ、デザインにおいての自由度って、最も自由度の高いものは何かと言われれば、CGI式のカート部分をhtmlに埋め込むタイプ。これを採用して好きにデザインするのが一番自由度が高い。

でもこれだと「自由度が高い」=「大変」なんだよね。

それでCMSと呼ばれる仕組みは予めテンプレートを用意してその枠組みの中にテキスト(htmlやCSSのマークアップもね)を流し込むことである種制限を設けた中での自由度を提供している。

この部分のルールってのがCMSごとに異なってる。
プラットフォームを変えるとここへの対処が変わってくるのが「乗り換え障壁」だったりもすると思う。

ZenCartのような完全独自のテンプレート。EC-CUBEやCS-Cartのようなsmarty。
smarty採用のCMSにしても中身を見ると考え方が大きく違ってるはず。

EC-CUBEのテンプレートはsmartyそのものを自分で書かなきゃいけなかったり(新規ブロックの追加)、CS-Cartのそれはロジックが混在してたり(ここは残念なところ)。

そこでCS-Cartのバージョン3。

これは表題の「960 Grid System」というデザインフレームワークを採用するとのこと。

960 Grid Systemってなに?

ここ数年デザインよりもZenCartやらCS-Cartの機能開発案件でデザインの話に疎くなってたんだけど、2008年くらいから提唱されはじめたCSSによるレイアウトをグリッドで行うという発想の代表的な存在。たぶn

ページの幅960pxを基準にして設計するグリッドデザインのことで格子(グリッド)をベースにそこに出来たブロックごとに図版や文字を配置してデザインを行うもの。

あれ?CMSってみんなそんな感じじゃね?
と思っちゃうところかもしれないけど、CS-Cartにおいては基本は5分割のテンプレートです。

  • トップ
  • 左カラム
  • センターカラム
  • 右カラム
  • ボトム

960グリッドシステム採用のバージョン3だともっと細分化して配置できるようです。

CS-Cartでは16分割を採用しているようで、940pxの左右に10px余白、合わせて960px。
グリッドは40px+20pxのグリッド間余白。

デモサイトを少し触ってみたところ、デザインの自由度は格段に向上してる。
かといって自由になった分、自分でやらなきゃいけないことが増えてるということではなくて (もちろん設定できる項目が増える訳なのでその分やることは増えますけど。)、グリッドに配置するブロックパーツがプリセットでたくさん用意されている。
更にそのブロックに入れるテンプレートもプリセットで用意される。

つまり、

  • 最少単位のテンプレートがたくさん用意されてる
  • テンプレートを入れるブロックがたくさん用意されてる
  • ブロックは16分割のグリッド上に自由に配置できる
  • 高さは可変

とこうなるわけです。

こういったフレームワークが採用されます。デザインは格段にやりやすくなりますね。デザイナーさんの腕の見せ所!

 

ただし、懸念はないわけじゃないです。

デザインフレームワークが刷新されるということは、CS-Cartそのもののアップグレードはどうすんの?という問題。
これだけフロント側が変わるんだからちょっと簡単じゃない気がするなーと思っていたらこんな記事がありました。

http://blog.cs-cart.com/2012/02/27/cs-cart-3-upgrade-faq/

Q: After CS-Cart 3 is released, how can I upgrade my CS-Cart to this version?

A: CS-Cart 3 is a major release with many modifications, so the upgrade process will be a bit trickier than it was for previous versions.

Unlike before, it will be impossible to upgrade CS-Cart to version 3 via the Upgrade center in the admin panel. Instead, it will be required to install CS-Cart 3 separately and then transfer the data from CS-Cart 2.2.4 to it.

In order to do it we will provide a special add-on for CS-Cart 2.2.4 that will allow you to pack the whole store database and images into a special archive.

CS-Cart 3 will have a pre-installed Export/Import Stores add-on that will be used for importing store data from such archives.

Also, if both CS-Cart 3 and 2.2.4 are installed on the same server, you will be able to perform data transfer without creating a transition archive: CS-Cart 3 will be able to connect directly to MySQL database of CS-Cart 2.2.4 and gather all data automatically.

バージョン3はたくさん弄ったメジャーバージョンアップだぜ、だからアップデートはこれまでよりも若干トリッキーなんだぜ。
これまでみたいにはいかなくって、バージョン3をインストールしてそこに2.2.4からデータを移さないといけないぜ。
アップデート用アドオンを出すからそれでDBと画像を圧縮して抜き出すぜ。
バージョン3のインポーターを使ってそのデータを取り込むんだぜ。
まぁ同じサーバーにバージョン3と2.2.4がインストールされてれば自動でデータ移行できるけどな!

以上意訳w

あんまり気にすることはなさそうだけどデザインに関してはデータ移行だけでは2.2.4と全く同一にはできないかもね。
再現する作業は必要になりそう。
まだなんとも言えないけど。

Google Insights for Search ちょいと触ってみる

なかなか面白いチャート。

読み取れることは多々あるよね。

EC-CUBE 独走とかそんな誰の目にも分かることは置いといて、去年1年の動きが興味深いなと。特に年末。

日本ではメジャーとは言えないプラットフォームだけを集めてみました。

CS-Cart以外はOSSなので直接比較はまぁフェアではない。日本語版のフリー版が出たのも昨年11月のことなので。

で、何を読み取れるかってことだけど、去年は日本において大きなシェアを持つ「EC-CUBE」「ZenCart」「Magento」の検索クエリーがずっと下げ続けていたんだけど、この間世の人達のECに対する興味は薄れていたのかなぁという疑問が沸いてきて。
で、このスクリーンショットの出番。

メジャーとはいえないこれらのプラットフォームの検索クエリーはどうだったのかと。

んー減ってるねw

これを震災の影響だと言っちゃうのは簡単だけど、たぶん関係ない。3月に入る前から急減してるし。

そうかASPに流れたのか?

流れていなそうだけど、検索ボリュームに圧倒的な差があるから判断し難いな。

Amazon抜いてみよう。

あれ。。Amazon抜くと楽天上昇してんのか。

 

ただし、このGoogle Insights for Searchはベータサービスだから精度はちょっと微妙。
(検索クエリーの取り方によって結果が大きく変わる上に期間指定でよく分かんない結果になるので注意は必要です)

CS-Cart 2.2.4-jp-1 アップデート

CS-Cart 2.2.4-jp-1 どこが変わったかなーとちょっとだけマージツールで比較してみた。
(運用サイトは特に気にせずアップデート済み)

個人的に気になっていた「[*] アドオン : アドオンの設定画面に独自テンプレートを利用可能に」 がどうなってるのか調べようと。
ほんとはリリース済み、リリース待ちのアドオンが2.2.4-jp-1でちゃんと動くかの確認が主目的だけど。。

 

「Twigmo」 アドオンにそれらしきものを発見したのでコードとかアドオンの構成を見てみた。

下記は2.2.4-jp-1(設定にタブが追加)

こっちが従前2.2.3-jp-1以前

アドオンの設定ページにタブが表示されるのは従前よりあるのですがその表現方法が異なります。

アドオンの構成を見ると
var/skins_repository/base/admin/addons/twigmo/settings/settings.tpl
なんてのが増えてる。テンプレート側に(repositoryね)アドオンの設定ファイルを置く形らしい。

ぱっと見ただけだと、これまでのaddon.xmlに書く形と大差ない、むしろ分割することがめんどくさいという捉え方もありそうです。

でも実際のところ期待していいように思えます。

というのも、これまではxmlファイルに書く必要があったので制約も多かったんですよ。
動的にプルダウンの中身を生成するとかタブンできなかったはず。
条件分岐をして、他の設定に応じて表示非表示を切り替えたりってのも同様。

今回のアップデートで設定ファイルにtplファイルを充てることができるようになったので smartyで色々制御できることは間違いないですね。

PHPで制御できるかはまだちょっと見てないですけど。。
感覚的には決済系のアドオンの支払方法の設定ファイルに似てるかなーという感じ。

ちょっと速報気味にエントリー投稿しました。

CS-Cart 日付オプションの追加アドオン

とあるアドオン開発中に必要に迫られて作ったものです。

商品オプションに「日付」がなかったなと。
CS-Cartでデフォルトで用意されているのは下記のものになります。

  1. テキストフィールド
  2. テキストエリア
  3. ラジオボタン
  4. チェックボタン
  5. セレクトボックス
  6. ファイル

オプションで日付を扱いたい場合(例えばチケット販売で日付指定するケース)、テキストフィールドに入力してもらう必要があります。
勿論運用上これで問題が無いケースもありますが

カレンダーで指定選択させたい。
入力される文字列フォーマットを統一したい 。

といった要望もあるかと思います。

というわけで日付オプションを追加するアドオンを作りました。
(携帯ではカレンダー表示できませんのでただのテキストフィールドとなります。)

日付オプションをふたつ使えば期間の指定も対応できます。(たぶん)

実装にあたってはコアも他のアドオンも触らず、当該アドオンだけで完結しますが、コアを触らない為に処理が多重化している箇所があります。
コアファイルにちょっと書き加えればもっと簡単に実装できますが「コアを触らない」ことを優先してます。

  • 商品一覧画面
  • 商品画面
  • カート
  • 注文手続き中の最終確認画面
  • マイアカウント内注文>注文情報ページ
  • 管理画面:注文内容の確認画面

これらで選択したオプション値(日付)が表示されなければいけませんのでそれなりに大変でした。

販売時期と価格は追って告知します。

CS-Cart日本語版がアップデートされるよ v2.2.4-jp-1

表題の件、CS-Cart.jpのサイトに行けば詳細見れるのですがこちらでも末尾に転記させていただきます。

今回のアップデート、バグフィックスが中心ですが一部機能改善、決済代行会社の追加があります。
決済代行会社さんは「SMBC」さんですね。現在こちらの決済を使われているサイトさん多いと思います。決済方法がネックになってCS-Cartへの移行を躊躇されていた方には朗報です。

機能改善についていくつかピックアップします。

[*] データエクスポート時の出力文字コードに”Shift-JIS” を指定可能に
[*] “Shift-JIS” で作成されたデータのインポートに対応

これは何気に便利になる方も多いのではないでしょうか。
ことの是非は置いておいて、CSVを扱う各種サービスでは文字コードがShift-JISであることが多いんです。
CSV出力してから文字コード変換ツールで変換するという手間が省けるようになります。
個人的には世の中すべてUTF-8に統一して欲しいんですがw 日本語圏はなんだかんだShift-JIS多いです。携帯とか。。

[*] アドオン : アドオンの設定画面に独自テンプレートを利用可能に

これに関してはまだコードを見れないのでなんとも言えないのが実情ですが、アドオンごとに設定画面を独自にできると(見栄えだけの問題ではなく)自由度が広がります。設定用のプルダウンの中身を動的に取得できるようになってると嬉しい限りなんですけどどうだろう。
期待して待ちますw

 

以下バグフィックスについて

[!] IE9で注文編集時の「価格」フィールドが正しく表示されないバグを修正
[!] IEにおいて検索結果のページネーションが正常に動作しないバグを修正
[!] メールの件名にクォーテーションが使用されている場合に正しく出力されないバグを修正
[!] 注文管理 : ダウンロード商品に関する情報が正しく表示されない場合があるバグを修正
[!] 入荷通知 : 複数のメールアドレスに対して入荷通知を行う場合にすべて To: に表示されるバグを修正
[!] 入荷通知 : 入荷通知用Eメールのバリデーションが実施されていなかったバグを修正

上記フォーラムで指摘のあった件です。
[!] 注文商品をインポートすると不要な注文データが生成されるバグを修正
[!] 配送設定で「配送を行わない」を有効化した場合に注文編集の第4ステップでPHPの警告メッセージが表示されるバグを修正

こちら個人的に報告させてもらったバグへの対応です。

このようにアップデート時にきちんと対策が取り込まれて来ますので目新しい機能がなくてもアップデートすべきだと思います。
パッケージ購入者さんも1年経ったらアップデート権を購入されることをお薦めします。

以上簡単ですが今回のアップデートについてのご報告。

 

—————————————————————–
【凡例】
[+] – 追加
[*] – 改善
[!] – バグ修正
—————————————————————–
[+] 支払方法 : CS-Cartマルチ決済(SMBCファイナンスサービス)を追加

[*] 子カテゴリーを持つカテゴリー内の商品を表示する際に商品をカテゴリー毎にソート
[*] 配送日の日数計算から日曜・祝日を除外できるオプションを追加
[*] データエクスポート時の出力文字コードに”Shift-JIS” を指定可能に
[*] “Shift-JIS” で作成されたデータのインポートに対応
[*] ISO 3166-1 国番号コードを更新
[*] Twigmo アドオンをバージョン1.4にアップデート
[*] アドオン : アドオンの設定画面に独自テンプレートを利用可能に
[*] クリックジャッキング対策を追加
[*] セッション : ログイン/ログアウト時にセッション用識別子を変更する機能を追加
[*] ファイルアップローダー利用時にURLに https(s) を含めなくても動作するようバリデーションを改善。
[*] JACCS WeBBy : 送信する商品名に関する新しい規定に対応
[*] オリコWebクレジット : オリコの新システムに対応

[!] “magic database” が正しくインストールされていない環境では画像アップロード後にPHPの警告メッセージが表示されるバグを修正
[!] 管理者用パネルのダッシュボードにおいて、「本日」「今週」「今月」リンクをクリックしても注文が表示されないバグを修正
[!] 「アフィリエイト」アドオン : 商品グループとバナーページにおけるダイナミックリンク生成時のバグを修正
[!] 「カスタム商品」アドオン : “fn_change_option” 関数においてパラメータ数が正しくカウントされないバグを修正
[!] 「カスタム商品」アドオン : メイン商品に上から順に指定する形式のオプションが設定されている場合にカスタマイズ内容を指定すると選択済みのオプションがリセットされるバグを修正
[!] 「カスタム商品」アドオン : 合計金額が正しく計算されない場合があるバグを修正
[!] 「コメントとレビュー」アドオン : お客様の声のリンクに対してエスケープ処理が適用されていなかったバグを修正
[!] 「セット販売」アドオン : 商品コンビネーションに金額情報を持つオプション付き商品を追加すると金額が正しく表示されないバグを修正
[!] 「フォームビルダー」アドオン : ノード追加時に不要なオプションがコピーされるバグを修正
[!] 「フォームビルダー」アドオン : フォーム用テンプレートに一部の要素が正しく引き渡されないバグを修正
[!] 「ポイント」アドオン : 支払にポイントを使用するとそれまで適用されていた割引金額が正しく計算されない場合があるバグを修正
[!] 「ユーザーの管理」権限が与えられていない管理者ユーザーがショップフロントにおいて商品のプレビューができないバグを修正
[!] 「新着情報とメルマガ」アドオン : 新着情報ページにブロックを追加する際に「保存」ボタンおよび「保存して閉じる」ボタンが動作しないバグを修正
[!] 「定期支払い」アドオン : 定期支払い金額の算出においてオプションに割り当てられた金額が考慮されないバグを修正
[!] 「返品管理」アドオン : 注文内容確認書などに返品ステータスが表示されないバグを修正
[!] 「個別のHTMLブロック」を2つ以上登録した場合に商品詳細ページにおいてそれらのブロックに同じ内容が表示されるバグを修正
[!] 「最新の注文」セクションに削除済み商品の名称が表示されないバグを修正
[!] CKEditor : モーダルウィンドウにおいてテキスト編集フィールドが無効化されるバグを修正
[!] IE9で注文編集時の「価格」フィールドが正しく表示されないバグを修正
[!] IEにおいて検索結果のページネーションが正常に動作しないバグを修正
[!] Paypal : ポイントによる一部支払時に金額の丸め処理が正しく行われず決済に失敗する場合があるバグを修正
[!] Paypal express : ユーザー情報が正しくパースされないバグを修正。ギフト券に対する支払ができないバグを修正
[!] RSSフィードブロックのキャッシュ保持時間が長すぎるバグを修正。「キャッシュ保持期間」オプションを追加。
[!] SEOアドオン利用時に表示される言語切替バーの hreflang 属性の日本語言語コード「jp」を「ja」に修正
[!] URL指定による商品画像のアップロードに失敗した場合、PHPエラーが発生するバグを修正
[!] W3Cバリデーション : 一部のimageタグに “alt” パラメータが付与されないバグを修正
[!] イプシロン : 一部のサーバーにおいてエンコード変換エラーが発生するバグを修正
[!] インポート : 登録必須フィールドが空のデータをインポートできる場合があるバグを修正
[!] エクスポート : 商品データのエクスポート時にPHPの警告メッセージが表示される場合があるバグを修正
[!] カテゴリー : 全選択/全解除 チェックボックスが正しく動作しない場合があるバグを修正
[!] キャンペーン : カート内の無料商品に対して商品オプションを変更してもオプション画像が切り替わらないバグを修正
[!] サプライナー登録生成時にメールアドレスの存在チェックが行われないバグを修正
[!] スキン : 「Jewelry」スキンのメインカラムの表示ずれを修正
[!] スクローラーを使ったブロックに表示される商品が指定内容に関わらず常に右向きにスクロールするバグを修正
[!] ピッカー内にさらに子ピッカー設定されていると正しく動作しないバグを修正
[!] ブロック管理 : ブロック追加時にページネーションが動作しないバグを修正
[!] ページ : ページ削除後に正しくリダイレクトされないバグを修正
[!] メールの件名にクォーテーションが使用されている場合に正しく出力されないバグを修正
[!] メルマガ : 最初のメルマガ登録時にSQLエラーが表示されるバグを修正
[!] ログ : 同一タイプスタンプを持つレコードが正しくソートされないバグを修正
[!] 管理者に一部の権限のみが付与された状態で実施した横断検索の結果が1件のみの場合、検索結果が正しく表示されないバグを修正
[!] 商品の追加情報 : 複数商品の一括アップデートを行うと商品の追加情報の値がリセットされるバグを修正
[!] 商品の追加情報 : 複数商品の一括アップデート時に多数のオプションを持つ商品が含まれていると “memory limit” エラーが発生する場合があるバグを修正
[!] 商品の追加情報の数が定数 “PRODUCT_FEATURE_VARIANTS_THRESHOLD” よりも大きい場合に追加情報を指定するセレクトボックスに「なし」および「追加登録」が表示されないバグを修正
[!] 商品ピッカー内で検索を行い、検索結果が0件の場合にピッカーがクラッシュするバグを修正
[!] 商品フィルタが正しくソートされない場合があるバグを修正
[!] 商品画像にFlashアニメーションをアップロードすると1ファイルずつではなくすべて1度にすべて表示されるバグを修正
[!] 商品詳細ページにおいてスクローラーを使用したブロックを使用すると商品画像のギャラリー表示が動作しないバグを修正
[!] 上から順に指定するタイプのオプションを最後まで指定せずに注文しようとすると在庫切れメッセージが表示される場合があるバグを修正
[!] 正しいライセンス番号を登録してもいったんログアウトしないとライセンスに関する警告メッセージが表示され続けるバグを修正
[!] 注文ステータス : 注文ステータス名が長い場合に表示がくずれるバグを修正
[!] 注文管理 : ダウンロード商品に関する情報が正しく表示されない場合があるバグを修正
[!] 注文管理 : 注文を編集するとログ上では注文の新規作成として記録されるバグを修正
[!] 注文管理 : 注文管理ページで日時フォーマットが無視されるバグを修正
[!] 注文手続き時にプロフィールの切替が正しく動作しない場合があるバグを修正
[!] 注文商品をインポートすると不要な注文データが生成されるバグを修正
[!] 注文詳細ページで注文ステータスを「処理中」などにして商品をダウンロード可能にしても注文情報を保存するとダウンロード不可に戻るバグを修正
[!] 入荷通知 : 複数のメールアドレスに対して入荷通知を行う場合にすべて To: に表示されるバグを修正
[!] 入荷通知 : 入荷通知用Eメールのバリデーションが実施されていなかったバグを修正
[!] 配送設定で「配送を行わない」を有効化した場合に注文編集の第4ステップでPHPの警告メッセージが表示されるバグを修正
[!] 販売レポート : 削除済み商品についてデータが正しく表示されない場合があるバグを修正
[!] 販売レポートのタイトルに大文字を多用するとレイアウトが崩れるバグを修正
[!] 翻訳モード : ポップアップ表示が正しく動作しないバグを修正
[!] 翻訳モード : 翻訳モードが有効な状態でメールの送信や注文確認書の出力を行うと不要なタグが出力されるバグを修正
[!] 利用中のPHPで設定されたサイズ以上のファイルをアップロードしようとするとロード中メッセージがフリーズする場合があるバグを修正