tween.jsはActionScriptのTweenクラスを真似たJavaScriptアニメーションライブラリです。 かつてオンラインでアニメーションを表現しようと思ったならばFlashかGIFアニメーションを使うのが一般的でした。しかし今後JavaScriptの採用が増えていく中では別な作法を学ばなければなりません。そこで今回はJavaScript製のアニメーションライブラリtween.jsを紹介します。 デモ1。四角のエレメントが左右に動き回ります。 1,000本のバーが左右に動きます。 4096個のセルが徐々に色を変化させます。 グラフです。様々な描き方に対応しています。 動画の再生に合わせて右に動いていくデモです。同期されているのがポイントです。 デモ動画です。本当はもっと速く動きます。 tween.jsはActionScriptのTweenクラスを模して作られているとの事です。

BarkeepはGitリポジトリに対応したユーザビリティ高いコードレビューシステムです。 会社でプログラミングを行っているとそのコードの品質はばらつきが出てきます。そうするとバグが多くなったり、予期しない問題に直面したりします。それを防ぐのに有効なのがコードレビューです。Barkeepはユーザフレンドリーなコードレビューシステムになっています。 メイン画面です。コミットログが並んでいます。 詳細です。差分が表示されています。 サイドバイサイド。アニメーションしながら表示されて格好いいです。 コードをダブルクリックするとコメントできます。 コメントしました。 一つにまとまっている場合もコメントできます。 レビュー依頼もできます。 ステータスです。レビューされている、されていないといった情報が一目で分かります。 検索結果です。 こちらはプロフィール。 Barkeepは検索における入力補完やフィ

Sidetapはネイティブアプリライクな操作性が特徴のWebアプリケーションフレームワークです。 iOS向けにサービスを提供する場合ネイティブアプリを使うのとWebアプリケーションとの二つが選択肢になります。よりユーザがアクセスしやすいのはWebアプリケーションでしょう。そこでユーザ体験を良いものにすべくSidetapを使ってみてはいかがでしょうか。 最初の画面です。写真がたくさん並んでいます。 タップして拡大。横にスライドするのがネイティブアプリのようです。 左側にメニュー。Facebookのアプリのようです。 アプリの情報も出せます。 デモ動画です。滑らかな動きが特徴です。 Sidetapは写真のタイル表示、詳細表示、メニュー、インフォメーションウィンドウといった画面が特徴になります。全てのコンテンツは1つのHTMLファイル内に記述されるのも特徴です。あまり大きすぎないWebアプリケー

ErrorBoardはJavaScriptのエラーを監視してログに残してくれるソフトウェアです。 システムでエラーが起きればそれをログに残して対処するというのは一般的です。しかしサーバサイドと違ってJavaScriptでのエラーは意外と放置されているのではないでしょうか。そこで使ってみたいのがErrorBoard、JavaScriptエラーのログソフトウェアです。 エラーを取得しました。 エラーの詳細です。 ソースで見てエラーが起きた場所を確認できます。 対処したらチェックします。 ErrorBoardを使えばブラウザごと、時間ごとにエラーが起きた場所をログに残せます。後はそれぞれに必要な修正を行った後、対処済と印をつけていくのみです。ブラウザやバージョンによって動かないといったケースも考えられるだけに、設置しておくと様々なケースに対する対応が出来るようになりそうです。 ErrorBoar

WAMI recorderはJavaScriptから操作可能なFlash製の音声録音、再生ライブラリです。 HTML5が浸透しつつありますが、逆にJavaScriptでは出来ないもどかしい部分も明確になってきています。その一つにマイクロフォンへのアクセスがあります。しかしそんな時こそFlashと連携させれば良いのです。WAMI recorderを使えばオンラインの録音、再生環境が容易に実現します。 アクセス許可を求めるダイアログが出ます。 左側が録音、右側が再生ボタンになります。 WAMI recorderはごくシンプルなUIでボタンを押して録音、再生ができます。JavaScript向けのAPIも提供されていますのでWeb上で録音、再生環境が実現できるでしょう。WAMI recorderは録音したデータをPOSTで指定したURLに飛ばせるようになっています。その音声データを使えば面白いサー

Chronoline.jsは左右に展開するシンプルな年表ライブラリです。 万人誰にとっても共通で変わらないリソースが時間です。時間ごとに変化するデータ、その時に起きたイベントなどを見せるのに最適なのが年表です。そこで紹介したいのがChronoline.js、シンプルなUIのWebベースの年表ライブラリです。 日ごとの年表。左右への移動はスムーズです。 今日の日付部分が四角く囲まれています。 こちらは月ごと。メモリが大きくなっています。 Chronoline.jsは月、四半期、年といった単位で表示できるようになっています。プロットしたデータにはフローティングを使って情報を追加できます。イベントは日付とタイトルという形でハッシュを作り、それを配列としてJSONデータにするだけです。複雑な情報は表示できませんが、時間軸に沿って何が起きたのかといった表現に良さそうです。 Chronoline.js

OpenWeb Iconsはソーシャル系サービスを表現するのに使えそうなWeb Fontです。 文字の横にちょっとしたアイコンを載せるとその意味がぐっと分かりやすくなることがあります。そんな時にはこれまでごく小さなアイコン画像を使うのが一般的でしたが、今回はWeb Fontを使ったOpenWeb Iconsを紹介します。 サンプルです。 実例です。こういう使い方は良いですね。 HTMLでの指定方法です。Bootstrapライクです。 OpenWeb Iconsは現時点で19種類のアイコンが登録されています。EOT/WOFF/TTF/SVGで作成されており、それぞれをCSS上で読み込んで使います。なおBootstrapと組み合わせることで、Bootstrapのアイコンのように指定して使えるようになっています。クラス名に-coloredをつけるとカラーになります。 OpenWeb Iconsは

Table Sortingは既存のHTMLテーブルにソート機能を追加するJavaScriptライブラリです。 業務システムなどでテーブルを表示すると常に足らない機能を求められます。その第一が並べ替え機能でしょう。DBを操作しても良いですが、もっと単純に解決したいならTable Sortingを使ってみても良さそうです。 デモです。 カラムのクリックでソートが実行されます。 金額部分もきちんとソートされます。 JavaScriptのコードです。単純にクラスを指定するだけ。 HTMLのコードです。数値部分にも特に設定を行っていないところに注目。 Table Sortingは既存のテーブルを渡すだけで自動的にソート機能を追加してくれます。オブジェクトの型も判断して並び替えてくれるので手間いらずです。 Table SortingはJavaScript製、GPL v3のオープンソース・ソフトウェアで