(佐賀→熊本)マークアップエンジニアのググる生活

地方のWEB制作会社で働く、フロントエンドエンジニア。
HTML、CSS、JavaScript(jQuery)、PHP、Smary、EC-CUBE、WordPress、Movable Type等々で解らない時に、Googleで検索したら解決した話や、「閃いた!」などをほとんど自分用にメモとして残すブログです。

※URLがあったら元記事を参照推奨です!
※ほとんどの事は検証はしていますが、あくまでも参考程度にお願い致します!
※記載が不正確であったことにより生じたいかなる損害に関しても、当ブログは責任を負いかねます。自己責任でよろしくおねがいいたします。

でぶててのWEB録さんの記事で公開されているスプレッドシートの入力を
一括・自動で処理したく、ブックマークレットを作りました。

Google Analytics オーガニック検索ソース 自動登録ブックマークレット

原因はスマートオブジェクト。

デザイナーのPCだとサクサクらしいのですが、
私のPCだと拡大縮小に10秒くらい固まったりします。

重そうなところ(スマートオブジェクト)を、
とりあえず非表示にしてみる。

これで難なく作業が出来ると思います。

フォルダ分けがきちんとされていると嬉しい限り。

IEで画像が表示されない…

他のブラウザでは正常通り。

そんなときは img要素のwidthとheightの値が空になってないかチェック!


また、position: absolute; を指定している場合は
その要素に対してもwidthとheightの値が空になっていないかチェック!

jQueryの
bxsliderプラグインの
slideMarginオプションを設定した場合には、

bx-viewportのcssのwidthを設定しないと
クローンを生成した時にカラム落ちが発生し、
ループしなくなる。


- プラグイン情報
bxslider v4.1.2(執筆時)

EC-CUBEのプラグインダウンロードランキングのページがあったのでメモ。
http://www.ec-cube.net/product/plugin_ranking.php

毎月更新しているみたいで、
人気のプラグイン探しに役立ちそうですね。

初めてタイトル通りなバグに遭遇して、ググッても出てこなかった。

このバグの条件として
・position指定の親(<nav/>)relative 子(<ul/>)fixedのヘッダー固定式
・子fixedの中にドロップダウンメニュー
・同ページにvideo要素かgoogleマップがある
・1ページ程スクロールさせる

上記のようなページをchromeで閲覧すると、
ドロップダウンメニューの中身が消えたり、hover cssが無効になったりの
現象が起こった。

解決策として
親(<nav/>)relativeも fixedにしてみると直った。

毎回悩むんです。
本当に、何年やってんだ!!って自分で思いながら。

また次の案件で悲しみに包まれないように、
今からでも殴り書きでいいので書いていこうと思います。
(気が向いたら更新するつもり)

昔はキャメルケースだの、アンダーバーだの色々試してましたが、
先月あたりから単語と単語はハイフンで繋ぐ形式に移行しました!
ので、以下の記述はハイフンさん大登場です。
理由はCSSのプロパティ名とか値とかもハイフンですし、data属性とかもハイフン、最近のjavascriptフレームワークも独自属性にハイフン使っているので、統一してみました。
統一感があるとすごいね、とても見やすくなりました!我ながら単純である。

ではでは、あまり期待をせずに参りましょう ┌(・。・)┘ ドドドドドド
※あくまでも一例です。
※改善したいけどとりあえずってのが結構あります。助けてくれ!


■site-(そのサイトの揺るぎないclass、またはid)

site-wrapper

site-header
site-logo
site-nav-global
site-nav-language

site-contents
site-main

site-footer
site-nav-footer


■ico-(アイコン、連番が良いのか名前つけた方が良いのか教えてほしい)

ico-arrow-red-top(この辺汚いので何とかしたいぞ!)
ico-arrow-red-right
ico-arrow-red-bottom
ico-arrow-red-left


■btn-(ボタン)

-背景画像
btn-nav-add
btn-nav-remove
btn-nav-success
btn-nav-failure

-テキスト
btn-txt-red(色の名前ってダメかな???)
btn-txt-white
btn-txt-black


■group-(グループ)
group-about
group-product
group-cart
group-contact
group-form
group-form


■grid-(グリッド)
CSSフレームワークで良くあるやつ!
最近は Pure がお気に入りです。
grid-u-1
grid-u-2
grid-u-3
grid-u-4
grid-u-5


