サイト内検索:

JavaScriptの最近のブログ記事

ベジェ曲線で描かれた数字で構成される時計です。

Bézier Clock

B%C3%A9zier%20Clock

時計なのでこの数字が動くんですよ。秒のケタが1秒ごとに1,2,3に変形するんです。

秒の1ケタ目は1秒ごとに変わるので動きが素早いのですが、10のケタは割とゆっくり目なのでその動きを楽しむことができます。

デザイナーさんだったらこのアニメーションをずっと見ていても飽きないんじゃないでしょうか。

このjQueryプラグインを使えば、例えばもったいぶって画像をこんな風にぼやけさせて表示させたり、

SPOILER%20ALERT%21

テキストも同じようにぼやけさせることができます。

SPOILER%20ALERT%21

で、ぼやけさせた画像やテキストはマウスオーバーでちょっとだけぼけ具合を軽減させ、クリックでしっかり表示させることができます(再度クリックするとまたぼけます)。

さっきの画像はこんな画像でした。

SPOILER%20ALERT%21

昔流行った「もんたメソッド」的な使い方ができますね。

他はどんな利用シーンがあるのだろうか・・・。

SPOILER ALERT!

dropzone.js is an open source library that provides drag'n'drop file uploads with image previews

Dropzone.js

Webブラウザにドラッグ&ドロップで画像ファイルをアップロード可能にし、しかもプレビュー画像まで表示しちゃうという素敵なJavaScriptライブラリDropzone.jsです。

アップロードした画像は保存されないよ、とのことなのでデモで試してました。

お花のGIFファイルをブラウザにドラッグ&ドロップする、こんな感じでアップロードした画像がアップロード済みとして表示されます。

Dropzone.js

ただ例によって使えるブラウザには制限がありまして、

Chrome 7+
Firefox 4+
IE 10+
Opera 12+ (Currently disabled for MacOS because their API is buggy)
Safari 5+

となっております。IEが10以上というのがちょっと使うのに勇気要るかな。

ちなみに同様のライブラリもある中でこのライブラリを作った理由は、

I didn't want it to be too big, and too cumbersome to dive into.
I want to design my own elements. I only want to register callbacks so I can update my elements accordingly.
Big files should get uploaded without a problem.
I wanted a callback for image previews, that don't kill the browser if too many too big images are viewed.
I want to use the latest API of browsers. I don't care if it falls back to the normal upload form if the browser is too old.

といった不満があったようです。

いつか実際の現場で使ってみたいです。

jQuery Blogのアナウンスから引用。

They say good things come to those who wait, and today we're happy to end the waiting and unveil the jQuery Plugin Registry.

ということで、これまで開発者のサイトごとにバラバラに公開されていたjQueryのプラグインが一カ所に集約され検索可能になるわけです。

jQuery%20Plugin%20Registry

jQuery Plugin Registry

We've worked long and hard to put together a brand new site that will serve to reduce the fragmentation and distribution problems that can be obstacles for plugin developers and consumers.

いやー、ほんとにプラグインのフラグメンテーションと配布の問題はありましたからね。もうこのサイトだけ見ればいい、ってのは実によいことです。

といっても現在掲載されている数はまだ実際に存在するプラグインの数よりは全然少ないのでまだこれから、ってところでしょうか。

なんにしても素晴らしい。関係者の方、お疲れ様でした!

とりあえずHTMLページの中で表というかtableタグ使うんだったら入れとけ、みたいな感じのjQueryプラグインです。

stacktable.js

これを入れておくと、例えば以下のような表があったとして、

stacktable.js

スクリーンのサイズが狭い場合にはそれに合わせて表をこんな風に2カラムのキー/値のペアに分解して表示してくれます。

stacktable.js

ということで。

Extends the default Bootstrap Modal class.

jschr/bootstrap-modal · GitHub

TwitterのBootstrapを使ってページを作っている時に、モーダルウィンドウをもっと違った風に使いたいな、なんて考えたことはありませんか?私はありません。

さて、そんな人にためにTwitterのBootstrapのモーダル機能を拡張するJSライブラリが「bootstrap-modal 」です。

これを使うと、標準的なモーダルウィンドウをレスポンシブ、スタッカブル、横幅いっぱい、AJAXで、背景をスクロールさせないようにさせることができます。

まあ、こういうのはまず現物見てみないとね、ってことでデモでその動きを見てみてください。

デモ

Create Responsive Image Lightboxes with Built-In Social Sharing

FooBox - Responsive Image Lightbox Plugin for WordPress

FooBox - Responsive Image Lightbox Plugin for WordPress

画像をクリックするとその画像が大きく中央に表示され周りが暗くなる、という表示方法をLightbox風、なんていったりするわけなのですが、これっていちいち画像がポップアップで表示されてうざいとかポップアップブロックされていると表示されないという問題に対してとても効果的な解決手法ですよね。

