まえがき W3C（とWHATWG）からの公式なアナウンスはまだ確認していませんが、何度目かに結成されるW3C HTML WorkingのDraft Charterと、このCharterから辿れるDRAFT Memorandum of Understanding Between W3C and WHATWG（Memorandumは日本語で覚書などと訳されるので、ここでも覚書と呼びます）がブログエントリーのタイトルのソースになります。もっとも、今確認できる覚書もドラフトですから、変更があるかもしれません。しかしながらURLで観測できるわけですから、大筋でW3CとWHATWGとの間で合意が取れているのではないかと推測します。あとは、覚書だけでなくCharterもドラフトということになっていますが、以下の文章では面倒なので省略します。最後にお約束ですが、このブログエントリーは「だいたいあってる」感
初めまして。メルカリで自動化＆品質保証グループ（Automation & QA Group：通称AQA）に８月からジョインし、自動化をぶりぶりしている@AHA_oretamaです。 10/18, 19にシカゴで開かれたSeleniumConf Chicagoに参加してきました。 SeleniumConf Chicagoの内容は@arminminさんの次回ブログを見てもらうとして、ここでは、その中で一番印象的だったセッションAI for element selectionで紹介されたTest.ai Classifier Plugin for Appiumプラグイン（以降、Test.ai Classifier Plugin）を使用したAIによる要素セレクタを試してみました。 （Test.ai Classifier Pluginの詳細については、そのセッション後すぐに、Appium:proでも紹
jQuery系ライブラリによるDOM操作が中心のプロジェクトにがっつり機能を追加する機会があった。 そのJavaScriptのコードは他の人から引き継いだコードで、一応引き継ぎ時にディレクトリ構成、設計、実装方針について共有を受けたが、それでもいざ手を入れようとすると自分自身のコードの理解が進んでおらず「えーっと...」となってしまった。 上記以外にも、長年、多くの人が触れてきたJavaScriptのコードに機能を追加する、修正するのはなかなか難しいのではないか、と思う。最初は、ちょっとしたユーザビリティの向上のために書かれたスクリプトが、気がつけば多数のDOM操作、至る所で宣言される変数、どこから実行されるか分からない関数群で無秩序に膨れ上がり、頭を抱えることになる(そうならないようにするのがウェブフロントエンジニアがいるひとつの理由ですが…)。 これらのケースでは、まずは修正、あるいは
Chrome DevToolsに「Enable paint flashing」という機能があって、画面で描画が行われた箇所をハイライト表示してくれます。 DevTools を立ち上げて、下のペインの「Rendering」タブを選択するとあります。下にペインがない場合、右上の「︙」から「Show console」を選ぶとペインが表示されるはずです。 「Enable paint flashing」は、少し前まで「Show paint rectangles」という名前だったし、今後ひょっとしたらまた名前が変わるかもしれません。名前だけでなく、DevToolsのUIはChromeのバージョンアップによって変わっていくので、上の説明はあくまで参考程度にしてください。 描画が行われた箇所がハイライトされて、なにがうれしいのかというと、不要な描画を検知し、除くことで、ブラウザのレンダリング処理を改善して
これは VirtualDOM Advent Calendar 2014 に勝手に参加する記事です。 あたたかい春の昼下がりのこと、あるブラウザベンダの社内を不穏な噂が駆け巡った。 「React.js なるライブラリ、どうも仮想 DOM というやつのせいで速いらしいぞ」 もうリアルな DOM はお役御免、ブラウザも商売上がったりか・・・。雇用に不安を覚える人(私)がいる一方、 そのアイデアをとりこんでブラウザの DOM を速く出来ないかと考える人たちもいた。 仮想 DOM はなぜ速いのか。誰かのつてを辿って React.js チームにおいでいただき、速さの秘密をテックトークしてもらう。 イミュータブルなデータ構造による単純化、非同期適用による処理のバッチ化、差分アルゴリズムによる副作用の最小化… いくつかのアイデアはブラウザからはどうにもならないが、たとえば非同期化なんかは形は違えどブラウザ
追記: 情報が色々と古くなったため、2020年に書き直した版へのリンクを張っておきます。 この記事は VirtualDOM Advent Calendar 2014 - Qiita の初日です。 初日ということで、基調講演風に、Virtual DOMとはなにか、なぜ僕はこんな興奮しているのか！という話から。 Virtual DOMとはなにか 既存の概念で当てはめると、JavaScriptのMVC, MVW(Whatever)フレームワークのViewに位置します。が、その程度では終わりません。仮想DOMとは世界を革命する力であり、このjQueryのDOM操作で汚れきったフロントエンドを救う救世主なのです。 現時点で自分が知っている限りは、以下の実装を指します。 facebook/react 最も使われてるFacebookの実装 Matt-Esch/virtual-dom Altenative
Intuitive HTML lets you navigate, manipulate and use the DOM with intuitive, readable, consistent code. Powerful HTML's functions enable you to flexibly use all native DOM features with brevity, clarity, and more power than ever. HTML document.documentElement The global HTML is the actual document root element and all element tags queried via the dot operator are descendants. HTML.tag... Element|A
No dependencies, fast and small 10KB JavaScript and 2.5KB CSS, that's all (minified, gzipped). User-friendly Navigate using keyboard or mouse. Easily change the themes for your website. Browser compatibility Works on Google Chrome, Mozilla Firefox, Opera, Safari and even Internet Explorer. Why using Intro.js? When new users visit your website or product you should demonstrate your product features
(タイトル修正 DOMを高速に操作 => DOMの値を高速に更新 at Sat Mar 09 2013 15:30:09 GMT+0900 (JST)) (Skin#inject実装したのでタイトル元に戻した at Mar 09 2013 18:10:04 GMT+0900 (JST)) 若手の会で、JavaScript Hell on Earth というテーマで話してきました。 js_hell_on_earth http://www.rvl.io/mizchi/js_hell_on_earth というわけでDOM抽象ラッパーつくりました。 mizchi/skin.js · GitHub https://github.com/mizchi/skin.js 目的 クライアントサイドJSでは一回書いたら終わり、ではありません。ゲームなどのリッチなユーザー体験を提供する際、高頻度でDOMを書き換
Simplify dynamic JavaScript UIs with the Model-View-View Model (MVVM) pattern Declarative Bindings Easily associate DOM elements with model data using a concise, readable syntax Automatic UI Refresh When your data model's state changes, your UI updates automatically Dependency Tracking Implicitly set up chains of relationships between model data, to transform and combine it Templating Quickly gene
jQueryのイベント記述方法はいくつかあり、大雑把におさらいしたのが以下の3パターンです。 まず一番基本的なのが $("a").click(fn) や $("a").bind('click', fn) です。click(fn)はbind('click', fn)の省略形です。 次にjQuery1.3で $("a").live("click", fn) という機能が出来ました。liveの良いところはDOM操作で出たり消えたりするエレメントに対して再バインド無しでイベント定義ができる利便性と、内部的にはbind個所がdocumentの1か所になり複数個所へのbindが無くなることによるメモリ効率と実効速度の向上です。 更にjQuery1.4.2で $("#foo").delegate("a", "click", fn) という書き方が出来るようになりました。これは特定要素以下に限定するliv
こんにちは、太田です。前々回、前回とJavaScriptの基礎的な部分を解説しました。今回はJavaScriptからみたHTMLを中心に、DOMについても少しずつ解説しています。 JavaScriptとHTML FirefoxのアドオンやサーバーサイドJavaScriptなどの例外をのぞいて、多くのJavaScriptはHTML上で実行されるので、HTMLは土台となる重要な要素です。そこでHTMLの基礎的な部分からHTMLとJavaScriptの関係を解説します。 DOCTYPEとレンダリングモード HTMLといえば最初に書くのはDOCTYPEです。現在使われているDOCTYPEはHTML4.01、XHTML1.0、XHTML1.1といくつかの種類があり、さらにその中でTransitionalやStrictなどの違いや、XHTMLではXML宣言の有無（本来は必須ですが）などバリエーションが
The other day at LA RubyConf during the Johnson presentation, I showed a few slides which I don’t think were given the time that they deserve. Not that we didn’t have enough time, I just don’t think I made as big a deal about them as I should have. Those particular slides demonstrated HTML Document Object manipulation executed in JavaScript outside any web browser. Those particular slides, and tha
最近のほとんどの JavaScript フレームワークには、 CSS セレクタによる DOM エレメントの取得機能が実装されています。複数の要素を柔軟な条件で取得できるので、 DOM ツリーの操作がシンプルに記述でき、とても便利です。しかし、単に CSS セレクタを使いたいだけなのに、フル機能のフレームワークを読み込むのはちょっと抵抗がありますよね。 そんな悩みを解決してくれるのが、本日ご紹介する Sizzle, Peppy という 2 つのライブラリです。これらは他のフレームワークに依存しない独立した CSS セレクタエンジンで、しかも jQuery 等の既存のエンジンより数倍高速に動作します。 unobtrusive な Web ウィジェットの開発や、独自フレームワークの開発に最適ですね。その他にも広範な用途に使えるでしょう。 以下でこれらのライブラリの使い方や動作速度等の検証結果を掲
var isKnownTagName = function() { var cache = {}; return function(tag_name) { if (tag_name in cache) { return cache[tag_name]; } var ret; try { ret = document.createElement(tag_name).constructor != HTMLUnknownElement; } catch(error) { ret = false; } return cache[tag_name] = ret; } }(); isKnownTagName('a'); // true isKnownTagName('xxx'); // false isKnownTagName('&%$'); // false
jQueryのコードを良くする5つのTIPS 5 Tips for Better jQuery CodeでjQueryのコードを良くする5つのTIPSが紹介されています。 DOM中にデータを保存できるdataメソッドを使おう $('selector').attr('alt', 'this is the data that I am storing'); // then later getting that data with $('selector').attr('alt'); 「alt」などのHTMLにデータを保存しておくと後で取り出せなくなってしまうことがあるから良くない。 $('selector').data('meaningfllname', 'this is the data I am storing'); // then later getting the data with
DOM の getAttribute / setAttribute メソッドは DOM Level 1 から定義されているメソッドで、MSDN Library によれば IE はバージョン 4 からサポートしています。しかし、IE での element.getAttribute(name) / element.setAttribute(name, value) というのは、基本的には JavaScript における element[name] / element[name] = value のシンタックスシュガーでしかありません。ですから、element.setAttribute("innerHTML", "foo") とすると、element の属性には何の変化もないが element の内容が書き換えられるという事態になります。 この (手抜き) 実装が原因で、getAttribute
XPath は jQuery や Prototype.js と競合する技術ではなく、むしろ共存する技術です - IT戦記について軽く。 僕はGreasemonkeyを書くときに必ずといっていいほどXPathを使っている。XPathなしでいろんなサイトのHTMLを弄ることは最早苦痛でしかなくて、XPathがものすごく強力で、便利なであることは良く実感している。 でも、 僕は自分が管理するサイトでXPathを使うことはない、つまり汎用JSライブラリとXPathを併用することはないだろうなと思う。 理由は簡単で、自分が管理するサイトであれば適切なマークアップによってシンプルにDOM操作を行えるから。 JavaScriptから操作する各要素に、id,name,classなどの適切な属性を指定してあれば、getElementByIdなどのネイティブなメソッドで高速にアクセスできます*1。 普通はこれ
getComputedStyle とは！？ ある要素にどんなスタイルが当たっているかを計算してくれる。便利な関数。 使いかたはめっちゃ簡単！ var style = getComputedStyle(element, ''); alert(style.fontSize); // 14px alert(style.color); // rgb(0, 0, 0) ちなみに第二引数は疑似要素の style を取りたい場合に使います。通常は空文字列でいい。 でも、 getComputedStyle はこのままでは IE, Safari では動かない。 Safari では window(グローバル領域) に getComputedStyle は定義されてなくて、 document.defaultView だけに getComputedStyle が定義されている。 ちなみに、 Firefox, Op
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
