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製のソフトウェア（ソースコードは公開され
スクロールによってリストの表示をダイナミックに変化させる·stroll.js MOONGIFT
stroll.jsはCSS3を使ったスクロール時に多彩なイフェクトを実現するJavaScriptライブラリです。 WebページはJavaScriptによってどんどんダイナミックに変化させられるようになっています。そこにさらにCSS3を組み合わせることでスクロール時のイフェクトをこんなにダイナミックにできます。それを実現するのがstroll.jsです。 例です。スクロールさせるとリスト部の描画が滑らかに変化します。 3Dを使っている場合は特に奇麗です。 様々な変化があります。 スクロールは上から下、下から上の両方に対応しています。 ソースです。ul.classでアニメーション方式を指定しています。後は単純なリストです。 デモ動画です。全部で13種類のアニメーションがあります。 stroll.jsではリストのスクロールに伴うイフェクトを容易に実現できます。スクロールの速度によってイフェクトの幅
格好いい！折り畳んだ紙を開くようなアクションを実現·Paperfold CSS MOONGIFT
Paperfold CSSは中間のメッセージを折り畳んで表示し、クリックで開く3Dアクションを施すJavaScriptライブラリです。 これはアイディアの勝利！Paperfold CSSを使うと折り畳んだメッセージを開いて表示したりする際に効果的に見せられるようになりそうです。 デフォルトの表示です。See 5 More Postsという表示があります。そこをクリックします。 徐々に開いていきます。 折り畳まれた部分が開いて表示されました。 デモ動画です。折りたたみの量などは自由に設定できます。しかも3Dであり、マウスで回転させたり見る向きを変更できたりします。 Paperfold CSSはGmailの多数のリプライが重なった時のメッセージ群を表示する際のやり方に近いです。面白い使い方が出来そうです。 Paperfold CSSはJavaScript製のオープンソース・ソフトウェア（Pub
タブレット、スマートフォンでの写真閲覧に使える無限スクロールビュー·Inflickity MOONGIFT
Inflickityは写真群の左右をつなげて無限に左右へスクロールできるようにするJavaScriptライブラリです。 写真は見せ方次第でインパクトが大きく変わりますが、10程度の写真をスムーズに見せる際に使えそうなのがInflickityです。 二つの帯が表示されています。 マウスでドラッグして左右に動かせます。 二つの帯は独立して動きます。 スマートフォンやタブレットの方が動きがスムーズです。 デモ動画です。動かした後に惰性が残ります。 Inflickityはリストでまとめた画像を横並べにして、その上で左右をつないでロールできるようにします。繋がっているので限界なく回転できます。お勧め写真を並べたりするのに使えそうです。何より猫が良いです。 InflickityはJavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 MOONGIF
はてなブログでサウンド再生·音の鳴るモジュール MOONGIFT
音の鳴るモジュールははてなブログで使えるサウンド再生モジュールです。 はてなブログではJavaScriptが使えます。そこで作られたのが、はてなブログ上でサウンドを鳴らせるようにするモジュールが音の鳴るモジュールです。 開発者のブログです。ボタンを押すとドリランドの音声が流れます。 クリックすると音がなるというコードです。 MML（Music Macro Language）を再生するデモです。任意のMML（ある程度）が再生できます。 モールス信号が鳴らせます。 昔のWebサイトではMIDIを自動演奏するなんてのが多く見られましたが、音の鳴るモジュールの場合はそういう単純なものではなくテキストエリアの内容によって自由に演奏内容を変えたり、コメントでそれを残しておいたりできるなど相互コミュニケーションが取れるようになっています。ブログ上でサウンドを語らえる新しい仕組みです。設置はJavaScr
Clear風のUI、操作を実現するスマートフォン向けWebアプリケーション·HTML5 Clear MOONGIFT
HTML5 ClearはiOSのTodoアプリClearに似た操作をHTML5で実現しています。 これまでにないほど先進的なUIをもったTodoアプリがClearです。こちらはiOSアプリですが、同様の操作をHTML5で実現しているのがHTML5 Clearになります。 トップ画面です。タスクリストが並んでいます。 次にタスクが並んでいます。操作がそのままタスク名になっています。 タップでエディットです。 ドラッグダウンで新しいタスクを追加できます。 タスクを右にスワイプすると完了になります。 HTML5 ClearはClearの全ての動きを再現している訳ではありませんが、何となくそれっぽい動きが実現できています。HTML5でここまでできるのか、という点からも興味深いソフトウェアです。なおデータは保存されていないのでご注意ください。 HTML5 ClearはHTML5/JavaScript
結構難しいぞ。Z軸を備えた3Dテトリス·Threejs-Tetris MOONGIFT
Threejs-Tetrisは3次元のテトリスです。落下に加えて奥行きを持って動かせます。 テトリス好きな方に贈りたいゲームがThreejs-Tetrisです。通常のテトリスは2Dですが、こちらは3DでZ軸が加わっています。 ゲーム開始です。 3Dなので立体です。手前から奥に向かってブロックが進んでいきます。 落ち始めは何のブロックかも分かりません。 だんだん積上ってきました。慣れるまではかなり難しいです。 うまくいっているのか言っていないのか…それすら難しいです。 失敗しました…。 操作は平面上の移動に矢印キーを使って、垂直を含めた回転にAD/SW/QEキーが使われます。通常のテトリスであればよほどスピードが増さない限りは右回転、左回転にこだわる必要はなかったのですが、3Dだとキーを間違えるといつまでも希望の向きにならないのでご注意を。HTML5でサウンドまで鳴る本格的ゲームです。 Th
こんな手が！Faviconを使って通知数を表示する·Tinycon MOONGIFT
Tinyconは未読などの通知をWebブラウザのお気に入りアイコンの上に表示するソフトウェアです。 Webサービスでメッセージをやり取りしたり、チャットなどで新着通知を出したいことがあります。そんな時にタイトルで教える方法もありますが、Tinyconは面白いことにFaviconを使って通知ができます。 Faviconの下に数字が書かれています。数秒ごとに自動で繰り上がっていきます。 デモです。どんどん数字が繰り上がっていきます。 実装する際のコードです。数値を当てるだけの簡単な使い方です。 Faviconの画像に数値を重ねて表示する程度であればサーバサイドでも実装できるでしょうが、TinyconはリアルタイムにFaviconを変化させられる点が強みです。メッセージを受け取ったタイミングで変化させればユーザの気付きにも役立つことでしょう。 TinyconはJavaScript製のオープンソー
滑らかに自然なページ送りができるJavaScriptライブラリ·turn.js MOONGIFT
turn.jsはタブレットやスマートフォンで使えるWeb向けのページ送りライブラリです。 turn.jsはリアルなページ送りができるWebベースのソフトウェアです。ハードウェアアクセラレーションを使い、滑らかに動きます。 四隅にマウスを持っていくと小さくカールします。ここをドラッグして引っ張ります。 ページをめくります。何となく海外のページの薄い雑誌をめくっているような感じです。 それ以外にもページの端にマウスを持っていくと矢印が出ますので、これをクリックしてもページめくりされます。 右から左の他、逆に左から右へもめくれます。 デモ動画です。 この手のライブラリは幾つかありますが、turn.jsは水平にページがカールするだけではなく、実際の雑誌のように斜めにカールしてページ送りできるのが特徴と言えます。ただ、その雰囲気がTime誌のような作りでちょっとペラペラな感じになってしまうのが残念で
表現力の高さに驚き。HTML5/Canvasグラフライブラリ·Flotr2 MOONGIFT
Flotr2はHTML5/Canvasを使ったグラフ描画ライブラリです。 これまでグラフと言えばFlashや画像出力が多かったですが、HTML5が使われるようになったことでぐっと表現力の高いグラフをWeb標準の技術で実装できるようになっています。その表現力を知るのにお勧めしたいのがFlotr2です。 たくさんのサンプルが用意されています。一気に紹介します。 線グラフです。 途中で途切れた曲線のグラフも描けます。 棒グラフです。 マウスオーバーで値を表示できます。 積み上げグラフです。 円グラフです。 レーダーチャート。 範囲グラフ。 ローソクチャートです。 滑らかな曲線のグラフです。 マウスオーバーでグリッドが表示されます。 マウスズームのデモです。 マウスで一部の範囲を指定できます。 折れ線グラフです。 マイナスの値にも対応。 クリックでリアルタイムにグラフを描きます。 画像ダウンロード
裸体カモン！ヌードを追い求める男子は実行すべし·nude.js MOONGIFT
nude.jsは画像をCanvasで読み込んでヌード画像か否かを判定するソフトウェアです。 裸が見たい！たくさんの画像の中からとにかく裸を見たい！と思う人はnude.jsを自動実行してみると幸せになれるかも知れません。 デモ画像です。もちろん裸ではありません。Scan Imageボタンを押します。 No nude判定です。当然です。 続いて二つの画像です。水着もありますが、やはりNo nude判定です。当然です。 おっ！ということでボタンを押すと見事Nude判定です（黒塗りはどうかと思う訳ですが、そこは致し方ありません）！イヤッホウ！ nude.jsはHTML5を使って画像をスキャンし、それが裸であるか否かを一定のアルゴリズムで判定しています。裸であれば残し、でなければ消してしまうスクリプトを書くと幸せになれそうです。nude.jsはHTML5をサポートしたWebブラウザで飲み動作しますが
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
閲覧サイトで何が使われているのかが一目でわかる拡張機能「Chrome Sniffer」NOT SUPPORTED