jQueryのfind()を利用した高速化
jQueryのfind()を利用した高速化 最近、jQueryのfind()のちょっとよろしくない使い方をチラホラと見かけるのでfind()の高速化について解説をします。 アンチパターン 最近、見かけたパターンとしては以下の様なものがあります。 $('.foo #bar') このセレクタをfind()を使って高速化する為に以下のように書きなおす。 $('.foo').find('#bar') というもの。これは、ケースによっては高速化が見込めるものの、多くのケースでは低速化されてしまいます。 また、以下の様なパターンも見かけました。 var $ul = $('ul'), $a = $ul.find('.a'), $b = $ul.find('.b'); $a.css('color', 'red'); $b.css('color', 'green').text('Hello'); こちらも、
Re:美しいプログラムを書く(業務用Webアプリケーション保守編)
Re:美しいプログラムを書く(業務用Webアプリケーション保守編) ネタ元：美しいプログラムを書く(業務用Webアプリケーション保守編) 僕だったらこう書くかな。 $(function(){ //set obj var newInput = $("input[name='new_version']"); var oldInput = $("input[name='old_version']"); //init newInput.eq(0).attr('checked','checked'); oldInput.eq(0).attr('checked','checked'); //set event newInput.change(function () { var index = newInput.index(this); oldInput.eq(index).attr('checked'
続：Androidブラウザでviewportのwidth指定
続：Androidブラウザでviewportのwidth指定 １年ほど前にAndroidブラウザでviewportのwidth指定という記事を書いたのですが、１年間いろんな端末や状況に対応しているうちに今は結構違うスクリプトを利用しています。 var portraitWidth,landscapeWidth; $(window).bind("resize", function(){ if(Math.abs(window.orientation) === 0){ if(/Android/.test(window.navigator.userAgent)){ if(!portraitWidth)portraitWidth=$(window).width(); }else{ portraitWidth=$(window).width(); } $("html").css("zoom" , por
XSSの脆弱性を限りなくなくす方法
XSSの脆弱性を限りなくなくす方法 XSSがはやっているので便乗しておきます。 私がよく使う方法なんですが、この方法を利用するとXSSの脆弱性を限りなくなくすことが出来ます。 対応方法は、PHPファイルの最初に以下のコードを挿入するだけ。 foreach($_GET as $key => $value){ $_GET[$key] = htmlspecialchars(htmlspecialchars_decode($value,ENT_QUOTES),ENT_QUOTES); } foreach($_POST as $key => $value){ $_POST[$key] = htmlspecialchars(htmlspecialchars_decode($value,ENT_QUOTES),ENT_QUOTES); } これで自動的にエスケープの処理を行ってくれます。 通常のXSS対
float方向のmarginが倍増するバグへの対応
float方向のmarginが倍増するバグへの対応 IE6ではfloatしている要素にmarginを指定すると、float方向のmarginが倍近くに増加するというバグが存在します。 サンプル これに対応する為にはfloatを指定している要素に対して、display:inlineを適用します。 div#box{ float:left; margin:20px; display:inline; } サンプル これは、ボックスのdisplay値を変更すると言う意味ではありません。 CSSの仕様上、'float'が'none'以外の値を持つ要素のdisplayの値は強制的にblockに変換される為、この記述には全く意味がありません。 IE6に対してfloat方向のmarginが倍増するバグへの対応としてのみ活用できる記述になっています。 関連エントリー tableにおけるmarginの相殺 ma
JSONとJSONP
JSONとJSONP ネタ元：JSONについての勉強メモ：外部URLから呼び出せない。どうやったら・・・ JSONやJSONPを利用したJavaScriptでのデータをの取り扱い方です。 JSONの場合 JSONはJSONについての勉強メモで書かれているようにデータをオブジェクトとして記述しておく方法です。 var jsonData ={"users": [ { name: "hamu", age : 24, language:["XHTML" , "CSS"] }, { name: "h2", age:25, language:["PHP" , "Java"] }, { name: "hoge", age:26, language:["JS" , "jQuery"] } ]} とJSONを定義しておけば、 for(var index in jsonData.users){ documen
そろそろマークアップエンジニアについて一言いっておくか
そろそろマークアップエンジニアについて一言いっておくか はやっているっぽいので、便乗してボクの意見もしゃべっておこう。 マークアップエンジニアはどこへ向かうべきか（を考えてたらカッとなって LL の資料公開）[IT戦記] が問題発起で マークアップエンジニア云々に関して書いてみる (X)HTML+CSS しかできない、それしか追求していない人っているの ? 【祝】Blogをはじめて一年たったが、そろそろあの件について一言いっておくか Another HTML-lintとかマークアップエンジニアとか。 マークアップエンジニアが次に取り組むべき5つのテーマ。 マークアップエンジニアは広い視野を持つべきだ re: マークアップエンジニアはどこへ向かうべきか など色々な意見が まとめようと思ったけど数が多いのでこれぐらいにしときます。 (トラックバックとか下さい) いろいろんな人の意見を読んでみた
Re:href=
Re:href="#" onclick の悪習 ネタ元：某日記：href="#" onclick の悪習 <a href="#" onclick="...">検索</a> なんて書き方やめようぜ！というお話 a要素のhref属性に値が入ってるとonclick属性の内容を実行後にhref属性の値を参照しようとする。 #なんかが入ってるとページの一番上部にページ内遷移をする。(※1) 某日記さんの代替案ですけどspanで代替するもの <span style="cursor: pointer" onclick="...">検索</span> 私だとこんな書き方 <a href="javascript:void(0)" onclick="...">検索</a> onclickイベントハンドラを実行しようとしてるなら、こんな書き方もある <a href="javascript:（onclickの内容
クリエイティブ・コモンズは万能ではない
クリエイティブ・コモンズは万能ではない Geekなぺーじで話題になってるクリエイティブ・コモンズ（以下CC）ですが、ちょっと気になったので私もエントリーしときます。 CCについては以前書いたエントリー(クリエイティブコモンズとは)を参考にしてもらいたいのですが、CCはあくまで著作権者の主張であり、法的強制力は持ちません。 Geekなぺーじの事象を例に出すと、Virgin Mobiles AustraliaはCCに基づいてflickrに投稿されていた写真を使用した為、問題がないように思われがちですが、CC自体に法的強制力が携わっていない為、Virgin Mobiles AustraliaはCCとは関係なく肖像権を侵害したことになります。(肖像権は法的に保護されている権利の為) 言うまでもなく写真投稿者も、肖像権を侵害しています。 企業は、CCに基づいて写真やドキュメントを使用する場合、著作権
ブロックレベル要素の高さを揃えるheightLine.js[to-R]
ブロックレベル要素の高さを揃えるheightLine.js Web標準の日々のグループディスカッションで出たライブラリ案を作っていく企画、第一弾。 ブロックレベル要素の高さを揃えるjsライブラリを作ってみました。 このライブラリは新バージョンがあります。 レスポンシブWebデザインに対応した「jquery.heightLine.js」 CSSでは複数のブロックレベル要素の高さを揃えれないという問題があります。 このheightLine.jsは、複数のブロックレベル要素の高さを揃える事ができ、2カラムレイアウトや3カラムレイアウトのそれぞれのカラムの高さを揃えたり、複数のブロックレベル要素をfloatで配置する際の高さを揃えたりできる、便利なライブラリになります。 設置方法 head要素内にダウンロードしたheightLine.jsを読み込みます。 <script type="text/ja
CSSでロールオーバーもどき
CSSでロールオーバーもどき ロールオーバーの際に画像の輝度を上げるやり方がありますけど、CSSで簡単にできます。 XHTMLソース <a href="http://blog.webcreativepark.net"><img src="./tor.gif" alt="to-R"/></a> CSSソース a:hover img{ opacity:0.8; filter: alpha(opacity=80); } サンプル ロールオーバー時にimg要素のopacityプロパティを使い不透明度を下げます。 IEはopacityプロパティに対応していない為、filterを使い不透明度を下げます。 簡単なんで、忙しいときに重宝します。 関連エントリー CSSで実現するスマートなロールオーバー 画像置換 cssで画像をプリロードする方法（改 一番簡単な画像置換の方法 画像置換でメニューを作る 画像
tableの膨張を防ぐ【css tips】
tableの膨張を防ぐ【css tips】 table要素の中に、半角スペースなどの区切り文字が存在しない英数字を入れると、td要素やth要素に設定しているwidthプロパティの長さ以上に、tableが膨張されてしまいます。 サンプル 特に、Firefoxは記号を区切り文字として認識しない為、長いURLなどを入力するとすぐに発生します。 サンプル これについていくつか解決方法があります。 table要素ではなく、div要素で書く まず、最初にためすべき方法です。 table要素に固執する必要がなければ、このようなことで頭を悩ませる必要はありません。 改行したい所にbr要素やスペース 抜本的な解決方法になります。 しかし、当然表示をコントロールする為に構造をいじることは、web標準の考えからは反します。 word-break:break-all; IEの場合はword-break:break
Re:正しくHTMLを書こうと心がけている人に5つの質問
Re:正しくHTMLを書こうと心がけている人に5つの質問 正しくHTMLを書こうと心がけている人に5つの質問に答えまーす。 HTML文書を制作する際に使用しているプログラムをお答えください。（Webプログラムも含む） 採用しているDTDとその理由をお答えください。 何故正しくHTMLを書いているのですか？ W3CとWHATWG、どちらに期待してますか？ あなたにとってHTMLとは何ですか？ じゃがんばって答えます。 HTML文書を制作する際に使用しているプログラムをお答えください。（Webプログラムも含む） 秀丸エディタ。 何度かEclipseやDreamweaverに作業環境を変えようと思ったけど駄目でした。 秀丸が一番使いやすい。 ちなみに愛用中のマクロはinsertAとCloseTag.mac FirefoxのHtml ValidatorとFirebugも手放せないかも。 採用してい
web制作におけるガイドラインのあり方
web制作におけるガイドラインのあり方 最近、制作ガイドラインというものを制作会社が多くあります。 その背景にはweb標準化の普及によるCSSの急激な浸透があるのは間違いありません。 今までのweb制作では簡単なルール決め(画像フォルダはの位置やファイルの命名規則 etc)ですんだ物が(x)html×cssでサイト制作を行おうとすると以下のような項目についても決定する必要がでてきます。 １．id属性,class属性の値の命名規則 ２．cssの記述ルール これを決めておかないと複数人での作業は効率が悪くなる一方です。 また、クリエイターの技術不足も補わなければいけません。 DOCTYPEをxhtmlにしただけのテーブルレイアウトやCSSレイアウトにしただけでweb標準に準じていると誤解しているクリエイターも多いと思います。 また、web標準に過度に対応してxml宣言まで書かれてしまっても大変
一番簡単な画像置換の方法-imageReplace.js--とあるWEBクリエイターのblog
一番簡単な画像置換の方法-imageReplace.js- 画像置換は設置がややこしく。 デメリット・メリットの切り分けが困難です。 そんなわけで一番簡単な画像置換の方法として、画像置換javascriptライブラリ-imageReplace.js-を作ってみました。 設定は簡単head要素内にimageReplace.jsを読み込むだけ。 <script type="text/javascript" src="./imageReplace.js"></script> あとは、画像置換したい要素にclass属性に『imageReplace』と記述しスペースを空けて『置換する画像名』、『ロールオーバーする画像名』を記述します。 例えばこんな感じに。 <a class="imageReplace ajax_a.gif ajax_b.gif" href="/ajax/">Ajax</a> 『ロー
画像置換に関する考え方
画像置換に関する考え方 WEB標準からみるに最近では、画像置換に関して、『alt属性が必要な画像はimg要素で記述』『alt属性必要でない画像は画像置換を使う』という考えが主流になりつつあるようです。 どういうことかというと、『text-indent:-9999px』の記述は避けるべきだろうとの考えからだと思います。 なぜ、このような考え方にいたったのでしょうか？ 画像置換の利点・欠点など複数の視点から画像置換について考察していきたいと思います。 なぜ画像置換という技術が普及したのか? 画像置換が重宝されているのは JavaScriptを使わずにロールオーバーを実装することが可能な為であります。 これによりJavaScriptがOFFの環境でもロールオーバーを体感することが可能になりました。 画像置換の欠点は? CSSでテキストを非表示にして背景画像を表示している為、CSSがONで画像の表
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
