intention.jsはJavaScript製のオープンソース・ソフトウェア(MIT License)です。

Webサイトをレスポンシブな作りにし、モバイル/タブレット/デスクトップおよび向きも含めてすべてをきちんと正しく実装するのはそんなに簡単なことではありません。そこで使ってみたいのがintention.jsです。

[![](http://images.moongift.jp/2013/09/Screenshot 2013-09-02 20.44.21_thumb.1378122565.png)](http://images.moongift.jp/2013/09/Screenshot 2013-09-02 20.44.21.1378122565.png)
例。このようにコンテンツを時間、ブラウザの幅などに合わせて可変にできます。

[![](http://images.moongift.jp/2013/09/Screenshot 2013-09-02 20.45.13_thumb.1378122572.png)](http://images.moongift.jp/2013/09/Screenshot 2013-09-02 20.45.13.1378122572.png)
デモ。スクロールやマウスの履歴を戻る操作で人の向きが変わります。

[![](http://images.moongift.jp/2013/09/Screenshot 2013-09-02 20.45.43_thumb.1378122579.png)](http://images.moongift.jp/2013/09/Screenshot 2013-09-02 20.45.43.1378122579.png)
レスポンシブグリッド。

intention.jsはデバイスや向きをキーにダイナミックにコンテンツを変換できるエンジンになります。画像にin-standard-src/in-mobile-srcを指定しておくとデバイスによってソースが変わるようになります。他にも時間帯によってメッセージを変えたり、タグの差し込み位置をダイナミックに指定できます。

MOONGIFTはこう見る

一つのURLであらゆるデバイスに対してコンテンツを配信するというOne Webの考え方は大事だと思います。それを実現するのはレスポンシブWebデザインだけではありません。サーバサイドで判別もありますが、開発負荷は多少大きくなる傾向があります。

そこでベースをレスポンシブで開発し、細かな情報の出し分けはJavaScriptで行うというのはいい解決策ではないでしょうか。コンテンツをAjaxで取得するようにすれば、そのコンテンツが不要なデバイスでは情報量も軽くなるはずです。

intention.js

wsjdesign/intentionjs