で、そういうLightboxを実現するスクリプトとかプラグインはいろいろあるんですが、レスポンシブデザインに対応している、というのがこの「FooBox」の特徴です。

レスポンシブデザインに対応、ということでiPhoneやiPadの縦・横表示時によしなに処理してくれるのが魅力、というわけです。そのデモはこちらで見ることができます。

FooBox Responsive Demo

実際に画像が各デバイスでどう見えるか、は以下のURLにスマホやタブレット、PCからアクセスして確認してみてください。

http://getfoobox.com/gallery-demo/

なかなかよいではないか、と思ったものの、これ、無料ではなく有料です。

価格

個人ユーザ1サイトで$17、企業向け5サイトまでで$47となっています。

ま、自分で作れと言われたらそこにかかるコスト考えると$17は安いですし、なんといってもプラグイン化されているというのがステキです。

そんなわけで、Lightbox風なやつでレスポンシブデザイン対応のやつ、というリクエストがあったら検討してみてください。

An experiment using getUserMedia to watch for swipes left and right with a hand. This could be applied to many different uses. Flipping through pictures in an image carousel, moving to the next item in a list, flipping pages of a book or magazine, etc.

ということでWebCamを使って手を右または左にスワイプすることで何かするためのJavaScriptライブラリ「Webcam Swiper」です。

getUserMedia()という機能を使っているようでChromeじゃないと機能しません。機能しないブラウザでアクセスすると以下のようなメッセージが表示されます。

Your browser doesn't support getUserMedia(). Try using the latest version of Chrome.

で、デモとしてページをめくる、というのが提示されています。

Webcam Swiper

WebCam付きのPCまたはMacで以下のページにChromeからアクセスするとWebCamへのアクセス許可を求められるので、許可後にカメラの前で手のひらを右から左、またはその逆に動かすことでその方向にページがめくれる、というものです。

Webcam Swiper

試しに頭でもやってみましたが、うまくはいったものの結構右から左へ頭を移動させるってたいへんで疲れますね。

ということで、カメラ使ってページめくる、なんてことをやってみたい人は試してみてください。単純ですが楽しい時間を過ごすことができますよ。

Smartphone & Tablet optimized UI. Make your mobile users lives easier.

Mobiscroll - The customizable HTML5 spinner control for touch devices like smartphones and tablets

iPhoneのWebブラウザでselectタグがあるページを表示すると、そのselectタグ部分はスロットマシンのようなドラムがクルクル回転するUIで表現されるわけですが、そんなUI表現を自前で実現してしまおう、というのがこの「Mobiscroll」というライブラリです。

Mobiscroll - The customizable HTML5 spinner control for touch devices like smartphones and tablets

自前で実現してしまうので、Android端末やPCのWebブラウザでページを見た時も、あのiPhoneのUIな感じで表示させることができるようになります。

もともとあのUIはタッチを前提に設計されているのでPCブラウザで使うとどうなるかな、と思ったのですが結構悪くない感じですね。

そんなわけでそれが体験できるデモページです。

http://demo.mobiscroll.com/

日付けや時間、イメージ(+テキスト)、単純な選択での利用やストップウォッチ的な利用など、非常に実用的なデモが色々紹介されています。

また逆にAndroidのselect表現(UI的にはスピナーっていうんだろな)も可能で、これを使えばiPhone上でAndroidのようなUIを実現することもできます。さらにそれをミックスするってこともできちゃいます(←結構これがいい!)

ということで、ここぞ!というところで活用してみてください。

ライセンスはMITライセンスです。

A jQuery plugin that uses the CSS3 image filters to replicate the tilt-shift effect. This is a proof of concept and currently only works in Chrome.

Chromeでしか動かないんですが、写真をチルトシフトレンズで撮影したように画像を加工するjQueryプラグイン「tiltShift.js」です。

tiltShift.js - a jQuery plugin using CSS3 filters to replicate the tilt shift effect

例えば、こんな画像を、

tiltShift.js - a jQuery plugin using CSS3 filters to replicate the tilt shift effect

こんな風にスクリプトだけで加工することができるようになります。

tiltShift.js - a jQuery plugin using CSS3 filters to replicate the tilt shift effect

画像を横に3分割して上と下をぼかす、って感じなんでしょうかね。

にしてもChromeのみ、というのが残念であります。

【過去記事】

COTOBACO

2011年アルファブロガー受賞

新着DVD

モバイル

Powered by Movable Type 6.0.3

ブログ内検索

BlogPeople ReviewMe!

このサイトのレビューとか応援コメントを書いてもらえると励みになります。

Affi☆List for Amazon

バナー広告

このアーカイブについて

このページには、過去に書かれたブログ記事のうちJavaScriptカテゴリに属しているものが含まれています。

前のカテゴリはHTML5です。

次のカテゴリはMovable Typeです。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。