Clusterize.js ブラウザ内で50万件のテーブルもサクサクで表示できるようにする「Clusterize.js」 ブラウザ内のDOMに５０万件を読むといくら高速なブラウザでもハングしたりしそうですが、こちらを使えば問題なく50万件のデータも読み込んで表示が出来ます DOM構造を50万件作るのではなく、スクロールに応じてDOM内を書き換えているのがその仕組のようです。 大量のデータをブラウザ上で一気に表示したい場合に便利そうです 関連エントリ 高機能＆高速なテーブル実装jQueryプラグイン「WATable」 テーブルをGoogle Chartsを使って多様なグラフに変換することが出来る「Chartinator」 HTMLテーブルを JSON、XML、PNG、CSV、PDFなどあらゆる形式に変換できる「HTML table Export」 レスポンシブに要素を消さずに変形するテーブル

Swagger: A simple, open standard for describing REST APIs with JSON WebAPIを綺麗にスタイルしてデモ付きでドキュメント化できる「Swagger」 TwitterやFacebook等、大きいサイトはAPIを提供して利用者が自由にアプリケーションを作成して便利に使えますね。 成功の理由にはAPIも大きく寄与していそうです。 そこで新しくWEBサービスを作る際にはMySQLなどを直接叩くのではなく、APIをまず開発するという開発手法を取っているところもあるのではないでしょうか？ APIをまず作っておいて、それをベースにサイトを作っていくとAPI作成の手間が省ける上にスケーラビリティなんかも確保しやすかったりで本格的にやる場合はよい開発手法な気がします。 そんなAPIを作ったはいいけどうまくドキュメントがまとめられていなかった

phpのserializeを使うより高速でサイズもコンパクトに仕上げる「MessagePack」とPHP拡張 2010年12月15日- The MessagePack Project phpのserializeを使うより高速でサイズもコンパクトに仕上げる「MessagePack」とPHP拡張。 結構前のエントリのご紹介なので知っている人も多いと思うのですがご紹介。 phpには serialize という関数があって、配列等の複雑なデータも文字列にして、ファイル等に保存し、後ほど unserialize 等で変数に戻せて便利なのですが、MessagePackとそのPHP拡張を使えば、より高速で、serialize後のデータも小さくできます。 MessagePack自体はkumofsの内部で使われていて、PHP以外にもc++, erlang, haskell, java, perl, pyth

サーバ監視に超使える〜topコマンドのまとめ サーバを運用しているとよく使うtopコマンドですが、標準のtop以外にも色々便利なものがあるのでまとめてみました。 ボトルネックといえば、ネットワーク、ディスクIO、スワップ、CPU、メモリといったものが関連しますが、ツールで視覚化することでより分かりやすい対策がとれますね。 htop こちらも、通常のtopよりもさらに多数の情報を表示してくれるツール。 CPUやメモリの状態が視覚的にグラフで表示されていたり、複数CPUがある場合もそれぞれに利用率を表示してくれてわかりやすいです。 pstreeで表示するようなツリー+topコマンドのような表示も t を押せば切り替えられます。 公式サイト上にある128コア積んだマシンのhtop結果が面白い。 次のようにすべてグラフで表示されているため、128コアあったとしても瞬時に負荷が把握できますね。 io

GoogleMapみたいに画像をズーム＆グリグリ移動できるjQueryプラグイン「Mapbox」 2009年12月01日- GoogleMapみたいに画像をズーム＆グリグリ移動できるjQueryプラグイン「Mapbox」。 自分で実装するとなるとかなり骨が折れそうなこの機能もjQueryプラグインで簡単に実装できるみたいです。 マウスホイールでズームし、ドラッグして地図移動が可能 ズームとか移動のコントローラーを付けることも可能で、これなら初心者にも簡単に気付いてもらえますね。 設置はjQueryを使うので、マークアップでズーム用に画像を数枚置いておき、$("#viewport").mapbox({mousewheel: true}); のように初期化するだけでOKです。 オプションも多数あるのでカスタマイズも出来ます。 ズーム前後に実行できるイベントハンドラも設定可能なので、柔軟性が高い

