List.jsはリストやテーブルを検索やソート可能にするJavaScriptライブラリです。 HTMLではよくリスト表示やテーブル表示を行います。一旦表示したデータを並べ替えたり絞り込んだりできる便利なライブラリがList.jsです。 基本のサンプルです。データがリストになって並んでいるのが分かるかと思います。 名前でソートしました。 カテゴリで絞り込んで表示しています。 検索です。インクリメンタルに絞り込まれます。 こちらはテーブルのサンプル。行ごとに削除、編集が出来ます。 曖昧検索です。多少文字が違っていても絞り込んでくれます。 データを動的に生成するサンプルです。1,000行程度であれば77msで生成できます。 検索です。こちらは12ms。高速です。 List.jsはデータをJSONで渡すことも、素のHTMLを対応させることもできます。検索で絞り込んだりデータを追加、編集するのも容易

KickstrapはBootstrapをベースにしたテーマ、プラグインを提供するソフトウェアです。 最近作られるWebサービスでよく使われているBootstrap。そんなBootstrapは固定色でそれっぽさが感じられてしまうのが欠点でしたが、見事に打ち消してくれるのがKickstrapです。 色が変わると随分印象が違います。 テーマ機能があります。 青と白。 こんな感じのシンプルなテーマも。 逆にカラフルなものもあります。 基本は同じですが、印象は違いますね。 好みのテーマを選べます。 JavaScriptプラグインがデフォルトよりもぐっと増えています。 Kickstrapを使えばBootstrapをより便利に使えるでしょう。JavaScriptプラグインも通知機能をはじめ、色々なものが追加されていますのでWebサイトをより強力にパワーアップできるはずです。 KickstrapはHTML

Dive Into HTML5はHTML5の何たるかを著したオンラインブックです。 これからHTML5の勉強をはじめよう、そう思い始めた人に読んでほしいのがDive Into HTML5です。HTML5の機能、特徴などについて網羅されたコンテンツです。 トップページです。ePubやPDFといった電子書籍ではないですが、書籍風に整った構成になっています。 段落分けされていて読みやすいです。 アクションのデモと、そのWebブラウザごとのサポート状況についても書かれています。 位置情報系のデモを試すと実際に有効にするかどうかの確認が出ます。 Dive Into HTML5は章ごとに分かれているので、自分の気になる部分だけを読んでも良いでしょう。ダウンロードしてオフラインでも読んでみたい便利なコンテンツです。 Dive Into HTML5はHTML5製のオープンソース・ソフトウェア（Creati

SpeedyFoxはFirefox、Thunderbird、Google Chrome、Skypeの設定を最適化して高速起動させるソフトウェアです。 Firefox、Thunderbird、Google ChromeさらにSkypeの動作が重たく感じ始めたら試してほしいのがSpeedyFoxです。起動が3倍も速くなる、と謳われているプロファイル最適化ソフトウェアです。 メイン画面です。Firefox、Thunderbird、Google Chrome、Skypeがインストールされていれば自動で認識されます。 完了しました。 SpeedyFoxは設定に使われているSQLiteを最適化してサイズを軽減しています。だいたい1〜2週間に一回程度行うと最適な状態が保たれるそうです。GUIの他、CUIでもできるので自動化しておいても良いかも知れません。 SpeedyFoxはWindows、Mac OS

jQuery.ganttViewはjQuery製のガントチャート表示ライブラリです。 jQueryを使ってガントチャートを表示するライブラリがjQuery.ganttViewです。表示だけでなくデータのメンテナンスもできるようになっています。 いい感じにガントチャートが表示されています。 ドラッグでタスクを左右に移動させられます。 期間の変更は枠の端をドラッグします。 データはJSONで与えるだけです。 jQuery.ganttViewは表示系のライブラリなのでデータベースに蓄積された内容をガントチャートにして表示すると言った使い方が便利そうです。なお表示はタスクごとに横に表示される形で、複数のタスクを同一線上に表示することはできないようです。 jQuery.ganttViewはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 MOONGI

Tower.jsはフルスタックのnode.js用Webアプリケーションフレームワークです。 こ、これはやばい…。ついにnode.jsの時代が来るかもしれない、そう感じさせるWebアプリケーションフレームワークがTower.jsです。 インストールはnpmで簡単にできます。 まず新しいアプリケーションを作成します。 Scaffoldで簡単にコントローラ、モデル、ビューを生成。 生成された際の構成はこんな感じです。 towerコマンドのオプションです。 Webサーバを立ち上げ場合です。 Tower.jsはMongoDBをデータベースに、Redisはバックグランドジョブ、CoffeeScriptをメインの記述に使いつつ、Jasmineをテストフレームワーク、jQueryも使えるフレームワークです。メール、マイグレーション、MVC、RailsばりのO/Rマッピング、バリデーション、ルーティング、B

