ABEJA Tech Blog

中の人の興味のある情報を発信していきます

LLMのためにHTMLの構造解析を頑張ってみた

こんにちは!ABEJAのシステム開発部でエンジニアをしている胡です。こちらはABEJA アドベントカレンダー 2024 、7日目の記事です。

この記事では、ウェブサイトから本文をきれいに抽出する方法を色々試してみた話をまとめています。きっかけは、RAG(Retrieval-Augmented Generation)やLLM(大規模言語モデル)で利用するデータを効率よく取り出せないかと思ったことでした。

もしサイトの内容が一つの原稿やデータとしてまとまっていれば、そのままLLMに渡すだけで使えますよね。でも、同じ会社内でも、複数のチームや部門がそれぞれ記事を作成していると、データを一箇所にまとめるのは意外と難しいものです。例えば、各チームが異なるフォーマットやツールを使って記事を書いている場合、それを統一するだけでも手間がかかります。また、業務フローがチームごとに異なることもあり、すべての原稿を効率的に収集・管理する仕組みを作るのは簡単ではありません。そこで、「HTMLから必要な情報を直接取り出せば、この問題を解決できるのではないか?」と考えて、いろいろ試してみることにしました。

単純にHTMLから文字を取り出すだけなら簡単です。でも、RAGやLLMの精度を上げていく観点で、元の文章構造を維持した形でデータを持っていた方が便利なケースがあります。例えば、見出しとその内容の関係や、セクションごとの区切りが分かる状態が理想的です。

今回は、この「構造を保ちながら情報を抽出する方法」をテーマに、実際に試してみたことを紹介します!

https://unsplash.com/photos/monitor-showing-java-programming-OqtafYT5kTw

情報を取り出すのが意外と難しい理由

正直、最初はもっと簡単だと思っていました。Example.comやチュートリアルにあるHTML構造はとてもシンプルですが、実際のウェブサイトは見た目をきれいにするために、divやspanなどのタグが大量に使われています。その結果、本当に欲しい情報がどこにあるのかを見分けるのが非常に難しくなっています。さらに、ノーコードツールや動的サイトが普及したことで、HTMLの構造はより複雑化しており、単純な方法では対応できない場合が多いです。

スクレイピングに伴う法的・倫理的な課題

スクレイピングの難易度だけでなく、プライバシーへの懸念や著作権の不適切な使用、さらにはサーバーへの過剰な負荷など、多岐にわたり、どれも実際に深刻な課題です。実際、非倫理的なウェブスクレイピングを行ったと報じられた件や、データ収集企業に対してX(旧Twitter)が訴訟を起こした件などが挙げられます。

ですので、自分が所有しているウェブサイトや、規約的に問題ないサイトだけでスクレイピングをするようにしましょう!

本文を抽出してみた

今回は、弊社ABEJAのホームページに掲載されている記事をサンプルとして、構文解析・本文抽出に挑戦してみました。

www.abejainc.com

The Naive Way

まずは、見出し(h1~h4)や段落(pタグ)のテキストをそのまま取り出してみました。PythonのBeautifulSoupを使えば、比較的簡単にできます。でも、この方法だとHTMLの構造がわからなくなっちゃいます。例えば、見出しがどの段落に対応しているのかとか、セクションごとに内容がどうなっているのかがわからないんです。

Headings:
- ABEJAのデータサイエンティスト、Kaggleが実施したコンペティション「LEAP - Atmospheric Physics using AI (ClimSim)」で3位に入賞し、「Kaggle Grandmaster」に昇格
- News
- ニュース
- Home
- Page Top

