@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年。
来年もまた素晴らしい技術に出会えますように。

皆様よいお年を！

Learning jQuery – Tips, Techniques, Tutorials

簡単な仕組み

ネタ元はこの記事です。
Detecting Ajax Events on the Server » Learning jQuery – Tips, Techniques, Tutorials

どうやらjQueryはXmlHttpRequestでリクエストをする際に
「X-Requested-With」というヘッダに
「xmlHttpRequest」という値を格納しているそうな。
jQuery…なんという愛でしょう。

jQueryの素晴らしさを実感すると同時に、
やはり一度はソースを熟読しておくべきだなぁと感じますね。
参考になる設計手法とか、恐らく随所に見られる事でしょう！

取得してみる

PHPとRubyで、試しに取得してみました。

PHP

$xhr = ( @$_SERVER["HTTP_X_REQUESTED_WITH"] === "XMLHttpRequest" );
echo ($xhr) ? "jQuery Ajax" : "Requested Directly" ;

Ruby

xhr = ( ENV["HTTP_X_REQUESTED_WITH"] === "XMLHttpRequest" )
print (xhr) ? "jQuery Ajax" : "Requested Directly"

ちなみにこのヘッダが渡されるのは、あくまでもXMLHttpRequestを介して行われた通信だけです。
それ以外のもの、例えばJSONP等の場合は渡されないので注意しましょう。
（JSONPはscript要素を追加しているだけなので、XMLHttpRequestは使用していません）
cf) jQueryはJSONPの理解の妨げになるか？

ネタ元のブログも素晴らしいです！
今回初めて知ったのですが、是非とも全てに目を通したいです。
Learning jQuery – Tips, Techniques, Tutorials

次のようなJSONフォーマットの文字列が
「str」に格納されていると想定します。

{
    "status" : "success",
    "content" : [
        { "id" : 1 , "message" : "Nice to meet you, world !" },
        { "id" : 2 , "message" : "Hello, world !" },
        { "id" : 3 , "message" : "Hello again, world !" }
    ]
}

この文字列をオブジェクトとしてロードし、
それをもう一度JSON文字列として出力するテストです。

PHP

$php_obj = json_decode( $str ); // JSONからPHPオブジェクトを生成
$json_string = json_encode( $php_obj ); // PHPオブジェクトからJSONを生成

さすが関数から生まれてきたような言語のPHP。
JSONだって関数一発です。

Ruby

Rubyは1.9からjsonライブラリが標準搭載されているそうです。
当方の環境も1.9だったのでそのままそれを利用させて頂きます。

library json

require "json" # jsonライブラリが必要
ruby_obj = JSON.load( str ) # JSONからRubyオブジェクトを生成
json_string = JSON.generate( ruby_obj ) # RubyオブジェクトからJSONを生成

1.9未満だと他のライブラリに依存する事になります。
面倒なので（!?）ここでは割愛。

ActionScript3

AS3はJSONのパーサが標準装備されていないので、
as3corelibを使わせていただきます。

mikechambers’s as3corelib at master – GitHub

import com.adobe.serialization.json.JSON; // as3corelibからインポート

// 中略

var as3_obj:Object = JSON.decode( str ); // JSONからAS3オブジェクトを生成
var json_string:String = JSON.encode( as3_obj ); // AS3オブジェクトからJSONを生成

AS3というとXMLと相性も良いのでそちらをチョイスする事が多かったですが、
データ量によっては帯域節約の為にJSONを使うのも大いにありですね。その後も楽ですし。

XMLとかYAMLとか色々ありますが、JavaScriptの隆盛もあって
最近はJSONフォーマットがもてはやされている感じですね。
学習コストも極めて少なくて済むので、今後とも重宝されそうです。

Mustacheについて

{{ mustache }}