FontomasはWebブラウザ上で任意のアイコンだけのSVG Fontsを作成できるソフトウェアです。 Web Fontsを使うと画像を使わずに素敵なフォントをオンライン上で使えます。しかしフォントを読み込むために転送量が大きくなってしまうのが欠点です。そこで使ってみたいのがFontomasです。SVG Fontsを使って自分で選んだアイコンだけをWeb Fonts化できます。 様々なアイコンフォントが並んでいます。自由に選んでいきます。 さらに色々なアイコンがあるので適当に選びます。 アイコンサイズを変更することもできます。 選んだものだけが抽出されます。 SVGが出力されました。これを使えばWebフォントとして使えます。 保存ダイアログです。 Fontomasを使えばフォント全てを読み込まずに選んだものだけを使えるようになります。そのためサイズが小さくなるのが利点です。また、複数のソ

Alwaysはnode.js開発時においてファイルの変更やクラッシュを感知してプロセスを再起動するソフトウェアです。 node.jsで開発していて面倒なのがソースを編集した後の反映でサーバを立ち上げ直さないといけないことです。そこで再起動の手間をなくしてくれるAlwaysを使ってみましょう。 インストールはnpmで一発です。 nodeコマンドの代わりにalwaysコマンドにするだけです。 起動しています。 コマンドオプションです。 Alwaysはソースの変更を感知してプロセスを再起動してくれたり、クラッシュした際にも起動し直してくれます。これで開発がとてもスムーズになるのではないでしょうか。 Alwaysはnode.js/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る Apache + PHPを使っていた時代に比べて現在はWe

Nideはnode.jsプロジェクト用のWebベースIDEです。Mac OSX向けアプリもあります。 ここ最近になってようやくWebベースのIDEが本格化してきました。Nideもその一つで、node.jsプロジェクトの開発に最適化されています。 Mac OSX向けにはバイナリも提供されています（今回はnpmでインストールできるものを使っています）。 npmで一発インストールできます。 最初に設定を行います（node.jsのプロジェクトで実行すれば必要ありません）。 ファイルの一覧が出ました。 ハイライトも行われていて編集も楽々です。 バージョン管理機能、Spaceです。Mac OSXのTime Machineライクで格好いいです。 package.jsonもメンテナンスできます。 フォルダの作成もできます。 NideではWeb上での編集に加えて、バージョンごとの履歴管理（これがアニメーショ

Twitter Bootstrap jQuery Mobile ThemeはTwitterのBootstrapとjQuery Mobileを組み合わせて使えるテーマ集です。 TwitterのBootstrapは最新版でスマートフォンにも対応しています。そしてスマートフォン向けのJavaScriptライブラリと言えばjQuery Mobileです。この二つを組み合わせて使えるのがTwitter Bootstrap jQuery Mobile Themeになります。 Aデザイン。 Bデザイン。全体として青。 Cデザインは赤。 Dデザインは緑。 Eデザインは水色。 Fデザインはオレンジ。 Twitter Bootstrap jQuery Mobile ThemeはjQueryとBootstrapを組み合わせ使えるテーマ集です。面白いのはA〜Fまでカラーが用意されており、data-themeを変更

GhostEditはリボン風UIをもったWebベースのWYSIWYGエディタです。 GhostEditは新規性あるWebベースのWYSIWYGエディターです。ボタンなどが大きくデザインされており、リボン風UIが使い勝手が良いです。 デモです。文字を選択しています。ハイライトはピンクのバックグラウンドになります。 画像の配置換えです。画像の上に矢印が出るので押すだけです。これが格好いい。 テキスト変更だけでなく、画像やリンクの挿入もできます。 リンクの上にマウスを置くと削除のフローティングが出ます。 保存機能もあります。 GhostEditに関する説明です。 GhostEditは周囲のコンテンツに馴染む形で作られており、これまでのWYSIWYGエディタとは一線を画しているように見えます。機能は他のエディタに比べると決して多くはありませんが必要最低限は用意されています。対応ブラウザはIE 6以

