XDate

XDate – A Modern JavaScript Date Library

Dateをもっと便利にした XDateオブジェクト を実装するライブラリです。 使い方はDateとほとんど変わらず、XDateに引数を渡して初期化して使います。

XDateオブジェクトは、DateにあるsetTimeやgetFullYearなどのメソッドを継承している他、 日付の足し算を行ったり、差分を計算したり等便利なメソッドが沢山生えています。

var d = new XDate(1977, 10, 25); // 1977/11/25のXDateオブジェクトを生成
d.addDays(14); // 14日足してみる
d.diffYears(new XDate()); // 今日との差分を取得する
d.toString("yyyy年M月d日 HH:mm"); // フォーマットした文字列を取得

Dateにないけど欲しかった機能が一通り手に入り、 且つDateの実装からあまり離れていないので使いやすいです。 大抵の物はこれでカバーできそうですね。

また、あまり世話を焼かないタイプのライブラリなので、サイズも小さくまとまっています。

Moment.js

Moment.js | Parse, validate, manipulate, and display dates

こちらもDateオブジェクトのラッパーのMomentオブジェクトを実装するライブラリですが、 メソッド群はXDateと違ってDateオブジェクトを模した形にはなっていません。

Momentオブジェクトの初期化は new を使わずに moment() に引数を渡しておこないます。

var m = moment(); // 現在の日付時刻のMomentオブジェクト

多彩なパーサー

そして注目すべきはその多彩なパーサーです。 引数に値を渡して日付・時刻を指定したMomentオブジェクトを生成出来るのはDateと同じですが、 moment() は様々な形式に対応する事ができます。

これもまだ一部ですが、例を挙げます。

moment("1977/11/25"); // 文字列
moment([1977, 10, 25]); // 配列
moment("1977-11-25", "YYYY-MM-DD"); // フォーマットを指定した文字列
moment("25-11-1977", ["YYYY-MM-DD", "DD-MM-YYYY"]); // フォーマットを複数指定した文字列

フォーマットの指定はすごく便利ですね。しかも配列で渡せば複数のフォーマットでチェックを行なってくれます。

その他機能

var now = moment();
now.add("days", 30); // 30日足す
now.subtract("days", 90); // 90日引く
now.format("YYYY/MM/DD"); // フォーマット
now.fromNow()); // "2 months ago"

fromNow() はTwitter等のWebサービスでよく使われる 「〜時間前」 といった表現を簡単に実装してくれます。 デフォルトは英語ですが、同梱された言語ファイルで簡単に日本語化できます。親切。

その他にも、ここではとても紹介しきれない程に機能満載なライブラリです。 また、その分少しファイルサイズがかさんでしまう側面も。

Humane-Dates

zachleat/Humane-Dates

「〜時間前」 のような表現を実装してくれる為だけの、非常にショートでシンプルなライブラリ。 “human” ではなく “humane” なので間違えぬよう。

cf) humaneの意味 – 英和辞典 Weblio辞書

humaneDate("1977/11/25"); // "36 years ago" （執筆時点）
humaneDate("1977/11/25", new Date()); // 第二引数と比較ができる

jQueryを読み込んでいれば、jQueryプラグインとしても機能するようです。

残念なのは、Moment.jsのように多言語化していないのと、 その為のインターフェイスを持ちあわせていない事。 日本語化する為には、コード内の “lang” オブジェクトを直接編集する必要があります。

単機能なのでコンパクトさが売りです。 コレだけが欲しい、という時には選択肢に入るかもしれません。

node-date-utils

JerrySievert/node-date-utils

node-data-utilsは、Dateオブジェクトを拡張するPolyfillです。 下の例はほんの一部ですが、Dateに追加される機能はシンプルで基本的な物です。

// スタティックなメソッド
Date.yesterday(); // 昨日のDateオブジェクトを返す
Date.tomorrow(); // 明日のDateオブジェクトを返す

// インスタンスのメソッド
var format = "YYYY年MM月DD日";
var d = new Date(1977, 10, 25);
d.toFormat(format); // 1977年11月25日
// 1年と2ヶ月と3日を足す
d.add({
    years: 1,
    months: 2,
    days: 3
});
d.toFormat(format); // 1979年1月28日

add に負の数を渡せば引き算にもなります。

node-date-utilsはDateのprototypeを拡張する事になるので、 あなたの環境・主義がそれを許すならば使ってみても良いのではないでしょうか。

まとめ

本当は datejs の実装が面白かったので紹介したかったのですが、 数年アップデートされておらず、試してみたもののうまく動かない物が多かったので、残念ながら諦めました。

