Unveil.jsというlazy-loadの軽量版のソースを読んでみる。

前置き

てことで、情報も多く、画像遅延読み込みに有用なlazy-load
そして、今回紹介するのが、Unveil
Unveil⇒単語になじみがないですが、un-veil→ベールを取るってまんまの意味ですね。

設置方法

まずは、以下の2点のjavascriptを読み込む

  • JQuery.js
  • Unveil.js

で、イメージタグにアンベールを設定しておく。

$(document).ready(function() {
  $("img").unveil();
});

で、HTML内ののイメージタグは、
srcにダミー表示の画像(くるくる回る画像など)を、
data-srcに遅延表示したい(実際に表示したい)画像を設定。

<img src="bg.png" data-src="img1.jpg" />

ソースを読もう!

ソース内にコメント書いときます

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
;(function($) {
 
  $.fn.unveil = function(threshold, callback) {
 
    var $w = $(window),
        // 閾値の設定をチェック
        th = threshold || 0,
        // 画面のピクセル密度を判定して、高密度の場合はソースの切り替えが可能
        retina = window.devicePixelRatio > 1,
        attrib = retina? "data-src-retina" : "data-src",
        images = this,
        loaded;
 
    this.one("unveil", function() {
      //data-src(-retina)からsrcに上書き⇒画像表示
      var source = this.getAttribute(attrib);
      source = source || this.getAttribute("data-src");
      if (source) {
        this.setAttribute("src", source);
        if (typeof callback === "function") callback.call(this);
      }
    });
 
    function unveil() {
      var inview = images.filter(function() {
        var $e = $(this),
            wt = $w.scrollTop(), //画面に表示されてるトップの座標
            wb = wt + $w.height(), //画面に表示されてるボトムの座標
            et = $e.offset().top, //画像のトップの座標
            eb = et + $e.height(); //画像のボトムの座標
 
        /* 画像ボトム >= 画面トップの座標-閾値 && 画像のトップ座標 <= 画面ボトム+閾値
         * という条件が成り立つならtrue
         */
        return eb >= wt - th && et <= wb + th;
      });
 
      loaded = inview.trigger("unveil");
      images = images.not(loaded);
    }
 
    $w.scroll(unveil); // ウインドウのスクロールに対してトリガー
    $w.resize(unveil); // ウインドウのリサイズに対してトリガー
 
    //1回やっとく
    unveil();
 
    return this;
 
  };
 
})(window.jQuery || window.Zepto);

https://github.com/luis-almeida/unveil/blob/master/jquery.unveil.js

閾値の考え方はこんな感じ

HTMLでは、y座標が下にいくほどプラスなので、混乱しますが…
threshold

https://github.com/luis-almeida/unveil

Bootswatch3 がなぜか適用されなかったので対応した

Bootswatchとは

Twitter Bootstrap のデザインをさくっと変更できるテーマ群
Twitter Bootstrap3がリリースされて、Bootswatchも3になってます。
http://getbootstrap.com/
http://bootswatch.com/

適応方法

Easy to Install

Simply download a CSS file and replace the one in Bootstrap. No messing around with hex values.
Twitter Bootstrap

⇒つまり、CSSファイルを上書きすれば万事解決だよって話。

が…

適応されない。

原因

bootstrap-themeを読み込んでいるため。

対応前

1
2
3
  <!-- Bootstrap core CSS -->
  <link rel="stylesheet" href="./css/bootstrap.min.css">
  <link rel="stylesheet" href="./css/bootstrap-theme.min.css">

対応後

1
2
3
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="./css/bootstrap.min.css">
<!--    <link rel="stylesheet" href="./css/bootstrap-theme.min.css"> -->

ってことで、

bootstrap-themeには気をつけろってことで。
おっしゃーしたー

Apacheで謎のパーミッションエラーが出るときのパターン SELinux

ウェブのルートやその直下はアクセスできるのに、さらにサブディレクトリになるとアクセスできなくなるなど。

今回の原因はSELinux
経験上、SELinuxが動いてるといろんな悪さをします。
というか、設定が足りてないだけなんですが。
まともな設定をするつもりがない人はさっさと無効化するのが吉。
ただ、セキュリティ対策はしてください。マジで。

[user@dev proto]$ pwd
/var/www/html/proto
[user@dev proto]$ sudo getenforce
Enforcing
[user@dev proto]$ sudo setenforce 0

[Play Framework] 第一回 準備1.サーバーのJDK更新

java ver7をyumで入れる

sudo yum search jdk

============================================== N/S Matched: jdk ==============================================
java-1.6.0-openjdk.x86_64 : OpenJDK Runtime Environment
java-1.6.0-openjdk-demo.x86_64 : OpenJDK Demos
java-1.6.0-openjdk-devel.x86_64 : OpenJDK Development Environment
java-1.6.0-openjdk-javadoc.x86_64 : OpenJDK API Documentation
java-1.6.0-openjdk-src.x86_64 : OpenJDK Source Bundle
java-1.7.0-openjdk.x86_64 : OpenJDK Runtime Environment
java-1.7.0-openjdk-demo.x86_64 : OpenJDK Demos
java-1.7.0-openjdk-devel.x86_64 : OpenJDK Development Environment
java-1.7.0-openjdk-javadoc.noarch : OpenJDK API Documentation
java-1.7.0-openjdk-src.x86_64 : OpenJDK Source Bundle
ldapjdk-javadoc.x86_64 : Javadoc for ldapjdk
icedtea-web.x86_64 : Additional Java components for OpenJDK
ldapjdk.x86_64 : The Mozilla LDAP Java SDK

Name and summary matches only, use “search all” for everything.

sudo yum install java-1.7.0-openjdk-devel.x86_64

