ユーザ向けに使うライブラリを使いたいと思うかどうかは、UIが優れているかどうかに大きく左右されます。特にBootstrapが出てきてから、その傾向が強くなっているように感じます。 今回はReactと組み合わせて使うUIライブラリRebassを紹介します。実に57種類（執筆時点）もある、UIライブラリです。 Rebassの使い方 スクリーンショットを多めに、主立ったUIコンポーネントを紹介します。まずはアロー。 アバター。 ラベル。 ブロック。 引用。 パンくず。 ボタン。 丸形ボタン。 ドーナッツ型。 YouTubeの埋め込み。 フォームもあります。インプット。 パネル。 プログレスバー。 レーティング。 ウィザード風に。 スイッチ。 テーブル。 ツールチップ。 Rebassはこの他にもたくさんのUIコンポーネントが揃っています。これだけあれば、Webサイトを自由に作成できることでしょう。

Webサービスを提供していたり、スマートフォンアプリと連携するサーバを開発していたりすると必要になるのがWeb APIのドキュメントです。HTTPメソッド、パラメータ、返却値などが分かりやすく書かれている必要があります。 どういったドキュメントが読みやすいかは悩みどころですが、Slateは3ペインの構成になっていて見やすいのではないかと思います。ぜひご覧ください。 Slateの使い方 こちらがデモです。左が機能の一覧、中央が説明、右が実際のコードになります。 コードはShell、Ruby、Pythonで書かれています。 エラー時の内容も細かく書かれています。 Slateは一つのMarkdownファイルから生成されています。そのため単純なHTMLとして可読可能で、それをSlateを使って3ペインのより可読性高い形式にした訳です。Markdownで書く際に予めSlateの記法に沿って書いておく

lunr.jsはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 Webサイトを運営していて、煩雑な仕組みになりがちながらも実装を考えなければならないのが全文検索エンジンです。もし作ろうとしているのがWebアプリケーションであれば、いっそのことクライアントサイドで提供してみるのはいかがでしょう。lunr.jsを使えば手軽に実現できます。 デモアプリケーションです。左上に検索ボックスがあるのが分かるかと思います。 検索はインクリメンタルに行われます。ただし全文と言ってもタグとして指定された文字だけに限定されるようです。 インデックスの作り方です。まずindexとしてフィールドを作り、その後addメソッドを使ってオブジェクトを追加していきます。 lunr.jsではテキスト処理部分を別で設ける事ができますので非英語圏では別途分かち書きを行ってインデックス化でき

Dropzoneはファイルのドラッグ&ドロップによるファイルアップロードを可能にするJavaScriptライブラリです。 Gmailではじめ（恐らく）見て以来、様々な場面で見られるようになったWebブラウザへのファイルのドラッグ&ドロップでのアップロード機能ですが、より手軽に扱えるようにしてくれるライブラリがDropzoneです。 トップページです。 ファイルをドロップしました。画像はサムネイルが表示されます。 画像をアップロード中。平行して実行されます。 ファイルをドロップすると自動的にアップロードを開始してくれます。ドロップしたりアップロードが完了したりしたタイミングでイベントを実行したり、最大ファイルサイズ指定やサムネイルの表示設定など細かなカスタマイズができるようになっています。 DropzoneはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

Dashingはダッシュボード用ライブラリで、グラフを表示したり並び替えが自由にできます。 システムには必ず管理インタフェースがあります。表向き華やかでも、裏のシステムは中の人用とあって粗雑なUIであるケースが多いようです。そこで使ってみたいのがDashingです。 なんと奇麗なダッシュボード。 ドラッグアンドドロップによる配置換えも可能です。 自分の見やすいように配置を変更できます。 Dashingは数値やデータのリストを確認するのにぴったりなモダンなUIとなっています。細かなデータ管理ができる訳ではありませんが、ステータスをチェックしたりするのにぴったりです。APIが公開されているので、それにあわせてデータを配信すればDashingが華麗なUIにしてくれるはずです。 DashingはRuby製のオープンソース・ソフトウェアです。 MOONGIFTはこう見る Webサイトの表のUIが整っ

animate-textshadow.jsはjQueryによるアニメーションでテキストイフェクトをするライブラリです。 Web上でユーザアクションによるイベント実行をしたいと思うとJavaScriptを駆使して（またはjQueryのようなライブラリを使って）行うのが一般的です。今回はさらにCSSによるイフェクトを組み合わせたanimate-textshadow.jsを紹介します。 デモです。Click meをクリックします。 にょきっと影がつきました。 マウスオーバーによるアクションもできます。 単純な影ではなく、周囲に付ける効果もできます。 一気にぼわっと上にアニメーションが追加されました。 マウスオーバーでぼかしから戻すといった処理もできます。 animate-textshadow.jsはテキストのイベントでtextShadowといった指定でイフェクトを指定することでアニメーションを自

CSS Shaders with WebGLはWebGLを使ってCSS Shadersを実現するサンプル集です。 CSS Shadersという技術があります。CSSによって要素を変形させるもので、プログラマブルシェーダーというプログラミングによって制御します。それによって何ができるのかその一例としてみておきたいのがCSS Shaders with WebGLです。 カーテン表示。 マウスのポインターを拡大表示。 白黒に変換。 旗のように表示。 こんな感じに斜めに表示。 地図のように折り目のある表示。 デモ動画です。 CSS Shaders with WebGLはWebGLを使ってCSS Shadersを実現しています。通常であればGoogle ChromeのEnabls CSS Shadersというフラグを有効にしないと使えません。どんどん高度化していくWeb技術を垣間みれる、非常に面白い

ddSlickはドロップダウンメニューにアイコン、説明文を追加できるjQueryライブラリです。 常々HTMLのコンポーネントは貧弱だと思っていた。特にドロップダウンの使い勝手の悪さったらない。テキストしか表示できず、情報選択のUIとしてあまりに粗雑ではなかろうか。そしてみんなが望んでいたライブラリが登場した。それがddSlickだ！ 見よ、この格好いいドロップダウン！テキストに加えて画像が表示できるようになっています！ ダイナミックに変更も可能です。まず普通のドロップダウン。実にいけてない。 じゃじゃーん！ もちろん普通のドロップダウンライクに値が取得できます。選択した項目のデータも取れます。 外部から値を与えて表示項目を変更することもできます。 コールバック対応！ デフォルトの選択もできます。 画像を右に寄せられます。 さらに説明をつけて行ごとに高さを可変にもできます。 画像がない場合