通販サイトの作成ログ

通販サイトでいじったメモログみたいなものだとお考えください。
質問もどうぞ。わかる範囲内でしたらお答えします。

仕事

自動カナ入力

自動カナ入力
個人情報入力欄だと外部リンクが使えないことが多いので
jquery-1.10.1.min.jsjquery.autoKana.jsは内部リンクにしてください(これに気づくのに1日半かかった…)
katakanaはtrue:でカタカナ、false:でひらがな(デフォルト)
参照:https://github.com/harisenbon/autokana

----------------html部分-----------------------
名前<input id="user_name1" type="text"/>
カナ<input id="user_name_kana1" type="text"/>
-----------------------------------------------

----------------script&CSS部分-------------------
<script src="jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="jquery.autoKana.js"></script>
<script type="text/javascript">
  $(document).ready(
    function() {               
      $.fn.autoKana('#user_name1', '#user_name_kana1', {katakana : true});
    });
</script>
----------------------------------------------

スライドサイドバー

スライドサイドバー(フッターの上で止まるやつ)
スライドさせたはいいがフッターと被ったので。
参照:http://select-aster.com/web/auto-tracking-sidebar/

----------------html部分-----------------------
<div  id="aside2">
スライドさせたい要素
</div>
-----------------------------------------------

----------------script&CSS部分-------------------
<script src="jquery.min.js"></script>
<script type="text/javascript">
<!--
$(function(){
    var target = $('#aside2');
    var footer = $('#footer')
    var targetHeight = target.outerHeight(true);
    var targetTop = target.offset().top;
    $(window).scroll(function(){
        var scrollTop = $(this).scrollTop();
        if(scrollTop > targetTop){
            var footerTop = footer.offset().top;            
            if(scrollTop + targetHeight > footerTop){
                customTopPosition = footerTop - (scrollTop + targetHeight)
                target.css({position: "fixed", top:  customTopPosition + "px"});
            }else{
                target.css({position: "fixed", top: "10px"});
            }
        }else{
            target.css({position: "static", top: "auto"});
        }
    });
});
-->
</script>
<style>
div#aside2.fixed {
    position:fixed;
    left:0px;
    top:10px;
    z-index: 1;
}
</style>
----------------------------------------------

gotopボタン

改良点ありありですが途中まで。
ちょいジャンプして引っ込むやつ
某幼稚園参照

----------------html部分-----------------------
<p id="gotop2" style="z-index: 1;bottom: -120px;">
<a href="#header" title="" class="btnTop" ><img src="go_to.png" alt=""/ ></a>
</p>
-----------------------------------------------

----------------script&CSS部分-------------------
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script>
$(function() {
    var showFlug = false;
    $('#gotop2').css('bottom', '-120px');
    var showFlug = false;
    //スクロールが400に達したらボタン表示
    $(window).scroll(function () {
        if ($(this).scrollTop() > 400) {
            if (showFlug == false) {
                showFlug = true;
                $('#gotop2').stop().animate({'bottom' : '0px'}, 300);
            }
        } else {
            if (showFlug) {
                showFlug = false;
                $('#gotop2').stop().animate({'bottom' : '-200px'}, 200);
            }
        }
    });
    $('.btnTop').click(function () {
        $('#gotop2').animate({'bottom': '30px'}, 400, 'easeOutBack');
        $('#gotop2').animate({'bottom': '-200px'}, 200, 'easeOutBack');
        $('body,html').delay(200).animate({
            scrollTop: 0
        }, 10, 'easeInOutCirc');
        return false;
    });
});
</script>
<style>
#gotop2 {
    position:fixed;
    bottom: 0px;
    right: 0px;
  z-index:1;
}
</style>
----------------------------------------------

lazyloadの設定

lazyload(遅延読込)の設定
画面表示されたら画像を読み込むようにしてサイトの読み込み時間を減らすというもの

http://blog.chiyopen.com/lazyload/
を参考に。

PC用

https://github.com/tuupola/jquery_lazyload
からjquery.lazyload.jsをとってきて任意のサーバーの場所に置く。

ヘッダーに

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

がある状態で
フッター以下に

<script type="text/javascript" src="jquery.lazyload.js"></script>
<script type="text/javascript">
<!--
$( "img.lazy" ).lazyload(
{
    threshold: 200,            // 200pxの距離まで近づいたら表示する
    effect: "fadeIn",        // じわじわっと表示させる
    effect_speed: 1000 ,
});
-->
</script>