==============================================================================================================
Package Arch Version Repository Size
==============================================================================================================
Installing:
java-1.7.0-openjdk-devel x86_64 1:1.7.0.25-2.3.10.4.el6_4 updates 9.4 M
Installing for dependencies:
java-1.7.0-openjdk x86_64 1:1.7.0.25-2.3.10.4.el6_4 updates 26 M
ttmkfdir x86_64 3.0.9-32.1.el6 base 43 k
xorg-x11-fonts-Type1 noarch 7.2-9.1.el6 base 520 k

Transaction Summary
==============================================================================================================
Install 4 Package(s)

Total download size: 36 M
Installed size: 126 M
Is this ok [y/N]: y
Downloading Packages:
(1/4): java-1.7.0-openjdk-1.7.0.25-2.3.10.4.el6_4.x86_64.rpm | 26 MB 00:00
(2/4): java-1.7.0-openjdk-devel-1.7.0.25-2.3.10.4.el6_4.x86_64.rpm | 9.4 MB 00:00
(3/4): ttmkfdir-3.0.9-32.1.el6.x86_64.rpm | 43 kB 00:00
(4/4): xorg-x11-fonts-Type1-7.2-9.1.el6.noarch.rpm | 520 kB 00:00

update-alternatives --config java

3 プログラムがあり ‘java’ を提供します。

選択 コマンド
———————————————–
1 /usr/lib/jvm/jre-1.5.0-gcj/bin/java
2 /usr/lib/jvm/jre-1.6.0-openjdk.x86_64/bin/java
*+ 3 /usr/lib/jvm/jre-1.7.0-openjdk.x86_64/bin/java

Enter を押して現在の選択 [+] を保持するか、選択番号を入力します:
/var/lib/alternatives/java.new の作成に失敗です: 許可がありません

java -version

java version “1.7.0_25”

javac -version

javac 1.7.0_25

引越しして200Mbpsから100Mbpsのプランになったけど、むしろ速くなった

というか、まあアレです。
前回のマンションはまともに速度が出ない仕様でした。

部屋の壁から硬めの線が生えてて、それを途中から柔らかい光ファイバーケーブルに変換して、NTTの端末に挿すタイプ。
そしてやっとLANケーブルに変換されるタイプ。
ってどんなタイプだよという話ですが、要は電話のラインを使わないタイプでした。

曲者は硬いケーブルで、今までの扱いが悪かったらしく線が痛んでて漏れがありロスが発生しており、
引越し直後はオンラインにならずNTTのサポートに電話してチェックを要請する羽目に。
ちなみに、月曜が引越しだったため、次の土曜までオフライン生活を余儀なくされて発狂ものでした。

で、チェックしてもらったわけですが、線をぎりぎり大丈夫なとこまでカットして端子を作り直し、
ようやくつながるようになったのですが、線の曲げ具合で速度のMAX値が変わるというアホすぎる仕様。
普段は40Mbpsがいいとこでした。
てことで、NTTは死んでくれ。

で、今日からコレ↓本当にありがとうございます。
speedtest_wired

[CakePHP2]CakePHP2.3.6がリリースされてCakeEmailのバグが修正された様子

http://bakery.cakephp.org/articles/markstory/2013/06/10/cakephp_2_3_6_released
CakePHP2.3.5でマルチバイトの取り扱いがやばくて文字化けというか文字消失が起こっていたのですが、
修正というか、マシになったようです。(軽くテスト済み)

  • Datetime comparisons in CakeTime are more accurate now.
  • FormHelper now correctly marks fields with error classes on forms that save multiple records.
  • Controller::$modelClass is now set before components are initialized.
  • The file reading features of CakeEmail are now available outside the class.
  • Email line wrapping compatibility with japanese messages has been improved.
  • HtmlHelper::tag() now returns the content when $tag is false.
  • Mocked components are now enabled when using ControllerTestCase::testAction().
  • The type attribute can now be set when using HtmlHelper::script() and HtmlHelper::scriptBlock().
  • Passing an empty array does not reset SmtpTransport’s configuration anymore.
  • Xml parse errors with SimpleXmlElement now throw XmlException.
  • FormHelper now disables options in multi-select elements now.
  • TranslateBehavior now always uses $name instead of alias when updating/inserting rows.
  • Cookie expiry times in the distant future now work on 32bit systems.
  • FileEngine now clears groups with differing prefixes correctly.

[CakePHP2]Null の含まれるカラムをPaginatorで思い通りにソートする

たとえば、priceカラムがあるとして、
nullが入ってるデータにソートをかけると、
一番低い値としてみなされます(mysqlの場合)。
安い順に並べたいのに、そんなわけの分からないデータが表示されたら困ります。
※かといって、逆に、高い順に並べたときにnullデータが最初に表示されても困ります。

そんな場合のテヒニク(ドイツ語?)

VirtualFieldsでサクッと解決する

予めソート対象のカラムに細工をして、空想列を作る。

1
2
3
4
5
6
        public $virtualFields = array(
                // 昇順の場合はnull を最大値として扱う
                'asc_price' => 'ifnull(price, 2147483647)', // 想定される上限より上の値
                // 降順の場合はnull を最小値として扱う
                'desc_price' => 'ifnull(price, -1)',	// 想定される下限より下の値
        );

View側では普通にPaginator::sortを

1
2
 echo $this->Paginator->sort('asc_price', '安い順', Array('direction' => 'asc'); // asc
 echo $this->Paginator->sort('desc_price', '高い順', Array('direction' => 'desc'); // desc

これで、

  • 安い順に並べた場合にnullが最後に出現
  • 高い順に並べた場合にもnullが最後に出現

が実現できます。

凄く無駄っぽい実装ですが、分かり易さ第一という事で。