目次 1. はじめに ~Web スクレイピング~ Web スクレイピング と クロール... 3 (1) クロール... 3 (2) スクレイピングとクロールの違い スマートデバイス について... 4 (1) スマートデバイスのインパクト... 4 (2) スマート

Similar documents
技術レポート 1)QuiX 端末認証と HP IceWall SSO の連携 2)QuiX 端末認証と XenApp の連携 3)QuiX 端末認証 RADIUS オプションと APRESIA の連携 Ver 1.1 Copyright (C) 2012 Base Technology, Inc.

◎phpapi.indd

スライド 1

chapter1 Web デザインへのアプローチ chapter1 Web デザインへのアプローチ 1-1 本書の構成 Web サイト制作の流れ 本書の構成と内容 1-2 Web サイト制作業界の人材像 Web サイト制作に必要な職掌と役割 各職掌の役

インストール要領書

OneDrive for Businessのご紹介

名称未設定

Delphi/400開発ノウハウお教えします Googleマップ連携によるリッチなGUIアプリ開発

PowerPoint プレゼンテーション

ウェブデザイン技能検定 1 級実技 平成 28 年度 第 4 回 ウェブデザイン技能検定 1 級 実技試験概要 試験にあたっての注意事項 試験者は本試験の留意事項 注意事項に留意して作業を行うこと ペーパー実技試験は 課題 1 から 5 までの 5 課題を 60 分間で行うこと 作業実技試験は 課題

Source Insight

