様々なニーズを満たす多機能Webベース表計算ライブラリ·SlickGrid MOONGIFT
SlickGridはWebベースで動作する多機能なグリッド、表計算ライブラリです。 Webベースで業務系システムを作っていると必ず要望に挙がるのがリッチな表計算（グリッド）表示ライブラリです。 こちらは通常の表示。縦横スクロール対応。 表示形式も色々指定できます。 スライダーでの入力。 カレンダー。 チェックボックス。 長い場合はフローティング。 縦スクロールをなくすこともできます。 Ajaxでデータの取得も可能です。 途中の集計も可能。 行を選択式にすることもできます。 入力方式の設定や、行を選択してといった機能はExcelにもないので便利ではないでしょうか。また、プラグインによってExcelとコピー&ペーストでデータの授受もできるようになっています。 SlickGridはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る グリ
レスポンシブに画像の表示“場所”を切り替える·Focal Point MOONGIFT
Focal Pointは画面幅に応じて画像の表示場所を切り替えるJavaScriptライブラリです。 レスポンシブWebデザインの弱点とも言えるのが画像の表示です。単純に縮小して表示してしまえば良いという訳ではありません。そこで使ってみたいのが です。 デスクトップの場合。 幅を少し小さくした場合。特に変わっていないと思います。 さらに縮めました。一部が切り抜かれたのが分かるでしょうか。 さらに小さく。顔の部分を中心にしています。 こちらもデモ。Aチームです。 幅を狭めると一気に拡大写真のように。 さらに狭めると人がちゃんと収まっている状態まで縮まりました。 こちらは右側のいすに注目。 ほら、なくなったのが分かるでしょうか。 こちらの写真も… 上下が特に大きく変わっています。 こちらの場合はどうでしょう。 右上は固定で左側のコンテンツが大きく削られています。 これは…ミサイル？ 上下左右と
奇麗なデザインのタグによるフィルタリングライブラリ·Filtrify MOONGIFT
Filtrifyはタグ情報をつけたアイテムをフィルタリングして表示するJavaScriptライブラリです。 データをタグで管理するケースはよくありますが、その見せ方は様々です。一例としてFiltrifyを紹介します。とてもエレガントにタグ付けされた情報を一覧化、フィルタリングできます。 全て表示されている場合です。 メニューを出してタグを指定します。カテゴリごとのアイテム数も出ています。 タグの指定は複数できます。 指定すればより絞り込まれていきます。 タグは複数のカテゴリで作成できます。 二つ目を指定すればより少なくなります。 消してしまうほか、ハイライトにすることもできます。 選択肢を表示しているデモです。 data-*を選択肢に利用するデモです。 ページネートも可能です。 一つのアイテムには複数のカテゴリ以下に複数のタグをつけられます。アパレルで言えば取り扱いサイズ、色、季節、対象性
ストレスフリーな通知システム·Alertify MOONGIFT
Alertifyはスライドして表示されるアラートダイアログです。シンプルな見た目で使い勝手が良いです。 Webシステムを開発していて意外と面倒くさいのがアラートではないでしょうか。入力エラー、設定完了など様々なアラートが存在します。そんな機能をいい感じに提供してくれるのがAlertifyです。 アラートボックスです。上から出現します。 確認ダイアログです。 OKを押したかキャンセルを押したかもちゃんと取得できます。 インプット付き。 ボタンと入力内容が取得できます。 ボタンのラベルは変更可能です。 ログメッセージもカスタマイズ可能です。 Alertifyはダイアログを上から下にスライドしながら表示し、その結果を右下に表示します。どちらも必要に応じて使い分ければ良いでしょう。ログメッセージは数秒経つと消えます。汎用性高く色々な場面で使えそうなソフトウェアです。対応ブラウザはIE7以降で、An
マウスオーバーで画像にイフェクト·Adipoli MOONGIFT
Adipoliはマウスオーバーで画像に表示イフェクトを加えるJavaScriptライブラリです。 jQueryを使って、マウスオーバー時に画像にイフェクトを加えられるのがAdipoliです。ギャラリーや機能の紹介などで使うとインパクトがありそうです。 何もしていない時の表示。下の方の画像は色々問題がありそうなのでぼかしています。 マウスオーバー。白黒だった画像に色がつきました（実際には逆だと思いますが）。 こちらはマウスオーバーで拡大表示します。 掲載すると問題がありそうな画像が多いのが残念ですが、Adipoliではその他20種類を越えるイフェクトが実現できます。スライドダウン、ボックスなど様々な効果を使うことで画像を効果的にアピールできそうです。 AdipoliはjQuery/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る
HTMLテーブルをリッチに便利な機能を追加する·Grid MOONGIFT
GridはHTMLテーブルにソートやヘッダ固定、行選択と言った機能を追加するJavaScriptライブラリです。 業務システムを作っていると必ず発生するのがテーブルでの一覧表です。WebでExcelレベルのことは実現できませんが、リッチな表としてGridを使ってみるのは良さそうです。 デモです。 必要な場所だけチェックしてハイライトできます。 横スクロールしても左側の列はそのままです。 数値のオーダーも適切に動きます。 縦スクロールしてもヘッダー部はそのままです。 カラム幅の変更もできます。 GridはIE7以上、Google Chrome/Firefox/Safari/Operaに対応しています。jQueryやMootoolsと一緒に使うこともできます。機能はヘッダー、フッター、カラムの固定化やカラムのリサイズ、カラムのソート、行の選択などになります。データフォーマットはJSONの他、X
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はこう見る 最近ではモ
レガシーなWebブラウザにもgetUserMediaを·getUserMedia.js MOONGIFT
getUserMedia.jsはFlashを使うことでレガシーなWebブラウザでもgetUserMediaライクなWebカムアクセスを実現するJavaScriptライブラリです。 HTML5の新しいAPIの一つにWebカムアクセスがあります。そんなWebカムアクセスをレガシなーWebブラウザを含めて使えるようにしてくれるのがgetUserMedia.jsです。 最初です。カメラへのアクセスが求められます。 まずはWebカムの映像を画像として保存します。 さらに顔を認識して鼻眼鏡をつけるアクションです。 getUserMedia.jsではWebRTCに対応している場合はHTML5のgetUserMediaを使い、それ以外の場合はFlashベースのWebカムアクセスを使います。結果は同じように扱えるので、安心してWebカムアクセスできるようになるでしょう。 getUserMedia.jsはJa
くるくる回る巻きすのようなアニメーション·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
これは便利！JavaScriptのエラーをログする·ErrorBoard MOONGIFT
ErrorBoardはJavaScriptのエラーを監視してログに残してくれるソフトウェアです。 システムでエラーが起きればそれをログに残して対処するというのは一般的です。しかしサーバサイドと違ってJavaScriptでのエラーは意外と放置されているのではないでしょうか。そこで使ってみたいのがErrorBoard、JavaScriptエラーのログソフトウェアです。 エラーを取得しました。 エラーの詳細です。 ソースで見てエラーが起きた場所を確認できます。 対処したらチェックします。 ErrorBoardを使えばブラウザごと、時間ごとにエラーが起きた場所をログに残せます。後はそれぞれに必要な修正を行った後、対処済と印をつけていくのみです。ブラウザやバージョンによって動かないといったケースも考えられるだけに、設置しておくと様々なケースに対する対応が出来るようになりそうです。 ErrorBoar
jQuery/CSS3でPath風メニューを·Pie Menu MOONGIFT
Pie MenuはPathのメニューに似たUIをjQueryで再現したライブラリです。 人気のあるiOSアプリのUIはすぐに真似したモックアップが登場します。Pathもその一つです。流れるようなUIはもちろん、赤いプラスボタンのメニューが人気です。Pie Menuはそんなメニュー表示をjQuery/CSS3で再現したライブラリです。 赤いボタンを押します。 アニメーションがあってメニューが表示されます。 パラメータを変更して表示をカスタマイズできます。 密着版。 デモ動画です。 デスクトップ版でPie Menuを採用したとしてもなかなか使い方が分からないかもしれませんが、PhoneGapと組み合わせると話が違ってきそうです。スマートフォン向けサイトで使ってみても面白いかもしれません。 Pie MenuはjQuery/JavaScript製のソフトウェア（ソースコードは公開されていますがライ
新しい試み。図形を描いて人とコンピュータを判別·MotionCAPTCHA MOONGIFT
MotionCAPTCHAは画面に描かれた線をなぞることで人かコンピュータかを判別するCAPTCHAです。 CAPTCHAと言えば画像に書かれたぐにゃぐにゃな文字を書くというのが一般的です。しかしこれは非常に煩わしく、読みづらいものが多くストレスになります。そこで新しい手法が幾つも生み出されていますが、今回はMotionCAPTCHAを紹介します。 フォームです。下にあるのがMotionCAPTCHAです。 なぞりました。通っています。 ちょっとくらいずれても大丈夫です。 これくらい違うとエラーになります。 MotionCAPTCHAは線をなぞるというアクションで人かコンピュータかを判別します。面白いのは多少形がずれたとしてもOKとしてくれる事でしょう。非常にユニークなソフトウェアです。 MotionCAPTCHAはjQuery/JavaScript製のソフトウェア（ソースコードは公開され
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptでできたWeb開発のためのコードエディター「Brackets」の最新版Sprint 33
IDEA * IDEA
IDEA * IDEA
IDEA * IDEA
