コーディング系 | CREATE RECORD|blog

カテゴリーアーカイブ: コーディング系

gpEasyをCORE SERVERにインストール

データベースが使えないお客様で更新のシステムを入れてほしいと言う要望がありましたのでgpEasyを試してみました。といってもまだ自分のサーバーにインストールしただけですがちょっとつまずきましたので忘備録です。

CORE SERVERはPHPが例のセーフモードの関係でうまくできないみたいなので
.htaccessを

に書き換えたらインストールできました。

EC-CUBE導入してみた。

久しぶりにEC-CUBEさわりました。年単位でさわっていなかったので色々と変わってましたが、ガッツリカスタマイズとかしないのなら前よりさわりやすくなった印象です。

とりあえずやったこと

都度書いていかないとわすれますが、とりあえずEC-CUBEを導入してからやったこと

  1. 静的URLに変更
  2. user_dataディレクトリを.htaccessでcontentsに変更
  3. 画像ディレクトリの変更
  4. 画像のリネーム禁止
  5. モバイル・スマフォ機能のオフ

とりあえずこんなもんだったと思う。
また出て来たら追加追加で・・・

この手の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でMasonryレイアウト

デザインの参考サイトを探している時にこういう感じのデザインを何度となくみかけました。いつか実装したいなぁ〜と思っていましたが、jQuery Masonryで実現できるらしいのでやってみました。

こちらでjQuery Masonryをダウンロードできます。

設置の方法も掲載されています。

上記をヘッダーに記述しjQueryとjQuery Masonryを読み込ませ

要素のIDと要素のClassを設定し別ファイルにして読み込ませても直書きでもOK僕はjquery.masonry.min.jsに書き込んじゃいました。

今回の件とは関係ないですがまさにarticleの使いどころじゃないか!と叫ぶ最近初めてHTML5でコーディングした僕がいました。
別にarticleでないとダメなわけじゃないですよ。

ちなみにCSSは

と言った感じ

実装したページ

IE8以前でcss3-mediaqueries.jsが効かない

メディアクエリはIE8以前は未対応なのでメディアクエリを8以前のIEに適応させるには<head>内に
css3-mediaqueries.jsを読み込ませる為の記述

をしておけばOK〜なはずなのですが今日確認すると、どうもjsが効いてないっぽかった。このサイトでは別にそれでもいいんだけど今後クライアントに納品するサイトの事を考えると解決しておかなければならない問題だと思い色々調べてましたら、

@importでCSSを読み込むとダメみたいです。他にも

@media  (min-width: 321px) {
この記述はダメで

@media screen and (min-width: 321px) {
screen andをちゃんと記述しないとダメらしいです。

他にも条件があるらしいのですが僕の環境では上記2箇所を修正すればOKでした。時間がある時にこのblogにも反映させておこう。