Site Under MaintenanceWe'll be back soon! Our site is currently undergoing maintenance. Please check back later.
JavaScriptの正規表現をパワーアップ！·XRegExp MOONGIFT
※ 画面は公式サイトより Webアプリケーションを開発したり、よりコーディング量を少なくシステムを開発する上で正規表現の存在は欠かすことができない。良い正規表現を組めるかどうかで見通しの良いシステムができるかどうか決まってくるだろう。 Named captureをJavaScriptでも 昔からある正規表現ではあるが、JavaScriptでサポートされているものは機能があまり多くない。他のプログラミング言語同等のレベルに引き上げてくれるのがXRegExpだ。 今回紹介するオープンソース・ソフトウェアはXRegExp、JavaScriptの正規表現を機能強化するライブラリだ。 XRegExpは通常使える正規表現機能に加えて、幾つかの機能追加を行っている。特徴的なものとしては、Named captureがあるだろう。これは正規表現のマッチング結果を$1、$2ではなく、指定した名前（nameやv
ものすごい勢いで横スクロールさせるJavaScript - KAZUMiX memo
javascript:(function(d,s){s=d.createElement('script');s.type='text/javascript';s.src='http://www.rr.iij4u.or.jp/~kazumix/d/javascript/loopscroll.js?'+(new Date).getTime();s.charset='UTF-8';d.body.appendChild(s);})(document) 上記のコードをアドレスバーに貼り付けて実行すると、そのページがものすごい勢いで横スクロールします。（止まりません） ソース loopscroll.js 関連エントリー（ネタスクリプト） HTMLの暴走 (meltdown3) - KAZUMiX memo 関連エントリー（実用スクリプト） 公開！「BannerSlide - スライドショウーバナーFl
オブジェクト指向っぽい話が分かるかもしれないJavaScript講座 その3 | Takazudo Clipping*
今回は、画像のロールオーバーを、今まで説明してきたように、クラスを使いながら作ってみます。リンクにマウスオーバー（及びフォーカス）されると、中にある画像のsrcの "_normal." を、 "_over." に変更してセットし、マウスアウト（及びブラー）されると、これと逆のことをします。 サンプルとソース サンプルその1 <ul> <li><a class="rollover" href="http://diablo.com"><img src="diablo_normal.gif" alt="Diablo" /></a></li> <li><a class="rollover" href="http://hoge.com"><img src="hoge_normal.gif" alt="HOGE" /></a></li> <li><a class="rollover" href="ht
jQueryを使った開発に便利！Firebug + jQuery·FireQuery MOONGIFT
Firefoxを使ってWebシステムを開発する際には必須とも言えるFirebug。そして人気の高いJavaScriptライブラリのjQuery。この二つが組み合わさったとき、これまで以上の魅力が感じられるようになる。 マウスを当てるとそのエレメントがハイライト表示される そう確信できるのがFireQueryを使った瞬間だ。この二つの融合は、JavaScriptの開発をバーストしてくれるのではないだろうか。 今回紹介するオープンソース・ソフトウェアはFireQuery、Firebugと連携するjQuery開発補助アドオンだ。 FireQueryはconsole.logに吐き出した内容を元に、画面上のエレメントをハイライトしてくれる。例えばconsole.log($('p'));と出せば、コンソールに出力された jQuery(p)という表示にマウスを当てると、該当部分がハイライト表示になる。ど
シンプルなjQueryチュートリアルTOP12 – creamu
WebAir blogというブログで、シンプルなjQueryチュートリアルが紹介されています。 ざっとご紹介。 » Amazing Music Player Using Mouse Gestures and Hotkeys XHTMLとjQueryで実装されたミュージックプレーヤー。マウスジェスチャーとホットキーで動作する » FancyBox lightbox系のクールなエフェクト。MITライセンス » Jcrop 画像をトリミングする機能を追加できるjQueryプラグイン » Table Row Checkbox Toggle テーブルの行をクリックすることでチェックボックスにチェックを入れてくれる » AJAX Upload ページ遷移なしのAjaxファイルアップローダー » Scrollable jQueryで実装するクールなスクロールコンテンツ。HTMLを中に含むことができ、水平
古いブラウザでもCSS3セレクタを使ってWebページをデザインできるようにしてみた - latest log
uuCSSBoost.js は uuAltCSS.js に名前が変更になりましたが、一部の説明が記事を書いた当時の古い名前のままになっています。最新版では、uuCSSBoost.revalidate() は廃止され uuAltCSS() を呼び出すように変更になっています。 コードの解説を追記しました。 「最新の規格を実装したブラウザが登場しても、IE6 のせいで諦めるしかないのか」 「CSS3セレクタを古いブラウザでも使いたい!」 といった現場の声にお応えして、ほぼ全てのブラウザで CSS3 セレクタを利用したページデザインが可能になるJavaScript ライブラリを作ってみました。 特徴 軽いよ いろんなブラウザで動くよ(Firefox2+, Opera9.2x+, Safari3+, IE6+, Google Chrome1+) 95%〜98%ぐらいのシェアをカバーできるんじゃない
タブ、ツールチップなどクールなＵＩコンポーネント実装jQueryプラグイン「jQuery TOOLS」:phpspot開発日誌
タブ、ツールチップなどクールなＵＩコンポーネント実装jQueryプラグイン「jQuery TOOLS」 2009年06月16日- jQuery TOOLS - The missing UI library for the Web タブ、ツールチップなどクールなＵＩコンポーネント実装jQueryプラグイン「jQuery TOOLS」。 同様のライブラリは他にあるかもしれませんが、アニメーションや見た目の点で非常に洗練されていて覚えておく価値アリなものになってます。 Expose 該当部分だけを目立たせることが出来る ↓↓クリックするとクリックした位置以外がグレー表示になります Tooltip イカしたスタイルがかかったツールチップ Tab 綺麗なタブUI Overlay LightBox風のページ内ウィンドウ実装 Scrollable 少ないスペースでコンテンツをスクロールするウィジェット実
[JS]複数のパネルをアニメーションでスライドして切り替えるスクリプト -Sliding Tab Menu
サイドバーなどの省スペースにぴったりな、複数のパネルをスムーズなアニメーションでスライドして切り替えるスクリプトをQuenessから紹介します。 jQuery Sliding Tab Menu for Sidebar Tutorial demo デモでは、タブをクリックすると、それに対応したパネルがスライドして表示されます。 各パネルはコンテンツの量に合わせてサイズが調整されます。 タブとパネルはそれぞれdiv要素で実装されており、スライドのアニメーションにはjQueryとjQuery.ScrollToが使用されています。
JavaScriptのオブジェクトについて考察してみた - あと味
JavaScriptを勉強しているとオブジェクトとはなんぞや？ということがわからなくなってきます。選択肢が増えれば増えるほど。 JavaScriptには、同じように見えて、実は同じではないデータがあります。それらのオブジェクトについて、区別して説明が付けられるように、自分なりに考察してみました。勉強中のアウトプットなので、ここで書いた内容は事実とは大きく外れているものかもしれません。とにかく不明瞭な部分を自分なりに理由づけしたかっただけです。 サンプルコードを試される場合は、FirefoxのFireBugにあるコンソールに貼りつけて実行するか、Safariの開発ツールにあるコンソールに貼りつけて実行してください。それがわからない方は console.log の部分を alert に置き換えて確認してください。 話がややこしくなるので、今回はプロパティしか扱っていません。 名称の定義について
jQueryでCookieの操作を超簡単に行える「jQuery Cookie plugin」:phpspot開発日誌
Setting cookies with jQuery jQueryでCookieの操作を超簡単に行える「jQuery Cookie plugin」。 このjQueryプラグインを使えば、Cookieさえ１行で簡単に設定できてしまいます。 以下のコードを使って、example というクッキーのキーに foo という値を設定することが出来ます。有効期限は見ての通りですが、7日間有効 $.cookie("example", "foo", { expires: 7 }); パスの設定も以下のように行うことができます。 $.cookie("example", "foo", { path: '/admin', expires: 7 }); ブラウザに対するデータ設定として最もお手軽に使えるCookieですが、これはますます活用できちゃいそうですね。 プラグインのページはこちら 関連エントリ Java
オブジェクト指向っぽい話が分かるかもしれないJavaScript講座 その2 | Takazudo Clipping*
自分なんぞがオブジェクト指向とはなんぞと語るなんておこがましく、「オブジェクトっぽい話」でいいかなーと思っていたのですが、ブックマークするときに「オブジェクト」でタグ付けてる人がいたので、これはいかんと思い、こっそりタイトルを直しました。 2回目の今回は、複数のインスタンスをまとめて操作する方法について書きます。 まんじゅうマネージャー 前回、クラス作ってインスタンスを作ると便利だというところで終わりましたが、便利な点としてはまず、「複数のインスタンスをまとめて操作したり、作ったりできることができる」という点があります。どういうことかというと、とりあえず、以下のサンプルを見てみてください。 まんじゅうマネージャーサンプル まんじゅうを一気に作ったり、隠したりすることができます。 これで賞味期限が切れたりしても大丈夫なはずです。 この機能を作れと言われたら、前回の知識だけは結構厳しいのではな
デザインに彩りを与えるCSS・jQueryソリューション21 – creamu
SmashingAppsで、デザインに彩りを与えるCSS・jQueryソリューションが紹介されています。 ざっといくつかご紹介。 » Fancy Thumbnail Hover Effect w/ jQuery 画像にマウスオーバーするとスムーズに拡大してくれるjQuery » Create a jQuery Graph Plugin 棒グラフを生成できる » Animated Menus Using jQuery マウスオーバーすると、ふわーっとアニメーションするメニュー » Improve form usability with auto messages フォームにフォーカスすると、メッセージがフェードイン&アウトする » Control.Tabs サムネイルにマウスオーバーすると、ささっと画像を切り替えてくれる すごくいい感じのが揃っていますね。 その他のリストは以下からどうぞ。
jQueryベースのグラフ作成ライブラリ·jqPlots MOONGIFT
Web上で見やすいグラフを作成する手法としては、画像で生成する、Flashで生成するかのどちらかが多かった。稀にJavaScriptで生成するタイプもあったが、Canvasタグを使う関係上、IE6では表示できず業務アプリなどでの利用は難しかった。 JavaScriptのみでグラフを表示する だが、例えCanvasを使っていたとしてもライブラリが対応していれば問題ない。そこで試したいのがjqPlotsだ。 今回紹介するオープンソース・ソフトウェアはjqPlots、jQueryベースのグラフ描画ライブラリだ。 jqPlotsはCanvasタグを使っているが、対応ブラウザはIE6〜IE8、Firefox、Safari、Operaとなっている。筆者環境では試していないが、IE6でも恐らく大丈夫なのだろう（ぜひ試していただきたい）。これだけ多数のブラウザに対応していれば一般向けWebサービスでも使え
［柔軟すぎる］IEのCSS解釈で起こるXSS
［柔軟すぎる］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を引き起こす例ということで、
リアルタイム入力チェックのJavaScriptライブラリ·yav MOONGIFT
時々、Webサイトで入力している内容をその場で判定するものがある。入力必須の項目やメールアドレス、パスワードの一致などでエラーがあればすぐに表示してくれるので、送信してから修正すると言った二度手間がなくて便利だ。 Webブラウザ上で入力チェックを実行する サーバ側でも入力チェックは行うが、ユーザビリティを考えるとオンラインでも検証したい。そんな検証システムを簡単に作れるのがyavだ。 今回紹介するオープンソース・ソフトウェアはyav、JavaScriptの入力チェックライブラリだ。 yavは入力必須はもちろん、数字のみや文字のみといったチェックもできる。メールや日付、文字の長さなどといったフォーマットによるチェックや、「and」と「or」による他の項目の値によって入力チェック内容を変更する機能もある。多言語にも対応している。 設定はこのようになる 入力フォーマットを規定することも可能で、予
GoogleはJavascriptリンクを読んで、PageRankを渡し、アンカーテキストも評価する
「検索エンジンのロボットは、Javascriptを読めない」、これは厳密に言えば正しくありません。 Javascriptの記述自体は読みとることができるし、外部のファイルさえ読んでいるようです。 ただすべてのJavascriptが読めるわけではないし、意味を解釈できているか、実行できるのかは、さまざまなパターンがあるようではっきりしません（少なくとも僕は知りません）。 Javascriptで記述したリンクも、通常はリンクとして処理されません。 人間のユーザーにとっては、aタグのリンクもJavascriptのリンクも違いはなく同じ役割を果たします（「Javascriptの実行をオフにしたら？」、という突っ込みはなしで）。 しかし、検索エンジンにとってはリンクではないのです。 したがって、PageRankも渡さないし、アンカーテキストも評価になりません。 ところが、Googleが先日開催したG
JavaScriptで画像のリンク切れをチェックする方法:phpspot開発日誌
JavaScript で、画像本来のサイズ(幅, 高さ)を取得する方法 - latest log JavaScriptで画像のサイズ(幅,高さ)をとる方法があって詳しく紹介されていて分かりやすいです。 ここで、画像のリンク切れをチェックする方法が書かれていなかったので書いてみます。 var img = new Image(); var url = '//phpspot.org/blog/img/notfound.jpg'; // あえて存在しない画像を指定 img.onload = function() { alert('width='+img.width+' , height='+img.height); }; img.onerror = function() { alert(url+' is dead'); }; img.src = url; 赤文字の部分を記述しておけば、エラー時に
JavaScript で、画像本来のサイズ(幅, 高さ)を取得する方法 - latest log
Opera で DOM Mutation Event を使用するコードを追記しました。 まとめを追加しました。 Opera パート2に取得できないケースが見つかったため、パート3 を追加しました。 rhino.jpg(幅:300px, 高さ:227px) を、 <img id="rhino" src="rhino.jpg" width="100" height="75" /> と、100 x 75 で表示している場合を例に、画像本来のサイズを取得する方法をご紹介します。 Firefox, Safari, Google Chrome なら image.naturalWidth と image.naturalHeight を利用します。 image.naturalWidth と image.naturalHeight の初期値は 0 です。画像の読み込みが完了した時点で適切な値に更新されます。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Site Under Maintenance
