@anywhere

Welcome to @Anywhere | dev.twitter.com

Twitterの機能がどのサイトでも活用出来るようになるJavaScriptリソース。
認証からタイムライン読み込み、パーツのレンダリングまで。
連携サービスを組むならおさえておきたい。

• ブログで@anywhereを試してみた！ ～ どこでもTwitter | Mach3.laBlog
• @anywhereで認証してみる備忘録 | Mach3.laBlog

jsLint

JSLint, The JavaScript Code Quality Tool

JavaScriptをストリクトに書く為のチェックツール。
前はWSH版がダウンロード出来たんですけど見つからなくなってますね。
Githubのを使ってなんやかんやするんでしょうか。こんど試してみよう。

• JSLintでストリクトなJavaScriptを書く | Mach3.laBlog

LESS

LESS – Leaner CSS

変数に代入したり、ネストしたり、ミックスインしたり…
CSSコーディングが素晴らしくスピードアップするCSS開発キット。
エディタからも簡単に呼び出せるので重宝しています。
似たようなプロジェクトに「Sass」というのもあります。

• ゼロから導入する、Ruby LESS for Windows ～素晴らしいCSSソリューション | Mach3.laBlog
• CSS3対応の為のLESSスニペットメモ | Mach3.laBlog

jsDoc Toolkit

jsdoc-toolkit – Project Hosting on Google Code

JavaScript版のドキュメント生成ツール。
こちらもエディタから使うと大変便利。

• エディタ（Notepad++）からJSDoc Toolkitを使ってみる | Mach3.laBlog

Modernizr

Modernizr

HTML5の新機能等が使用可能かどうかを判別してくれるライブラリ。
判別の結果はhtml要素のクラスとして出力してくれる他、
メンバを直接参照する事でも結果を知ることが出来ます。

便利なスクリプトなのですが、最近Head.jsに持って行かれた感が…
こちらは未検証なのでまた後ほどレポートを。

• 「Modernizr」 モダンなクロスブラウザCSSの為の支援スクリプト | Mach3.laBlog

Raphael / gRaphael

gRaphaël—Charting JavaScript Library

Raphaelは、ベクターグラフィックを簡単に扱うためのJavaScriptライブラリ。
gRaphaelはそれをグラフ描画用に拡張する為のプラグインです。
投稿した時はまだドキュメントが不備でしたが…今見に行きましたがまだありませんでした！

• 実験室: gRaphaëlでインタラクティブなグラフを描いてみる | Mach3.laBlog

IE9.js

ie7-js – Project Hosting on Google Code

プロジェクト名としては「IE7.js」ですが、
その中に含まれるIE8.js、IE9.jsやie7-squish.jsが結構便利。
JavaScriptが動く事が前提になりますが、擬似クラスやHTML5の新要素の対応もしてくれます。

• IE9.jsで実現するシンプルなclearfixとその他の恩恵 | Mach3.laBlog

YUI Compressor

YUI Compressor

Yahoo!がおくる、JavaScriptやCSSを圧縮するツール。
Webページのパフォーマンス向上を図るのに欠かせません。
ご一緒にYSlow（Firebugプラグイン）も是非。

• YUI Compressorをお手軽にするバッチファイルを書いてみる | Mach3.laBlog
• 今すぐ出来る、ちょこざいなサイトパフォーマンスアップ | Mach3.laBlog

mustache

{{ mustache }}

マルチランゲージテンプレートエンジン！（言い切った！）
様々な言語に対応する、シンプルで使いやすいテンプレートエンジンです。

• どこでも活躍できるテンプレートエンジン「Mustache」 | Mach3.laBlog

Sammy.js

Sammy.js

Ajaxコンテンツのセッションを操る為のjQueryプラグイン。
要するに、location.hashによるルーティングをウマイこと処理してくれるスクリプトです。

• Sammy.jsでAjaxコンテンツのセッションを操る | Mach3.laBlog

jQueryMobile

• jQuery Mobile | jQuery Mobile

jQueryの作者が送る、スマートフォン向けのjQueryUIのようなもの。
ルールに従ったマークアップをするだけで、各要素をそれっぽくレンダリングしてくれます。
1月に正式版がリリースされる予定。

• はじめてのjQueryMobile | Mach3.laBlog

結構色々ありましたね、2010年。
来年もまた素晴らしい技術に出会えますように。

皆様よいお年を！

公式 : jQuery Mobile | jQuery Mobile

jQueryではなく、jQueryUIのモバイル版