SOBA ミエルカ クラウドセミナーモード 配信者マニュアル 目次 はじめに 配信者のユーザー登録について ライブ配信の作成 ライブ配信への招待 ライブ配信への参加方法... 4 (1) ライブ配信を選んで参加する方法 ( 管理者 配信

ミガロ.製品 最新情報

スライド 1

JACi400のご紹介~RPGとHTMLで簡単Web化~

< はじめに > 推奨環境インターネット伝送サービスをご利用いただくための推奨環境は以下の通りです OS ブラウザソフト Microsoft Windows Vista Microsoft Internet Explorer 8 Microsoft Windows 7(32bit/64bit) Mi

クラウド税務 会計 給与システム開発にスピードを!A-SaaS が Sencha Ext JS / Sencha Test を導入した軌跡 第 36 回エンバカデロ デベロッパーキャンプ アカウンティング サース ジャパン株式会社土田拓也 斎藤はるか 北村圭 本文書の一部または全部の転載を禁止します

Notesアプリが iPadで動くDomino Mobile Apps ご紹介

目次 1. はじめに 2. CSS-Net の動作環境 3. インストール手順 4. CSS-Net の起動および初期設定 5. アンインストール方法 1. はじめに 本書は CSS-Net(GSPc_Local) のインストール手順を纏めたものです 1

まう不具合を解消 Windows10 バージョン1803で ディスプレイのサイズを125% 150% にすると STORM VのTOP 画面がズレてしまう不具合を解消しました 6. 動画 + 音声 コンテンツをインポートすると再編集出来なくなる不具合を解消 スライド+ 動画 + 音声 コンテンツをイ

. はじめに 動作環境の全ブラウザで 本書の設定を行ってください 本設定を行わない場合 システムが 正常に動作しない可能性がありますので 必ず設定をお願いいたします また 本書の中で 画 像に番号を付与している箇所以外の設定は お使いの環境のままでご使用ください 参考 : 動作環境の全ブラウザについ

改訂履歴 版数 改訂理由 / 内容 制定 / 改定日 変更者 3.0 新サイト用に新規作成 2016/9/26 クオリカ株式会社 3.1 ユーザー向けに追記 2016/9/30 CP 事業部 3.2 初期設定追加 2016/10/6 CP 事業部 1

Delphi/400を使用したWebサービスアプリケーション

9 WEB監視

スライド 1

PowerPoint プレゼンテーション

モバイル統合アプリケーション 障害切り分け手順書

Googleカレンダー連携_管理者マニュアル

LightSwitch で申請システム Windows ストアアプリで受付システムを構築してみた 情報政策グループ技術職員金森浩治 1. はじめに総合情報基盤センターでは 仮想サーバホスティングサービスや ソフトウェアライセンス貸与といった さまざまなエンドユーザ向けサービスを行っている 上記のよう

Microsoft Word - Gmail-mailsoft設定2016_ docx

Microsoft PowerPoint - 【最終提出版】 MATLAB_EXPO2014講演資料_ルネサス菅原.pptx

2 COPYRIGHT TempNate. ALL RIGHTS RESERVED.

クイックスタートマニュアル目次 スマホサイトビルダーモビークとは? モビークの特徴 ドラッグ& ドロップで簡単編集 スタイリッシュなデザイン部品 PC サイトと自動連動 最高のSEO 対策導入までの流れ STEP1 初期デザイン設定 STEP2 ページの登録 STEP3 スマホページの編集 STEP

写真をクリックすると 拡大表示される Flashフォーマット Flashフォーマットは 写真が自動または手動で切り替わっていく スライドショー形式の表示方法です ページ内の情報 が多い場合や 写真をイメージ的に見せたい場合に便利です iphoneをはじめとする一部のスマートフォンはflashをサポー

マルウェアレポート 2018年1月度版

2. 生田仮想デスクトップ PC の接続方法 生田仮想デスクトップ PC に接続する方法は 次の 2 通りです 1. HTML アクセス Internet Explorer や Safari などのブラウザを用います PC に特別なソフトウェアをインストールす る必要が無いので 管理者権限をもってい

ヘルスアップWeb 簡単操作ガイド

2. 生田仮想デスクトップ PC の接続方法 生田仮想デスクトップ PC に接続する方法は 次の 2 通りです 1. HTML アクセス Internet Explorer や Safari などのブラウザを用います PC に特別なソフトウェアをインストールす る必要が無いので 管理者権限をもってい

WEBサービス超入門 mask.key

導入設定ガイド

Team Foundation Server 2018 を使用したバージョン管理 補足資料

Web Performer V2.0 カタログ

Oracle Un お問合せ : Oracle Data Integrator 11g: データ統合設定と管理 期間 ( 標準日数 ):5 コースの概要 Oracle Data Integratorは すべてのデータ統合要件 ( 大量の高パフォーマンス バッチ ローブンの統合プロセスおよ

WSMGR for Web External V7.2 L50 ご紹介

製品概要

ArcGIS Runtime SDK for .NET アプリケーション配布ガイド

2 SmaSvr SmaSvr システムの概要 テクノベインズでは 業務系周辺機器 業務系周辺機器が操作できる スマート端末 が操作できる スマート端末 が操作できる スマート端末アプリ環境 アプリ環境の提供 提供 を実現できる方法 実現できる方法 実現できる方法について研究してきた 研究してきた

WG説明

PowerPoint プレゼンテーション

1. 信頼済みサイトの設定 (1/3) この設定をしないとレイアウト ( 公報 ) ダウンロードなどの一部の機能が使えませんので 必ず設定してください 1 Internet Explorer を起動し [ ツール ]-[ インターネットオプション (O)] を選択します 2 [ セキュリティ ] の

SSB_G_ver1.0_2013.8

TimeTracker FX Web Edition セットアップガイド目次 はじめに... 2 第 1 章 TimeTracker FX Web Edition の概要 TimeTracker FX Web Edition とは... 3 システム構成... 3

不具合情報受付管理 DB 不具合情報対応情報要因 履歴登録 設備情報 不具合情報 対応情報 不具合 ( 履歴 ) 情報 機器仕様 納入情報 機器部品情報 関連資料 機器情報 交換部品情報 交換履歴 交換部品情報 保有部材管理 DB 保有部材管理 不具合情報 不具合先情報 不具合復旧情報 受付情報 対

PALNETSC0184_操作編(1-基本)

目次 1 サービス概要 3 for UQ mobile とは 4 動作環境 6 2 利用開始 7 アプリをダウンロードする 8 サービスを開始する 9 3 設定変更 10 管理者を登録する 11 管理者画面を表示する 12 管理するスマートフォンに名前をつける 12 for UQ mobile が正

はじめにデザイン管理について デザイン管理でできること デザイン管理では ショップの画面レイアウトや ヘッダー フッターなどの HTML 編集を行うことができます また CSS( カスケードスタイルシート ) の編集など 高度なサイトデザイン調整も可能です 以下の端末ごとに デザイン管理が可能です

OneDrive for Businessのご紹介

スライド 1

iii 4 16

THiNQセットアップガイド

管理者マニュアル

商標類 Microsoft は, 米国およびその他の国における米国 Microsoft Corp. の登録商標です Microsoft Office は, 米国 Microsoft Corp. の商品名称です Microsoft Excel は, 米国 Microsoft Corp. の商品名称です

相続支払い対策ポイント

Transcription:

魔法の技術? Web スクレイピング とは? 日本ネクサウェブ株式会社

目次 1. はじめに ~Web スクレイピング~... 3 2. Web スクレイピング と クロール... 3 (1) クロール... 3 (2) スクレイピングとクロールの違い... 4 3. スマートデバイス について... 4 (1) スマートデバイスのインパクト... 4 (2) スマートデバイスとは?... エラー! ブックマークが定義されていません (3) スマートデバイスの UI... 5 4. 既存 Web システムの課題... 6 (1) ユーザーエージェント分岐... 6 (2) レスポンシブ Web デザイン... 7 (3) アプローチ手法のまとめ... 8 5. 救いの神 Web スクレイピング... 8 (1)Web サイトの解析... 8 (2)Web スクレイピング利用でのメリット... 9 (3)Web スクレイピングのデータ抽出... 10 (4)Web スクレイピングでの注意点... 11 6.Web スクレイピングの実際... 12 7. おわりに... 14 2

1. はじめに ~Web スクレイピング ~ Web スクレイピング 聞き慣れない言葉かも知れません 図 1: スクレーパー 英語で Scrape とは こする すれる こすり取る 削り取る といった意味 を持っています 図 1 は スクレーバー ( 物質の外面 ( または外面に付着しているも の 堆積しているもの ) を削る こすり取る 刃状 へら状の器具 ) です Web スクレイピング は Web のアウトプット情報から必要な情報をこすり取って くる技術 具体的には Web のページ表示言語である HTML を解析し必要情報を見つ け出し それを得て 最終目的としてその情報を利用します 2. Web スクレイピング と クロール Web スクレイピング と同時に語られることが多い用語に クロール があり ます (1) クロール一番解りやすいものとして グーグルの検索エンジンで説明できます 検索エンジン内のクローラー ( ロボット ) が1つ1つのサイトを巡回し サイト情報を得る この動作を クロール と言います クロールし そのページを解析して グーグル独自のアルゴリズムにより 検索 を利用するユーザーに有用な情報を与えています 3

図 2: クローラーのイメージ クロール の技術には Web スクレイピング の技術が含まれ Web スクレイ ピング 自体も Web クローラー Web スパイダー と呼ばれることがあります (2) スクレイピングとクロールの違い Web スクレイピング の目的は 特定のページから目的の情報を抽出し利用する ことにある一方で クロール は 次々にページを遷移しページの内容を解析し その解析情報を利用する 点が相違と言えます 3. スマートデバイス について少し話は変わりますが ここで スマートデバイス について触れます それは Web スクレイピング が スマートデバイス の活用に一役買うことができるからです 具体的には後述します スマートデバイス とは何か? について明確な定義はありませんが ここでは スマートフォンとタブレット を指すものとします (1) スマートデバイスのインパクト 以前に スマートデバイスのインパクト というホワイトペーパーをご提供しま した (https://www.nexaweb.co.jp/dl/503) 4

ここで述べたのは スマートデバイスは企業の情報システムに新たな価値を生み出 す ということでした 今まで出来なかったことが出来るようになる端末 です (2) スマートデバイスの UI 従来 企業の Web 情報システムに利用する端末は デスクトップ PC Windows OS Internet Explorer という組み合わせをターゲットとしていました しかし 今は様々な OS 様々なブラウザ 様々なスクリーンサイズの端末が存在する マルチの時代 です 図 3: マルチの時代 こうしたマルチ時代でのシステム課題は 大きく2つあります ユーザビリティの課題 技術面の課題です ユーザビリティの課題 とは 特にスマートデバイス利用時に考慮しなければ いけない課題であり 画面サイズ や 画面の向き 操作方法 により 異な る UI( ユーザ インタフェース ) が必要だということです 5

また デスクトップ PC のように 使わない情報 を多く詰め込んでいても問題がない画面サイズではありませんから 何を表示すべきかを考慮する必要があり デスクトップ PC の UI をそのまま利用するのは 利用者の生産性を大きく損なうことになります そして 技術面の課題 とは 各 OS や各ブラウザの差を技術的にどう吸収する のか 保守性を考えたとき どう対応するのか といった側面です 4. 既存 Web システムの課題 スマートデバイスを利用し新たな価値を利用者に提供したい と考えたとき 既存で デスクトップPCを端末として利用しているシステムをスマートデバイスにも対応させる そうしたケースが多いと思います この場合 機能を特定する 制限する 新たな機能を追加する ことがあってもビジネスロジックは流用できます しかし ユーザビリティの課題 技術面の課題 に直面することになります 課題を解決するアプローチには以下のような手法があります (1) ユーザーエージェント分岐 サーバーにアクセスしてきたクライアント端末のユーザ エージェント情報を参照 し プログラムとしてアクセス URL や出力タグを分岐する手法です 図 4:PC 用 スマートデバイス ( モバイル ) 用の分岐 このアプローチは PC 用とスマートデバイス用で表示するサイトを変更することに より 課題を解決します 6

しかし 分岐後の PC 用とスマートデバイス用は共通で利用できる部分が少なく ほ とんどの場合 個別構築となり 保守性 の課題を解決できません (2) レスポンシブ Web デザイン スマートデバイスの進化 高度なプラウザー機能により レスポンシブ Web デザイ ン と呼ばれる概念が登場しました レスポンシブ Web デザイン は ブラウザの横幅サイズを判断基準として スタイルシート (CSS) によって表示装飾を切り替える手法です これにより デザインだけを PC 用 スマートデバイス用に分けて用意することで HTML は共通のものを用いることができます しかし 有用な手法と思われる レスポンシブ Web デザイン も欠点があります 共通の HTML を使用して スタイルシートによって表示装飾を切り替える過程の中 で 画像データなどは不要であってもダウンロードされます また スタイルシー トによる表示装飾だけで実現できないものは表現できず 万能ではありません なお ソースコードを単一化して共通利用するため レイアウト / 機能 双方で PC とスマートデバイス環境で 共有できる最大公約数的なものとなる点も制限と言え ます こうした欠点は 表示中心の Web サイトではなくアプリケーションでの利用におい て特に顕著です さらに 既存の Web システムでの PC 用レイアウトの再構築も 必要になります 7

(3) アプローチ手法のまとめ ユーザ エージェント分岐 と レスポンシブ Web デザイン のメリット デメリットを表にまとめました アプローチ手法メリットデメリット ユーザ エージェント分岐 -URL 変更型ユーザ エージェント分岐 - 出力タグ変更型 PC 版は既存 Web システムをその まま利用可能 モバイル側の自由度 が高い サーバーサイドプログラムを共通 化できる プログラム デザイン 画面遷移が PC とモバイルで完全分離するため 開発 メンテナンスの手間が増える プログラムが複雑化する 既存 Web システムの資産を生かしにくい レスポンシブ Web デザイン ソースコードを共通化できるため クライアント部分は ほぼ全て作り直しが必要 メンテナンスコストを抑えることデザイン プログラムに制約がある ができる 表 1: アプローチ手法のメリットとデメリット 5. 救いの神 Web スクレイピング 救いの神 は少しオーバーな表現ですが スマートデバイスに対応するときの 別 アプローチ であり 以下のようなケースでは非常に有用です 既存の Web 情報システムが存在し デスクトップ PC 画面はそのままで良い 既存の Web 情報システムは安定しており 手を入れたくない 既存の Web 情報システムを改修 保守できない ( ソースコードがスパゲッティ状態である 構築したベンダーとの取引がすでにない など ) スマートデバイスに対して適切な UI を提供したい (1)Web サイトの解析 前段で Web スクレイピング とは サイト内を解析し目的の情報をこすり取ると いった説明をしました 実質は HTML の場合タグ解析をして情報を抽出します 8

図 5:Web スクレイピングでのデータ抽出 結果として 既存 Web システムのデータだけをやり取りする Web サービス に近 い機能を作れます これは レガシーマイグレーション でいう ラッピング に 近い手法です 図 6: 既存 Web システムのラッピング (2)Web スクレイピング利用でのメリット ⅰ. 既存 Web システムの変更がいらないアウトプット情報を利用するため 既存 Web システムに手をいれなくて済みます これは ソフトウェアにとって非常に重要です 改変による既存 Web システムの 9

品質に影響を与えないためです システム構築における工数比率は 改修の場合 製造からテストまでで約 64.5% ( ソフトウェア開発データ白書 ) という統計があります テストだけを見れば 約 32.2% です 修正量に目がいきますが 実際はテストフェーズにも多くの工数がかかります ⅱ. サーバーサイドのビジネスロジック流用 UI に関連しない数値計算などのサーバーサイドビジネスロジックは そのまま継続して利用できます このため スマートデバイス用を作成する際にはその UI に特化することが可能となります ⅲ. スマートデバイスの UI は自由に作成既存 Web システムとは完全に分離しますので スマートデバイスでの UI は 既存の UI を意識することなく 自由に設計 できます これは 画面単位および画面遷移に至るまでです (3)Web スクレイピングのデータ抽出 実際に Web スクレイピング技術としてのデータ抽出はどんな方法があるのか 代表的な方法を説明します ⅰ. 正規表現型 レスポンスデータをテキストデータとして扱い 正規表現の機能によってデータ を抽出する方法です ⅱ.DOM 型 HTML データを前提として HTML の DOM を構築し DOM 内から XPath など を使用してデータを抽出する方法です 技術者の方は こうした方法の場合 HTML にデータが埋め込まれていない動的な データを扱う Web システムのときはどうなるのか という疑問が浮かぶと思います 具体的には Ajax などを用いて HTML にデータを埋め込んでサーバーがレスポンスするのではなく JSON 形式や XML 形式などで Javascript によってデータを取得してクライアント側でデータの表示を行っているケースが該当します このような場合 DOM 型のデータ抽出方法ではデータの抽出は難しくなります 10

ブラウザのように HTML と CSS Javascript を処理し 実行時に DOM を処理できるようにしている場合は別ですが サーバーからレスポンスされたテキストデータとしての HTML を DOM として扱っている場合は対処できません この場合は DOM 型ではない別の手段を使ってのデータ抽出が必要になります このため Web スクレイピング技術を用いる際には 既存 Web システムが どのよ うな形式でやり取りしているか を判断した上で 適切なデータ抽出方法を選択す る必要があります (4)Web スクレイピングでの注意点 Web スクレイピング技術は 言わばブラウザを使用し利用者がブラウジングする処理を自動化し 利用者が閲覧するデータを抽出して2 次利用することです 以下 注意点があります ⅰ. 既存 Web システムの変更データを抽出される側は Web スクレイピングによりデータ抽出されることを前提としていません このため スクレイピング側は既存 Web システムが予告なく変更された場合に対処する必要があります ⅱ. 自動化 ( 機械化 ) 自動化 ( 機械化 ) されることにより通常のユーザーオペレーションより はるかに高速でオペレーションが行われます このため 既存 Web システム側から見た場合 通常では考えられない頻度と間隔でユーザーリクエストが発生しているように見えるかも知れません これは サーバー側への攻撃 とも捉えられてしまうこともあります サーバー側が過負荷にならないよう頻度と間隔を調整するなどの考慮が必要です ただし 調整によっては Web スクレイピング側でデータ抽出のパフォーマンス低下につながるためバランスの良いチューニングを考えなければいけません ⅲ.2 次利用 既存 Web システムが自社システムであれば 全く問題ありませんが 外部のシス テムである場合 著作権やサイトの運用規則を遵守することが基本です 11

6.Web スクレイピングの実際 データを抽出する という説明をしてきましたので 参照だけと思われるかも知れませんが ログインなど 通常の利用者からのサイト利用を考えれば 双方向 書き込みも必要であることが分かります 図 7: 既存 Web システムでの処理フロー 図 8:Web スクレイピング時の処理フロー では ここで代表的な Web スクレイピングライブラリ / ツールをご紹介します プログラム言語ライブラリ Java.NET PHP JavaScript Python Ruby jsoup Html Agility Pack PHP Simple HTML DOM Parser CasperJS Scrapy Nokogiri 表 2:Web スクレイピングライブラリ / ツール その他 プログラム言語で使用するライブラリではなく サービスや専用ツールとし 12

て提供されているものがいくつかありますが その一部をご紹介します 種類 サービス ツール サービス名 kimono 専用ツール サービス XGEN-WEB 表 3:Web スクレイピングのサービス / 専用ツール ここでは 日本ネクサウェブ株式会社が提供している XGEN-WEB( クロスジェン ウェブ ) についてご説明します XGEN-WEB とは?(https://www.nexaweb.co.jp/solution/xgen_web01) Web スクレイピング と 画面開発 + 実行エンジン である nexaceo platform というリッチクライアント /RIA(Rich Internet Application) を組み合わせたサービス ソリューションです 図 9: XGEN-WEB での開発ツール画面 XGEN-WEB では X-POP Developer と呼ばれる専用の開発ツールを提供しており 利用者の Web システムに対する操作をトレースする Web Tracer や トレース情報 13

をもとに情報抽出を行うための各種ツールが備わっています また 抽出したデータをもとに利用者に提供する画面開発は nexacro platform での 画面開発ツールである nexacro studio を利用し GUI 開発を行うことができます このツールは クライアント端末で利用されている OS での言語を意識する必要がありません すべてのクライアント端末での画面開発が nexacro studio だけで可能となります イベントドリブンやサーバーとのデータ送受信など コーディングが必要な部分は Web の汎用技術である Javascript でのコード記述であり それだけがプログラミングにおいて必要な言語スキルです また nexacro platform の実行エンジンはクライアント端末 特にブラウザによる 挙動差を吸収しています 7. おわりに Web スクレイピング 技術は 魔法の技術か もちろん魔法の技術ではありません ただ 既存 Web システムに手を入れない 点において 非常に稀有であり 可能性を持った方法です ソフトウェアは コードを修正すれば常に障害を引き起こすリスクを抱えています し かし 触らなければ そうした懸念は一切ありません システムに対する手法として あまり意識されていない技術ですが スマートデバイス という 新たな価値 を 既存 Web システムの安定性を毀損せず追加できます Web スクレイピング をぜひ検討してみてはいかがでしょうか 以上 14

執筆協力 : 日本ネクサウェブ株式会社 松木健太郎 本資料の内容の一部は @ITに Web システムで始める業務システムのモバイル化 (2015.5.19~7.23) と題する記事の中で掲載しました こちらもぜひご覧ください (http://www.atmarkit.co.jp/ait/articles/1506/02/news016.html) 作成 : 永井一美 文責 : 日本ネクサウェブ株式会社 (2017 年 3 月 7 日発行 ) Copyright 2017 Nexaweb Japan,Inc. All Rights Reserved. 15