東京スクレイピング勉強会#1 2014.6.22
CasperJSを使って任意のWebサイトをEPub電子書籍化する方法
Masayuki Isobe / 礒部 正幸 / @chiral
Adfive, Inc.
自己紹介
• 礒部正幸(いそべ まさゆき)
• 職業: ソフトウェアエンジニア
• 現在: アドファイブ(株) 代表 http://www.adfive.net
– 現体制: 代表1名 + 外注数名 : お問い合わせ
– 自社製品: モバイルO...
EPUBについて
・ iBookやKindleでオフラインでも読むことができるパッケージコンテンツフォーマット
・中身は Web(HTML/CSS)の静的スナップショット + メタ情報 みたいな感じ
・当初喧伝されたわりに流行ってない
画像の埋...
CasperJS : Webページの部分キャプチャ機能
• PhandomJSのキャプチャ機能は、ページ全体しか取れない、困った。
色々調べてみると、
キタ━━━(゚∀゚).━━━!!!
→ CasperJSならば部分キャプチャが可能!
(フリ...
画像としてパッケージングする際の問題
• EPUBはリフロー型
- 画像を一つのオブジェクトとして
レイアウトしようとしてしまう。
横にしたとき
縦のとき
キャプ
チャ
画像
キャ
プ
チャ
画
像
ならば、ザクザクと画像を切り
刻んで並べれば...
画像を刻むアルゴリズム
・基本的に水平にしか切らない
・文字や画像にぶつからないところで切る
・背景の色などに左右されない必要がある
→ キャプチャした画像をエッジフィルタに掛けてエッジが無い空白区間の中点を取る
……
PythonのPILで実...
システム全体の流れ
ユーザがパッケージングしたい対象URL群を入力
DB
コンテンツ本体の
CSSセレクタを保持
CasperJSでWebページを部分キャプチャ キャプチャ対象にする
部分のCSSセレクタ
PIL(Python)でエッジフィルタ...
デモ:EPubShot
• Webでデモを公開しています。
http://epubshot.adfive.net/
トップ画面
CSSセレクタ登録画面
作成完了
E-mail送付機能なども付けてあったり..
某料理レシピサイトから作ったEPUBのリーダアプリのキャプチャ
・ こんな感じに、きれいにEPUB化できます。
・YahooNewsやはてなダイアリーなどもキレイに取れます。
・背景がミドリすぎる山本一郎氏のブログもちゃんと画像を
刻んでリフロ...
というシステムを、
企画~調査~アルゴリズム検討~実装~リリースまで
トータル5日くらいでやって、いくつか(※)営業に
行ってみたのですが、売れませんでした(笑)
Powered by
※某レ○ピサイト企業とか、その他いくつか
Upcoming SlideShare
Loading in …5
×

CasperJSを使って任意のWebサイトを電子書籍化する方法

4,065 views

Published on

第一回Webスクレイピング勉強会 LT発表資料

Published in: Technology
0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,065
On SlideShare
0
From Embeds
0
Number of Embeds
1,278
Actions
Shares
0
Downloads
28
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide

CasperJSを使って任意のWebサイトを電子書籍化する方法

  1. 1. 東京スクレイピング勉強会#1 2014.6.22 CasperJSを使って任意のWebサイトをEPub電子書籍化する方法 Masayuki Isobe / 礒部 正幸 / @chiral Adfive, Inc.
  2. 2. 自己紹介 • 礒部正幸(いそべ まさゆき) • 職業: ソフトウェアエンジニア • 現在: アドファイブ(株) 代表 http://www.adfive.net – 現体制: 代表1名 + 外注数名 : お問い合わせ – 自社製品: モバイルO2Oアプリ/オウンドメディア/アドサーバ – 受託業務: システムコンサルティング/システム開発/データ分析 • 東工大卒 (B:情報工学科、M:計算工学専攻) • インターネット活動 – TwitterID: @chiral – (ブログ:アドファイブ日記) http://d.hatena.ne.jp/isobe1978/ • 「機械学習ハッカソン」主催: http://mlhackathon.connpass.com/ • 近年作ったスクレイピング利用システム – パケットデータから閲覧Webページの画面キャプチャ再構成 (PhantomJS+自作プロキシーサーバ) – WebサイトのEPub電子書籍化ツール(Node.js/CasperJS) – WebスクレイピングDSL( Scrapy/PhantomJS) – Webスクレイピングジョブ管理システム(Django) 本資料
  3. 3. EPUBについて ・ iBookやKindleでオフラインでも読むことができるパッケージコンテンツフォーマット ・中身は Web(HTML/CSS)の静的スナップショット + メタ情報 みたいな感じ ・当初喧伝されたわりに流行ってない 画像の埋め込みは簡単に可能 Web上のコンテンツをキャプチャして、パッケージメ ディア化するのは簡単にできそう Webページ コンテンツ本体の部分だけ キャプチャ画像を取得 キャプチャした画像 EPUBフォーマット でパッケージング 参考) 類似コンセプトのサービス ただしこちらはキャプチャ画像ではなく Webデータそのものを保存
  4. 4. CasperJS : Webページの部分キャプチャ機能 • PhandomJSのキャプチャ機能は、ページ全体しか取れない、困った。 色々調べてみると、 キタ━━━(゚∀゚).━━━!!! → CasperJSならば部分キャプチャが可能! (フリーのライブラリでこの機能を持つものは、発表者の知る限りでは恐らくこのCasperJSしかない)
  5. 5. 画像としてパッケージングする際の問題 • EPUBはリフロー型 - 画像を一つのオブジェクトとして レイアウトしようとしてしまう。 横にしたとき 縦のとき キャプ チャ 画像 キャ プ チャ 画 像 ならば、ザクザクと画像を切り 刻んで並べればいいじゃないか キャプ チャ 画像 横にしたとき 縦のとき はみ出した分 は次ページへ 1page 2page 3page 4page 端末サイズにも対応でき、 リフロー型のメリットが活きる
  6. 6. 画像を刻むアルゴリズム ・基本的に水平にしか切らない ・文字や画像にぶつからないところで切る ・背景の色などに左右されない必要がある → キャプチャした画像をエッジフィルタに掛けてエッジが無い空白区間の中点を取る …… PythonのPILで実装 対象 Webページ キャプチャ
  7. 7. システム全体の流れ ユーザがパッケージングしたい対象URL群を入力 DB コンテンツ本体の CSSセレクタを保持 CasperJSでWebページを部分キャプチャ キャプチャ対象にする 部分のCSSセレクタ PIL(Python)でエッジフィルタ&画像を切り刻む EPUB形式に画像,XHTML,メタ情報ファイル等を配置 EPUBファイル出力 (zip圧縮) Webサービスとして Node.js/Express/PM2 で作成
  8. 8. デモ:EPubShot • Webでデモを公開しています。 http://epubshot.adfive.net/ トップ画面 CSSセレクタ登録画面 作成完了 E-mail送付機能なども付けてあったり..
  9. 9. 某料理レシピサイトから作ったEPUBのリーダアプリのキャプチャ ・ こんな感じに、きれいにEPUB化できます。 ・YahooNewsやはてなダイアリーなどもキレイに取れます。 ・背景がミドリすぎる山本一郎氏のブログもちゃんと画像を 刻んでリフローなEPUBを出力します。 (背景色に左右されないのがエッジフィルタの利点) いつみてもミドリミドリしてる
  10. 10. というシステムを、 企画~調査~アルゴリズム検討~実装~リリースまで トータル5日くらいでやって、いくつか(※)営業に 行ってみたのですが、売れませんでした(笑) Powered by ※某レ○ピサイト企業とか、その他いくつか

×