職業はバックエンドエンジニア

Text by Hiroyuki Matsumoto

今回は私（松本）のお仕事について紹介してみたいと思います。

ウェブに関することは大抵やりますが、基本的には「バックエンドエンジニア」と呼ばれる職業（のつもり）です。どんな仕事かというと、なかなか説明が難しいのですが、

・ブログを表示する
・ブログを更新する
・いいねボタンを動かす

といった利用者からすれば「動いて当然でしょ？」って部分のことをやっています。まぁ名前のとおり、裏方仕事、縁の下の力持ち、といったお仕事ですね。

わかりやすくするために、今日僕がやったお仕事をみてみましょう！

１つのページ内にたくさん画像がある場合、全部の画像を読み込むと遅くなるし、たくさんの通信量が発生するしでよろしくありません。

というわけで、

「じゃあ画面をスクロールして、その都度必要になった画像だけ読みこめばいいんじゃね？」

という発想が出てきます。

それをWordPress（ブログを作れるシステムだよ）で実現するために、今日は下記のような命令を書きました。

<?php
    function enable_lazyload( $options = array() ){
        $for_admin = false;   // ログインユーザー向け機能か否か
        if($for_admin!=is_admin()){ return false; }
 
        $unique = 'lazyload';
        $json = json_encode($options);
 
        wp_enqueue_script('jquery.'.$unique, '//cdnjs.cloudflare.com/ajax/libs/jquery_lazyload/1.9.7/jquery.lazyload.js', array(), null, true);
 
        add_filter('wp_get_attachment_image_attributes', function($attr, $attachment, $size) use ($unique){
            $imgobj = wp_get_attachment_image_src($attachment->ID, $size);
            $attr['data-original'] = $imgobj[0];
            $attr['width'] = $imgobj[1];
            $attr['height'] = $imgobj[2];
            $attr['class'] = (isset($attr['class']) ? $attr['class'].' ' : '') . $unique.'_images';
            unset( $attr['src'] );
            return $attr;
        }, 1, 3);
 
        add_action('wp_footer', function() use ($unique, $json){
?>
 
    /* Lazyload */
<script>
    (function ($) {
        $('.<?php echo $unique; ?>_images').lazyload(<?php echo $json; ?>);
    })(jQuery);
</script>
<?php
        }, 65535);
    }
 
    enable_lazyload(array('effect'=>'fadeIn'));
?>