jekylog

All doggs wanna be a Geek

最近の案件でハマったことやこれからのこと

ハマったこと

Windowとか大枠に対するイベント付けはひとまとまりにする

機能をプラグイン化してカスタムイベントで連携する基本的なところは変わらないけどWindowに対するイベント付け(例えばresizeとかscroll)とかをプラグイン毎に設定、紐付けると管理がややこしくなってくる。例えばパララックス用のリサイズ処理とその他モジュール毎のリサイズ処理がそれぞれのプラグインで紐付けられてると一括で管理するのが難しくなってくる。だったらイベントハンドラだけプラグイン毎に作っておいてWindowに関するイベントの設定は1つの場所で一括で管理、制御した方がよいのかなーと思った。

サイズの大きい画像がある(表示されていると)とスクロールが重くなる

リソース削減の時代とは言えどうしても大きく綺麗な画像を使用するケースは受託案件では多々あると思う。まあこれは別にいいとしてサイズが大きい画像が複数ページ内に存在しているとスクロール(多分他のアニメーションも)が重くなってきた。詳しくは検証できてないけどスクロール時に下記のように画像を非表示にすると軽くなった。

  • displayをnoneにする
  • visibilityをhiddenにする
  • ちなみにopacityを0にしててもダメ

Google plusとTwitterのシェアボタンを隣同士にするとIEでGoogle plusが表示されなくなる場合がある

これ意味不明。隣接してるとIE(バージョンは忘れた)でリロードしまくってると上記のようになる。相性の問題だろうか。ちなみにオフィシャルで吐き出されるソースではなくて下記のようにJSはjQueryの$.getScriptを使って読み込んでた。

(function(){

    // facebook
    // html: <div class="fb-like" data-send="false" data-width="120" data-layout="button_count" data-show-faces="false">
    $.getScript('//connect.facebook.net/ja_JP/all.js', function(){
        FB.init({ cookie : true, xfbml : true });
        FB.Event.subscribe('edge.create', function(targetUrl){
            window.s.fl && s.tl(true,'o','Facebook-Like!');
        });
    });

    // twitter
    // html: <a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja"></a>
    $.getScript('//platform.twitter.com/widgets.js', function(){
        window.twttr && window.twttr.ready(function(twttr){
            window.twttr.events.bind('click', function(){
                window.s.fl && s.tl(true,'o','Twitter-Tweet!');
            });
        });
    });

    // google plus
    // html: <div class="g-plusone" data-size="medium" data-callback="googleSiteCatalyst">
    window.googleSiteCatalyst = function(){
        window.s.fl && s.tl(true,'o','Google-Plus');
    };
    $.getScript('//apis.google.com/js/plusone.js');

}());

また、各ボタンの押下時にログを取りたい時(上記の場合はサイトカタリスト)は$.getScriptのコールバックに各シェアボタンのイベントを記述してサイトカタリストのカスタムリンクを設定でいけるっぽい(多分叩けてるけど管理画面を見てないので要検証)。Google plusだけはHTMLのdata属性にコールバック名を指定し、指定した関数をグローバルで作成するとそれが叩かれる。

シェアボタンを吐き出す親要素が非表示だとうまく吐き出されない場合がある

これもブラウザでどのシェアボタンかは忘れたけどdisplay:none;してると書き出されない時があった。ちゃんとメモっとけばよかった。

5. サイトカタリストのs_code.jsを読み込んだ状態でサイトカタリストに登録しているURL以外のURLでテストしているとjQueryのアニメーションがおかしくなる。

これ最初意味不明だった。本番環境では動作してるけどローカルだとうまく動作しなかった。これはhost弄って(Charlesかhoster辺りで良いかと)本番用のURLにしとけば大丈夫だった。

CSS3の@keyframesにクオートをつけるとFirefox(17.0.1)で動かない

てっきりサポートしてないかと焦ったけど参考URLのようにクオートなしだといけた。

学びたいことややりたいこと

MVC(的な設計方法)

受託かつ中〜大規模でないとなかなか実務で出来ないのを逃げ道にしてたけどむしろ小規模だからこそ試せたりするんじゃないかと思ってちょこちょこチャレンジはしてるものの中々出来ず。今年はいい加減この辺りやっとかないと。

ビルドツールでもっと便利に

今もGrunt使ってるけど画像圧縮とかスプライト関連のタスクを最近知ってこの辺りも追わなきゃダメだなーと。

Vimで効率アップ

最速とは程遠いのでもっと慣れたい。MBPになってちょっと甘えはなくなったかも。

Gitでバージョン管理

ちょこちょこ案件でもGit使ってコミットするケースが増えてきたので引き続き。Githubももっと使っていかないと。

勉強会とかイベントに行く

MBPになったからもう大丈夫。

SASSをもっと深く

もっと作業を楽にしたいのでこの辺りは模索中。Advent calendarとか見てると勉強になるけど凹む。

ブログを新しくする

なんか見づらいしソースも汚いから直したい。

転職

さらっと。

Fork me on GitHub