データベースが使えないお客様で更新のシステムを入れてほしいと言う要望がありましたのでgpEasyを試してみました。といってもまだ自分のサーバーにインストールしただけですがちょっとつまずきましたので忘備録です。
CORE SERVERはPHPが例のセーフモードの関係でうまくできないみたいなので
.htaccessを
|
1 2 |
AddHandler application/x-httpd-phpcgi .php mod_gzip_on Off |
に書き換えたらインストールできました。
久しぶりにEC-CUBEさわりました。年単位でさわっていなかったので色々と変わってましたが、ガッツリカスタマイズとかしないのなら前よりさわりやすくなった印象です。
とりあえずやったこと
都度書いていかないとわすれますが、とりあえずEC-CUBEを導入してからやったこと
とりあえずこんなもんだったと思う。
また出て来たら追加追加で・・・
この手のCMSで僕が一番気に入らないのがURLです。
SEO的に有利不利は無いといわれていますが、そんな問題じゃなく単純に美しくないのがいやです。
※完全に主観です。
なのでuser_dataと言うディレクトリ名もいやだし画像のパスがデフォルトだとくそ程長いのもいやです。
※完全に主観です。
EC-CUBEを使っといてなんなんですが、EC-CUBE感が出ると負けのような気がするのもいやです。
※完全に主観+ソースをみれば一撃でわかります。
そんな理由なもんで結構時間をさいたわりに、作業もはかどらず、目新しい機能が実装されたわけでもなく、無駄に工数を消費しています。反省です！
今回はEC-CUBEのデフォルトのスタイルシートを一切つかってないので表で見えないところとかもスタイルの調整で結構時間がかかっています。
そしてモバイル・スマフォの機能をオフにしたので、メディアクエリで作ってます。
メディアクエリでコーディングするときはsassが大活躍します。
でもsassを早く会社で普及させないとヘルプが頼めないのがたまにキズです。
メディアクエリでやっていてお問い合わせフォームのテーブルでちょっと悩みました。
1カラムになった時テーブルのセルどうしようかと・・・。
でも単純にdisplay要素をblockにすればでOKでした。地味にこの辺てあんまりやらないから自分のなかのリソース不足です。
で、ひとつ頭を悩ませた問題が発生しました。一覧ページの高さを揃えるのにheightline.jsをつかっているのですが、
IE7で初回読み込み時に要素が重なってしまって色々とググってましたら「ぶらうん」さんの「heightLine.jsのIE7・IE8で中の要素が消えたときの解決方法。」というツイートを発見しheightlineのクラスをふった要素にzoom:1;をいれれば解決できました！
しかし2商品しか無いのにEC-CUBEで構築する必要があったのかどうか・・・
デザインの参考サイトを探している時にこういう感じのデザインを何度となくみかけました。いつか実装したいなぁ〜と思っていましたが、jQuery Masonryで実現できるらしいのでやってみました。
こちらでjQuery Masonryをダウンロードできます。
設置の方法も掲載されています。
|
1 2 |
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript" src="jquery.masonry.min.js"></script> |
上記をヘッダーに記述しjQueryとjQuery Masonryを読み込ませ
|
1 2 3 4 5 6 |
$(function(){ $('#要素を囲うID').masonry({ // options itemSelector : '.要素のClass', }); }); |
要素のIDと要素のClassを設定し別ファイルにして読み込ませても直書きでもOK僕はjquery.masonry.min.jsに書き込んじゃいました。
|
1 2 3 4 5 |
<div id="要素を囲うID"> <article class="要素のClass">...</article> <article class="要素のClass">...</article> <article class="要素のClass">...</article> </div> |
今回の件とは関係ないですがまさにarticleの使いどころじゃないか！と叫ぶ最近初めてHTML5でコーディングした僕がいました。
別にarticleでないとダメなわけじゃないですよ。
ちなみにCSSは
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
#要素を囲うID{ width:640px; float:left; margin-bottom:40px; } .要素のClass article{ width:278px; float:left; padding:10px; margin:10px; background:#fff; border:1px solid #ddd; } |
と言った感じ
メディアクエリはIE８以前は未対応なのでメディアクエリを8以前のIEに適応させるには<head>内に
css3-mediaqueries.jsを読み込ませる為の記述
|
1 2 3 |
<!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]--> |
をしておけばOK〜なはずなのですが今日確認すると、どうもjsが効いてないっぽかった。このサイトでは別にそれでもいいんだけど今後クライアントに納品するサイトの事を考えると解決しておかなければならない問題だと思い色々調べてましたら、
@importでCSSを読み込むとダメみたいです。他にも
@media (min-width: 321px) {
この記述はダメで
@media screen and (min-width: 321px) {
screen andをちゃんと記述しないとダメらしいです。
他にも条件があるらしいのですが僕の環境では上記２箇所を修正すればOKでした。時間がある時にこのblogにも反映させておこう。
