XPathというと、XSLTと一緒に使ってXMLをデータの整形する、主にプログラマー向けの技術という認識が一般的にあるような気がします。 確かに開発の現場では避けにくい技術だとは思いますが、XPathはプログラミングを主な業務としないマークアップエンジニア、フロントエンドエンジニアにとっても重宝する技術です。 普段、仕事でHTMLを編集することがあるが、XPathは使ったことないしわからないという人は是非この機会に試してみてはどうでしょうか。 XPathとは XML Path Language （XPath; XMLパス言語） は、マークアップ言語 XML に準拠した文書の特定の部分を指定する言語構文である。 引用元：Wikipedia マークアップ言語 XMLと記されていますが、XHTMLは勿論、HTMLに対しても使用出来ます。 正規表現は文字列から任意の情報を抽出したりできますが、X
Accessibility: WCAG2 at a Glance Perceivable Provide text alternatives for non-text content. Provide captions and alternatives for audio and video content. Make content adaptable; and make it available to assistive technologies. Use sufficient contrast to make things easy to see and hear. Operable Make all functionality keyboard accessible. Give users enough time to read and use content. Do not us
Firefox 3.6 にしたら、動的に生成した文書からの XPath による要素取得ができなくなったという報告が挙がっています。 Firefox3.6でdirect_bookmark.jsとdirect_hb.jsのはてブのタグを取得できていない問題(未解決→解決) - ヴィンペラートル・オクタウィアヌス - vimperatorグループ subscldr.jsが動かなくなったのを直してみた - mountain_dewの日記 この原因は、Firefox 3.6 で HTML 要素の名前空間の扱いが変わったことにあります。Firefox 3.6 (Gecko 1.9.2) では、HTML5 に従い、HTML 要素が (XML 文書中でなくても) XHTML の名前空間 (HTML5 でいうところの「HTML の名前空間」) http://www.w3.org/1999/xhtml に属す
XPathの勉強。LDRFullFeedの仕様がXPathで本文を指定するというものだったので、HTML(XHTML)から必要な部分を抜き出すためにどのようなXPathが書けるかを考えてみる。 特に意味はないけどhttp://labs.cybozu.co.jp/blog/akky/archives/2009/02/interviewd-by-junior-high.htmlを例にしてみる。勝手に使ってすみません。 ... <div id="center"> <div class="content"> <p align="right"> <a href="http://labs.cybozu.co.jp/blog/akky/archives/2009/02/google-news-widget.html">« Googleニュースの新ブログパーツ(ウィジェット)</a> | <a
XPathMark consists of a Functional Test (XPath-FT) and a Performance Test (XPath-PT) for XPath 1.0 language. More specifically: XPath-FT contains several groups of queries each covering a different functional aspect of the language like navigational axes, filters, node tests, operators and functions. The queries are interpreted over a small educational document and each query is accompanied with t
通常、XPath を書くときは //p のようにすることが多いと思いますが、これには名前空間の指定が含まれていないため、XHTML 文書 (MIME タイプが application/xhtml+xml で提供されている文書) では使えません。これに対するアプローチとしては、//h:p のようにあらかじめ XPath 式に名前空間の指定を含めておき、リゾルバによる名前空間接頭辞の解決時に HTML と XHTML とで処理を分けるというのが一般的でした。「XPathNSResolver のクロスブラウザとか」や「document.contentType == "application/xhtml+xml"なページでの$X」で扱っている方法です。 とはいえ、いちいち名前空間接頭辞を指定するのは面倒くさいですし、同じ名前空間に対する接頭辞が人によって違うのも不便です。XPath 式の中で要素名
最近のほとんどの JavaScript フレームワークには、 CSS セレクタによる DOM エレメントの取得機能が実装されています。複数の要素を柔軟な条件で取得できるので、 DOM ツリーの操作がシンプルに記述でき、とても便利です。しかし、単に CSS セレクタを使いたいだけなのに、フル機能のフレームワークを読み込むのはちょっと抵抗がありますよね。 そんな悩みを解決してくれるのが、本日ご紹介する Sizzle, Peppy という 2 つのライブラリです。これらは他のフレームワークに依存しない独立した CSS セレクタエンジンで、しかも jQuery 等の既存のエンジンより数倍高速に動作します。 unobtrusive な Web ウィジェットの開発や、独自フレームワークの開発に最適ですね。その他にも広範な用途に使えるでしょう。 以下でこれらのライブラリの使い方や動作速度等の検証結果を掲
XMLパス言語 (XPath) Version 1.0 この文書は、W3Cにより作成されW3C勧告として公開されている "XML Path Language (XPath) Version 1.0" (http://www.w3.org/TR/1999/REC-xpath-19991116) を、どら猫本舗が翻訳したものです。 この文書の原文はワーキングドラフトです。将来の改訂が予定されていることにご注意ください。最新版の仕様書は http://www.w3.org/TR/xpath にあります。 正式な仕様書はW3Cサイトにある英語版です。この日本語版は参考にすぎません。 この文書には翻訳上の誤りがあるかもしれません。どら猫本舗は翻訳の正確性を保証しません。あくまでご自身の責任でご利用ください。 お気付きの点がありましたらどら猫本舗までお知らせください。 XMLパス言語 (XPath)
さいきんlibxmlでHTMLを読み込んでXPathで要素を取り出すのが一部([xml][libxml2][c]XMLをHTTPで取得して、XPathで指定された中身をC言語で取り出す方法 - グニャラくんのグニャグニャ備忘録@はてな)ではやっています。 これにちょっと癖があってはまりました。 <html><body> <ul id="list"> <li>hello</li> <li>world</li> </ul> </body></html> こういうHTMLファイルを読み込んで id("list")/li というXPathを評価させるとなぜか何にもマッチしないのです。でもこれを //*[@id="list"]/li に置き換えるとhelloとworldを囲んでいるliふたつにマッチするようになるので、パース自体は問題ないようです。 で、いろいろいじっていたらなんでもいいのでHTML
すべての要素 //* div直下のp //div/p style属性を持つspan //span[@style] alt属性のないimg //img[not(@alt)] idがheaderな要素 id("header") rel属性がshortcut iconなlink要素 //link[@rel="shortcut icon"] 子要素にimgを持つa要素 //a[./img] 子、子孫にa要素を持つh2要素 //h2[.//a] 子要素にulがないdiv //div[not(.//ul)] javascript:から始まるhref属性を持つa要素 //a[starts-with(@href,"javascript:")] alt属性の値がsrc属性の値と同じであるimg要素 //img[@alt=@src] alt属性の値がsrc属性の値と異なるimg要素 //img[@alt!=@
個人的にはあまり得意でないXSLT。XML自体がどうも冗長的な感じがするのと、さらにそれを解析して出力するというのがどうも合わない。が、時代はXMLでのデータやり取りが主流になっている。好き嫌いで判断してはいけない。 XPathのデモ 手軽にXPathやXSLTを利用できるツールも登場している。これはJavaScriptから操作するライブラリだ。 今回紹介するオープンソース・ソフトウェアはAJAXSLT、JavaScriptによるXPath/XSLT向けライブラリだ。 AJAXSLTはJavaScriptベースでXMLを解析し、XSLTと合わせて出力するライブラリだ。その解析の中でXPathが利用されているようだ。複雑なXMLを利用する場合には、DOM操作よりも効率的に開発できるXPathが利用できるのは嬉しい。 XSLTのデモ そして取得したXMLを整形して表示する際に利用するのがXSL
正規表現といえば、 文字列の検索や切り出しに大活躍。大量の規則や物量と格闘する際のバディ プロトコルをRFC(BNF)を見てゴリゴリ書くひとにとっての福音 モダン言語に100%存在する機能(無いほうがおかしい) なわけです。 JavaScriptで雅な表現(スケスケとかアニメとかAjax)をするには、ドキュメントツリーを多少なりとも操作する必要がありますが、 その前に、操作対象を何らかの方法で特定しなければなりません。 DOMによるノードの検索 DOMを使った従来の手法だと、 idから検索 document.getElementById() タグから検索 document.getElementsByTagName() CSSのクラスから検索 document.getElementsByClassName() - IE等では使えない 親ノードの子供達から検索 Node.childNodes[
XPathGraph とは http://xpath.kayac.com/ URL と XPath を指定すると一日に一回その URL をスクレイピングして XPath 式が示す値をグラフにしてくれる！という画期的なサービスです。 例えば、 URL と XPath を指定するだけで以下のようなグラフが作れてしまいます。 本当に楽しいことが出来そうでワクワクしてます！ でも まだ XPath を登録している人が意外と少ないので、「ひょっとして、このサービスの使いどころが分からないのかなあ。」と思いました。 というわけで XPath で出来ることのヒントを少し紹介したいと思います。 足し算、引き算、かけ算、割り算 XPath では普通に数値の演算ができます。 たとえば、 //div[@class=counter] で取得してきた div 要素が 1000 という数値を持っていたとすると 2 *
ただいま6月7日以降に新しく作成したグラフが更新されない不具合を確認しています。原因調査中ですが、マッシュアップ先のはてなグラフの影響の可能性もあり解決までしばらく掛かるかもしれません。ご不便をお掛けしまして申し訳ございません。作成済みのグラフに関しては問題なく更新されています。また登録についても（更新はされないものの）可能です。 XPathからグラフを生成。 XPathGraphはウェブサイト上にある数値を定期的に取得し、自動的にグラフを作成するサービスです。取得したい数値を含むノードをXPathで指定すると、その日に巡回した結果をグラフに追加していきます。［詳しく］ 例えば こんなグラフを作成出来ます 為替 no description 2008年11月12日 18:28 怖い絵２Amazonランキング no description 2008年12月18日 20:09 microSDH
日頃より楽天のサービスをご利用いただきましてありがとうございます。 サービスをご利用いただいておりますところ大変申し訳ございませんが、現在、緊急メンテナンスを行わせていただいております。 お客様には、緊急のメンテナンスにより、ご迷惑をおかけしており、誠に申し訳ございません。 メンテナンスが終了次第、サービスを復旧いたしますので、 今しばらくお待ちいただけますよう、お願い申し上げます。
はじめに IE8 には Selectors API という新しい仕様が実装されました。 ということで、今後 DOM 操作 API の主流になるであろう Selectors API についてまとめておきます。 Selectors API が使えるブラウザ 2008 年 3 月 6 日現在の一覧 WebKit Build Archives | WebKit (開発版の Safari) Windows | Official Site for Microsoft Windows 10 Home & Pro OS, laptops, PCs, tablets & more (IE8 の Beta 版) Selectors API とは Selectors API とは W3C で定義された仕様です。詳細に関してはこちらをどうぞ 簡単に説明すると getElementsByTagName や getE
ITインフラ運用からの解放 HCI＋JP1による統合運用による負荷激減で 次世代IT部門への役割変革へ一歩前進 IT部門のDXはこれだ！ IT運用管理新時代における最適な運用管理 の現場作り ビジネスの推進には必須！ ZDNet×マイクロソフトが贈る特別企画 今、必要な戦略的セキュリティとガバナンス ビジネスのためのデータ基盤構築 DX時代の企業成長はデータ活用が鍵 新たな展開を後押しするSQL Server活用 特集：IT最適化への道 成功の秘訣をその道のプロが解説 カギとなるのはシステムの「見える化」 デジタル時代のITインフラ構築術 仮想化統合、クラウドを経て今「マルチ」へ ITインフラの最適化と継続的進化への道筋 今を知り、未来を見据える 培ってきたノウハウを最新技術へ対応させる レガシーシステムのモダン化実現への道 ライバル同士がタッグを組む理由 マイクロソフトとヴイエムウェアが
Latest topics > CSS3セレクタとXPathでの表現の対応表 宣伝。日経LinuxにてLinuxの基礎？を紹介する漫画「シス管系女子」を連載させていただいています。 以下の特設サイトにて、単行本まんがでわかるLinux シス管系女子の試し読みが可能！ « getElementsByなんちゃら の代わりにXPathを使う Main Mozilla 24 » CSS3セレクタとXPathでの表現の対応表 - Sep 13, 2007 拡張機能勉強会の時に焚き付けられた、Text Shadowのコード（textshadow.js）を教材にして拡張機能開発のノウハウを解説していくシリーズ。 XPathをノードの検索に活用する方法を紹介したけど、肝心のXPathが書けなきゃ意味がないわけで。でもXPathって、ノードセットがどうとかノードテストがどうとか軸がどうとか修飾がどうとか、い
結論特定のclass属性を持った任意の要素にマッチするXPath(hogeは指定したいclass属性名) //*[contains(concat(" ",normalize-space(@class)," "), " hoge ")] 特定の要素にしたい場合は適当に div[contains(concat(" ",normalize-space(@class)," "), " hoge ")] などとする． 概要特定のclass属性を持った任意の要素にマッチするXPathというのはアドオンやUserJavaScript，スクレイピングの際にDOMノードを特定するために良く使いますが，XPathの書き方がマズイ人がたまにいます．普通に考えたらXPathはこうなります． XPath1:: //*[@class="hoge"] class属性は以下の引用部分に書かれているとおり，スタイルシート以
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