Chroma-Hash Demo 入力したパスワードをビジュアライズできる「Chroma-Hash」。 次のように、パスワードフィールドの横に３色の図形を描画できます。 ビジュアライズすることで、パスワードの確認に、同じパスワードが入っているかをチェックすることが可能です。 パスワードが違うと次のように色が違うので一目瞭然です。 パスワードフィールドは、●になっていて何が入っているか分かりませんが、このように色で再現されれば入力が分かるというわけですね。 ちゃんとしたライブラリを使わないと、この図からパスワードを推測されてしまうので注意は必要ですが、仕組みとして面白いですね。

JavaScriptでフォームの値をリアルタイムにバリデートするライブラリまとめ。 バリデートするライブラリも沢山でてきました。とここら辺で一度まとめておきました。 Really easy field validation (デモ) - 入力値がおかしいと、エラーメッセージをフェードインさせながら超クールに表示できます。 ※ ページの最後で使い方紹介（これは良いです） Remember the milk風の登録フォームも作れそう prototype.js依存。 Realtime validation using Ajax (デモ) - Ajaxなどを駆使して、入力値を動的にチェックするライブラリ Validate.js (デモ) - リアルタイムではないけど、入力値をチェックするためのライブラリ Tooltip for forms - 入力チェックではないけど、フォームの入力ヒントを出して

Apples To Oranges ? San Francisco Bay Area Visual and Experience Design Studio CSSオンリーでクールなグラフを書くサンプル集。 3つほど紹介されていてどれもクールで実用的。 1. まず、次のようなグラフを書くサンプル。 実際のHTMLコード <style> .graph { position: relative; /* IE is dumb */ width: 200px; border: 1px solid #B1D632; padding: 2px; } .graph .bar { display: block; position: relative; background: #B1D632; text-align: center; color: #333; height: 2em; line-height

PHPで画像を使わず、HTMLでグラフを描画するライブラリ:HTML-GRAPHS 2006年08月11日- Gerry's Script Library barLevelColor can now consist of as many level-color-pairs (in ascending order) as you like: PHPで画像を使わず、HTMLでグラフを描画するライブラリ:HTML-GRAPHS。 次のように、まるで画像をつかったかのようなグラフが簡単に描けます。 コードのサンプルは次のようにシンプルに使えます $graph = new BAR_GRAPH("fader"); $graph->values = "123;456"; echo $graph->create(); 関連エントリ PearのImage_Graphのグラフ描画サンプル

WebCron - Welcome Welcome on Webcron, the automated task service at set hours. If you know Unix or Linux you already heard about the Crontab. Webcron is a Web adaptation of this well known Crontab. But nothing complicated at all ! 一定時間ごとに指定したURLを叩いてくれるサービス、WebCronの紹介。 WEB上でタスクの予約を行うことが出来ます。 タイムゾーンが日本ではないので指定時刻に叩いてもらう場合などは正しく動作しないと思いますが、これまで欲しかったサービスです。 日本でもこういったサービス始まりませんかね。

tomas.epineer.se Asynchronous file upload with AJAX progress bar in PHP One of the few things that I find lacking in PHP is the ability to report the progress of a file upload. This means that file uploads, especially uploads of larger files, can be extremely frustrating for end users when they don’t know if the upload is progressing or if it has stalled or if it has even started. アップロードの進捗を表示しつつア

最近のＦｌａｓｈサイトは凄いです＾＾； Ｆｌａｓｈバージョン8になって使えるエフェクトなんかも増えていって今後もますますカッコいいサイトが出てくるのが楽しみです。 こういったカッコいいサイトを効率よく探す検索エンジンなど出てきたら面白そうですね。 Webデザイナーのためのリンク集 powered by webshot