日付の出力はWebサービス等で頻繁に行うと思いますので、 開発者の皆さんに感謝しつつ、できるだけ楽をしましょう。

なにをしたいのか

例えば、フロートなどで横並びにした要素があって、それぞれの高さを揃えたい時があります。

こんな感じに。この処理をしてくれるライブラリを書いてみます。

書いてみた物

jQuery.lineUp

使い方

例えばこんな要素があるとして

<div class="items">
    <!-- 異なるコンテンツ量のブロック達 -->
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
</div>

こんなスタイルが当たっているとします。

.items {
    overflow: hidden;
}
.items .item {
    float: left;
    width: 200px;
    ...
}

この .item に対して整列の処理を行いたい場合は次のようにします。

$(".item").lineUp();

オプションを渡して設定ができます。

$(".item").lineUp({
    onResize : false,
    onFontResize : false
});

オプションの詳細や、その他の細かい機能等は README をご参照ください。

また、Ajax等で要素の高さが変わるような場合、 非同期処理のコールバックなどで再度同じセレクタに対してlineUpを実行するとリフレッシュされます。（追記:2013/3/4）

主な特徴

JavaScriptでこの処理を行うにあたって色んなアプローチがあるとは思いますが、 注意してみたのは次のような点です。

行毎に高さを設定する

行毎に最大の高さを求めて、その高さにあわせてheightを更新します。

他の類似ライブラリ等では、行のグループ分けをクラス名で行う物などがありましたが、 今回は自動で行を判定して一行ずつ処理しています。 判定材料には jQuery.fn.position().top を使いました。

ウィンドウサイズ・文字サイズ変更時に自動更新する

これは他のライブラリでも多く実装されていますね。 設定で無効にする事もできます。

script要素のdata-*属性でセレクタを設定する

jquery-lineup.js を読み込んでいるscript要素のdata-lineup-selector属性を設定する事で、 そのセレクタに対してdomreadyのタイミングでjQuery.fn.lineUpを実行します。

<script src="assets/js/jquery-lineup.js" data-lineup-selector=".item-a, .item-b"></script>

これは次の内容と同じ処理をします。

<script src="assets/js/jquery-lineup.js"></script>
<script>
$(function(){
    $(".item-a").lineUp();
    $(".item-b").lineUp();
});
</script>

JavaScriptファイルを連結してミニファイしたりする場合にはちょっとアレですが、 そうでない場合には便利かもしれないのでつけてみたオマケ機能です。

まとめ

車輪の再発明ですね。

私自身、そういうレイアウトを組む必要性にあまり出会ったことはないのですが、 必要になった時にまた実用してみたいと思います。

2013/3/4

バグを見つけたので修正。ついでに非同期処理に関して追記

TumblrPostsとは

• Js-tumblrposts.js by mach3

TumblrPostsは、「Tumblrでタグリスト/新規投稿リストを出力してみる」で紹介したjQueryプラグインです。

TumblrのAPIでは、最新のポストのリストを取得する事ができますが、 タグの一覧を取得する方法が無かった為、それを可能にする為のライブラリです。

新しいTumblr APIについて

今現在、Tumblrからは新しいAPIが提供されています。

• API | Tumblr : 新しいAPI
• Tumblr API v1 | Tumblr : 古いAPI

（投稿リストを取得する上で）大きく変わったのはAPI Keyを必要とするようになった点、 それから最大取得件数が50件から20件に減った点です。タグ自体のリストの取得機能は今見る限りではなさそうです。

TumblrPostsはAPIへのリクエストを繰り返して投稿リストをまとめていくタイプのライブラリなので、 最大取得件数が半分未満に減る事で、リクエスト回数が倍以上に膨れ上がる事になります。 投稿数が多いブログではパフォーマンスに大きな影響を与えるので、ちょっとまずそうですね。

そういったわけで、今回のTumblrPostsでも引き続き旧バージョンのAPIを使用します。 旧バージョンの提供がなくなったり、新バージョンでの機能強化があったらその時にまた考えます。

新しいTumblrPostsの主な変更点

基本的な使い方はそのままに、下記の点を修正しています。

1. 依存ライブラリをjQueryのみに（jquery.class.jsから切り離しました）
2. jQuery.on/off に対応（bind/unbindも引き続き使えます）
3. 取得件数の設定を詳細に
4. getTags()のソートの初期設定を変更

4について、旧バージョンでは投稿数での降順にソートされていましたが、 デフォルトではソートなしで、引数でソートの方向を指定出来るようにしました。

使い方