と、言うべきでしょうか？

jQueryMobileが提供してくれるのは、
スマートフォン向けのテーマスタイルシートと、
それをより簡単にレンダリングする為の仕組みです。

はじめ勘違いしていたのですが、
jQueryをモバイル向けにチューンした物ではないので注意。
使用の際にはjQueryを一緒に読み込む必要があります。

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>

jQueryUIのように、CSSとjQuery、
そしてjQueryMobile本体を読み込んで準備完了です。

Hello, world !

我々がしなければならないのは、HTMLをマークアップする事だけ。
その際に、そのHTML要素をどのような見せ方をするのかを、
data-role属性を使って指定してやります。

例えば、次の例はきわめてシンプルなページのテンプレートです。

<div data-role="page">
    <div data-role="header">
        <h1>Page Title</h1>
    </div>
    <div data-role="content">
        <p>Hello, world !</p>
    </div>
    <div data-role="footer"></div>
</div>

data-role属性はその名の通り、要素のrole（役割）を示します。
基本的な構造は、pageの中にheader/content/footerが並び、
contentの中にページの内容が流し込まれる感じ。
普段idやclassを使ってマークアップするのと同じ感覚ですね。

こうしておくことで、jQueryMobileさんが適切なスタイルを適用してくれます。
上の例なら、こんな感じに。

jQueryMobileのページ遷移

jQueryMobileのページ遷移は、特別何かを意識しなくても
スマートフォン特有の右にスライドしていくトランジションを加えてくれます。
もちろんトランジションの種類は変更可能。

リンクの種類も複数あります。例えば…

1) ページ内リンク

“#hoge”のようなハッシュによるページ内リンク。 トランジションで遷移します。

2) ページ外リンク

“hoge.html”のような通常のリンク。 Ajaxで外部ファイルロード後、トランジションで遷移します。

3) 明示された外部リンク

rel=”external” を指定したものは、 トランジションを使用せずに画面ごとリフレッシュします。

1)について補足で説明しておくと、
ひとつのHTMLの中に任意のIDを持つ複数のpageコンテナを配置し、
ページ内リンクで遷移する事が出来ます。
というより、「表示をトグルする」と表現したほうが分かりやすいのかもしれません。

<div data-role="page" id="home">
    <div data-role="header">
        <h1>Home</h1>
    </div>
    <div data-role="content">
        <p>
            <a href="#hoge">hoge</a>
            <a href="#fuga">fuga</a>
        </p>
    </div>
</div>

<!-- page "hoge" -->
<div data-role="page" id="hoge">
<!--中略-->
</div>

<!-- page "fuga" -->
<div data-role="page" id="fuga">
<!--中略-->
</div>

アルファバージョンという事もあり、ある条件下でスタイルが切れてしまったり、
トランジションがうまくいかなかったりと、不具合が色々潜んでます。
試す場合は、ご覚悟を。

色々なコンポーネント

jQueryMobileには、ボタンをはじめとする様々なコンポーネントが揃っています。
コンポーネントもコンテナ同様、data-roleをはじめとする
様々なdata-*属性で見た目/振る舞いを指定します。
ほんの一部をご紹介してみると…

ボタン

<a href="#hoge" data-role="button" data-inline="true">BUTTON</a>

表示トグル可能なブロック

<div data-role="collapsible" data-collapsed="true">
    <h3>いないいない</h3>
    <p>ばぁ！</p>
</div>

フリップスイッチ

<select data-role="slider">
    <option value="off">Off</option>
    <option value="on">On</option>
</select>

ネストされたリスト

<ul data-role="listview">
    <li>JavaScript
        <ul>
            <li>jQuery</li>
            <li>Prototype.js</li>
            <li>YUI</li>
            <li>ExtJS</li>
            <li>MooTools</li>
            <li>Dojo</li>
        </ul>
    </li>
    <li>PHP
        <ul>
            <li>CakePHP</li>
            <li>CodeIgniter</li>
            <li>Zend Framework</li>
            <li>Symfony</li>
            <li>ちぃたん</li>
        </ul>
    </li>
</ul>

まとめ

と、ほんのさわりだけですが、紹介させていただきました。
まだアルファバージョンなのでバグも多く、疑問が残る部分も幾つかありますが、
1月に1.0をリリースするそうなので、チェックしておきたいですね。

さ、次はSenchaも試してみるべきですね…
Ext Japan – モバイルJavaScript – Ext JS、Ext GWT、Sencha Touch