Paragraphs:
- 2024.07.19
- プレスリリース
- 
- 人とAIの協調により「ゆたかな世界を、実装する」株式会社ABEJA(本社:東京都港区、代表取締役CEO:岡田 陽介、以下「ABEJA」)は、Kaggleが実施したコンペティション「LEAP - Atmospheric Physics using AI (ClimSim)」(通称「LEAPコンペ」)において、ABEJAのCTO室 データサイエンティスト 服部 響が3位となりましたことをお知らせいたします。この結果により、服部は、「Kaggle Grandmaster」に昇格しております。
- Kaggleでは、企業や政府機関などがコンペティション形式で提示する課題に対して、機械学習を用いて効果的な解決策を示すソリューションを提示した参加者に、成績に応じたメダルが付与され、メダルの通算獲得枚数によって称号が授与されます。
- 本コンペティションは、気候予測シミュレーションを模した機械学習モデルを作る課題で、2024年4月18日より2024年7月15日にかけて開催されました。服部は、温度、湿度、風など複数の高度における変化量を予測するテーブルデータを用いて作成されたモデルの、予測値とシミュレーション値の決定係数が評価され、694人中3位の成績を獲得いたしました。これに伴い、服部は、「Kaggle Grandmaster」に昇格しております。
- ※本コンペティションに関する詳細はこちらよりご確認ください。
- 服部の解法や取組み過程に関する詳細は、他の参加者と合わせて、今後KaggleのHP上に投稿される予定です。
- ABEJAには、服部を筆頭に、世界レベルで活躍する優秀な人材が集まっており、そうした知見がABEJA Platformに実装され続けることによって、企業としての継続的な優位性を確保し続ける源泉につながっております。
- ABEJAは、今後も、最先端のテクノロジーの研究開発に注⼒し、ビジネスに実装させることで、当社のミッションであるテクノロジーの力で産業構造を変革することに邁進いたします。
- ABEJAは、引き続き、幅広い業態・業界の企業に伴走し、人とAIの協調による産業構造の革新を推進します。
- ■Kaggleについて
- 世界各国のデータサイエンティストが集う世界最⼤級のオンラインコミュニティ・機械学習コンペティションプラットフォームです。
- Kaggleで開催されているコンペティションは、主催者がデータと課題を提供し、参加者が3ヶ月程度の期間内で機械学習モデルの予測性能を競い合う⼈気コンテンツです。https://www.kaggle.com/
- ■株式会社ABEJAについて
- ABEJAは、「ゆたかな世界を、実装する」を経営理念とし、「ABEJA Platform」を基盤に顧客企業の基幹業務のプロセスを変革し、ビジネスの継続的な収益成長の実現に伴走する「デジタルプラットフォーム事業」を展開しています。2012年の創業時よりABEJA Platformの研究開発を進めており、これまで多種多様な業界・業態の300社以上のデジタル変革をABEJA Platform上で実現してきました。
- 本 社:東京都港区三田一丁目1番14号 Bizflex麻布十番2階
- 設 立:2012年9月10日
- 代 表: 代表取締役CEO 岡田 陽介
- 事 業:デジタルプラットフォーム事業
- URL :https://abejainc.com
- 人材育成でDXを加速させる――
- ABEJA DX人材育成支援
- "公平を期すAI" のビジネス実装を支援
- AI倫理に関するコンサルテーション
- 大規模言語モデル(LLM)のビジネス実装を提供するABEJA LLM Series
- 100年後の当たり前を一緒に創りませんか?株式会社ABEJA 求人一覧
- ​Business
- ​
- Technology
- ​
- Vision
- Company
- ​
- ​IR
- ​
- Recruit
- ​
- News
- Contact
- ​
- ABEJA Tech Blog
- ​
- Terms of Use
- ​
- Privacy Policy
- ​
- AI Policy
- Copyright©ABEJA, Inc. All rights reserved.

もう少し工夫した方法

BeautifulSoupの get_text()関数を使うと、テキストの内容をきれいに取得できます。この方法なら、HTMLの一部の構造を保ちながらデータを集められます。ただし、フッターやナビゲーションリンクなどの不要な情報も一緒に取れてしまうことがあります。

