Firefox 22(Nightly) で WebComponents の document.register が実装された - hogehoge @teramako
783129 - Implement the document.register interface method mozilla-central: changeset 123773:871fea464883 カスタム要素が作れるようになった。DOM要素は単にDOM APIを呼び出すだけの存在だったのが、独自のメソッドとかを追加できるようにったわけで、よりオブジェクト指向的にJavaScriptを書けますね！ 仕様 Introduction to Web Components Custom Elements サンプルコード 詳細は、テストコードを見たほうが良いかも。 http://mxr.mozilla.org/mozilla-central/source/dom/tests/mochitest/webcomponents/test_document_register.html?force
DOMに要素が挿入される度にイベントを起こすDOMNodeInsertedの扱い方 - 三等兵
DOMに要素が挿入されたときを検出できるのがDOMNodeInsertedイベント。 たとえばajaxで特定の場所が表示されたらDOMに要素が挿入されたときや、ページング系のアドオンやユーザースクリプトでスクロールバーが下にきたら要素が挿入されたときなど、そういったときにイベントを発生させることができます。 要素が挿入されたかどうか検出するには自前でDOMを監視するコードを書く必要がありますが、このイベントを使えば簡単ですね。IE以外の主要なブラウザには実装されています。 しかしこれどうも確認してみたら非推奨になってるらしいんだけど。 http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeInserted あれか。同期的だからかな。何もしらずに使うと面倒なことなりますからね。というかなりました。とはいえ、これに変わるものはない
第2回 マークアップ vs. ツリー | gihyo.jp
Webのフロントエンドで仕事をしているみなさんに質問があります。あなたにとってWebのプログラミングは、HTMLというマークアップを読み書きすることですか。それともDOM（Document Object Model）というツリー構造の操作でしょうか。今回は、この2つの関係を考えてみたいと思います。 マークアップ主義とテンプレートエンジン HTMLを書くのは簡単です。テキストにいくつかタグを付け足せば最低限のHTMLはすぐにできあがります。プログラミングの必要なDOM操作と比べると、このわかりやすさはHTMLの大きな利点です。 Web開発がマークアップの読み書きだと答えた人の多くは、おそらくRuby 用のERBやJava のJSP（JavaServer Pages）、Python向けのJinjaなど、サーバサイドで動くテンプレートエンジンを使っていることでしょう。テンプレートエンジンはH
WebアプリケーションをターゲットにDOM仕様の簡素化を目指す「DOM4」 - builder by ZDNet Japan
エッジからハイブリッド環境まで 考えられる全てのインフラ基盤を検証可能 Lenovoハイブリッドクラウド検証センター さあ、クラウドで解決しよう。 Google Cloud が「業務最適化」と 「イノベーションの実現」のヒントを提案 飛躍的に向上した拡張性と柔軟性 既存システムだけでなく新サービスにも活用 次へつながるバックアップ基盤の刷新 広がる「脱PPAP」の動き 誤送信を防ぎ、セキュリティもしっかりした 代替策として注目の方法を紹介 ビジネスのためのデータ基盤構築 DX時代の企業成長はデータ活用が鍵 新たな展開を後押しするSQL Server活用 GREEの考える効率的データ管理 ハイブリッド環境にあるデータを一元で管理 有効活用とガバナンス強化を実現できた背景 DX推進を阻害する3つの要因 プロフェッショナルが語る データ分析・データ活用の実現 現場業務のデジタル化を促進 リモート
jQueryでのDOM操作にはfilter()が便利ということに今更気づいた - with the flow
お世話になることの多いNETTUTSで、jQueryのDOM検索効率化を上げるためのTipsが紹介されてました。 Quick Tip – jQuery Newbs: Stop Jumping in the Pool 内容はすっごく基本的なことなのだけど、 filter()の便利な使い方について言及されてたので自分用メモ。 基本的なjQueryのDOMの検索の書き方のお作法について。 曰く、「DOMはプールと心得よ！」とのこと。。 要は、「$(".target")とかをキャッシュせずに至る所に書いちゃうと、その度、プールに落ちた小さなコインを見つけるために飛び込ませているのと同じ事になるよ。これって無駄だよねぇ。。」と。 ajaxで中身を入れ替えるコンテンツなんかでは、入れ替えたあとに再キャッシュ、またはlive()などを使うなどの一部例外はありますが、この例え方はなるほどーって思いました。
Modern Syntax
フェナキストスコープってのは、Wikipediaによりますと、 一般的なフェナキストスコープは、軸に垂直に取り付けられた回転する円板である。円板にはアニメーションのコマに相当する絵が順に描かれており、コマとコマの間にスリットがある。この円板を回転させ、絵を鏡に映し、動くスリットから透かして見る。仮現運動を利用し、スリットを通すことでブレがなくなり、絵が動いているように見えるのである。 というものなのですが、これはまあ以下のビデオを見れば一発で理解できるかと思います。 使用しているマーカーは、パイロットコーポレーションの「ボードマスター極太」だそうです。 右に回転させると棒人間が階段を昇り、左に回すと降りているように見えます。 こういうのって自分でもできそうな気はするんだけど、結局うまくできないんだよなあ。
よりセキュアなWebアプリケーションを目指す、JavaScriptチェックツール·DOM Snitch MOONGIFT
DOM Snitchは危険性のあるJavaScriptの処理を検出してスタックトレースするGoogle機能拡張。 DOM SnitchはGoogle Chrome用のオープンソース・ソフトウェア。先日、旧バージョンのjQueryに潜むセキュリティ問題が取沙汰された。JavaScriptが多用されるようになると、そこにセキュリティホールが潜む可能性がある（先日まで当サイトにも存在していた）。 DOM Snitchの画面 JavaScriptが出力したコンテンツなのか否か、Webブラウザを単純に使っている限りでは分かりづらい。ブラウジングを通じて問題があるかも知れない処理を発見できるのがDOM Snitchだ。Google製のGoogle Chrome機能拡張だ。 DOM SnitchはGoogle Chromeの機能拡張であり、Webブラウジング中に特定のメソッドを使われていないかどうか監視
DOMとSAXとStAXと。 - 都元ダイスケ IT-PRESS
こんな名前のAPIがありますね。主にXMLの読み込みを行う為のAPI群であります。SAX以外は、書き出しもできますね。そう、SAXは書き出しできないのですね、基本的に。 <foo> <bar>baz</bar> </foo> っていうもの凄い単純なXMLを、これらのAPIでどのように扱うのか。比較なエントリ。 まずはDOM DOMは、パース時にXMLの内容を全てメモリ上に保持し、パース後にどの要素にもいつでもアクセスできるような環境を作り出す。 import java.io.ByteArrayInputStream; import java.io.StringWriter; import javax.xml.parsers.DocumentBuilder; import javax.xml.parsers.DocumentBuilderFactory; import javax.xml.t
HTML/CSS/JavaScriptを改善してWebサイトのパフォーマンスを向上しよう·DOM Monster MOONGIFT
DOM MonsterはDOMやテキストノードをチェックし、Webサイトのパフォーマンス改善を提示するブックマークレット。 [/s2If] DOM MonsterはJavaScript製のオープンソース・ソフトウェア。JavaScriptを活用したWebサイトが増えている。インタラクティブなWebサイト構築にあたって、JavaScriptを使っていくのは良いが、やたらと使うと重たくなってしまう。 実行した所 さらにdivやspanタグを使って細かなCSS設定を行っていると、多数のタグが使われることでレンダリングに影響を及ぼすようになる。そうしたWebサイトの問題点をJavaScriptを使って指摘してくれるのがDOM Monsterだ。 DOM Monsterはブックマークレット型のソフトウェアだ。公式サイトにあるブックマークレットをWebブラウザに登録するだけで利用できる。任意のWebサ
WEBクライアントでJavaを動かす：DOMアクセスする - 万象酔歩
WEB、クライアント側でJavaを使う。 HTMLによるWEBページにJavaによる処理を反映させる単純な具体例/コードです。 単純にJavascriptからJavaを呼び出し戻り値をDOMセットする JavaでHTMLDomを取得しアクセスする グラフィック部品としてのアプレットは完全に廃れましたが、 複雑な論理を持つものはjavascriptでの構築が難しいことも あり、Javaで作り上げたものにアプレットをかぶせ、このような 形でクライアント側で動かすことは大きな発展性が見込めます。 本記事は実際に動く短いコードを示していますが、細かな説明は まだ載せていません。 補足に参考となるサイトなどを 載せました。 JavascriptからJavaを単純に呼び出す。 JAppletの派生として作成したアプレットを<applet>でHTMLに 導入すればJavascriptから"アプレット名.
history.pushState、history.replaceState - 素人がプログラミングを勉強していたブログ
HTML5のhistory.pushState、history.replaceStateを試した。 HTML5 pushState/replaceState demoで動かせる。 Minefieldだと完全に意図した通りに動くがWebKitだとURLまわりがうまくいかない。 メインのソースコードは下記の通り。 canvasで適当に壁紙用画像を作るデモで、画像自体をクリックして何度も作り直せるようにした。 こういう物を作るときは、前の画像に戻れるよう履歴管理をすべきだが、今まではlocation.hashを使ったり（hashchangeイベントが入るまではタイマーが必要だった）iframeを使ったハックだったり（ブラウザ間の互換性やhistory.go(-2)をきちんと動かすのが難しい）、あるいはページを遷移する（必要ない部分まで毎回読み込まれる）必要があった。 pushState/repl
第6回 JavaScriptとHTMLとDOMの基本#1 | gihyo.jp
こんにちは、太田です。前々回、前回と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宣言の有無（本来は必須ですが）などバリエーションが
Web ブラウザに表示されている画面を直接編集する方法
これはすごい。Web ブラウザのアドレスバーに以下を入力し Enter すると、 今表示されている内容を直接編集できる。Firefox 3.0.14 と IE8 で出来 ることを確認した。 javascript:document.body.contentEditable='true'; document.designMode='on'; void 0 WEBブラウザーに表示されている画面を直接編集する方法 - sanonosa システム管理コラム集 追記(2009-10-04): 戻す方法はないものかなあ。‘false’ と ‘off’ では出来なかった。 追記(2009-10-17): 「戻す方法」というのは、「編集モードから閲覧モードに戻す方法」のこ とです。端折った書き方ですみませんでした。もう少し楽な方法が見つかっ たので、以下に追記します。 IE では、以下を入力し Enter
)
JavaScript addEventListener() - とみぞーノート
仕様書を読んでもわかりにくい、addEventListener()の第3引数useCaptureの意味についてのメモ。 addEventListener()はIEでは未実装なので関係なし。 以下はFireFoxで確認。 useCaptureの意味 通常登録したイベントハンドラ(*1)はイベント伝搬のバブリングフェーズで呼ばれる。このため、DOM Treeの下の方のエレメントからイベントハンドラが順番に呼ばれる。 useCaptureをtrueにしてイベントハンドラを登録すると、キャプチャフェーズでイベントハンドラが呼ばれるようになる。このため、その他のイベントハンドラに先だって呼び出されるようになる。 (*1) 以下のものが含まれる。 DOMエレメントのプロパティに設定したイベントハンドラ(element.onmousedown = handler) HTMLタグに埋め込んだイベントハンド
【ハウツー】Webデバッガに新星登場!? 操作を記録し、イベント/DOMを一発解析 - FireCrystal (1) FireCrystalとは | エンタープライズ | マイコミジャーナル
複雑な機能をいくつも実装したWebアプリケーションのデバッグはツールなしでは一苦労だ。Ajax処理やこまかいイベント制御・DOM操作をおこなっている箇所でバグを出してしまった日には、解析だけで大変な時間を割かなければならない。 そんなときは、FireCrystalを使えば解決するかもしれない。ユーザの操作を記録し「どのタイミングで」「なにがおこなわれているか」を一発で表示してくれる便利なアドオンだ。 本稿では、そのFireCrystalについて紹介しよう。 FireCrystalとは Stephen Oney氏は8月21日(米国時間)、Firefox上で動作するアドオン「FireCrystal」をリリースした。FireCrystalはThe MIT Licenseのもとで公開されている、Webデザイナ・デベロッパ向けのデバッガ。Webページ上でユーザの操作を記録し、内部でどのようなイベント
classList、relListがFirefoxに入った - 素人がプログラミングを勉強していたブログ
HTML5で定義されている、classNameやrelを操作するための新しいAPIがFirefoxのナイトリーに入った。 var p = document.createElement("p"); p.classList.add("foo"); console.assert(p.className == "foo"); p.classList.add("bar"); console.assert(p.className = "foo bar"); console.assert(p.classList.item(0) == "foo"); console.assert(p.classList.item(1) == "bar"); console.assert(p.classList.item(2) == null); p.classList.remove("foo"); console.ass
XUL Apps > Documentations > ラインマーカーの実装の解説 - outsider reflex
Text Link ラインマーカーの実装の解説 2006/7/22 ラインマーカーの実装について受けた質問に対する回答を元にして作成した解説文です。 概要 文字列的処理の限界 実装の解説 選択範囲の取得 単一の要素ノード内で完結した選択範囲の場合 複数の要素ノードに跨る選択範囲の場合 参考文献 Home Back to List 概要 ラインマーカーは、選択範囲の文字列をマーカーで強調したようにする拡張機能です。この機能を実装するためには、DOM2 Rangeを使用する必要があります。 文字列的処理の限界 GeckoやIEでは、window.getSelection()によって選択範囲を取得することができます。しかしながら、これと既存のテクニック（document.write()やHTMLElement.innerHTMLなどを使った文字列的な処理）の組み合わせでラインマーカーと同様の処理
Safari: window.getSelection() が返すオブジェクト (groundwalker.com)
Safari で選択した文字列を取得するには window.getSelection() を使うが、これの返す値がよくわからない。オブジェクトであることはわかるし、 var s=window.getSelection(); var props=''; for (var i in s){ props+=i+':'+s[i]+'\n'; } alert(props); みたいなコードで プロパティを調べると、toString:[function] が定義されていることもわかる（toStringしか定義されていないこともわかる）。しかし、s.toString()=undefined なのだ。alert(s) とすれば、選択された文字列が表示されるので、toString()は実装されているように思うのだが。。。 しょうがないので、このなんだかわからないオブジェクトから文字列を取得するために、str
window.getSelection と document.getSelection - hogehoge @teramako
window.getSelection()とdocument.getSelection()で返ってくる値が違うって事で調べてみた。 <html> <head> <title>getSelection Test</title> <script type="text/javascript"> function reportSelection(){ var sels = { normal: getSelection(), win: window.getSelection(), doc: document.getSelection() }; var div = document.getElementById('div'); div.innerHTML = ''; for (var label in sels){ div.innerHTML += label + ': ' + (typeof sel
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...