を追加しHTMLの画像を

<img src="dummy.png" data-original="img.jpg" class="lazy" alt="" width="px" height="px" />

に変更で遅延読み込みできるようになった。dummy.pngは灰色の画像でも透明の画像でも置き換えてください。
じんわりimg.jpgが表示されます。
場所のパスはちゃんと合わせてくださいね。(js/jquery.lazyload.jsなど)

スマホ用
色々試して現在なっている状態だと
http://jquery.eisbehr.de/lazy/
よりjquery.lazy.min.jsをとってきて任意のサーバーの場所に置く。
ヘッダーに
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.lazy.min.js"></script>
<script type="text/javascript">
<!--
$(function() {
    $('.lazy').lazy({
        effect: 'fadeIn',
        threshold: 100,
        effectTime: 1000,
    });
});
-->
</script>
<style>
img.lazy {
   width: 100%;
   height: auto;
   display: block;
}
</style>

を追加してHTMLの画像を

<img class="lazy" width="100%" height="auto" data-src="img.jpg" alt=""/>

でスマホも動いた。
ただ初期表示に一瞬altが出てきたのでloadingも追加した
参考:http://sterfield.co.jp/designer/jquery%E3%81%A7%E7%B0%A1%E5%8D%98%E3%81%AAloading%E7%94%BB%E9%9D%A2%E3%82%92%E4%BD%9C%E3%82%8B-3/

<script type="text/javascript">に

$(window).load(function(){
    $(".loadingWrap").fadeOut();
});

を追加してCSS(<style></style>)に

html, body{
    width: 100%;
    height: 100%;
}
.loadingWrap{
    width: 100%;
    height: 100%;
}
.loadingWrap img{
}

を追加。
bodyの最初に

<div class='loadingWrap'></div>

を追加してOK。
<div class='loadingWrap'><img src="img.gif"/></div>
とするとloading画像も設定できる。

こんなとこです。

サイトの高速化

サイトページの高速化について
長所
・読込待ちが減り、客足離れが減る
・サーバーへの負担が減る
・高速化ページがSEOの評価にも効果があるとのこと
なのである程度実装。

まず
https://developers.google.com/speed/pagespeed/insights/
で変更点確認

・スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する
→javaは<script defer type="text/javascript" src="/js/default.js">のようにする
※jquery.jsはつけないほうがいい
CSSはファーストビュー用のCSSとその他CSSを作ってその他CSSをフッター以下に設置

・ブラウザのキャッシュを活用する
→.htaccessファイルに次を追加
<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 7 days"
ExpiresByType text/html "access plus 10 seconds"
ExpiresByType image/jpg "access plus 7 days"
ExpiresByType image/jpeg "access plus 7 days"
ExpiresByType image/gif "access plus 7 days"
ExpiresByType image/png "access plus 7 days"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 month"
</ifModule>

・画像を最適化する
→画像圧縮で置き換え
https://tinypng.com/

http://www.jpegmini.com/main/shrink_photo
で圧縮

・JavaScriptを縮小する
・HTML を縮小する
・CSS を縮小する
http://refresh-sf.com/で圧縮

・圧縮を有効にする
→.htaccessファイルに次を追加
<IfModule mod_deflate.c>
  SetOutputFilter DEFLATE
 
  # Mozilla4系、IE7、8の古いブラウザでは無効にする
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch \bMSIE\s(7|8) !no-gzip !gzip-only-text/html
 
  # GIF、JPEG、PNG、ICOなど圧縮済みの画像は再圧縮しない
  SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
  # プロクシサーバが間違ったコンテンツを配布しないようにする
  Header append Vary Accept-Encoding env=!dont-vary
 
  # 各コンテンツを圧縮する設定を記述
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/xml
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/js
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/atom_xml
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/x-httpd-php
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-font-woff
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
</IfModule>

ぐらいだったと思う。
あとは下記サイトを参考

表示速度改善!SEOに効果的な必ずやるべきサイト高速化手法40選
http://artroot.jp/article/201403221

今すぐやりたい!サイトの表示速度を改善して利益を増やす10の方法
http://jb-labo.com/speed-up-your-website/

それと
https://gtmetrix.com/
でも評価を行って色々出てたのでとりあえず
.htaccessファイルに次を追加した
<IfModule mod_headers.c>
Header set Connection keep-alive
</IfModule>
参考:http://thk.kanzae.net/net/itc/t1544/

最新コメント
記事検索