りけんのけん (仮)

【Ruby】HTML内の画像のURLを正規表現を使って取得する

2017/03/22

記事内の画像をOGPの画像として設定したいというタスクを担当したときに、正規表現を学んだのでついでにアウトプットします。

WordPressなどのCMSで作られた記事なら、アイキャッチ画像で設定したものがOGP画像になると思います。

しかし中には、そういったOGP画像を考慮せずにつくられたCMSもあったりします。単純にタイトルと本文だけが入力できて、それをまるごとデータベースに突っ込んでいるようなパターンです。

そういった場合は、記事本文から画像を出力している部分を抽出し、画像のURLを取得したうえで、その情報を使ってOGP設定をしなければなりません。

つまり、ステップとしては下記のようになります。

1. データベースから記事本文を取得する
2. 正規表現を使って、画像を出力している部分のHTMLを抽出する
3. 画像のURLを取得する
4. OGPの設定をする

それを実装したコードがこれです。ステップ2〜3を実装しています。

目的は、htmlの中の
imgタグで始まり、srcが.pngなどの拡張子付きで終わる箇所
を抽出することです。

それを正規表現で表したものを、変数regexpに格納しています。

その後、htmlに正規表現regexpと、取り出したいマッチデータの番号を与えると、

“https://example.com/test.png”

というように文字列が返ってきます。このURLをogpの画像設定に組み込んであげれば、SNS等で拡散するときに画像がついてくるよ!