html5shivはIEをはじめとするHTML5非対応WebブラウザでHTML5のタグとスタイルを使えるようにするソフトウェアです。 HTML5のWebサイトを作りたいと思いつつ、IE向けのデザイン適用について心配する声は多数あります。そこで使ってみたいのがhtml5shivです。HTML5非対応のIEでもHTML5の要素を使ったデザインをサポートします。 例えばこんなデザイン。HTML5を使っていますがちゃんとスタイルシートが当たっています。 ソースコード。sectionタグなどを使っています。 まだ開発中ということもあって全てのテストが通る訳ではなさそうです。 別なソース。markタグを使ったり、jQueryも使えています。 こんな感じのグラフも描けています。 グラフのソース。おそらくCanvasタグで描かれているはず。 html5shivを使えばHTML5非対応のWebブラウザであっ

Tinyconは未読などの通知をWebブラウザのお気に入りアイコンの上に表示するソフトウェアです。 Webサービスでメッセージをやり取りしたり、チャットなどで新着通知を出したいことがあります。そんな時にタイトルで教える方法もありますが、Tinyconは面白いことにFaviconを使って通知ができます。 Faviconの下に数字が書かれています。数秒ごとに自動で繰り上がっていきます。 デモです。どんどん数字が繰り上がっていきます。 実装する際のコードです。数値を当てるだけの簡単な使い方です。 Faviconの画像に数値を重ねて表示する程度であればサーバサイドでも実装できるでしょうが、TinyconはリアルタイムにFaviconを変化させられる点が強みです。メッセージを受け取ったタイミングで変化させればユーザの気付きにも役立つことでしょう。 TinyconはJavaScript製のオープンソー

EnyoはHPがリリースしたWebアプリケーションフレームワークです。モバイル、デスクトップ双方で動作します。 EnyoはHPがwebOSのオープンソース化ロードマップとともに発表されたHTML5のWebアプリケーションフレームワークになります。特にスマートフォンに適したオブジェクト指向のフレームワークになります。 サンプルです。左側がコード、右側がその実行結果です。 ボタンを押すとテキストが追加されます。 同様に色が変わるサンプルです。 消したり表示したりします。 ボタンを追加していくサンプルです。 Flickr画像検索&ビューワーのデモです。 こちらはYouTubeの検索&ビューワーです。 ボールが落下するデモです。 WebKitに最適化されたモックです。 頭文字ごとにグループ化されたリストです。 ボタンです。 日付ピッカーです。 サンプルゲームです。同じ動物を縦横に3つ並べると消えま

FastPageは静的サイトを対象にしたWebサイト高速化ソフトウェアです。 Googleはページの表示速度を検索順位の要素に盛り込むようになっています。そうでなかったとしてもページが高速に表示されるのは良いことです。そこで既存のサイト構成そのままにサイトを高速化するFastPageを使ってみましょう。 ファイル構成です。 例えば実行したイメージです。普通にファイルの内容が返ってきますが、実際にはキャッシュが使われています。 FastPageではファイルサイズの小さい画像をHTML/CSS内にインラインで展開したり、JavaScriptもサイズが小さければHTML内で展開します。さらにファイルもGzipで圧縮して転送量を小さくする、キャッシュ（サーバサイド、クライアントサイド）の利用などの施策がとられています。 なお商用版ではAmazon S3やWindows Azureを使ったCDN配信

jDataViewはjQueryを使ったJavaScriptライブラリ解析用ライブラリです。 jDataViewはJavaScriptでバイナリデータを読み込む際に利用するDataViewを拡張し、より使いやすくしてくれるJavaScriptライブラリです。バイナリーハッカー必見のライブラリです。 こんなイメージデータをJavaScriptから閲覧できます。 tarファイルを読み込んでファイル構造やテキスト内容を表示しています。 テキストエリアの中にファイルの内容が表示されています。 jDataViewを使うとバッファーをその場で作ったり、バイナリファイルをAjaxで読み込んでgetStringで指定部分だけを取り出すことができます。DataViewをそのまま使うよりも便利そうです。 jDataViewはjQuery/JavaScript製のソフトウェア（ライセンスはWTFPL）です。 M

JsTemplateはGoogleが開発したJavaScript製のテンプレートエンジンです。 Webアプリケーションがさらに開発されていくために必要なのが高機能なJavaScriptテンプレートエンジンの存在です。幾つか出てきていますが今回紹介するのはかなり有力です。なぜならGoogleが開発したテンプレートエンジンだからです。それがJsTemplateです。 デモです。左上がテンプレート、右上がJSONの元データになります。 そして左下が実際に生成されたHTMLで、右下がレンダリング結果になります。 idを使ってテンプレート名を定義しています。 こういう風にデータがない場合のチェックもできます。 実際のコードです。jsdisplayのところに検証が入っているのが分かります。 データがある場合はもちろん繰り返し表示します。 実際のコードです。 JsTemplateは再帰処理ができたりev