この記事はブロックされています。続きを読みたい方はログインをして下さい。会員ではない方は新規会員登録をして下さい。


スクレイピングを体験しよう! サンプルコードあり 前編

ネットから情報を収集するために欠かせないのが、ウェブクロール技術とウェブスクレイピング技術だよね。
ロボット型検索エンジンのような技術力がなくても、ウェブスクレイピングぐらいはなんとかなる。
そこで短期企画ではあるけれど、ウェブスクレイピングをする方法とサンプルスクリプトを配布しようと思う。
基本的な仕組みが理解できるはずだ。

まずはデモ画面を体験してみて欲しい。

▼ウェブスクレイピング デモ

試しにYahoo!Japanのトップページからなにかスクレイピングしてみよう。
以下のように入力する。

スクレイピングURL:
http://www.yahoo.co.jp/

セレクタ:
find( “#topicsfb” )

接続タイムアウト時間:
5

偽装ユーザーエージェント:
Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/28.0.1500.63 Safari/537.36

パスワード:
文末に記述

すると、「ウェブサイト取得結果」と「ウェブスクレイピング結果」がインラインフレームで表示されるはずだ。
「ウェブサイト取得結果」は「http://www.yahoo.co.jp/」にアクセスした結果であり、「ウェブスクレイピング結果」がその情報の中から「トピックス」タブの中身を取得した結果となっている。
(キケンなのでパスワードを設定してある。パスワードは文末に記述してあるので確認して欲しい)

取得したいデータは「セレクタ」の項目で指定することができる。
例えば、「find( “#pbweather” )」とすると、予想通り天気が表示される。

ウェブスクレイピングは基本的にアクセスしたサイトデータ内であれば、セレクタを指定することでなんでも取得することができる。
セレクタというのは何かというと、CSSなどで使うセレクタとまったく同じ意味となる。

セレクタは基本的に「IDセレクタ」と「クラスセレクタ」と「タイプセレクタ」があるよね。
例えば、HTMLソースを見て以下のようになっているとする。

<div id="test"><p class="aisatu"><strong>こんにちは</strong></p></div>

「id=”test”」という箇所がIDで、「class=”aisatu”」とあるところがクラスとなる。
よくCSSでこんな記述があるよね。

#test{
	padding: 2px;
	margin: 4px;
	background-color: #000000;
}

.aisatu{
	font-size: 200%;
	text-align: center;
}

strong{
	font-color: red;
}

これが理解できるなら話は早い。
「IDセレクタ」と「クラスセレクタ」は同じようなものなんだけれど、明確な違いがある。
「IDセレクタ」はそのHTMLドキュメント内で一つしか出てこ無い。
「クラスセレクタ」はそのHTMLドキュメント内で繰り返し出てくる可能性がある。
「タイプセレクタ」は要するにタグ名のことで、「<p>」とか「<div>」なんかのタグだと思えばいい。

最近のHTMLは構造と装飾は別々になっている。HTMLタグでマークアップしたあとに、後付けでCSSでスタイルを指定するわけだ。その時に、どこのタグかを特定するためにタグに「ID属性」や「クラス属性」を指定しておくんだね。

「ID属性」や「クラス属性」を指定していない場合は、タグが現れる位置と順番とタグ名で特定することになり、指定が難儀なのだ。

さきほどスクレイピングした「トピックス」タブのHTMLソースは以下のようになっている。分かりやすく整形してある。因みにHTMLのソースコードはブラウザで見ることができる。
右ボタンからコンテキストメニューを出して、ソースを表示することができる。

<div id="topicsbox" class="bx">

	<div class="hd bgA5">
		<ul class="tab bgA5 bdA2 on0">
			<li class="tab0 bdA2 bgA5 on">
				<span class="bdrA4">
					<a id="topics" href="" class="bdA5" hidefocus="true">ニュース</a>
				</span>
			</li>
			<li class="tab1 bdA2 bgA5 ">
				<span class="bdrA4">
					<a id="economy" href="" class="bdA5" hidefocus="true">経済</a>
				</span>
			</li>
			<li class="tab2 bdA2 bgA5 ">
				<span class="bdrA4">
					<a id="entertainment" href="" class="bdA5" hidefocus="true">エンタメ</a>
				</span>
			</li>
			<li class="tab3 bdA2 bgA5 ">
				<span class="bdrA4">
					<a id="sports" href="" class="bdA5" hidefocus="true">スポーツ</a>
				</span>
			</li>
			<li class="tab4 bdA2 bgA5 last ">
				<span class="bdrA4">
					<a id="others" href="" class="bdA5" hidefocus="true">その他</a>
				</span>
			</li>
		</ul>
	</div>

	<div id="topicsboxbd">
		<div id="topicsfb" class="current">
			<div class="topicsindex">
				<em>13時19分更新</em>
					<ul class="emphasis">
						<li>
							<a href="">改憲 首相「決めるのは国民」
								<span class="iconPhoto" title="写真">写真</span>
								<span class="iconNew" title="NEW">NEW</span>
							</a>
						</li>
						<li>
							<a href="">深夜に捉えた清原容疑者逮捕
								<span class="iconVideo" title="動画">動画</span>
								<span class="iconNew" title="NEW">NEW</span>
							</a>
						</li>
						<li>
							<a href="">北のスパイ 脆弱な日本活用
								<span class="iconPhoto" title="写真">写真</span>
							</a>
						</li>
						<li>
							<a href="">声優の死 両親が難病指定訴え
								<span class="iconPhoto" title="写真">写真</span>
								<span class="iconNew" title="NEW">NEW</span>
							</a>
						</li>
						<li>
							<a href="">性的接触でジカ熱感染か 米
								<span class="iconPhoto" title="写真">写真</span>
							</a>
						</li>
						<li>
							<a href="">プレミアでスーパーミドル弾
								<span class="iconPhoto" title="写真">写真</span>
							</a>
						</li>
						<li>
							<a href="">大谷連発 MLBの監督くぎづけ
								<span class="iconPhoto" title="写真">写真</span>
							</a>
						</li>
						<li>
							<a href="">川本真琴 騒動ツイートを謝罪
								<span class="iconPhoto" title="写真">写真</span>
								<span class="iconNew" title="NEW">NEW</span>
							</a>
						</li>
					</ul>
					<ul class="more">
						<li class="first">
							<a href="">もっと見る</a>
						</li>
						<li>
							<a href="">記事一覧</a>
						</li>
					</ul>
				</div>
				<div class="topicscatch">
					<div class="topicsdetail bdB4 bgB5">
						<div class="topicsimg">
							<a href="" id="tpcsimgfilter" class="imgfilter" style="background-image:url();width:111px;height:120px;" title="豆まきにあさが来た">豆まきにあさが来た</a>
						</div>
						<p>
							<a href="">豆まきにあさが来た</a>
						</p>
						<em>2月3日11時34分配信</em>
						<cite>THE PAGE</cite>
					</div>
				</div>
			</div>
			<div id="economyfb" class=""></div>
			<div id="entertainmentfb" class=""></div>
			<div id="sportsfb" class=""></div>
			<div id="othersfb" class=""></div>
	</div>
</div>

本当はもっと長いけど関係のあるところだけを抜粋した。
ソースを見ると「id」と「class」がタグに指定されているよね。
セレクタというのはセレクト=選択という意味からも分かる通り、その箇所を指定して装飾するためのものなんだよね。
あとはこれを見てどの情報が欲しいのかをセレクタとして指定すればいいだけ。簡単だね。

関連記事