■ttl-(タイトル)
他のノードの入れ子になっていたら文字が、
小さくなるなどの処理を入れると扱いやすさアップすると思います!
ttl-cool
ttl-primary
ttl-h1
ttl-h2


■txt-(テキスト)
txt-note
txt-decoration
txt-attention


■form-(フォーム)
input-text-normal(inputの時はtxtにせずに、textにした方が良いのか悩み中...)
input-text-mail
input-text-password
input-text-tel

input-check-normal
input-check-cool

input-radio-normal
input-radio-cool




書いた日:2014年10月20日(月)18時55分
記事と関係の無いただのメモ:hero > section > group > team > unit

タイトル通りを EC-CUBEバージョン 2.13.2 にて実装。

取り急ぎ先人様のやり方を調べてみたところ、
いろいろ触らないといけないファイルが多かった&上手くいかなかったので、
jQueryを使って実装してみました。


□まずは普通に list.tpl と detail.tpl に税別を表示させます。

list.tpl 変更前
<!--★価格★-->
<div class="pricebox sale_price">
    <!--{$smarty.const.SALE_PRICE_TITLE}-->(税込):
    <span class="price">
        <span id="price02_default_<!--{$id}-->"><!--{strip}-->
            <!--{if $arrProduct.price02_min_inctax == $arrProduct.price02_max_inctax}-->
                <!--{$arrProduct.price02_min_inctax|number_format}-->
            <!--{else}-->
                <!--{$arrProduct.price02_min_inctax|number_format}-->~<!--{$arrProduct.price02_max_inctax|number_format}-->
            <!--{/if}-->
        </span><span id="price02_dynamic_<!--{$id}-->"></span><!--{/strip}-->
        円</span>
</div>
list.tpl 変更後
<!--★価格★-->
<div class="pricebox sale_price sale_price_inctax">
    <!--{$smarty.const.SALE_PRICE_TITLE}-->(税込):
    <span class="price">
        <span id="price02_default_<!--{$id}-->"><!--{strip}-->
            <!--{if $arrProduct.price02_min_inctax == $arrProduct.price02_max_inctax}-->
                <!--{$arrProduct.price02_min_inctax|number_format}-->
            <!--{else}-->
                <!--{$arrProduct.price02_min_inctax|number_format}-->~<!--{$arrProduct.price02_max_inctax|number_format}-->
            <!--{/if}-->
        </span><span id="price02_dynamic_<!--{$id}-->"></span><!--{/strip}-->
        円</span>
</div>
<div class="pricebox sale_price sale_price_noinctax">
    <!--{$smarty.const.SALE_PRICE_TITLE}-->(税抜):
    <span class="price">
        <span id="price02no_default_<!--{$id}-->"><!--{strip}-->
            <!--{if $arrProduct.price02_min == $arrProduct.price02_max}-->
                <!--{$arrProduct.price02_min|number_format}-->
            <!--{else}-->
                <!--{$arrProduct.price02_min|number_format}-->~<!--{$arrProduct.price02_max|number_format}-->
            <!--{/if}-->
        </span><span id="price02no_dynamic_<!--{$id}-->"></span><!--{/strip}-->
        円</span>
</div>
detail.tpl 変更前
<!--★販売価格★-->
<dl class="sale_price">
    <dt><!--{$smarty.const.SALE_PRICE_TITLE}-->(税込):</dt>
    <dd class="price">
        <span id="price02_default"><!--{strip}-->
            <!--{if $arrProduct.price02_min_inctax == $arrProduct.price02_max_inctax}-->
                <!--{$arrProduct.price02_min_inctax|number_format}-->
            <!--{else}-->
                <!--{$arrProduct.price02_min_inctax|number_format}-->~<!--{$arrProduct.price02_max_inctax|number_format}-->
            <!--{/if}-->
        <!--{/strip}--></span><span id="price02_dynamic"></span>
        円
    </dd>
</dl>
detail.tpl 変更後
<!--★販売価格★-->
<dl class="sale_price sale_price_inctax">
    <dt><!--{$smarty.const.SALE_PRICE_TITLE}-->(税込):</dt>
    <dd class="price">
        <span id="price02_default"><!--{strip}-->
            <!--{if $arrProduct.price02_min_inctax == $arrProduct.price02_max_inctax}-->
                <!--{$arrProduct.price02_min_inctax|number_format}-->
            <!--{else}-->
                <!--{$arrProduct.price02_min_inctax|number_format}-->~<!--{$arrProduct.price02_max_inctax|number_format}-->
            <!--{/if}-->
        <!--{/strip}--></span><span id="price02_dynamic"></span>
        円
    </dd>