<h2> News
<h2> ニュース
<p> 2024.07.19
<p> プレスリリース
<h1> ABEJAのデータサイエンティスト、Kaggleが実施したコンペティション「LEAP - Atmospheric Physics using AI (ClimSim)」で3位に入賞し、「Kaggle Grandmaster」に昇格
<p> 
<p> 人とAIの協調により「ゆたかな世界を、実装する」株式会社ABEJA(本社:東京都港区、代表取締役CEO:岡田 陽介、以下「ABEJA」)は、Kaggleが実施したコンペティション「LEAP - Atmospheric Physics using AI (ClimSim)」(通称「LEAPコンペ」)において、ABEJAのCTO室 データサイエンティスト 服部 響が3位となりましたことをお知らせいたします。この結果により、服部は、「Kaggle Grandmaster」に昇格しております。
<p> Kaggleでは、企業や政府機関などがコンペティション形式で提示する課題に対して、機械学習を用いて効果的な解決策を示すソリューションを提示した参加者に、成績に応じたメダルが付与され、メダルの通算獲得枚数によって称号が授与されます。
<p> 本コンペティションは、気候予測シミュレーションを模した機械学習モデルを作る課題で、2024年4月18日より2024年7月15日にかけて開催されました。服部は、温度、湿度、風など複数の高度における変化量を予測するテーブルデータを用いて作成されたモデルの、予測値とシミュレーション値の決定係数が評価され、694人中3位の成績を獲得いたしました。これに伴い、服部は、「Kaggle Grandmaster」に昇格しております。
<p> ※本コンペティションに関する詳細はこちらよりご確認ください。
<p> 服部の解法や取組み過程に関する詳細は、他の参加者と合わせて、今後KaggleのHP上に投稿される予定です。
<p> ABEJAには、服部を筆頭に、世界レベルで活躍する優秀な人材が集まっており、そうした知見がABEJA Platformに実装され続けることによって、企業としての継続的な優位性を確保し続ける源泉につながっております。
<p> ABEJAは、今後も、最先端のテクノロジーの研究開発に注⼒し、ビジネスに実装させることで、当社のミッションであるテクノロジーの力で産業構造を変革することに邁進いたします。
<p> ABEJAは、引き続き、幅広い業態・業界の企業に伴走し、人とAIの協調による産業構造の革新を推進します。
<p> ■Kaggleについて
<p> 世界各国のデータサイエンティストが集う世界最⼤級のオンラインコミュニティ・機械学習コンペティションプラットフォームです。
<p> Kaggleで開催されているコンペティションは、主催者がデータと課題を提供し、参加者が3ヶ月程度の期間内で機械学習モデルの予測性能を競い合う⼈気コンテンツです。https://www.kaggle.com/
<p> ■株式会社ABEJAについて
<p> ABEJAは、「ゆたかな世界を、実装する」を経営理念とし、「ABEJA Platform」を基盤に顧客企業の基幹業務のプロセスを変革し、ビジネスの継続的な収益成長の実現に伴走する「デジタルプラットフォーム事業」を展開しています。2012年の創業時よりABEJA Platformの研究開発を進めており、これまで多種多様な業界・業態の300社以上のデジタル変革をABEJA Platform上で実現してきました。
<p> 本 社:東京都港区三田一丁目1番14号 Bizflex麻布十番2階
<p> 設 立:2012年9月10日
<p> 代 表: 代表取締役CEO 岡田 陽介
<p> 事 業:デジタルプラットフォーム事業
<p> URL :https://abejainc.com
<p> 人材育成でDXを加速させる――
<p> ABEJA DX人材育成支援
<p> "公平を期すAI" のビジネス実装を支援
<p> AI倫理に関するコンサルテーション
<p> 大規模言語モデル(LLM)のビジネス実装を提供するABEJA LLM Series
<p> 100年後の当たり前を一緒に創りませんか?株式会社ABEJA 求人一覧
<h2> Home
<h2> Page Top
<p> <200b>Business
<p> <200b>
<p> Technology
<p> <200b>
<p> Vision
<p> Company
<p> <200b>
<p> <200b>IR
<p> <200b>
<p> Recruit
<p> <200b>
<p> News
<p> Contact
<p> <200b>
<p> ABEJA Tech Blog
<p> <200b>
<p> Terms of Use
<p> <200b>
<p> Privacy Policy
<p> <200b>
<p> AI Policy
<p> Copyright©ABEJA, Inc. All rights reserved.

Readabilityアルゴリズムを使う

もっと良い方法として、Readabilityというアルゴリズムを使う方法があります。このアルゴリズムは、ウェブページ内の要素に「重要度スコア」をつけて、必要なコンテンツだけを抽出します。例えば、divやarticleタグのように、本文を含む可能性が高い要素は高スコアを得ます。一方で、footerやsidebarタグのような要素はスコアが低くなります。 Safari や Firefox の「リーダーモード」では、Readability をベースに実装をしているそうです。 興味のある方はぜひ実装を見てみてください。

