Article Tags|カメラのちプログラミング♥ところによりカフェ

なにかの要素が追加されたのをトリガーにして処理をしたいときに、 jQuery の on を使えば便利です。
hulu の Chrome 拡張を作ったときに on を使って要素を監視したので、少しだけまとめます。

マウスオーバーでサムネイルをポップアップさせない

僕の場合、↑の記事でも紹介していますが、
hulu はサムネイルにマウスを乗せると、詳細がポップアップで表示されます。
これが大変なストレスになったので、いっその事なくしてしまおう、という機能ですね。笑

サムネイル、つまり動画リストの要素をまずは見つけます。
vod-mod-tray__content, 或いは vod-mod-series-area__tray っていう class 以下にいるようでした。（これは js で動的に追加されている）
article タグを div に変更してポップアップ要素を表示しているようでした。

<div class="vod-mod-tray__content">
...
...
    <div class="vod-mod-tray__item vod-utl-panel-opener">
        <a><img src=""></a>  <!-- ここにサムネイル画像 -->
        <article>....ここにポップアップ時に表示するHTML</article>
    </div>
</div>

前回はGoogle PageSpeed Insightsを使ってサイトの現状を把握すること、
そして静的コンテンツの圧縮方法を紹介しましたが、今回はその第二弾です。

１．圧縮を有効にする（html, css, jsなどの静的コンテンツ）
２．ブラウザのキャッシュを有効にする（静的コンテンツにキャッシュを導入する）（当記事）
３．CSSを縮小する
４．HTMLを縮小する
５．スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する（※一部）
６．読み込み中のときにloading indicatorを表示する（これはユーザー体験を高めるためのおまけ）

この記事ではブラウザのキャッシュを有効にするためのサーバー設定を紹介します。