おさらい : head.jsってなに

だいぶむかしに記事を書いたことがありましたが、 「head要素に入れるべき唯一のスクリプト」 と称している便利なスクリプトです。

cf) head要素に読み込むべき唯一のスクリプト「headjs」 | Mach3.laBlog

なにをしてくれるのかというと、

• Require.jsのようにリソースローダーとして機能する
• Modenizrのようにモダン環境向けの機能判別をしてくれる
• html5shivのように、レガシー環境でもHTML5のエレメントを使えるようにしてくれる
• レスポンシブデザイン向けに、動的にHTML要素のクラス（.lt-1024等）を設定してくれる

などなど、なかなか広い守備範囲です。 専門のスクリプトに敵わない部分もあると思いますが、「器用貧乏は美徳」をモットーとするわたくしとしてはとても他人とは思えず、大変気に入っています。

リソースローダー機能拡張の経緯

自分の中でhead.jsが最も大きな役割を果たしているのがリソースローダーの機能で、

head.js(
    "scripts/jquery.js",
    "scripts/underscore.js",
    "scripts/backbone.js",
    ...
);

などとすると、渡したパスのスクリプトをまとめて読みこんでくれます。 ですが、Require.jsとの2つの大きな違いをかねてよりもどかしく思っておりました。

• スクリプトをまとめてくれるコンパイラの存在
• data-main属性でインポートしてくれるローダー

他にも、強力な依存関係解決機能などがありますが、そこまで求めるならRequire.jsを素直に使うべきでしょう。 ジェネラリストはスペシャリストをその分野において超えない物。

“head-require.js”

そこで本題ですが、そのリソースローダー周りを解決する拡張機能を書いてみました。

head-require

色々ごちゃごちゃと入っておりますが、ブラウザで使用する際の本体は dist/head-require.js あるいは dist/head-require.min.js です。

基本的な使い方

まずはHTMLで head.js と head-require.js を読み込みます。

<script src="scripts/head.js"></script>
<script src="scripts/head-require.js" data-main="scripts/main.js"></script>

ここでhead-require.jsの要素に記述した data-main 属性のスクリプトを自動的に読み込みます。 main.js の中身は、例えば次のような感じに。

head.require(
    "vendors/jquery.js",
    "vendors/underscore.js",
    "vendors/backbone.js",
    "app/myapp.js"
);

head.require() は、引数に渡したスクリプトをまとめて読み込んで順次実行していきます。 myapp.js の中身が実行される頃には、jQueryもBackboneも初期化されて使えるようになっています。 また、内部で使用している head.js() の特性上、スクリプトが実行される頃にはDOMも準備万端なのでDOM readyを待つ必要はありません。

注意事項

• スクリプトへのパスは、HTMLドキュメントではなく main.jsからの相対パス です。
• 最後の引数は、 head.js() のようにコールバックは受け取れません。

コンパイラ（Gruntタスク）

コンパイラは Grunt を使用します。 CLIも用意はしましたが、Gruntの方が色々と捗るのではないでしょうか。

まずnpmでインストールします。

$ npm install head-require

Gruntタスクの設定はこんな具合です。

module.exports = function(grunt){
    grunt.npmLoadTasks("head-require");
    grunt.initConfig({
        headRequire: {
            dist: {
                options: {
                },
                files: {
                    "scripts/dest.js": "scripts/main.js"
                }
            }
        }
    });
};

中身は至って単純で、　scripts/main.js の中の head.require() に引数として渡されたファイル達を ひとつにかためたものを scripts/dest.js に突っ込んでいるだけです。

options には以下の物が渡せます。

• uglify:Boolean (false) – uglify.jsでミニファイするかどうか
• banner:String (“”) – ファイルの先頭にライセンス情報などを記したコメントをつけられます
• head:String (“head”) – headオブジェクトの名前をhead_confで変更した時に

おまけ機能

appオブジェクト

head-require.js を読み込むと、app というオブジェクトがグローバルに生えます。 名前空間のように使うもよし、必要なければそっておいてあげてください。

appオブジェクトは簡単なゲッターセッターも備えているので、 アプリケーション間で共有したい値などあれば、どうぞ。

app.set("name", "MACH3");
app.get("name"); // "MACH3";

app.set({
    "name": "MACH3",
    "age": 17
});
app.get(); // {"name": "MACH3", "age":17}

衝突などを避けるためにappという名前を変更したい場合は、 data-appname 属性を使用します。

<script ... data-main="scripts/main.js" data-appname="myapp"></script>

まとめ

小中規模のサイトではわりと便利に使えています。 なにぶん目下開発中なもので、他にも実験中の隠し機能とかあったりしますが、 見つけたら優しくしてあげてください。

yepnope.jsとは

yepnope.js | A Conditional Loader For Your Polyfills!

手書き風のロゴがかわいい。

yepはyes、nopeはnoの口語体で、固く言えば「yesno.js」。
与えた条件がtrueの場合とfalseの場合で読むJS/CSSを切り替えるのが得意な
リソースローダーです。

最も簡単なサンプル

yepnope("hoge.js");
yepnope("style.css");

単一ファイルをロードするだけの簡単なサンプルです。
内部的には、ドキュメント内で一番最初のScript要素を探して、
その前にinsertBeforeしているみたい。

ちなみに、スクリプトローダーではなく「リソースローダー」なので
JavaScriptだけではなくCSSもロード出来ます。

複数ファイルを読んでみる

