ホバー時に浮かぶエフェクトがとってもリアルなスクリプトをAdrian Pelletierから紹介します。 Create a Realistic Hover Effect With jQuery demo デモはReflection(鏡面反射)とShadow(影)の二種類があり、それぞれホバーして浮かんだ際、鏡面反射と影が距離に合わせてサイズが変わります。 スクリプトのベースにはjQueryが使用されているため、実装にはjquery.jsが必要です。
Smashing Magazine - WE SMASH YOU WITH THE INFORMATION THAT WILL MAKE YOUR LIFE EASIER, REALLY. Smashing Editoria氏がSmashing Magazineにおいて50 Fresh JavaScript Tools That Will Improve Your Workflowのタイトルで50のJavaScriptに関連したツールやライブラリを紹介している(実際には51)。RIA開発においてJavaScriptは重要な地位を占めつつあり、適切な開発ツールやライブラリ、フレームワーク、プラグインを選択することは、迅速で効果的な開発を実現するために欠かせない。紹介されているツールやライブラリは次のとおり。 JavaScriptツール FireUnit (Firebug向けJavaScrip
Webアプリケーションを構築する上で最大のネックになるのがGUiインタフェースだろう。一般的なローカルOS向けのGUIツールキットとは異なり、Web向けには貧弱なコンポーネントしか用意されていない。YUIやExt JSなど多数のツールキットが登場しているのはそのせいだ。 アニメーションもこなすGUIツールキット そしてデザイン面のみならず、アクションまで踏まえてWebアプリケーションを構築できるのがSocksというGUIツールキットだ。 今回紹介するオープンソース・ソフトウェアはSocks、JavaScriptによるGUIツールキットだ。 SocksはJavaScriptで作られたGUiツールキットだ。HTMLはデザインする必要がなく、Socks上でオブジェクトを定義してテキストボックスやチェックボックスなどを配置していく。後は指定した表示形式に沿ってSocksが揃えて表示してくれる。 ハ
iGoogleのようなポータルサイトは作ってみたくないだろうか。社内では一般的にCMSやグループウェアが情報ポータルとして利用されることが多いが、パーソナライズはされていない。そのため、自分には無用だと思うと全く見なくなってしまう。 iGoogle風のシステム パーソナライズホームページならば自分で組み替えることができるので、便利だと思った情報を手軽に集積して管理できるようになる。オフィス向けならさらに特化した機能(全員に配布するような)も付けられるだろう。その基盤として使えそうなのがPicokだ。 今回紹介するオープンソース・ソフトウェアはPicok、パーソナライズホームページシステムだ。 PicokではまさにiGoogleのような操作が可能になっている。小さなウィジェットはドラッグアンドドロップで移動できる。カラムは3列に限定されてしまっているようだが、設定の編集機能もありとても便利だ
PHPの開発者であれば皆使うのがvar_dumpだ。開発中はもちろんデバッグ時などに非常に重宝する。エラーがあっても出力してくれるので、これがなければ生活できないという人も多いのではないだろうか。 JavaScriptでも変数のダンプを メソッドを調べる必要もなく、知りたいものを関数に入れれば全ての情報を出してくれる。そんなvar_dumpの魅力をJavaScriptでも再現したのがprettyPrint.jsだ。 今回紹介するフリーウェアはprettyPrint.js、JavaScriptの変数ダンプライブラリだ。ソースコードは公開されているが、ライセンスは明記されていなかったのでご注意いただきたい。 prettyPrint.jsはJavaScriptのオブジェクトを指定すれば、その中身をダンプし、テーブル組で見やすく表示してくれるライブラリだ。PHPのvar_dumpよりも、cfdum
Web上で見やすいグラフを作成する手法としては、画像で生成する、Flashで生成するかのどちらかが多かった。稀にJavaScriptで生成するタイプもあったが、Canvasタグを使う関係上、IE6では表示できず業務アプリなどでの利用は難しかった。 JavaScriptのみでグラフを表示する だが、例えCanvasを使っていたとしてもライブラリが対応していれば問題ない。そこで試したいのがjqPlotsだ。 今回紹介するオープンソース・ソフトウェアはjqPlots、jQueryベースのグラフ描画ライブラリだ。 jqPlotsはCanvasタグを使っているが、対応ブラウザはIE6〜IE8、Firefox、Safari、Operaとなっている。筆者環境では試していないが、IE6でも恐らく大丈夫なのだろう(ぜひ試していただきたい)。これだけ多数のブラウザに対応していれば一般向けWebサービスでも使え
[柔軟すぎる]IEのCSS解釈で起こるXSS:教科書に載らないWebアプリケーションセキュリティ(3)(1/3 ページ) XSSにCSRFにSQLインジェクションにディレクトリトラバーサル……Webアプリケーションのプログラマが知っておくべき脆弱性はいっぱいあります。そこで本連載では、そのようなメジャーなもの“以外”も掘り下げていきます (編集部) なぜか奥深いIEのXSSの話 皆さんこんにちは、はせがわようすけです。 第1回「[これはひどい]IEの引用符の解釈」と第2回「[無視できない]IEのContent-Type無視」でInternet Explorer(IE)の独自の機能がクロスサイトスクリプティング(XSS:cross-site scripting)を引き起こす可能性があるということについて説明してきました。 第3回でも引き続き、IE特有の機能がXSSを引き起こす例ということで、
Firefinderとは何か? https://addons.mozilla.org/en-US/firefox/addon/11905/ CSSセレクタやXPathで要素を検索出来るFirebugの拡張です。 どんな人にお勧めか? hiddenフィールドの値を閲覧したり、 formのどの要素のnameが何かとかさくっと見たくなることないですか? あるならお勧めです。 Firebugには既に$$というCSSセレクタで要素を検索出来る関数があるんだが? CSSセレクタのサポートの度合いが違います。 $$関数では基本的なCSSセレクタしかサポートされていないので、 例えば、ここなら、http://images.google.co.jp/advanced_image_search?hl=ja $$('input'); // [input, input ja, input Google 検索, i
Javascript Input Mask これは面白い、パスワードの値を独自アイコンにする方法。 パスワードフィールドというとブラウザ依存で、* になったり、・になったりしますが、今回紹介のライブラリを使えば次のような面白い鍵アイコンにすることが出来ます。 こういうところにもこだわりたい、という方は参考にできそうですね。 関連エントリ デフォルトのフォームをクールにカスタマイズする方法 入力フィールドにカーソルを合わせた際に吹出しヒント表示するCSS&JavaScriptサンプル JavaScript&CSSで独自デザインのselectボックスを作成
これは注目!jQueryでExtばりにリッチなUIが実装できる「jQuery Ribbon」 2009年05月28日- jQuery Ribbon - Home これは注目!jQueryでExtばりにリッチなUIが実装できる「jQuery Ribbon」。 利用すれば、コントロールのグルーピングや、ドロップダウンメニュー、階層リストなどのリッチなコンポーネントが実装できるみたい。 jQuery Ribbonを使ったリッチなUI。Windows7っぽいデザインのUIがJavaScriptで。 アイコン付きのかっこいいメニュー 表示しているUIのテーマを選べる アイコンつきリスト アイテムのグルーピング ドロップダウンメニュー ちょっとこれは素晴らしいですね・・・。jQueryの優位性がますます高くなってしまいましたね。 関連エントリ ナビゲーションのUIはこれで完璧かもなjQueryプラグイ
2009年05月22日15:00 カテゴリLightweight Languages javascript - には整数はない 違います。 javascriptで整数の変数を強制的に符号なし整数に変換する方法 ? ku javascriptの整数は内部的には32bit intで扱われていて(Firefox3.1, Chrome0.2の場合)、演算の結果が0×80000000を超えると自動的に負の値になります。 事実はもっと驚くべきものです。 以下をご覧下さい。 puts = make_puts(document.getElementById('ttyp0')); for (var n = 1; n <= 54; n++){ puts(2, '**', n, ' - 1 = ', Math.pow(2, n) - 1); } 2の32乗どころか、2の53乗まできちんと計算できていますが、54
Plugins | jQuery Plugins 高速に動作する画像カルーセルUI実装用jQueryプラグイン「Agile Carousel」 ページ右上のページ送りボタンを押せば滑らかに、かつ高速にアニメーションします。 スクリプトはシンプルでありながら、オプション指定が色々とできてカスタマイズ性がある以下のようなコードで実装できます <script type="text/javascript"> $('#slide_holder').agile_carousel({ disable_on_first_last: "yes", next_prev_buttons: "yes", number_slides_visible: "3", slide_buttons: "yes", slide_captions: "Agile Carousel: View Examples With Vari
TinyBoxは、モーダルウインドウを生成し、アニメーションで拡大表示できる超軽量(3.5KB)の単独で動作する(jQueryなどは不要)スクリプトです。 TinyBox JavaScript Popup Box - 3.5KB demo 上記キャプチャのデモではリンク箇所をクリックすると、サイズを変更したり、内容を変更したりします。 また、画像の拡大表示やタイマーにも対応しています。
自分はスーパーJavaScripterでこんなすげーのが5行で書けちゃう。やばいだろ!とかいうのでは全然無いですが、オブジェクト指向っぽい話が最近分かってきたつもりで、それでやっときゃ問題無いってことを思い始めているので、なんかそんな話を書いていきます。 こんな短く書くテクニックがあるぜ! var hoge = hage ? huga : hoga; とか書けちゃうんだぜ!とかより、長くていいから分かりやすく拡張しやすいようにするにはどうするのかとか、そういう話ができればなーと思います。内容的には全くもって新しくも何とも無いですが。jQuery使ってやる前提です。 まんじゅう製造スクリプト 今日はまんじゅうを5個作ります。なんと、まんじゅうは、クリックすると隠れます。 まんじゅうサンプル var Manju = function(){ this.elem; this.hidden = fa
「Webサイトを作るときに本当によく使う機能を、自分で作らずにさくっと実装したい」――。そんなワガママな願望をかなえてくれる JavaScriptライブラリが登場した。ミツエーリンクスが今月オープンソースとして公開した「MJL(MITSUE-LINKS JavaScript Library)」は、Webサイト制作に必須の“最小限の機能”に絞ったJavaScriptライブラリだ。 昨今相次いで公開されている、リッチなUIを実現するJavaScript/Ajaxライブラリとは異なり、MJLの機能はとてもシンプルだ。もともとWeb制作会社であるミツエーリンクスが「自社標準ライブラリ」として作成したものだけあって、汎用性・実用性を重視したライブラリになっている。 具体的な機能は以下の6つ。確かにどれもよく使いそうなものばかりだ。 画像のロールオーバー Flashオブジェクト埋め込みの機能拡張 新規
JavaScript で複数箇所のキーワードをハイライト JavaScript で複数箇所の キーワード をハイライトさせるいい方法ないすかーと miyagawa氏に訊いたところ、 次のようなコードをさらっと書いてくれた。 キーワードにマウスカーソルを載せると、複数箇所に出現するキーワードが一斉に ハイライトされるというもの。 <script> function hlclass(name, flag) { var t = document.getElementsByTagName('span'); for (var i = 0; i < t.length; i++) { if (t[i].className == name) { t[i].style.backgroundColor = (flag ? "yellow" : "white"); } } return true; } </sc
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 Beautiful jQuery sliders 洗練されたインターフェイスの画像ギャラリー。 BigPicture パネル表示やギ
HTML Purifier - Filter your HTML the standards-compliant way! HTML Purifier is a standards-compliant HTML filter library written in PHP. HTMLを許可しつつXSS対策を行えるPHPライブラリ「HTML Purifier」。 HTMLをちゃんとパースして、XSSに関わる問題のあるタグなどは除去して返してくれます。 例えば、次のコードが(Before)、 phpspot <a href="hogehoge" onclick="alert('test1');">hogehoge</a> <script type="text/javascript"> <!-- alert("test2"); --> </script> 次のコードのようにクリーンになります。(A
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く