github.com

github.com

スコアの判断には、ざっくり以下のポイントが使われます:

  • 要素の種類:div、article、p タグ は重要視されます。
  • テキストの長さ:長いテキストは本文の一部とみなされます。
  • リンク密度:リンクが多い要素は、ナビゲーションと判断されてスコアが低くなります。

div に入っている要素であれば プラス 5 点、10文字以下の要素であればマイナス点、など各要素にポイントが振り付けられます。(実際のポイントは実装によって異なります)

こうしてスコアの高い要素だけを取り出すことで、余計な部分を省いたデータが手に入ります。

結果として、必要な情報だけを取るのにかなり近づけました!

Title:
ABEJAのデータサイエンティスト、Kaggleが実施したコンペティション「LEAP - Atmospheric Physics using AI (ClimSim)」で3位に入賞し、「Kaggle Grandmaster」に昇格|株式会社ABEJA

Structured Content:
    <p> 
    <p> 人とAIの協調により「ゆたかな世界を、実装する」株式会社ABEJA(本社:東京都港区、代表取締役CEO:岡田 陽介、以下「ABEJA」)は、Kaggleが実施したコンペティション「LEAP - Atmospheric Physics using AI (ClimSim)」(通称「LEAPコンペ」)において、ABEJAのCTO室 データサイエンティスト 服部 響が3位となりましたことをお知らせいたします。この結果により、服部は、「Kaggle Grandmaster」に昇格しております。
    <p> 
    <p> 
    <p> Kaggleでは、企業や政府機関などがコンペティション形式で提示する課題に対して、機械学習を用いて効果的な解決策を示すソリューションを提示した参加者に、成績に応じたメダルが付与され、メダルの通算獲得枚数によって称号が授与されます。
    <p> 本コンペティションは、気候予測シミュレーションを模した機械学習モデルを作る課題で、2024年4月18日より2024年7月15日にかけて開催されました。服部は、温度、湿度、風など複数の高度における変化量を予測するテーブルデータを用いて作成されたモデルの、予測値とシミュレーション値の決定係数が評価され、694人中3位の成績を獲得いたしました。これに伴い、服部は、「Kaggle Grandmaster」に昇格しております。
    <p> ※本コンペティションに関する詳細はこちらよりご確認ください。
    <p> 服部の解法や取組み過程に関する詳細は、他の参加者と合わせて、今後KaggleのHP上に投稿される予定です。
    <p> 
    <p> 
    <p> ABEJAには、服部を筆頭に、世界レベルで活躍する優秀な人材が集まっており、そうした知見がABEJA Platformに実装され続けることによって、企業としての継続的な優位性を確保し続ける源泉につながっております。
    <p> ABEJAは、今後も、最先端のテクノロジーの研究開発に注⼒し、ビジネスに実装させることで、当社のミッションであるテクノロジーの力で産業構造を変革することに邁進いたします。
    <p> 
    <p> 
    <p> ABEJAは、引き続き、幅広い業態・業界の企業に伴走し、人とAIの協調による産業構造の革新を推進します。
    <p> 
    <p> 
    <p> ■Kaggleについて
    <p> 世界各国のデータサイエンティストが集う世界最⼤級のオンラインコミュニティ・機械学習コンペティションプラットフォームです。
    <p> Kaggleで開催されているコンペティションは、主催者がデータと課題を提供し、参加者が3ヶ月程度の期間内で機械学習モデルの予測性能を競い合う⼈気コンテンツです。https://www.kaggle.com/
    <p> 
    <p> 
    <p> ■株式会社ABEJAについて
    <p> ABEJAは、「ゆたかな世界を、実装する」を経営理念とし、「ABEJA Platform」を基盤に顧客企業の基幹業務のプロセスを変革し、ビジネスの継続的な収益成長の実現に伴走する「デジタルプラットフォーム事業」を展開しています。2012年の創業時よりABEJA Platformの研究開発を進めており、これまで多種多様な業界・業態の300社以上のデジタル変革をABEJA Platform上で実現してきました。
    <p> 
    <p> 
    <p> 本 社:東京都港区三田一丁目1番14号 Bizflex麻布十番2階
    <p> 設 立:2012年9月10日
    <p> 代 表: 代表取締役CEO 岡田 陽介
    <p> 事 業:デジタルプラットフォーム事業
    <p> URL :https://abejainc.com

