記事の詳細

ハーゲンダッツのメープルカスタードクッキーにハマっています、網干です。

ハーゲンダッツの期間限定商品は時折ハマってしまうんですよね…。
パッケージを見て「これはおいしそう!」と思った商品は高い確率で期間内に何度も購入しています。
普段はアイスを食べない方なのですが、どうもハーゲンダッツの魅力にだけは負けてしまいます…。

皆様もメープルカスタードクッキーを食べてみましょう!すこぶるオススメです!
http://www.haagen-dazs.co.jp/products/minicup/maple-custard-cookie.html

さて、今回はJavaScriptを使って同一ドメイン内のHTMLで構成されたページの特定のタグ(今回はimgタグのみ)を全て取得するプログラムを紹介します。

WebサイトがWordPress内で完結している場合はWordPressの関数で何とかなってしまうのですが、WordPressの外にあるHTMLのページの情報を取得するのはなかなか難しいんですよね…。

方法はいろいろとあると思うのですが、今回はJavaScriptを使って特定のタグを抜き取ってしまいます!

JavaScriptで同一ドメイン内のページのimgタグを全て取得する

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

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

重要な箇所はscriptタグで囲んだ部分になります。
基本的には全てコメントに記載した通りの内容になっています。

上記のプログラムをそのまま使う場合は、optionタグで指定しているURLを自身のドメインに設置しているページのURLに変更してください。

HTMLソースコードを取得した結果

実際に使ってみると、指定したページのimgタグで囲われた部分のみがテキストエリアに出力されます。
HTML特定タグ取得01

動作環境

このプログラムは下記のブラウザで正常に機能していることを確認しています。
・Google Chrome 53.0.2785.143 m (64-bit)
・Firefox 49.0.1
・Safari 5.1.7
・Microsoft Edge 38.14393.0.0
・Internet Explorer11 11.223.14393.0

最後に

いかがでしたか?

まだまだJavaScriptもimgタグを取得するのに使用している正規表現も勉強が浅いので今回はここまでが限界でした…。
もっと汎用性の高い正規表現の式が書けるようになれば、imgタグだけでなくコード内の好きな部分を抜き取ることができると思います!

…というか、本来はそれがやりたかったのですがタイムアップでした…。
いつかこのプログラムを使った発展形を記事にしたいと思います。

今回紹介したプログラムの参考にさせていただいたサイト様は下記になります。
http://webos-goodies.jp/archives/50548720.html
http://www.ajaxtower.jp/ini/http/index6.html
http://www.ajaxtower.jp/ini/http/index4.html
https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest

今回はいつもより短めですが以上です!
ではまた!

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

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

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

網干 裕介

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

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

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

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

特集

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

AD

お知らせ

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