kohhi回答ポイント 400ptウォッチ

simple_html_dom.phpの質問です。

１．h2,h3.h4タグ,ul,liの一番深いものではないタグ
２．一番深いタグ
に分けて表示させたいのですが、プログラムが書けません。

うまく説明ができないので、説明用のファイルをアップしてあります。

http://1811way.com/work008/sample09.html
のhtmlファイルがあります。

このファイルに対して、simple_html_dom.php
を使って、
http://1811way.com/work008/sample09kekka.html
のように表示させたいです。

一番深いliタグの内容を[Contents]、それ以外を[Subject]としてひとまとめに表示させたいのですが、
できません。

できないというのは、アルゴリズムが組み立てられない、という事です。

参考までに、僕が書いたプログラムです。
これを元に、
sample09kekka.html
のように表示させるプログラムのアドバイス、考え方、もしくはソースを書いてくれると
大変助かります。


$html = file_get_html('sample09.html');
$i = 0;
foreach ($html->find('ul,h4,h3,h2') as $ul) {
$i++;
$test01 = $ul->find('h4',0);
echo $i . '番目の' . 'h4です：' . $test01 . '<br />';
}

以上、よろしくお願いします。

• はてなアカウントでログイン
• 無料ユーザー登録

ベストアンサー

• a-kuma32015/10/31 11:46:40

  満足400pt

  考え方でも良いということなので、javascript でやってみました（php は不得手です　:-)。
  jsFiddle で試したのがこちらです。
  https://jsfiddle.net/a_kuma3/Lvm5vey1/
  
  元になる HTML では SubjectNo2 と No3 の見出しタグの閉じタグが開始タグと一致していなかったので、そこは修正しています。
  
  探索しているコードはこんな感じです。

  // 探索ロジックはここから
  var ul_list = document.body.querySelectorAll("UL");
  Array.prototype.forEach.call(ul_list, function(ul) {
      if (! ul.querySelector("UL")) {
          var li_list = ul.querySelectorAll("LI");
          Array.prototype.forEach.call(li_list, function(item) {
              var bottom_content = item;
              var route = [];
              var LIMIT = 100;    // 無限ループが恐いので...
              while (item.tagName == "LI" && LIMIT > 0) {
                  LIMIT = LIMIT - 1;
                  // LI の親要素
                  var p = item.parentNode;        // 多分 UL
                  if (p.tagName == "BODY") {      // 念のため
                      break;
                  }
                  // UL よりも前にある要素を探す
                  e = p.previousSibling;
                  while (e.nodeType != 1) {
                      e = e.previousSibling;
                  }
                  // 見出し要素ならパンくずの道筋
                  if (/^H[1234]/.test(e.tagName)) {
                      route.push(e);
                  }
                  // 見出しの親要素で続ける
                  item = e.parentNode;            // 多分 LI
              }
              // 逆にしたのがパンくず
              var breadcrumb = route.reverse();
  
              // printout
              printout(breadcrumb, bottom_content);
  
              n += 1;
          });
      }
  });
  
  // 表示用
  var n = 1;
  function printout(breadcrumb, bottom_content) {
      var bc_text = breadcrumb.map(function(e) { return e.textContent; }).join(" > ");
      console.log(n + ".[Subect]:" + bc_text);
      console.log(n + ".[Contents]:" + bottom_content.textContent);
  
      var msg = document.getElementById("output");
      msg.value += n + ".[Subect]:" + bc_text + "\n";
      msg.value += n + ".[Contents]:" + bottom_content.textContent + "\n";
  }
  

  
  

  「一番深い LI タグ」は、「一番深い UL を見つけて、その下にある LI」という探し方をしています。
  「一番深い UL」とは、「全ての UL のうち、その子供に UL がない UL」です。
  
  パンくずは、HTML の構造に依存します。
  「一番深い LI」のそれぞれについて、以下のロジックで探します
  ・LI の親要素を見つける（UL のはず）
  ・その UL と同じ階層にあって、それよりも前にある要素を探す
  ・その要素のタグが見出しタグなら、パンくずの候補に入れる
  ・その見出しタグの親（LI のはず）をターゲットにして繰り返す
  ・見出しタグの親要素が LI じゃなかったら探索の終了
  ・パンくずの候補は深い方から浅い方向の順番なので、配列をひっくり返す
  
  javascript と php の Simple HTML DOM の差異について書いておきます。
  ほとんどはメソッド・プロパティの読み替えだけで済むと思いますが、一点だけ大きく違うところがあります。
  

  ■querySelectorAll → find

  タグで要素を探すのに querySelectorAll というメソッドを使っています。
  Simple HTML DOM では、find メソッドに相当します。
  

  ■parentNode → parent

  親の要素を取得します。
  

  ■previousSibling → prev_sibling

  その要素と同じ階層で、ひとつ前の要素を取得します。
  ここが大きく違います。
  javascript（というか、普通の DOM）では、このメソッドは Node を返します。
  Node は、HTML のタグを表すもの（要素：Element）だけではなく、テキストやコメントなども表します。
  先のコードで e.nodeType != 1 というループがあるのは、要素を探しています。

      // UL よりも前にある要素を探す
      e = p.previousSibling;
      while (e.nodeType != 1) {
          e = e.previousSibling;
      }
  

  タグの間にある空白や改行も javascript の DOM では Node として取得されるので、nodeType プロパティを見て、要素が見つかるまで前に前にと探します。
  
  Simple HTML DOM ではドキュメントに以下のように記載されています。

  element

  $e->prev_sibling ()

  Returns the previous sibling of element, or null if not found.

  リファレンスを見ても、Text Node に関する記載がないので、多分、要素：Element がいきなり返ります。
  タイプを見ながらさかのぼる必要はないと思います。
  

  ■textContent → plaintext

  ある要素の下位にあるテキスト要素だけを取り出します。
  見出しタグを含めて取り出したければ、innertext を使います。
  
  
  
  

  ---

  追記です。
  php でもやってみました。

  <?php
  require "simple_html_dom.php";
  
  $html = ...
  
  // 表示用
  function text_content($e) {
      return $e->plaintext;
  }
  
  function printout($breadcrumb, $bottom_content, $n) {
      echo $n . '.[Subject]:' . implode(' > ', array_map("text_content", $breadcrumb)) . '<br>';
      echo $n . '.[Contents]:' . $bottom_content->plaintext . '<br>';
  }
  
  $n = 1;
  
  // 探索ロジックはここから
  $ul_list = $html->find('UL');
  foreach ($ul_list as $ul) {
      $ul_child = $ul->find('UL');
      if (count($ul_child) == 0) {
          $li_list = $ul->find('LI');
          foreach ($li_list as $item) {
              $bottom_content = $item;
              $route = array();
              $limit = 100;       // 無限ループが恐いので
              while ($item->tag == 'li') {
                  $limit = $limit - 1;
                  // LI の親要素
                  $p = $item->parent();       // 多分 UL
                  if ($p->tag == "body") {    // 念のため
                      break;
                  }
                  // UL の前にある要素
                  $e = $p->prev_sibling();
                  // 見出し要素ならパンくずの道筋
                  if (preg_match('/^H[1234]/i', $e->tag)) {
                      $route[] = $e;
                  }
                  // 見出しの親要素で続ける
                  $item = $e->parent();       // 多分 LI
              }
              $breadcrumb = array_reverse($route);
  
              printout($breadcrumb, $bottom_content, $n);
              $n = $n + 1;
          }
      }
  }
  ?>
  

  
  

  Phpfiddle で試してみたのがこちらです。
  http://phpfiddle.org/lite/code/qz9p-b0t6

  スター

  • 

    6件のコメントを見る

  • kohhi 2015/11/01 20:40:07

    回答いただきまして、ありがとうございました。
    
    javascriptは、よくわからないのですが、
    これからPHPに変えてみます。
    
    >元になる HTML では SubjectNo2 と
    >No3 の見出しタグの閉じタグが開始タグと一致していなかった
    すいません。なおしておきました。
    
    取り急ぎご連絡まで。

    スター

  • a-kuma3 2015/11/01 22:08:54

    ぼくも余裕があったら、php で書いてみます。
    ぼくも場合、配列に要素を追加したり、配列のループをしたり、などという辺りをいちいちマニュアルを見ないと書けないので、本質以外のところにとても時間がかかるので、ぱっと直せないんです　(´・ω・｀)

    スター

  • kohhi 2015/11/02 08:47:40

    ありがとうございます。マニュアル読んでやってます。難しいですね。

    スター

  • a-kuma3 2015/11/02 10:41:50

    php でもやってみました。
    回答に追記してます。

    スター

  • kohhi 2015/11/02 12:17:37

    できました。というかa-kuma3さんのコピペですがしっかり結果出ました。僕が実際考えても、できないか、かなりな時間がかかりましたね。　ありがとうございました。

    スター

  • a-kuma3 2015/11/02 13:08:34

    ideone.com がときどきこけるので、その押さえくらいにと思ってた phpfiddle が file_get_html で別サイトをアクセスできたり、MySQL や SQLite が使えるっぽいということが分かって、ぼくも収穫ありでした　:-)

    スター

