はじめまして、アニメイトラボのフロントエンドエンジニア id:koharusugiura です。 今回は XPathについて書きたいと思います。 HTML 文書から任意の要素を取得する際、多くの場合 jQuery や Selectors API などでセレクターを使いますよね? セレクターは細かい条件の指定はできませんが、簡単に要素が取得でます。しかし細かい条件によって要素の取得を行うことができません。 細かい条件で要素の取得を行う場合は、XPath を使うことで開発が捗ります。 XPathはセレクターよりも少々複雑な仕様となっていますので、まずは比較をしながらご説明したいと思います。 この記事は animateLAB Advent Calendar 2015 23 日目の記事です。 qiita.com ※ この記事でサンプルとして記載しているコードは特筆のない限り ECMAScript
先日の kyoto.pm ハッカソンで、時代錯誤な feed 生成ツールを作りました。 なんでもRSSとか類似サービスいろいろあるとは思いつつ、scrapeするコード書くの好きだし、kindle本セールのフィードが欲しかったので作ってみました。完全自動でフィードつくるより、xpath（もしくはCSSセレクタ）で指定できる方が好みのフィードが作れそうというのが理由です！ http://xpathfeed.com/ 使い方は簡単です。任意のURLを入力します。 すると、iframe内にコンテンツが表示されます。 こっから、フィードにしたいアイテムを選びます。Yahooの「主なサービス」のフィードを作ろうと思ったら、マウスカーソルをフォーカスすると… iframe内右上に xpath がサジェストされます(cho45の jautopagerize のコードをパクりました)。これを参考に、リストア
Excellent XPath Expressions nanto_vi (TOYAMA Nao), 2010-06-05, 2010-09-26 追補 XPath で何ができるか 文書中のノードの選択 文書: XML 文書、HTML 文書 ノード: 文書ノード (ルートノード)、要素ノード、属性ノード、テキストノード、コメントノード、etc. cf. CSS セレクタ: 要素の選択 文書を元にした文字列、数値、真偽値の生成 図 1 に HTML 文書が生成する文書木 (文書ツリー) の例を挙げます。図中、二重線で囲んだのが文書ノード、角丸四角が要素ノード、長方形がテキストノードを表します。 文書木の根 (最上部) は文書要素ノード (ルート要素ノード、HTML 文書なら html 要素ノード) ではなく、文書ノードであることに注意してください。JavaScript から DOM や XP
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 に属す
id:otsune さんの RT 論を読んで あと「公式RTだろうが非公式だろうが返信だろうが何でもいいけど、オレはタイムラインに◯◯の文字が見えるのが嫌なんだ」って要望は3年前から存在する。オレの持論は何十回も言ってるけど「すべてのブラウザはNGワード機能を搭載すべき」 @otsuneさんのRT論 - Togetter なるほどー、たしかしー というわけで グリースモンキーを書いて見たよ！ こんな感じです 良かったら使ってください！ NG ワードのところに好きな単語を書き込むと、その単語を含む要素が消滅します！*1 // ==UserScript== // @name NG Filter! // @namespace http://d.hatena.ne.jp/amachang/ // @include http://* // ==/UserScript== (function() {
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
必要に迫られてようやく作った。 // ==UserScript== // @name XPath Finder // @namespace userscript // @include * // ==/UserScript== function $X(exp, context, type) { if (context && !context.nodeType) { type = context; context = null; } if (!context) context = document; var exp = (context.ownerDocument || context).createExpression(exp, function (prefix) { return document.createNSResolver(context).lookupNamespaceURI(
よく、以下のように XPath に文字列を埋め込む事があります document.evaluate('//*[@class="' + text + '"]', document, null, 7, null); まあ、僕もよくこんなコード書くんですけど。 でも、これって text が外部から来るものだったら、意図通りの動作をしないんですよね たとえば、以下のような例です。 var text = '"] | /hoge/fuga/piyo | .["'; document.evaluate('//*[@class="' + text + '"]', document, null, 7, null); というわけで 任意の文字列を XPath の式に変換する JavaScript を書いてみた 以下で試せます http://amachang.sakura.ne.jp/misc/xpath_es
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
みんなセレクタ登録しようぜ！って書いたのに1件も増えてなかったので現状fub専用のDBなんて俺しかメンテしないんだったらこりゃダメだな、と思ったんだけど更新履歴見たら試行錯誤してた人が1人いたので少し希望があった。 セレクタ書き方講座みたいの書いたら少しは増えるだろうか。MSN産経ニュースは俺が書いちゃったけど。 ステータスバーのアイコンダブルクリッコでuser.jsを無効にすると以後有効にしてもスクリプトエラーになってたので、一応exeだけ差し替えておきました。 http://madchester.s54.xrea.com/archives/test.zip あとユーザースタイルシートの効きが悪い件は認識済みなのですが、IE8のバグだと思うのでちょっと保留中です。（以前のよく効く方式だと全く適用されずに違う方法で適用してます） 最終的に捨てるかもしんないしあれだけど、頭の体操だと思って1
タイトルは釣りです。誰か開発してくれないかなあ。いや特に困ってはいないんですが。 「タイトルは釣りです」と本文に書いてあるエントリを非表示にするGreasemonkey - kokokubeta; 書いてみました。 AutoPagerizeに対応しています。 よろしければ、どうぞご利用ください。*1 追記 うひゃあ、日記に書いたら本当につくってくれる人がいた！うれしい。でもまだインストールの方法を理解できていない はてなブックマーク - kokokubetaのブックマーク / 2008年12月15日 Greasemonkey を導入した Firefox で、InvisibleFisherman.user.js にアクセスすると、内容確認とインストールをおこなえます。ご参考まで！（追記ここまで） // ==UserScript== // @name InvisibleFisherman //
飽きる前にそれなりに形になったのでリリースしておきます Python 2.5*とBeautifulSoup 3.0.7* or 3.1.0*の環境でとりあえず動くXPathEvaluatorです。 アーカイブファイル(ZIP)：BSXPath.py： XPathEvaluator Extension for BeautifulSoup 上記ファイル(BSXPath.py）を使ったサンプルはこちら 【2009/04/05追記】 BSXPath.pyを使ったサービスを公開しました。 任意のサイトのフィードパターンを作成・共用できるサービス 使い方 from BSXPath import BSXPathEvaluator,XPathResult #*** 準備 document = BSXPathEvaluator(<html>) # html: HTMLテキスト # ※BSXPathEvalu
var XPath = { cache: null, reset: function () { this.cache = {__proto__: null}; }, get: function (context, expr, type) { var cache = this.cache, evaluator; if (expr in cache) { evaluator = cache[expr]; } else { evaluator = cache[expr] = XPathEvaluator().createExpression(expr, null); } return evaluator.evaluate(context, type, null); }, has: function (context, expr) { return this.get(context, expr,
jottit.comのLDRize用XPath - FFFF - 0x XPath - 枕を欹てて聴く XPathとかCSSの評価にかかる時間のこと - ロックスターになりたい 関連。 AutoPagerize SITEINFOを保存して、そのHTMLで軽くテストしてみた。 xpath speed test 例によって、JSEnumeratorのBenchmarkツールをお借りました。 やはりid関数は高速 //p(/descendant-or-self::node()/child::p)より、/descendant::*/pのほうが高速 //pはDocument内のすべてのp要素を取得する 先頭が/の場合のselfはDocument。そのdescendant::*はhtml以下のすべてのElementノードになる。そこで/pを選択すると、実質はDocument以下のすべてのp要素となる
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
LDR は、アイテムを繰るのの基準としてH2要素を使っている。本来RSSしか読まないんだからそれで大丈夫なんだけど、LDR Full Feedとかで要素を付け足すと、H2があると、意味もないところでとまってしまう。 そこで今までは、HTMLDocumentにする前に、正規表現で、 // drryさんがGR Full Feedで作成なさったものです。ものすごくきれいな正規表現。 if (REMOVE_SCRIPT) text = text.replace(/<script(?:\s[^>]+?)?>[\S\s]*?<\/script\s*>/gi, ""); if (REMOVE_H2TAG) text = text.replace(/<h2(?:\s[^>]+?)?>[\S\s]*?<\/h2\s*>/gi, ""); ってやってたんです。 が、これによるREMOVEをtrueしていると
調べてみるとちょっと衝撃を受けたので書いておく。 以下XPathによるFirebug上からの抽出速度。抽出対象はLDR Full Feedで本文として指定しているもの。 速度計測法はid:os0xさんのjottit.comのLDRize用XPath - FFFF - 0xで使っているFirebug組み込み関数である$xによる抽出1000回の所要時間。 調査目的は、前から疑問に思っていた、抽出対象がclassなど特定条件で一発で抽出できる場合（//div[@class="entry_body"]など）の以下3つの疑問点 全体からclassなどで一発で抽出するのと、祖先ノードにidのある場合、それをid関数で抽出した後子要素を検索するのではどちらが速いのか。 //div[@id="ほにゃらら"]はマジで遅いのか。 //div[@class="ほにゃらら"]と//div[contains(con
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
米 Yahoo! が Yahoo! Pipes みたいに自由度が高くて、またちょっと毛色が違うサービスが出てきた。題して、Yahoo! Query Language。YQL と呼ぶようだ。SQL 風の言語を REST で投げて、結果を XML や JSON で受け取ることができる。具体的にやってみないと分かりにくいので、とりあえず試してみた。RSS からデータ取得YQL を使って RSS から最新のタイトル10個を取ってきてみる。こんな YQL になるらしい。 select title from rss where url='http://d.hatena.ne.jp/nitoyon/rss' rss テーブルに対して select を発行している。実際にこの YQL を試すには YQL 用の console を利用するとよい。（※要ログイン）console の左上に YQL を入力して
通常、XPath を書くときは //p のようにすることが多いと思いますが、これには名前空間の指定が含まれていないため、XHTML 文書 (MIME タイプが application/xhtml+xml で提供されている文書) では使えません。これに対するアプローチとしては、//h:p のようにあらかじめ XPath 式に名前空間の指定を含めておき、リゾルバによる名前空間接頭辞の解決時に HTML と XHTML とで処理を分けるというのが一般的でした。「XPathNSResolver のクロスブラウザとか」や「document.contentType == "application/xhtml+xml"なページでの$X」で扱っている方法です。 とはいえ、いちいち名前空間接頭辞を指定するのは面倒くさいですし、同じ名前空間に対する接頭辞が人によって違うのも不便です。XPath 式の中で要素名
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