yepnope({
    load : [ "hoge.js", "fuga.js" ]
});

load

後述するtestの結果に関わらず、とにかく読み込む。

条件分岐で読むJSを分ける

yepnope({
    test : ('localStorage' in window) && window['localStorage'] !== null,
    yep : [ "hoge.js", "fuga.js" ], /* testの結果がtrueの場合こっちを読む */
    nope : [ "foo.js", "bar.js" ] /* testの結果がfalseの場合こっちを読む */
});

test

基準となる条件文等

yep

testがtrueの時に読み込むファイル。単一ファイルの場合は文字列でも可。

nope

testがfalseの時に読み込むファイル。単一ファイルの場合は文字列でも可。

上の例は、localStorageが使用可能である場合はyepに設定したhoge.js,fuga.jsがロードされ、
そうでない場合はnopeに設定したfoo.js,bar.jsがロードされます。

コールバックを設定する

yepnope({
    test : ('localStorage' in window) && window['localStorage'] !== null,
    yep : [ "hoge.js", "fuga.js" ],
    nope : [ "foo.js", "bar.js" ]
    callback : function( url, result, key ){
        console.log( url ); /* ロードされたリソースのURL */
        console.log( result ); /* testの結果（true|false） */
        console.log( key ); /* yep|nope におけるインデックス（またはキー） */
    },
    complete : function(){
        console.log( "全部読み込み終わりました！" );
    }
});

ロード完了時の処理をcallback/completeで設定出来ます。
ファイルのロードは非同期に行われる為、
読むリソースを元に何かを処理したい場合はこれらのコールバックを使用します。

callback

リソースが読み込まれる度に呼ばれる。

complete

全リソースがロードし終えた時に一度だけ呼ばれる。

「無ければ読めばいいじゃない」を実装する

var Init = function(){
    if( !window.MyClass ){ return; }
    new MyClass();
};

yepnope({
    test : window.MyClass,
    nope : "myclass.js",
    complete : Init
});

myclass.js

var MyClass = function(){
    console.log( "Hello, MyClass" );
};

MyClassが無い場合はjsファイルをロードしてから、
既にある場合はスルーしてcompleteが呼ばれるのでそのまま初期化。

コールバックで再度条件分岐をしているのは、myclass.jsが読み込めたかどうかの保証が無い為。
myclass.jsが404でも、タイムアウト後にcompleteは呼ばれてしまいます。

まとめ

以前、ローダーもくっついている器用な「head.js」を記事にしましたが、
やはり特化したローダーともなると、さすがに色々と気が効いています。
基本的にJavaScriptファイルはパックしてしまう事が多いのですが、
新要素のフォールバック等にはかなり活用出来るかもしれませんね！

作るもの

• マウスオーバーすると、ふわーっと表示が切り替わるボタン。
• 画像を二枚重ね、上の画像の透明度を変化させて表示を切り替える。

こういったUIにあたるエフェクトは好みが別れる気がしますが、
個人的にはリッチな感じがして結構好きです。

HTML

<div id="demo" class="fadeButton">
    <a href="#">FadeButton</a>
</div>

基本となるCSS

#demo {
    display: block;
    width: 135px;
    height: 135px;
    background-position: left top;
    background-repeat: no-repeat;
    background-image: url(default.png);
}

#demo a {
    display: block;
    width: 135px;
    height: 135px;
    text-indent: -9999px;
    overflow: hidden;
    background-position: left top;
    background-repeat: no-repeat;
    background-image: url(hover.png);
}

まずはCSS3のTransitionsで

Transitionsを使うと恐ろしく簡単なコードで実現できちゃいます。

.fadeButton a {
    opacity: 0;
    -webkit-transition: opacity .5s linear;
}

.fadeButton a:hover {
    opacity: 1;
    -webkit-transition: opacity .5s linear;
}

ね、簡単でしょう？（ボブ

が、現在はまだサポートしているブラウザは少ないので、
サポート外のブラウザについてはJavaScriptに頼らざるを得ません。

Transition非対応の環境の為のJavaScriptを用意する

Transition非対応のブラウザ用に、JavaScriptによるフォールバックを用意します。
判別には先日紹介した「head.js」を使用。

CSSの:hoverスタイルを上書き

非対応の場合の:hoverスタイルを無効にしておきます。
Transitions非対応な場合は、head.jsが
“no-csstransitions”をhtml要素のclassに追加してくれるので
こんな感じで。

.no-csstransitions .fadeButton a:hover{
    opacity:0;
}

JavaScriptでフェードイン/アウトさせる

jQueryを使った次のようなコードで、
大体似たようなエフェクトを付加させられます。

(function ($) {
    if (!head.transitions) { // head.jsでTransitions対応を判別
        $(".fadeButton").each(function () {
            var self = $(this);
            self.bind({
                mouseover: function (e) {
                    self.children("a").stop().animate({
                        opacity: 1
                    }, 500);
                },
                mouseout: function (e) {
                    self.children("a").stop().animate({
                        opacity: 0
                    }, 500);
                }
            });
        });
    }
})(jQuery);

デモ＆ファイナルコード

JS/CSSでふわりとフェードするボタンをつくる – jsdo.it – Share JavaScript, HTML5 and CSS

注意！

IEで透過PNGを使ってフェードしようとすると不具合が生じるので注意。
DD_belatedPNG等を使って回避する必要があります。
» IEの透過PNG+opacityの不具合を治すメモ | Mach3.laBlog