We'll be back soon! Our site is currently undergoing maintenance. Please check back later.

入力された値の検証は最終的にサーバ側で行わなければ意味がない。が、ユーザビリティを考えるとブラウザ上でチェックし、通知できれば便利に違いない。問題はそうしたチェック機能を実装するのが手間だと言うことだ。 jQueryを使ってWebブラウザ上で入力チェック 動的なフォーム生成でも柔軟に対応できるくらいシンプルな入力チェックライブラリがjQuery Inline Form Validation Engineだ。 今回紹介するオープンソース・ソフトウェアはjQuery Inline Form Validation Engine、jQueryプラグインで提供される入力チェックライブラリだ。 jQuery Inline Form Validation Engineの良い点は、入力チェックがブラウザ上で行われ、かつそのエラー内容が入力項目の横にフローティングで表示される所だ。吹き出し風になっており、非
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 です。画像の読み込みが完了した時点で適切な値に更新されます。
ITエンジニアから学生たちへのメッセージ。何を思ってIT業界を選んだか、学生にはどんな思いを持って来てほしいかをIT業界の先輩エンジニアが語る。 JavaScript技術の第一人者として知られるamachangこと天野仁史氏。その高い技術力を生かし、サイボウズ・ラボで未来のグループウェア開発に取り組む一方で、ブログ「IT戦記」を通じてプログラマ志望者にJavaScriptの勉強法を指南するなどブロガーとしても積極的に活動している。そんな、IT業界の最先端で活躍する天野氏だが、この業界に入るまでは、まったくの“IT素人”だったという。 「高等専門学校の電気工学科を卒業して、岩通ソフトシステムにプログラマとして就職したのですが、学生時代はITに関しては素人同然でした。元々新しいもの好きの性格なので、パソコンにも興味をもっていましたが、それほど使い込んでいるわけではなく、自分でWindowsのイ
タイトル変えました。旧タイトル「JavaScriptでよく使う書き方」。よく使うけど毎回忘れる。 正規表現にマッチするかどうか。 RegExp#testを使う。 /abc/.test("abcdefg") // => true String#searchはマッチした位置を返す。マッチしない場合は-1。先頭にマッチすると0でfalseなので注意。真偽値が欲しい場合はString#searchを使わない。 "abcdefg".search(/xxx/) // => -1 "abcdefg".search(/def/) // => 3 "abcdefg".search(/abc/) == false // => true 正規表現の部分マッチを得る。 部分マッチを得るには、RegExp#execかString#matchを使う。execとmatchの速度は大して変わらない。 正規表現のベンチマー
表示されたブラウザの幅に合わせて、ぴったりになるようにカラムの幅や数を自動調整するスクリプトをSoh Tanakaから紹介します。
2009/05/28 「決してWebをあなどってはいけない」(Never underestimate the Web)。Google I/O 2009初日の基調講演でシュミットCEOに続いて登壇したのは、米グーグル バイス・プレジデントのビック・グンドトラ氏だ。ゆっくりと一語一語を区切りながら語り始めたグンドトラ氏の言葉には重みがある。彼は元マイクロソフト社員で、まさにWebをあなどっていた側にいたからだ。 グンドトラ氏はWindowsプラットフォームを唱道する立場にあった。彼に限らず、マイクロソフト社員の間には、ネイティブアプリケーションでなければできないことがあるとする見方が一般的だったという。「Keyholeという会社が出てきたとき、彼らが持つようなアプリケーションこそ、ネイティブでなければできないものだと言っていた。ところがグーグルは2004年11月にKeyholeを買収し、Goo
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
Jetpack is a newly formed initiative and experiment in using open Web technologies to enhance the browser, with the goal of allowing anyone who can build a Web site to participate in making the Web a better place to work, communicate and play. As with all Labs experiments, Jetpack is an open source project and everyone is welcome to participate in its design, development and testing. Read the full
はじめに JavaScript が書ければ、誰でも簡単に Firefox の拡張が書けてしまう。しかも、もれなく jQuery が付いて来る! というものを Mozilla Labs がリリースしたみたいですね。 https://jetpack.mozillalabs.com/ というわけで 少し触ってみました Jetpack Feature の書き方 Jetpack で書く Firefox 拡張を「Jetpack Feature」といいます。 これは、以下の 2 つのものを用意すれば誰でも簡単に公開することが出来ます。 JavaScript ファイル 公開用 HTML ファイル JavaScript ファイル JavaScript ファイルには、 Jetpack Feature のアプリケーションコードを書きます。 (function() { Jetpack.statusBar.appe
25 Great Examples of Using Gradient Effects in Web Designs グラデーションをうまく使って立体感を出したサイトデザイン集。 うまくグラデーションを使うことで、質感の表現や、ゴージャスな印象を生み出しています。 ECTOMACHINE クールな画像とともにグラデーションされた背景が印象を強くしています Reinvigorate うまくグラデーションと背景イメージを混ぜ合わせたデザイン 単色にするよりグラデーションの方が高級感が出ているのが分かります Central Snowsports 平面ですがうまく立体的にしてさらにそれが分かりやすいメニューになっている点が参考にできそう Tim Van Damme コントロールパネルっぽいデザインを立体的にデザインしている例 シンプルで分かりやすいページ構築の際の参考になるかも Rise Crea
「Greasemonkey」は「Firefox」のアドオンの一つで、Webページをより使いやすくするツールです。米lifehackerでは2年前に「Greasemonkey」スクリプトベスト10を発表しています。 当時、ライフハッカーとしては自信を持って紹介したのですが、この2年の間に新しいものがいくつか発表されたり、オリジナルのスクリプトが「Firefox 3」用に実装されたりしているので、今回はアップデート版を紹介しますね。 このベスト10は、ややGoogleユーザー寄りであるように感じるかもしれませんが、「Greasemonkey」とGoogleは同じタイプのJavaScriptを使っているので、ある意味予測された結果だといえます。なお、今回紹介しているスクリプトは、「Firefox」に「Greasemonkey」がインストールされた状態が最適な動作環境になっています。ただし、中には
2009年05月08日15:00 カテゴリLightweight LanguagesLogos Ajax - ケブンッリジだがいくのけゅきんうのけっか とういけわで、じうどかしみてた。 ねとらぼ:確かに“読めてしまう”コピペに2ch住人が「人間すげー」と驚く - ITmedia News Use YJParse こんにちは。皆さんお元気ですか?私は元気です。 この文章は、イギリスのケンブリッジ大学の研究の結果 人間は文字を認識するとき、その最初と最後の文字さえ合っていれば 順番は滅茶苦茶でもちゃんと読めるという研究に基づいて わざと文字の順番を入れ替えてあります。 どうです?ちゃんと読めちゃうでしょ? ちゃんと読めたら反応よろしく。 こんにちは。皆さんお元気ですか?私は元気です。 この文章は、イギリスのケンブリッジ大学の研究の結果 人間は文字を認識するとき、その最初と最後の文字さえ合ってい
9lessons: jQuery and Ajax best 9lessons. jQueryやPHPを使った便利な仕組みのチュートリアル集。 9lessonsというサイトがあって色々便利な仕組みのチュートリアルが公開されています。 Twitter Like More Button with jQuery and Ajax. 「もっと読む」をajaxで実現するサンプル Exactly Twitter like Follow and Remove buttons with jQuery and Ajax Twitter風のフォロー、削除ボタンを実現するサンプル Delete a Record with animation fade-out effect using jQuery and Ajax. 行を削除してフェードアウトアニメーションをさせるサンプル jQuery Username Av
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 Beautiful jQuery sliders 洗練されたインターフェイスの画像ギャラリー。 BigPicture パネル表示やギ
John Resig 氏による A Web Developer's Responsibility という記事が素晴しかったので、著者の許可を得てここに日本語訳を掲載します。 Web 開発者の最大の負担は、ブラウザのバグと非互換性への対応に膨大な時間を費やすことであるといって間違いないでしょう。それゆえに、それらへの対応に不満をいうのは、Web 開発者全員の常となっていました。ブラウザのバグは迷惑でいらだたしく、仕事を大幅に難しくします。 ブラウザのバグはとてもいらだたしく、通常の開発における最大の負担です。ですから、開発対象のブラウザが、自身のバグを見つけ修正できるようにしてやるのは、すべての Web 開発者にとっての責任です。自分が見つけたバグに対して責任を持ち、「ほかの誰かがこれを見つけるだろう」とは思わないことで、ブラウザの進歩の速度は加速していくでしょう。 ブラウザを支援する解決策
その買い物ちょっと待った。こんな感じになります。JavaScriptを始めてまだ間もないので、ようやっと「作品」と言い張れるような物ができたかなと。はじめてのマッシュアップ。 パソコン周辺機器カテゴリーなら大体は使えると思います。中にはこんなに価格差のある商品もあった。Amazonで買うのがバカらしすぎるwインストールしていろいろ見て回るだけでも結構おもしろかったりする。 インストールはこちらからどうぞ。Amazon Lowest Price Checker 引っ越しでごたごたして自鯖が使えなくなってしまったので、レンタル鯖を用意している間突撃レーザー氏の鯖を使わせてもらってます。ご協力ありがとうございます。 ちなみに、Greasemonkey専用の関数を使っているのでOperaのユーザースクリプト実行機能などでは動かないと思います。Firefox推奨。今後アップデートする予定もあるので、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く