記事の詳細

趣味が睡眠になりつつあります、網干です。

予定が何も入っていない休日に睡眠時間を16時間もとっていました。
具体的には 0-8時 10-13時 16時-19時 22時-24時 と睡眠をとっていました。
食事の前後しか起きないグータラ生活でしたが、翌日に首と肩で謎の痛みが発症しました…。
過度な睡眠は良くないですね、適度な睡眠が大事です。

さて、以前に「JavaScriptで同一ドメイン内のHTMLで構成されたページの特定のタグを全て取得する方法」という記事を書かせていただいたのですが、divやspanなどの閉じタグがあるような範囲の取得に対応していませんでした。
※前回の記事は下記になります。

HTML特定タグ取得アイキャッチJavaScriptで同一ドメイン内のHTMLで構成されたページの特定のタグを全て取得する方法
ハーゲンダッツのメープルカスタードクッキーにハマっています、網干です。ハーゲンダッツの期間限定商品は時折ハマってしまうんですよね…。パッケージを見て「これはお...

なので、今回は開始タグから終了タグまでを取得するプログラムを紹介させていただきます。

JavaScriptで同一ドメイン内のページの特定タグの開始タグから終了タグまでを取得する

以前にもご紹介しましたが、このプログラムは同一ドメイン内のページにしか対応していないことに注意してください。
例えば、これから紹介するプログラムを”http://example.com”のドメインのページに設置した場合は”http://example.com/page1.html”のHTMLコードを取得することは可能です。
しかし、プログラムを”http://example.com”のドメインのページに設置して”http://www.yahoo.co.jp/”のHTMLコードを取得することはできません。
これは、今回のプログラムで使用するXMLHttpRequestの仕様で外部ドメインのコード取得が不可能になっているため、取得ができません。

では早速、下記にコードの一式を記載します。

【 html 】

【 javascript(test.js) 】

基本的には全てコメントに記載した通りの内容になっています。
上記のプログラムを使う場合は、optionタグで指定しているURLを自身のドメインに設置しているページのURLに変更してください。

開始キーワードを指定して指定範囲のコードを取得する

上記プログラムの使い方は…

  1. 取得するページを指定する(今回は自身のHPのトップページ)
  2. 取得を開始するキーワードを指定する(今回は”article”タグの始めから終わりまでを取得)
  3. キーワードのタグを指定する(今回取得するタグ”article”を選択する)

条件を指定する際に2.の条件は非常に重要で、可能な限り確実に取れるコードの開始ワードを指定してください。
例えば、私のHPのトップページのソースコードを見ると下記のような構造になっています。
20161024_特定のコード取得01

今回は投稿記事のソースコードのみを取得するのですが、画像を見るとarticleタグで囲っている部分が投稿記事であることがわかります。
なので、articleのタグで取得をすれば良い と考えてしまうのは少し怖いです。
というのも、もしかしたら別の場所でもarticleタグを使用している可能性があるからです。
従って、想定しないarticleタグの範囲を取得しないように、もっと文字列を特定して‘<article id=”post-‘というワードから始まる文字列で検索を行います。

このようにキーワードは可能な限り他のタグと区別ができるように指定する必要があります。

最後に、キーワードのタグを選択して「取得開始」ボタンを押します。
すると、下記のように指定範囲のコードを抜き出してテキストボックスに表示します。
※検索開始のキーワードには‘<article id=”post-‘を入力することに注意してください
20161024_特定のコード取得02

今回のプログラムの実装手順

今回のプログラムを自身のサイトで試したい場合は、下記の手順でファイルの作成/修正を行ってください。

  1. 新規のテキストファイルを二つ用意して【 html 】と【 javascript(test.js) 】の内容をコピペする
  2. 【 html 】のファイルは”test.html”の名称で保存、【 javascript(test.js) 】のファイルは”test.js”の名前で保存する
  3. 保存したファイルは同じフォルダに格納する
  4. “test.html”の”http://techmemosrv.minibird.jp/”の部分を自身のページのURLに変更する
  5. “test.html”の”article”の部分を取得したいタグの名称に変更する
  6. “test.html”をブラウザで開いてURL、開始キーワード、開始タグを設定して取得開始ボタンを押す

上記の手順で同じようなプログラムが動きます。

動作確認環境

このプログラムは下記のブラウザで正常に機能していることを確認しています。

  • Google Chrome 53.0.2785.143 m (64-bit)
  • Firefox 49.0.2
  • Safari 5.1.7
  • Microsoft Edge 38.14393.0.0
  • Internet Explorer11 11.321.14393.0

最後に

いかがでしたか?

なかなか使いどころが難しいプログラムではありますが、ドメイン内に複数のサイトを持っていたりするとなかなか使えるプログラムだと思います。
どこかのタイミングで外部ドメインのソースコードを取得するプログラムも作ってみたいですね。

ではまた!

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

The following two tabs change content below.
網干 裕介

網干 裕介

コーダーの網干裕介(あぼしゆうすけ)と申します。webサイトは見た目が非常に重要なのですが、サイトを構成するソースコードも見た目が重要だと考えています。内も外も魅力的なコンテンツが作れる人物になれるよう、日々努力しています。

ほかの投稿も読んでみませんか?

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

特集

エクセルトラブルと解決策のまとめ アクセス数を増加させるための方法まとめ 初心者向けWordPressの設定方法まとめ

AD

お知らせ

平成28年度補正予算 小規模事業者持続化補助金
ページ上部へ戻る