PythonのWebスクレイピングを用いて、Webの品質管理を考えてみた
この記事はミツエーリンクス Advent Calendar 2020 - Adventarの20日目の記事です。
こんにちは。新卒1年目の小林です。
突然ですが、「Webスクレイピング」はご存じですか？
Webスクレイピングとは、Webサイトを巡回して情報を取得・解析し、その情報を加工して新たな情報を生成するプログラムのことです。
Webスクレイピングを使えば、Webページの必要な情報だけを習得し、データを格納することができます。
私はWebスクレイピングを知った時から、この技術を使ってWeb制作や制作物の自己チェックに役立つ物を作りたいと思っていました。
Web制作をしていると、Webの品質やアクセシビリティを普段から意識していても、img要素のalt属性やa要素のhref属性が抜けてしまっていたり、繋がらないリンク先を設定してしまっていたりすることがあります。また、ページ数が多くなればなるほどチェック漏れが発生する可能性も高まります。
Webアクセシビリティとは？
前述で、Webの品質やアクセシビリティについて触れましたが、そもそもWebのアクセシビリティとは、簡単にいうと「年齢・身体条件にかかわらず、Web上で提供されている情報に誰もがアクセスでき、利用できること」だと思います。
Webアクセシビリティが注目されている理由としては、スマートフォンなどのさまざまな媒体でインターネットにアクセスできるようになり、インターネットの利用率が増加したことが考えられます。
また、多くの高齢者や障害者のかたがインターネットを利用しています。そのような方たちを含め、多くの人がアクセスしやすい「アクセシブルなWebページ」が求められていると言えます。
どのようにすればアクセシブルなWebページを作成できるのかは、Web技術の標準化を行う非営利団体のW3C（World Wide Web Consortium）が定めるガイドラインWCAG（Web Content Accessibility Guidelines）に記載があります。前述のimg要素のalt属性に関する推奨事項などが記述されています。
今回行ったこと
やや前置きが長くなりましたが、今回はかねてより興味のあったPythonを使い、かつWebのアクセシビリティを向上させるために「対象ページのimg要素のalt属性、a要素のhref属性、target属性、rel属性、iframe要素のtitle属性をスクレイピングで取得し、csvファイルとして書き出す」という機能を作成してみました。
似たような機能は各ブラウザの拡張機能などですでにあるのですが、ファイルとして書き出すことにより、制作担当者だけではなく、ディレクターも同じ情報を使いまわすことができます。また、URLの一覧と見比べたり、データとして持っておいたりすることができるので、Webの品質向上だけでなく、プロジェクトの効率化にも役立つのではないか？と考えました。
実装内容
簡単に説明すると、下記のようなステップになります。
- 対象ページにアクセスします。
- 対象ページにBasic認証が必要かどうかを判断し、必要な場合のみ、ユーザー名とパスワードが求められます。不要な場合、次の処理が実行されます。
- 対象要素ごとの見出しを付けて、対象ページのタイトルと同じ名前でcsvファイルを作成します。
- 3で作ったcsvファイルにスクレイピングで取得した特定の要素の属性（alt属性、title属性、href属性、target属性、rel属性）を書き出します。
今回はPythonを使って実行ファイルとして作成しました。プログラムを立ち上げると、下記のようにコマンドプロンプトが立ち上がり、Webスクレイピングの対象となるURLを求められるので、対象のURLを入れます。
ベーシック認証が必要なページの場合は、対象URLを入れたあとに、ユーザー名とパスワードが求められます。
エンターキーを押すと対象ページ内に対してスクレイピングを開始します。
スクレイピングが終わると、取得した情報を一覧できるcsvファイルを、実行した.pyファイルと同階層に出力します。
実際にミツエーリンクスのトップページをスクレイピングしてみました。出力された.csvファイルは以下のようになります。（量が多いので全体が見られるようにリンクなどを一部削除しています）
対象要素の選定理由
なぜ「alt属性」や「title属性」などの属性をスクレイピングの対象として選んだかというと、前述したWCAGで以下の項目が推奨されているからです。
- img要素のalt属性
- 画像（視覚情報）の代替テキストが提供されていること
装飾画像の代替テキストは空とする（alt=""） - iframe要素のtitle属性
- フレームの内容を表すtitle属性が指定されていること
img要素には装飾か、そうではないかに関わらず必ずalt属性を指定する必要があります。一覧にすることで、空文字が指定されているimg要素とそもそもalt属性自体がないimg要素がより見分けやすくなります。また、運用していくなかで画像の差し替えが発生した場合にalt属性の更新が漏れてしまうこともあるかもしれませんが、一覧にしておけば気づきやすくなります。
a要素のhref属性、target属性、rel属性、つながっていないリンクに関しては、WCAGに具体的な記載はないのですが、Web制作をしていてリンクは一覧で見られたほうが便利だなと思い選定しました。つながっていないリンクや、別窓リンクなども一覧で見られたほうが該当箇所も見やすく、修正もしやすいためWeb制作の効率化と品質担保につながると考えました。
まとめ
今回は、Pythonを使って対象要素をcsvファイルに一覧として書き出すWebスクレイピングプログラムを実装しました。
Webスクレイピングは他にもさまざまな場面で利用できると思いますので、皆さんもぜひWebの品質、アクセシビリティの向上に役立つような便利な機能を作ってみてください。
今回、実際に実装してみることで、自分の技術レベルの向上を実感しました。また、調べることによりWebアクセシビリティへの知識を深めるいい機会となりました。
さらに、csvファイルに一覧として書き出されるので対象要素も見やすくなりましたし、自己チェックを行う際も、一覧で確認でき、URLの一覧リスト（ページ内にあるa要素のリンク先がどこか、一覧でみることができるもの）などと見比べてみることで見落としが減り、Webの品質向上に役立つと感じました。そして何より、Webの品質、アクセシビリティを高めるという視点を持って考えることができたことが大きな収穫になったと思います。
個人的には実装の技術やアクセシビリティに関する知識もまだまだだと感じていますので、これで満足せずに勉強し続けて行きたいと思いました。