“Mustache”というのは口ひげを指す言葉で、「ますたっしゅ」とか発音する様です。
テンプレートタグに使用されている「{」が口ひげに似てるので、そこらへんが由来っぽいです。

公式を見れば分かるとおり、Mustacheは1言語にとどまらず、
様々な言葉で開発されているテンプレートエンジンです。
知らない言語も入ってたりしますね…。

Available in Ruby, JavaScript, Python, Erlang, PHP, Perl, Go, Lua, ooc, C++, ActionScript, Java, ColdFusion, Scala, and for node.js.

簡単な使い方

JavaScript版のmustache.jsで簡単な使い方を紹介してみます。

最もシンプルな例

var template = 'Hello, {{name}}!';
var html = Mustache.to_html( template, {
    name:"mach3"
});
alert(html); // "Hello, mach3!"

テンプレートにデータを渡して出力するには、Mustache.to_html()メソッドを使用します。
第一引数はテンプレートの文字列、第二引数は渡すデータ(Object)です。
基本的に{{と}}で囲った物が、テンプレートタグとして認識されます。

条件分岐

var template = '{{#isError}}エラーが発生しました。{{/isError}}';
var html = Mustache.to_html( template, {
    isError:true
});

dataの値がtrueである場合に
{{#data}}と{{/data}}に囲まれた部分が処理されます。
ちなみに条件を逆にしたい場合は、#の代わりに^を使用します。

var template = '{{^isError}}正常です。{{/isError}}';

ループ処理

var template = '<ul>{{#fruits}}<li>{{.}}</li>{{/fruits}}</ul>';
var html = Mustache.to_html( template, {
    fruits:["apple","orange","banana"]
});

記法は条件分岐と同じですが、dataが配列等の可算なオブジェクトだった場合は
その数だけ{{#data}}と{{/data}}に囲まれた部分が処理されます。
{{.}}とする事で現在の値にアクセス出来ます。

var template = '<ul>{{#fruits}}<li>{{name}} : &yen;{{price}}</li>{{/fruits}}</ul>';
var html = Mustache.to_html( template, {
    product:[
        { name:"apple", price:100 },
        { name:"orange", price:75 },
        { name:"banana", price:50 }
    ]
});

もう少し複雑な例です。
配列の値がオブジェクトである時は、ループ内で直接nameやpriceの値にアクセス出来ます。
一覧を出力する場合等はこの方法を選択する事になるでしょう。

コメントアウト

var template = '<p>超音速。{{! この中はスルーされます }}</p>'

{{! … }}とすると、その中身はコメントと認識されてスルーされます。

さらに高度なテンプレートタグについては、GithubのREADME/Manualをご覧ください。

• janl’s mustache.js at master – GitHub
• mustache(5) — Logic-less templates.

必要な機能が十分に備わっているのは勿論、
どの言語を使用しても同じ記法でテンプレートが書けるというのは強みですね。
しかも、特にWeb屋が扱う言語は概ね網羅している様子。
非常に有用なライブラリと思いますが、如何でしょうか。

先日はJavaScript版のLESSを記事で紹介しましたが、
LESSをJavaScriptで実現する 「LESS.js」
やはりRuby版LESSをローカル環境に導入して動かすのがベストだと思うので、
Windows環境での導入方法をメモっておきます。

1. Rubyの導入
2. LESSのインストール
3. LESSを試してみる
4. エディタから直接LESSする（Notepad++）
5. DreamweaverからLESSする

1. Rubyの導入

rubyinstallerによるインストール

LESSの導入には、Ruby本体の他に
パッケージマネージャーのRubyGemsも必要になります。
PerlのCPAN、PHPのPEARみたいな存在ですね。

別々に手作業でインストールする事も出来ますが、
ここでは一括でインストール出来るrubyinstallerを使ってみます。

RubyForge: Ruby Installer for Windows: Project Info
リンク先からrubyinstallerのお好みのバージョンをダウンロード、実行。

基本的にデフォルトの設定で進んで良いと思いますが、
以下のチェックは共に入れておくと良いと思います。

• Add Ruby executables to your PATH
  
  （環境変数のPATHに追加します）
• Associate .rb and .rbw files with this Ruby installation
  
  （拡張子.rb/.rbwを今インストールしているRubyに関連付ける）

インストールが終了したら、PATHを有効にする為に再起動しておきましょう。
コマンドプロンプトでバージョンの確認が出来ればインストール完了です。

ruby -v
gem -v

2. LESSのインストール

LESSはgemコマンドを使ってインストールします。

gem install less

おしまい。後はライブラリの依存関係等を解決しながら
勝手に色々いれてくれちゃいます。便利。

3. LESSを試してみる

お好きなディレクトリにlessファイルを作って、lesscコマンドに投げれば
展開されたcssファイルが同じディレクトリに生成されるはず。

まずはテスト用のlessファイルを書いてみます。

// example.less :

@mycolor : #003366;
@mywidth : 100px;

.rounded (@r:10px){
    -webkit-border-radius: @r;
    -moz-border-radius: @r;
    border-radius: @r;
}

#box1{
    color : @mycolor;
    width : @mywidth;
    padding : 10px;
    .rounded();
    p {
        .rounded(5px);
        width : @mywidth - 10 * 2;
    }
}

コマンドプロンプトでexample.less のあるディレクトリに移動して
lesscコマンドを打ちます。

cd /the/path/to/example lessc example.less

lessファイルと同じディレクトリに、次のように展開されると思います。

// example.css :

#box1 {
    color: #003366;
    width: 100px;
    padding: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
#box1 p {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    width: 80px;
}

4. エディタから直接LESSする（Notepad++）

いちいちコマンドプロンプトでディレクトリ移動して～ってするのは大変面倒なので
lesscを登録してサクサク使いましょう。

1. コマンドのダイアログを表示します。

「プラグイン」>「NppExec」>「Execute」 （またはF6）

2. コマンドを追加します。

"C:\ruby191\bin\lessc.bat" "$(FULL_CURRENT_PATH)"

lessc.batまでのパスはインストールした環境に依存するので、ご注意ください。
「LESS」等の名前をつけてSaveしておきましょう。

5. DreamweaverからLESSする

Dreamweaverでもlessファイルを編集/展開出来るようにしておきます。
※当方の環境はCS3です。

1. コードビューで開けるようにする

「編集」>「環境設定」>「ファイルタイプ/エディタ」>「コードビューで開く」に.lessを追加

2. コードカラーリングを適用する

[DWのディレクトリ]configurationDocumentTypesMMDocumentTypes.xml を編集。
“css”等で検索して、次の箇所に加筆しましょう。

<documenttype id="CSS" internaltype="Text" winfileextension="css,less" macfileextension="css,less" file="Default.css" writebyteordermark="false"></documenttype>

これでコードビューでCSSのルールに則ってカラーリングされるようになります。

3. 外部エディタとして登録

本来であればコマンドとして登録したいのですが、ちょっと手強そうなのでまたの機会に。
「編集」>「環境設定」>「ファイルタイプ/エディタ」で、拡張子に「.less」を追加し、
プライマリエディタに「lessc.bat」を追加します。

4. テスト

「ファイル」ビューの中からlessファイルを選択して右クリックし、
「エディタを指定して開く」で「lessc」を選択。
一瞬コマンドプロンプトが開いた後、展開されたcssファイルが生成されます。

Dreamweaverの項はやっつけ感がありますが…
どなたかmxpで作ってくれちゃう人が現れる事をちょっと期待してます。

Zen-Codingの速さにも驚きましたが、
LESSもまた、Web開発を効率化してくれる素晴らしいソリューションだと思います。
是非一度お試しくださいませ。

LESS – Leaner CSS
LESSというのはCSSをより便利でスマートな記法に拡張する為のRubyプロジェクトですが、
そのJavaScript版が開発されている模様です。

LESSってなぁに

LESS – Leaner CSS
まずはLESSについて軽くメモ。
LESSはCSSに様々な機能を提供する為のプロジェクトです。
変数を扱ったり、関数のような記述をしたり、プロパティ内で計算したり…
さらには、無駄のないように最適化を施してくれます。なんという愛。

Ruby版の詳しい導入方法と記法は別記事を見ていただくとして、これは便利ですね。
重複した記述をしなくて済むようになりますし、
スタイルを一元管理し易くなります。
ネストする記法も直感的で大変分かりやすいです。

JavaScriptで動くLESS

そんなLESSをJavaScriptで動かす為のプロジェクトがこちらです。
lesscss – Project Hosting on Google Code
上記のリンクよりdownloadへ進んでスクリプトを取得しましょう。

簡単な使い方。

まずスタイルシートの拡張子を「.less」としてリンク要素で埋め込みます。

<link rel="stylesheet/less" href="style.less" />

次に、less.jsを読み込みます。（順番が逆ではいけません）

<script type="text/javascript" src="less.js"></script>

これであとはless.jsさんがstyle.lessの中身をLESSルールに則って展開してくれます。

※本稿執筆時のバージョンは1.0.22。IEではエラーが発生。
ChromeはローカルでのテストのみXmlHTTPRequestの都合上動きません。

nettuts+でチュートリアル動画が公開されていましたので、こちらもご参考迄。
Quick Tip: You Need to Check out LESS.js | Nettuts+

こんなふうに活用したい

静的なページスタイルを全てJavaScriptに依存してしまうのは、よろしくない。
現状の使い道としては、ローカルテスト用としてJavaScript版を使用して、
本番化の際にはRubyで書き出してリンクを貼りなおす、といった感じでしょうか

ただ、せっかくJavaScriptで開発してくれているので、
JSLintやZen-Codingのようにエディタのプラグインとして導入して、
編集しながら簡単に展開出来る！という形になれば素晴らしいですね。
Zen-Coding + LESSで開発速度が一気に加速しそうです。