Readabilityの限界

ただし、Readabilityにも弱点があります。例えば、埋め込まれた動画や複雑なレイアウトがあると、コンテンツの抽出がうまくいかない場合があります。 この記事を書いているときに、試しに他のページを処理してみたのですが、動画の後にある本文が削除されてしまうこともありました。

いま、世界で何が起きているのか
人類はこれまで、科学の進歩を背景に、あらゆるテクノロジーを生み出してきた。
生活、文化、教育、そして産業。
テクノロジーがもたらす変革の恩恵はあらゆる場所、あらゆる人に及んでいる。
イノベーションだ。

一方で、ここまで変革をしてしまった世界は変化を嫌い、居心地の良い惰性での幸せを桜花していた。
時間はゆっくりと流れた。
わたしたちが想像した未来の世界は、こんなものだっただろうか。
未来はもっとワクワクしたものだったはずだ。

一変した。
混沌が世界を覆う。
人類は、ウイルスという驚異によって、極めて大きな変化を余儀なくされた。
ここまで科学が進化し、テクノロジーが浸透したとしても、人類はここまで無力だった。

しかし、その時に味方したのも、またテクノロジーの力だ。
デジタルテクノロジーによって、人類は壊滅的な打撃からかろうじて救われたのかもしれない。

これはまさにニューノーマルな世界だ。
インターネットによる経済はより大きな規模に拡大された。
そして、いよいよデジタルテクノロジーが現実世界に実装される。
ワクワクする未来がついに実装されるときがきたのだ。
人類史上最も大きな変革点がもうすぐそこにあるのかもしれない。

自分の推測では、このアルゴリズムがビデオプレーヤーを重要なコンテンツと見なしていないため、ビデオプレーヤー以降の内容が同じdivコンテナ内にあっても、それ以前の内容ほど高く評価されなかったのではないかと思います。

二番目に試した自前のアルゴリズムを使った結果、全ての本文をとることはできたが、余計なものも入っているようですね。

