ウェブ
TUESDAY 2016 / 6 / 28
職業はバックエンドエンジニア
Text by Hiroyuki Matsumoto
今回は私(松本)のお仕事について紹介してみたいと思います。
ウェブに関することは大抵やりますが、基本的には「バックエンドエンジニア」と呼ばれる職業(のつもり)です。どんな仕事かというと、なかなか説明が難しいのですが、
- ・ブログを表示する
・ブログを更新する
・いいねボタンを動かす
といった利用者からすれば「動いて当然でしょ?」って部分のことをやっています。まぁ名前のとおり、裏方仕事、縁の下の力持ち、といったお仕事ですね。
わかりやすくするために、今日 僕がやったお仕事をみてみましょう!
1つのページ内にたくさん画像がある場合、全部の画像を読み込むと遅くなるし、たくさんの通信量が発生するしでよろしくありません。
というわけで、
「じゃあ画面をスクロールして、その都度必要になった画像だけ読みこめばいいんじゃね?」
という発想が出てきます。
それを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'));
?>
と、こんな命令を書いてやることで、画像を都度読み込みをするようになります!
普通にブログ投稿内に挿入された画像 および wp_get_attachment_image関数で挿入した画像だけが対象です
ということで、今日は僕の仕事について書いてみましたがいかがでしたか?
え?
さっぱりわからない?
・・・・・・・・・・・・まぁハリー・ポッターの魔法とか呪文みたいなもんです。
ちなみに僕みたいにコンピュータとのコミュニケーションができる人は、たいてい人間とのコミュニケーションが苦手だったりしますので、わからない方が健全だと思います。
わかりたかったら、僕みたいにヒキコモリ気味で人と会話をあんまりしないようにするのが第一歩じゃないかと思いますので、みなさんも精進してくださいね!
TEXT by
松本 博之(まつもとひろゆき)
1978年、鳥取県米子市生まれ。
株式会社マジックワード WEBシステムの開発・運用を担当。
WordPressの実績多数。表面的な使用方法を把握するだけでなく、WordPressのソースコードを読み解いて対応できます。
国家資格の応用情報処理技術者をなんとなくとりました。
















