ストレスフリーな通知システム·Alertify MOONGIFT
Alertifyはスライドして表示されるアラートダイアログです。シンプルな見た目で使い勝手が良いです。 Webシステムを開発していて意外と面倒くさいのがアラートではないでしょうか。入力エラー、設定完了など様々なアラートが存在します。そんな機能をいい感じに提供してくれるのがAlertifyです。 アラートボックスです。上から出現します。 確認ダイアログです。 OKを押したかキャンセルを押したかもちゃんと取得できます。 インプット付き。 ボタンと入力内容が取得できます。 ボタンのラベルは変更可能です。 ログメッセージもカスタマイズ可能です。 Alertifyはダイアログを上から下にスライドしながら表示し、その結果を右下に表示します。どちらも必要に応じて使い分ければ良いでしょう。ログメッセージは数秒経つと消えます。汎用性高く色々な場面で使えそうなソフトウェアです。対応ブラウザはIE7以降で、An
node.js/Meteor製のソーシャルニュース·Telescope MOONGIFT
TelescopeはMeteorを使ってリアルタイム性を高めたソーシャルニュースサービスです。 日本では今ひとつですが海外ではHacker NewsやRedditをはじめソーシャルニュースは人気のサービスです。そんなソーシャルニュースサービスをMeteorを使って構築したのがTelescopeです。 トップページです。かなり整った、すっきりしたインタフェースです。 クリックするとすぐに記事に飛べるのも好感です。 コメントボタンを押すとコメントが表示されます。 シェアボタンで外部サービスのシェアが可能です。 Telescopeは他のサービス同様に良いと思った記事やコメントにプラス（またはマイナス）の投票をすることで人気をコミュニティベースで上下させられます。また自分でニュースを投稿したり、コメントすることもできます。 TelescopeはMeteor/node.js製のソフトウェア（ソースコ
表示位置をいい感じに調整してくれるネットワークグラフ·Springy MOONGIFT
Springyはネットワークグラフにおいてノード同士の表示を自動的に調整してくれるライブラリです。 オブジェクト同士の関連性からトレンドを見いだすのに使われるネットワーク図。そんなネットワーク図の表示において多数のオブジェクトが重なってしまう…といった時にはSpringyを使ってみましょう。 デモです。関連性が適切に見えます。この位置まで自動で調整されるのがSpringyの特徴です。 向きが変わったとしても大丈夫。 こんな感じに交わっていたとしても… 最終的にちゃんと調整されます。 Springyはこのレイアウトを決定するアルゴリズムを備えています。パラメータを自分で調整することもできますが、かなり高いレベルで表示が調整されるので殆どデフォルトのままで問題ないのではないでしょうか。 SpringyはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 MOO
Web上で画像の範囲を指定できる·imgAreaSelect MOONGIFT
imgAreaSelectは画像の切り抜きに役立つ範囲選択機能を提供するjQueryライブラリです。 ユーザにアップロードされた画像の一部を切り出してアイコンに使うと言ったような操作はよくあります。そんなUIをjQueryを使って実現するのがimgAreaSelectです。 一例です。 選択されていない場所はグレーになるので分かりやすいです。 各ポイントの数値が取れます。 imgAreaSelectではユーザが縦、横の長さを自由に変更できる他、比率固定でサイズを変更したり、あらかじめ決められた場所に選択範囲を置くと言った指定ができます。切り抜く箇所や大きさの値が受け取れるので、後はサーバサイドで切り抜き処理を行えば良いでしょう。 imgAreaSelectはjQuery/JavaScript製のオープンソース・ソフトウェア（GPL/MIT License）です。 MOONGIFTはこう見る
フォーム入力内容をローカルストレージに保存·Garlic.js MOONGIFT
Garlic.jsはフォーム入力データをローカルストレージに保存し、再読み込みしても復元してくれるソフトウェアです。 Webサイトフォームへの入力において間違ってウィンドウを閉じてしまったり、何かエラーがあったために全ての入力結果が消えてしまったなんていうと非常にがっかりします。それを防止できるのがGarlic.jsです。 テキストボックス、テキストエリアに適当な文字を入力します。リロードしてもちゃんと入力が保持されています。 Ajaxベースの入力エラーチェックにも対応しています。 今のところ、テキストボックスとテキストエリアのみ対応しているようです。指定した項目だけ対象外にもできます。今後、ラジオボタンやチェックボックスなどにも対応が願われます。 Garlic.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る 最近ではモ
くるくる回る巻きすのようなアニメーション·Makisu MOONGIFT
MakisuはCSS/JavaScriptを使って巻きすのようなアニメーションを行うライブラリです。 Makisuの面白さはあえて語らず、そのアクションを実際に見てもらうのが良さそうです。以下よりぜひ！ パタパタと広がっていくのが印象的です。 広げることも逆に折り畳むこともできます。 デモ動画です。 CSS 3Dがサポートされていないといけないので、Operaは使えずIEも10以上から対応となっています。ソフトウェア名通り、巻きすのようにパタパタと折り畳まれていく様子は面白いです。最後の1回だけ逆側に折り畳まれるので、メニューのヘッダーが見えているというのも細かく気が配られています。 MakisuはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る HTML5によってユーザ体験をどれくらい変えられるのか、既存のHTML4を捨ててま
iPhoneの傾きを使って見せ方を変える画像ビューワー·lenticular.js MOONGIFT
lenticular.jsはiPhoneの傾きにあわせて表示を変える画像ビューワーです。 iPhoneなどのスマートフォンでは傾きを検出できる機能があります。それを使った面白い画像ビューワーがlenticular.jsです。 美女が布を巻いて立っています。マウスを動かしてみましょう。 マウスの動きにあわせてくるくると回ります。 左右はもちろん上下にも動きます。 こちらはおっさん。おっさんも動きます。 車。これは面白い見せ方です。 こちらはiPhone版。 格段に大きい写真でくるくる。 iPhoneで車を表示した場合。 タネを明かせば当然画像がたくさん作られています。 lenticular.jsはたくさんの画像をマウスや加速度センサーの動きにあわせて差し替えることで動きを演出しています。フレームをより細かくすればするほど滑らかに動くようになります。 lenticular.jsはJavaScr
意外と実用的。Webブラウザで指先を使ってページ送り·Webcam Swiper MOONGIFT
Webcam SwiperはWebブラウザ上でWebカムの映像を解析し、ページ送りを行うライブラリです。 HTML5のgetUserMediaが一般化してきたことで、Webブラウザ上でWebカムを使って楽しむソフトウェアが増えてきました。今回紹介するWebcam Swiperもその一つ、マウスに触れずにページ送りを実現するソフトウェアです。 最初のアクセス時にWebカムへのアクセスが求められます。 許可すると通知が出ました。 分かりづらいですがデモです。マウスは動かしていません。 実際の認識率から言うとそれほど高くなかったりします。誤動作してしまうケースもありました。しかしWebブラウザだけで指を動かしてページ送りができてしまうというのは新しい体験で非常に面白いです。 Webcam SwiperはHTML5/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。
可読性、ユーザビリティを向上させるテキストハイライトライブラリ·Fokus MOONGIFT
Fokusは選択した文字の周囲だけをハイライト表示させるJavaScriptライブラリです。 ユーザビリティを高めるアイディアの一つとして、ユーザが行ったアクションに対してその場で応えるというのがあります。今回はそのためのライブラリFokusを紹介します。選択した文字周辺だけをハイライトするJavaScriptライブラリです。 最初の表示です。 適当に文字を選ぶとその部分だけがハイライトされます。 選択する文字を変えれば当然ハイライトも移動します。 複数の段落にまたがればハイライトも大きくなります。 目立つのでコピーしやすくなりそうです。 Fokusはニュースや論文、ブログ記事など長文が多いサイトにおいて用いると読みたい部分だけに集中できて便利かも知れません。フォーカスが変わった時のアニメーションもスムーズでストレスなく読み進められそうです。 FokusはJavaScript製、MIT L
オブジェクト同士の関連性から価値を見いだそう·VivaGraphJS MOONGIFT
VivaGraphJSはオブジェクト同士の関連性をビジュアル化するJavaScriptライブラリです。 最近はソーシャルサービスが流行です。そこで求められるのはユーザまたはオブジェクト間の繋がりになります。それをビジュアル化するのに使えるライブラリがVivaGraphJSです。 Amazonの関連書籍をたどっていくグラフです。 書籍をクリックすると詳細が表示されます。 YouTube版。ノードをクリックするとその場で動画の再生ができます。 Facebookの友達情報の可視化です。 表示方式も様々にあります。大量の情報だとレンダリングが重たいのが難点ですが、インパクトがあります。 より表示したい情報に合わせたアクションを選んでみてください。 こんな密集するパターンも。 VivaGraphJSの使い方はシンプルで、ノードとなるオブジェクトを追加していった後、ノード間のつながりをリンクとして追加
これは便利！JavaScriptのエラーをログする·ErrorBoard MOONGIFT
ErrorBoardはJavaScriptのエラーを監視してログに残してくれるソフトウェアです。 システムでエラーが起きればそれをログに残して対処するというのは一般的です。しかしサーバサイドと違ってJavaScriptでのエラーは意外と放置されているのではないでしょうか。そこで使ってみたいのがErrorBoard、JavaScriptエラーのログソフトウェアです。 エラーを取得しました。 エラーの詳細です。 ソースで見てエラーが起きた場所を確認できます。 対処したらチェックします。 ErrorBoardを使えばブラウザごと、時間ごとにエラーが起きた場所をログに残せます。後はそれぞれに必要な修正を行った後、対処済と印をつけていくのみです。ブラウザやバージョンによって動かないといったケースも考えられるだけに、設置しておくと様々なケースに対する対応が出来るようになりそうです。 ErrorBoar
ピアノに音が落下、そんなWebベースのMIDIプレーヤ·Euphony MOONGIFT
EuphonyはWebベースのMIDIプレーヤです。キーボードを音階が通過していくビジュアルが奇麗です。 オンラインで扱える音楽ファイルのデファクトはMP3です。しかし昔から存在して大量にあるのがMIDIファイルです。そんな懐かしのMIDIファイルをWeb上で演奏できるのがEuphonyです。 MIDIファイルを解析して、その音階が上から流れてきます。 音楽が変わればビジュアルも変化します。 Euphonyの魅力はそのビジュアルにあると言えるでしょう。MIDIファイルを解析した後は自動で演奏が開始されます。自分で鍵盤を叩くことはできませんが、前の曲/次の曲へ移動したり、再生/停止と言った操作はできます。自分の好みのMIDIファイルを読み込ませて、そのビジュアルとともに楽しんでみると面白そうです。 EuphonyはJavaScript製、MIT Licenseのオープンソース・ソフトウェアで
新しい試み。図形を描いて人とコンピュータを判別·MotionCAPTCHA MOONGIFT
MotionCAPTCHAは画面に描かれた線をなぞることで人かコンピュータかを判別するCAPTCHAです。 CAPTCHAと言えば画像に書かれたぐにゃぐにゃな文字を書くというのが一般的です。しかしこれは非常に煩わしく、読みづらいものが多くストレスになります。そこで新しい手法が幾つも生み出されていますが、今回はMotionCAPTCHAを紹介します。 フォームです。下にあるのがMotionCAPTCHAです。 なぞりました。通っています。 ちょっとくらいずれても大丈夫です。 これくらい違うとエラーになります。 MotionCAPTCHAは線をなぞるというアクションで人かコンピュータかを判別します。面白いのは多少形がずれたとしてもOKとしてくれる事でしょう。非常にユニークなソフトウェアです。 MotionCAPTCHAはjQuery/JavaScript製のソフトウェア（ソースコードは公開され
はてなブログでサウンド再生·音の鳴るモジュール MOONGIFT
音の鳴るモジュールははてなブログで使えるサウンド再生モジュールです。 はてなブログではJavaScriptが使えます。そこで作られたのが、はてなブログ上でサウンドを鳴らせるようにするモジュールが音の鳴るモジュールです。 開発者のブログです。ボタンを押すとドリランドの音声が流れます。 クリックすると音がなるというコードです。 MML（Music Macro Language）を再生するデモです。任意のMML（ある程度）が再生できます。 モールス信号が鳴らせます。 昔のWebサイトではMIDIを自動演奏するなんてのが多く見られましたが、音の鳴るモジュールの場合はそういう単純なものではなくテキストエリアの内容によって自由に演奏内容を変えたり、コメントでそれを残しておいたりできるなど相互コミュニケーションが取れるようになっています。ブログ上でサウンドを語らえる新しい仕組みです。設置はJavaScr
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