基本的な使い方

旧バージョンから大きな変更はありません。

// インスタンスを生成
var myTumblrPosts = new TumblrPosts();

// 読み込み完了時のイベントハンドラを設定
myTumblrPosts.on("complete", function(){
    var $ul, tags;

    // getTags() : タグリストを取得
    tags = this.getTags();
    $ul = $("<ul>");
    $.each(tags, function(i, tag){
        $ul.append(
            $("<li>").text(tag.name + " (" + tag.count + ")")
        );
    });

    $ul.appendTo( $("#your-own-container") );
});

// 読み込みを開始
myTumblrPosts.run();

タグリストのソート

getTags() の引数に “asc” または “desc” を渡すと、投稿数でソートを行います。
引数がない場合は、ソートを行いません。

myTumblrPosts.getTags("asc"); // <= 投稿数の少ない順にソート
myTumblrPosts.getTags("desc"); // <= 投稿数の多い順にソート

まとめ

TumblrPosts.js のダウンロードはこちらから。

» Js-tumblrposts.js by mach3

昔書いた物の粗が見えるようになるのは、成長の証でしょうか。

jQuery.class.js

• mach3/js-jquery-class – GitHub

Prototype.jsライクなclassを生成する為のシンプルなライブラリ。
cf ) jQueryでPrototype.js風のクラス定義をしてみる | Mach3.laBlog

更新内容

• jQuery.on/off()でイベントを扱えるようにしました

これだけです。
jQuery 1.7+ で使えるようになったon/off()メソッドに対応しました。
従来通りbind/unbindも使えます。
また、あわせて例示を大きく改めました

var Data = Class.create();
Data.prototype = {
    EVENT_ITEM_ADDED : "item_added",
    items : [],
    addItem : function(){
       for(i in arguments){
          this.items.push(arguments[i]);
       }
       this.trigger(this.EVENT_ITEM_ADDED);
    },
    getItemCount : function(){
       return this.items.length;
    }
};

var myData = new Data();
var onAdded = function(){
    console.log("Items added. I have " + this.getItemCount() + " items now.");
};

/**
 * on()でイベントリスナの追加
 * bind()でも可
 */
myData.on(myData.EVENT_ITEM_ADDED, onAdded);
myData.addItem("hoge"); // => Items added. I have 1 items now.
myData.addItem("fuga","foo","bar"); // => Items added. I have 4 items now.

/**
 * off()でイベントリスナの解除
 * unbind()でも可
 */
myData.off(myData.EVENT_ITEM_ADDED, onAdded);
myData.addItem("piyo"); // (nothing occurs)

また、少し自分でまともに運用してみて、欲しいメソッドがあれば新たに生やすかもしれません。
何かありましたらどうぞ。

Nettuts+ Fetch ってなに？

• Introducing Nettuts+ Fetch | Nettuts+

Nettuts+ Fetchは、名前の通り、Nettuts+からリリースされたSublime Text用のプラグインで、
外部リソースを簡単なコマンドで手元にpullする事ができます。

例えば、普段からよく使うjQueryやリセット用のCSS、
常用するフレームワークや、Wordpress等のCMS等、
設定さえしておけば、コマンド一発（正確には三発）でダウンロード・展開してくれます。

新規プロジェクト用に各種ファイルをセットアップする際に、
一々最新版を公式からダウンロードして設置して…という手間が省ける上、
Sublime Textをメインエディタにすればそのまま作業に移れます。
スタートアップがかなり捗りそうですね。

前準備

Sublime Textのインストール

• Sublime Text – Download

これが無いと何もはじまりはしないので。
2012年1月7日現在ではβ版のバージョン2を入れて見ました。
ちなみに執筆当初1ライセンス$59で、無料でお試しして良いよとの事。

Sublime Package Control のインストール

Sublime Textは「Package Control」という拡張を使うことで
追加のパッケージをサクサク検索・インストール出来ます。
是非入れておきましょう。

Sublime Package Control – a Sublime Text 2 Package Manager by wbond

1. メニューから、“View” > “Show Cnsole” でコンソール窓を表示。
2. 下記の公式のワンライナーを入力してEnter。
3. Sublime Textを再起動して完了。