</dl>
<dl class="sale_price sale_price_noinctax">
    <dt><!--{$smarty.const.SALE_PRICE_TITLE}-->(税抜):</dt>
    <dd class="price">
        <span id="price02no_default"><!--{strip}-->
            <!--{if $arrProduct.price02_min == $arrProduct.price02_max}-->
                <!--{$arrProduct.price02_min|number_format}-->
            <!--{else}-->
                <!--{$arrProduct.price02_min|number_format}-->~<!--{$arrProduct.price02_max|number_format}-->
            <!--{/if}-->
        <!--{/strip}--></span><span id="price02no_dynamic"></span>
        円
    </dd>
</dl>


□そして税抜き計算jQuery
jQuery(function($) {
$('div#undercolumn form[name^="product_form"], body.LC_Page_Products_Detail #form1').change(function() {
    var inctax = $(this).find('span[id^="price02_dynamic"]');
    var noinctax_f = $(this).find('span[id^="price02no_default"]');
    var noinctax_y = $(this).find('span[id^="price02no_dynamic"]');

    if ( inctax.is(":visible") ) {
        //console.log('計算したよー');
        var inctax_text = inctax.text();
        var inctax_value = inctax_text.replace(',','');
        var noinctax_value = Math.floor(inctax_value / 1.08);
        var noinctax_value = String( noinctax_value ).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,'); // http://so-zou.jp/web-app/tech/programming/javascript/grammar/data-type/string/comma-formatting.htm
        noinctax_f.hide();
        noinctax_y.show().text(noinctax_value);
    } else {
        //console.log('計算やめたー');
        noinctax_f.show();
        noinctax_y.hide();
    }
});
});
Math.floor(inctax_value / 1.08);
らへんが税率計算!消費税10%になったら1.10に。
とりあえず切り捨て(Math.floor)にしてるので変更したいのであればお好きにどうぞ!

3桁ずつ小数点は so-zou.jp 様より!

稚拙ではありますが、ieTesterでも動いたので大丈夫なはずです。

終わり!

結論から言うと再インストールすると直りました。


(・。・) < iPac Chomeはキャッシュが強い? >

先日、javascriptやcssを変更したけど反映されないということが。

キャッシュかな?と思ってブラウザのキャッシュを消し消し。

いざ更新! あれ変わらん・・・。

なぜ!

記述を間違えたかな?ってことでもう一回変更して更新してみたけどダメ。

で、javascriptやcssにタイムスタンプを加えてみたところ、ここでやっと変更部分が反映されました。

この件はまあそれほど気づくのに時間はかからなかった…。


(・。・) < iPac Chomeで取得したユーザーエージェントがおかしい >

普通に
<script>document.write(window.navigator.userAgent);</script>
で、取得しようとする。

一応取得はされるが、何か値がおかしい。

CriOSの記述が無いし、それにいつもの半分ぐらいの値しか取得出来ていませんでした。

メモしていなかったのでその時の値はもう無いのですが…。

とりあえず、これもchromeの再インストールで直りました!

未だにもやもや感がありますが、取り急ぎ解決したのでメモメモ。

最近 float での横並びをあまり使用せずに、
inline-block を使って横並びを実装するのが私の中で話題に!

float では高さの違う横並びをする時は、親要素で囲ってあげないと行が増えた場合に上下が揃わなくなったりするので、今まで面倒でしたが、inline-block を使用することで快適に。

ただその際に要素と要素の間に空白が出来てしまいます。
html を工夫して消すことも出来ますが、可読性が著しく低下するので、
css をもっと工夫して消しましょう!

親要素 {
display: table;
letter-spacing: -1em;
width: 100%;
}
子要素 {
display: inline-block;
letter-spacing: 0;
vertical-align: top;
}


こんな感じで。

だがしかし! 親要素に display: table; が使えない時には

親要素 {
letter-spacing: -0.285529em;
}
子要素 {
display: inline-block;
letter-spacing: 0;
vertical-align: top;
}

な感じでも対応できます!

-0.285529em; は割と細かく検証してみました。

このページのトップヘ