<h2> Why ABEJA?
<h2> なぜABEJAが存在するのか?
<p> Vision
<p> Philosophy
<p> Technopreneurship
<p> Why ABEJA?
<h2> いま、世界で何が起きているのか
<h2> 人類はこれまで、科学の進歩を背景に、あらゆるテクノロジーを生み出してきた。生活、文化、教育、そして産業。テクノロジーがもたらす変革の恩恵はあらゆる場所、あらゆる人に及んでいる。イノベーションだ。一方で、ここまで変革をしてしまった世界は変化を嫌い、居心地の良い惰性での幸せを桜花していた。時間はゆっくりと流れた。わたしたちが想像した未来の世界は、こんなものだっただろうか。未来はもっとワクワクしたものだったはずだ。一変した。混沌が世界を覆う。人類は、ウイルスという驚異によって、極めて大きな変化を余儀なくされた。ここまで科学が進化し、テクノロジーが浸透したとしても、人類はここまで無力だった。しかし、その時に味方したのも、またテクノロジーの力だ。デジタルテクノロジーによって、人類は壊滅的な打撃からかろうじて救われたのかもしれない。これはまさにニューノーマルな世界だ。インターネットによる経済はより大きな規模に拡大された。そして、いよいよデジタルテクノロジーが現実世界に実装される。ワクワクする未来がついに実装されるときがきたのだ。人類史上最も大きな変革点がもうすぐそこにあるのかもしれない。
<h2> 「ニューノーマル」時代のABEJAの存在意義
<h2> 「ニューノーマル」につながる技術を下敷きにしたイノベーションは、人や仕組みがつながりあうスタートアップエコシステムの中で育まれてきました。この「生態系」の可能性に着目し、ABEJAが設立されました。ABEJAは「テクノロジーの力で産業構造を変革する」というミッションを掲げています。これは、その時代の最先端のテクノロジーによるイノベーションで、世界を変えるという使命を表現した言葉です。今はAIを、将来は別のテクノロジーを中核に据え、新たなイノベーションを追求していく思いがあります。
<h2> さらにABEJAは、イノベーションによってテクノロジーが正しく使われ、人間が精神的にも物質的にもより豊かである世界を実現したいと考えています。そのためには、テクノロジーの知識に加え、世界をあるべき方向に導く倫理観を持つ人材が不可欠です。こうした価値観のもと、ABEJAは、人とAIの協調によって実現するデジタルテクノロジーのプラットフォームを創りだし、そのワクワクする未来を実装することを目指します。それら次のイノベーションを牽引する人材「テクノプレナー」を育て、社会に送り出し、世の中を変革させるような新たなエコシステムを構築する使命も担っていると考えています。
<h2> テクノプレナーに求められるのは、アントレプレナーシップを原動力に、リベラルアーツとテクノロジーの領域を回遊しながら、社会のあるべき姿を絶えず問い続けていく姿勢です。大きく変革する世の中では、そんなテクノプレナーシップを携えた人材こそが、飛躍的な発想で新たな価値を創りだし、真の意味で「ゆたかな世界」をもたらすと考えています。
<h2> これからも時代の流れとともに、新たなテクノロジーが生み出され続け、そのスピードはますます加速していくことでしょう。ABEJAは、常にテクノプレナーシップの行動精神のもと、人間性(humanity)、創造性(creativity)、倫理観(ethics)を持って最新のテクノロジーを取り扱い、社会構造の変革を先導し、「ゆたかな世界」の実現を追求し続けていきます。
<p> 人材育成でDXを加速させる――
<p> ABEJA DX人材育成支援
<p> "公平を期すAI" のビジネス実装を支援
<p> AI倫理に関するコンサルテーション
<p> 大規模言語モデル(LLM)のビジネス実装を提供するABEJA LLM Series
<p> 100年後の当たり前を一緒に創りませんか?株式会社ABEJA 求人一覧
<h2> Home
<h2> Page Top
<p> <200b>Business
<p> <200b>
<p> Technology
<p> <200b>
<p> Vision
<p> Company
<p> <200b>
<p> <200b>IR
<p> <200b>
<p> Recruit
<p> <200b>
<p> News
<p> Contact
<p> <200b>
<p> ABEJA Tech Blog
<p> <200b>
<p> Terms of Use
<p> <200b>
<p> Privacy Policy
<p> <200b>
<p> AI Policy
<p> Copyright©ABEJA, Inc. All rights reserved.

こうしたケースでは、Readabilityだけでなく他の方法と組み合わせることで、より良い結果が得られるかもしれません。

まとめ

ウェブサイトからの情報の抽出は、一見シンプルかと思っていましたが、多くの課題に直面しました。特に、HTMLの構造が複雑化する中で、必要な情報を適切に抽出し、構造を保ちながらデータを整理することは、自分にとって大きなチャレンジでした。

この記事では、シンプルな方法から高度なアルゴリズムであるReadabilityまで、いくつかのアプローチを紹介しました。それぞれにメリットとデメリットがあり、使う場面や目的によって適切な方法を選ぶことが大切だと思いました。また、データ抽出を行う際には、法的および倫理的な問題を十分に考慮する必要があります。

最終的に、ウェブ情報の抽出は技術だけでなく、ルールを守る姿勢と慎重な対応が求められる作業です。このブログが、皆さんの学びの一助となれば幸いです。自分のサイトや許可を得たサイトで、ぜひ実践してみてください!

We Are Hiring!

ABEJAは、テクノロジーの社会実装に取り組んでいます。 技術はもちろん、技術をどのようにして社会やビジネスに組み込んでいくかを考えるのが好きな方は、下記採用ページからエントリーください! (新卒の方やインターンシップのエントリーもお待ちしております!) careers.abejainc.com 特に下記ポジションの募集を強化しています!ぜひ御覧ください!

プラットフォームグループ:シニアソフトウェアエンジニア | 株式会社ABEJA

トランスフォーメーション領域:ソフトウェアエンジニア(リードクラス) | 株式会社ABEJA

トランスフォーメーション領域:データサイエンティスト(シニアクラス) | 株式会社ABEJA