import urllib2,os; pf=’Package Control.sublime-package’; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),’wb’).write(urllib2.urlopen(‘http://sublime.wbond.net/’+pf.replace(‘ ‘,’%20’)).read()); print ‘Please restart Sublime Text to finish installation’

（執筆当初のコードです。念の為公式での確認をおすすめします。）

Nettuts+ Fetch を使ってみよう

いよいよ件のプラグインをインストールします。
全入力しなくともコマンドパレットが補完してくれるので楽々安心ですね。

1. コマンドパレットを表示。（Mac:⌘+Shift+p / Win:Ctrl+Shift+p）
2. “Install Package”
3. “Nettuts+ Fetch” を選択・インストール

jQueryとhtml5-boilerplateははじめから設定されているので
試しにこれらをテストしてみましょう。

jQueryを引っ張ってくる (単体ファイル）

1. コマンドパレットを開く。
2. “Fetch” > “Single File” > “jQuery”
3. 現在開いているバッファーがあればそこに、無ければ新たな「untitled」に内容がペーストされます。

html5-boilerplateを引っ張ってくる（zipファイル）

1. 作業用のフォルダを開く。
2. コマンドパレットを開く。
3. “Fetch” > “Package File” > “html5-boilerplate”
4. 複数のフォルダがある場合は、確認を促されます。
5. 選択したフォルダにダウンロードしたzipの内容が展開されます。

設定を足してみよう

設定を足してやれば、勿論その他のパッケージを引っ張って来る事ができます。

1. コマンドパレットを開く
2. “Fetch: Manage remote file”
3. 開かれた設定ファイル（Fetch.sublime-settings）を編集

{
    "files":
    {
        "jquery": "http://code.jquery.com/jquery.min.js"
    },
    "packages":
    {
        "html5-boilerplate": "http://github.com/h5bp/html5-boilerplate/zipball/v2.0stripped"
    }
}

これがデフォルトの状態。JSONで管理されているので編集も楽です。

WordPress日本語版の最新バージョンを引っ張ってこれるように設定してみます。
最新版の場所を教えてくれた@understandardさんにこっそり感謝。

{
    "files":
    {
        "jquery": "http://code.jquery.com/jquery.min.js"
    },
    "packages":
    {
        "html5-boilerplate": "http://github.com/h5bp/html5-boilerplate/zipball/v2.0stripped",
        "wordpress-ja": "http://ja.wordpress.org/latest-ja.zip"
    }
}

これで、“Fetch” > “Package File” > “wordpress-ja” で
Wordpressが好きなフォルダに展開されます。

俺々フレームワーク等もGithubなりGistなりでWeb上にあげておけば簡単にpullできますね。

まとめ

Fetchコマンドもさることながら、このSublime Textというエディタ、かなりよさそうです。
拡張性も高く、既に多くのプラグインがリリースされている他、
Viキーバインドでも使う事ができます。

まだβ版でバグも多いそうですが、今後チェックしていきたいですね。

placeholderについて

何も入力されていないテキストインプットに、
例えば「名前を入力してください」的なガイドテキストを薄く表示させる為の属性。
IEをのぞく多くのモダンブラウザでは既に実装されています。

ちなみにこんなやつです。↓

何を入力したらいいのかがわかりやすい！

• The Current State of HTML5 Forms · Wufoo

こちらのリンク先では、フォームエレメントにかかわる新機能の
各ブラウザの対応状況が紹介されていました。
IE9があまりにも残念で私は悲しい。

JavaScriptで実装してみる

どのブラウザでも使えるようにするために、JavaScriptで実装してみます。
仕組みはシンプルに。

1. placeholder属性のかわりにdata-placeholder属性でガイドテキストの値を設定する
2. blurの時にvalueが空っぽだったらdata-placeholderの内容に差し替える
3. focusの時にvalueがdata-placeholderの内容と同じ場合は空っぽにする
4. ガイドテキスト表示時のCSSクラスを用意する

作ってみたもの

ソース

mach3/js-jquery-placeholder – GitHub

デモ

jquery.placeholder.js – jsdo.it – Share JavaScript, HTML5 and CSS

使い方

HTML

<input type="text" value="" data-placeholder="Input your name" class="mytext" />

data-placeholder属性に表示させたいガイドテキストを入力します。

CSS

.jquery-placeholder {
    color:#cccccc;
}

ガイドテキスト表示時のスタイルを設定。
初期設定では、jquery-placeholderクラスとなります。
JavaScriptのオプションで変更できます。

JavaScript

$("input.mytext").placeholder();

クラスの設定を変更したい場合は、文字列またはオブジェクトで引数を渡します。

$("input.mytext").placeholder({
    defaultClass : "myclass"
});
// または
$("input.mytext").placeholder( "myclass" );

注意事項

（2011/03/31 18:20　追記）

このスクリプトですが、いくつか問題があります。

1. アラートでblurイベントがスルーされる
2. 送信時に値をクリアしないとplaceholderの値を送ってしまう

2番目の問題については、つい先ほどオプション「resetOnSubmit」を追加しました。
これをtrueにするとsubmit時にplaceholderの値から変わってない場合は値をクリアします。
なぜわざわざオプションにしたのかというと、
Ajaxとかでフォームを使いたい時にクリアしないほうが都合がいいケースもあるかな？と。

1番目はちょっと調査＋考え中…。

まとめ

IEが最新版の9でも対応してないというのは若干ショックではありますが、
見た目的にも使い勝手的にも取り入れたい表現ですね。

2011/3/31 18:20

オプションの追加、注意事項追記

ソース

mach3’s js-jquery-class at master – GitHub

あるの？ないの？console.log

引っかかったのは、インスタンスにlogメソッドを生やしている部分。
console.logの有無で分岐をした…つもりだったんですが、

if( $.isFunction( console.log ) ){ ... }

当たり前なのですが、
console.logが、というかconsoleがなければここで処理は止まってしまいます…。
なんでこんなのに気付かなかったのかというと、IE8で処理が止まらなかったから。
なぜなら、consoleもconsole.logも有るから！（実は知らなかったーー！！）

そんなわけで、条件を修正。
なんかもうちょっとスマートに書きたいですが…

typeof(console)!=="undefined" && typeof(console.log)!=="undefined"

IE8の開発者ツールをちゃんと使って無かったって事ですね。反省。
でも次からは楽になりますね！

追記 : 2013/10/13

実は、これでいいですよね。

!! window.console && !! window.console.log

この不具合、特別必要なかったオマケ機能だった事もあって、結構悔しいです…

ページを移動させずにサクサクと展開していくのがAjaxコンテンツの魅力ですが、
移動しないが故にURLとしてセッションを保持出来ないという弱点があります。
オーソドックスな解決法は「location.hash」を用いる物ですが、
その処理を簡単にしてくれるのがSammy.jsです。

おおざっぱな話

Sammy.js

Sammy :: Quirkey.com

Sammy.jsは、location.hashを用いたルーティングを
効率化してくれるjQueryプラグインです。

location.hashとは

通常ページ内リンク等に使用される、
URL末尾の#に続く文字列の事。

http://www.example.com/hoge.html#foobar

簡単な使い方

先ず、$.sammy()を使用してルーティングを定義します。
myRouteにはSammyオブジェクトが渡されます。
※あとで初期化を行う為に格納しておきます

var myRoute = $.sammy(function(){
    this.get("#/home", function(){
        // #/homeにアクセスした時の処理
    });
    this.get("#/profile", function(){
        // #/profileにアクセスした時の処理
    });
    this.get("", function(){
        // location.hashが空だった時の処理
    });
});

定義する為に用意されたgetメソッドには、
第一引数にlocation.hashの値、
第二引数に実行したい処理（function）を渡します。
※get以外にもpost等がありますが、公式に任せて割愛

ルーティングを初期化する為には、runメソッドを呼びます。

$(function(){
    myRoute.run();
});

とても簡単ですね。

正規表現を使って一括管理

getメソッドの第一引数は、文字列の他に正規表現も渡せます。
これを使用して一つのfunctionで一括管理する事も出来ますね。

this.get( /^#\/[a-zA-Z0-9_-]+$/ , function(){
    switch( this.path ){
        case "#/home" :
            // do something
            break;
        case "#/profile" :
            // do something
            break;
        default:
            this.redirect("#/home");
            break;
    }
});

さりげなく使ってる、this.pathとthis.redirect()ですが、
function内のスコープはSammyオブジェクトになっていて、
色々な便利な機能が使えます。

path

location.hashの値が格納されています

redirect()

文字通り、別のlocation.hashにリダイレクトします

他にも色々ありますが、詳しくは公式のドキュメントをご参照ください。
Sammy – Documentation – API :: Quirkey.com

デモページ

デモページは閉鎖しています。

内容はやや複雑化してますが、
基本的にはそれぞれのリンクに相応するファイルをAjaxで読み込んでいるだけです。
ファイルが見つからない場合はconfirmでHomeにリダイレクトするか、
history.back()させるかを選択させています。

まとめ

postメソッド等を利用することでAjaxで展開するカートなんかが作れるようで、
チュートリアルも公式に掲載されていました。
Sammy – Tutorials :: Quirkey.com

似たような働きをするライブラリにFlash向けのswfaddressなんていうのもありましたね。
Sammy.jsはjQueryプラグインということもあって導入しやすく、期待大です。
色々試してみよう…