その他の回答

この質問へのコメント

• rouge_20082015/10/30 00:41:38
  回答リクエストいただきましたが、私もまだアルゴリズムが思いつきませんので、回答できるかは分かりません。
  一応もう少し考えてみます。(^^;
  
  ※だれか分かる人がいればいいですね。
• kohhi2015/10/30 06:56:03
  お手数おかけしてすいません。
• a-kuma32015/10/30 20:59:05
  sample09kekka.html って、正確です？
  HTML では、SubjectNo1-4th と SubjectNo1 5th が同じ深さなので、
  1｜Sub1-Top : Sub1-2nd : Sub1-3rd : Sub1-5th
  1｜Sub1-Content01
  2｜Sub1-Top : Sub1-2nd : Sub1-3rd : Sub1-5th
  2｜Sub1-Content02
  となるのかな、と。
  つまり、SubjectNo1 4th が表示されない。
  
  SubjectNo2 Content＊ については、No2 になってないのは打ち間違い？
  
  後、SubjectNo3 は、子供が二つあるので、
  5｜Sub3-Top
  5｜Content01
  6｜Sub3-Top
  6｜Content02
  と来るのかな、と思うんですが。
  
  
  パンくずみたいなことをやりたいんですよね？
  最下層の LI と、そこに至るまでの UL-LI 階層のつながりを抽出したいと。
  
  違います？
• kohhi2015/10/30 22:44:51
  早速お返事ありがとうございます。
  
  １．--ご指摘１
  sample09kekka.html って、正確です？
  HTML では、SubjectNo1-4th と SubjectNo1 5th が同じ深さなので、
  1｜Sub1-Top : Sub1-2nd : Sub1-3rd : Sub1-5th
  1｜Sub1-Content01
  2｜Sub1-Top : Sub1-2nd : Sub1-3rd : Sub1-5th
  2｜Sub1-Content02
  となるのかな、と。
  つまり、SubjectNo1 4th が表示されない。
  --ご指摘１　以上
  
  おっしゃる通りですね。
  SubjectNo1 4th　-＞　削除
  SubjectNo1 5th　-＞　SubjectNo1 4th
  　＝　SubjectNo1 5th　を無くした。
  
  
  
  ２．--ご指摘２
  SubjectNo2 Content＊ については、No2 になってないのは打ち間違い？
  --ご指摘２　以上
  
  ちょっと考えます。
  
  
  
  ３．--ご指摘３
  後、SubjectNo3 は、子供が二つあるので、
  5｜Sub3-Top
  5｜Content01
  6｜Sub3-Top
  6｜Content02
  と来るのかな、と思うんですが。
  --ご指摘３　以上
  
  おっしゃる通りですね。
  追加しておきました。
  
  
  sample09kekka.html 、sample09.html
  どちらも、わかった部分は修正しました。
  
  よろしくお願いします。

質問の情報

登録日時

2015-10-29 15:05:27

終了日時

2015-11-02 12:18:08

回答条件

1人1回まで

この質問のカテゴリ

• ウェブ制作

この質問に含まれるキーワード

人気の質問

• 退職後三ヶ月後に賃貸したい場合、社名に直近の職を書いて歴は実際働いてたらの歴を書いても大丈夫ですか？…dmw887512日前
• 男性の方に質問させていただきたいです １ヶ月ほど前から一目惚れしていた先輩と初めて直接お話しできた日…匿名質問者12日前
• 新古車の支払い総額が127万で、ナビ、バックカメラ、ドラレコ前後つけて乗り出し価格171万です。高く感じま…dmw887512日前
• 経理処理について質問です。 私は一般企業に勤めていて営業職を行なっています。先日外注作業を個人事業主…匿名質問者211日前
• pc　VRAM４GB　使ってますが　たりず　ゲームが起動できなかったり　落ちたりします。　グラボを交換せずに…kgokur22日前

メニュー

• 質問一覧
• カテゴリ一覧
• 無料ユーザー登録
• 人力検索はてなトップ

PC版

• お問い合わせ
• ヘルプ
• お知らせ
• はてなトップ