サーバーサイドSeleniumでスクショ時に豆腐化

Question

発生している問題

データ収集の案件のためVPSを契約し、Seleniumスクレイピングをしています。
最初はどうせHeadlessだし、フォントをインストールせずにChromeだけインストールしてSeleniumしていました。URL等のテキストデータを抽出したり、ページの文章を抽出したテキストファイルをPCに落として閲覧するだけならこれで問題ありませんでした。

しかしながら、ある時ページの文章をテキストデータではなくスクショで保存しなければならない案件があり、日本語フォントが入っていないせいで豆腐化してしまう問題が発生しました。
ググったらtexlive-lang-cjkというライブラリ（この中に日本語フォントが入っている）を入れると直ると書いてあったので試してみましたが、1回目と同じように豆腐化。
ただ、texlive-lang-cjkを入れてからはコンソール画面が文字化けしなくなったため、Chrome以外はちゃんとフォントが更新されているようです。

なぜChromeだけダメなのか不思議ですが、おそらく日本語フォントをインストールする前にChromeをインストールしたせいで、フォント情報無しでChromeが初期化されてしまった可能性が考えられます。
このような場合、Chromeの設定ファイルを自分で書き換える必要があると思いますが、Linux初心者なのでどのファイルをいじればいいのか見当がつきません。
ご教授いただければ幸いです。

該当のソースコード

from selenium.webdriver import なんちゃらの数行は省略

BASEURL = "https://b.hatena.ne.jp/"
FILENAME = "screen_selenium.png"

options = ChromeOptions()
ua = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36'
for arg in ['--headless', '--no-sandbox', '--window-size=800,600', '--user-agent=' + ua]:
  options.add_argument(arg)
service = ChromeService(executable_path=r'/usr/bin/chromedriver')

with Chrome(service=service, options=options) as driver:
  driver.get(BASEURL)
  WebDriverWait(driver=driver, timeout=10).until(EC.presence_of_all_elements_located)
  driver.save_screenshot(FILENAME)

補足情報（FW/ツールのバージョンなど）

WebArena Indigo
2 CPU 2 GB
Ubuntu 20.04
Python 3.8.10
selenium 4.4.3
Google Chrome 104.0.5112.101
ChromeDriver 104.0.5112.101

Comments

[maisumakun]

> おそらく日本語フォントをインストールする前にChromeをインストールしたせいで、フォント情報無しでChromeが初期化されてしまった可能性が考えられます。

Chromeを再インストールしてみる、というのはどうでしょうか。

[YukiMoriNRT]

Chromeとchromedriver両方をpurgeで完全アンインストールしてから再度installしてみましたが、結果は変わらず豆腐でした。

Chromeのconfigファイルの場所を教えて頂けますでしょうか？
Linux初心者なので、さっぱりわからないのです。
WinPCだったら日本語フォントは標準装備で当然ですからね。

[ikadzuchi]

> ブラウザによる文字コード判定が機能していない（日本語サイトも全部ASCII扱いになる）ことが原因とみて間違いなさそうです。
いいえ、そんなことはありません。
文字コードが正しく判定できたかどうかは文字数を見ればほとんど分かります。
今回の場合、UTF-8で書かれたサイトが正しい文字数で表示されています。これは正しくUTF-8として判定していなければあり得ない状況です。

Answer 1

遅くなってすみません。
その後、新しいインスタンスを立てた時はseleniumをインストールする前にtexlive-lang-cjkをインストールしたため豆腐化せずうまくいきました。
どうやらseleniumのインストール時点で存在するフォントのリストがseleniumにインポートされる仕様で、後からフォントを追加してもseleniumからは見えないようです。
その後、また別件のインスタンスを立てた時は、texlive-lang-cjkを使用せずPCからVPSにmeiryo.ttcをコピーしただけでもうまくいきました(もちろんseleniumインストール前です)

Answer 2

こちらのサイトを参考に、次のコードへと修正しましたが、

JS_REPLACE_TEXT = """
function handleFont(node, fontFamily)
{
  node.style.fontFamily = fontFamily;
}

function walk(node, fontFamily)
{
var child, next;

  switch (node.nodeType)
  {
    case 1:  // Element
      handleFont(node, fontFamily);
    case 9:  // Document
    case 11: // Document fragment
      child = node.firstChild;
      while (child)
      {
        next = child.nextSibling;
        walk(child, fontFamily);
        child = next;
      }
      break;

    case 3: // Text node
      break;
  }
}

var style = document.createElement('style');
style.textContent = `@import url('//fonts.googleapis.com/css?family=Source+Code+Pro');@importurl('//fonts.googleapis.com/earlyaccess/notosansjp.css');`;
document.head.appendChild(style);
document.body.style.fontFamily = "'Noto Sans JP', sans-serif";
walk(document.body, "'Source Code Pro', 'Noto Sans JP', monospace");
"""
driver.execute_script(JS_REPLACE_TEXT)

英字部分のフォントデザインが若干変化しただけで、日本語部分の豆腐化は相変わらずです。
CSSのフォント指定がASCII文字には効いているが、マルチバイト文字には効いていないということは、フォントの問題ではなく、ブラウザによる文字コード判定が機能していない（日本語サイトも全部ASCII扱いになる）ことが原因とみて間違いなさそうです。

ここでの文字コード判定をChrome自体が行っているのか、それともPythonで文字コードを判定してからChromeに渡しているのかは、最初はよくわかりませんでした。
しかし、今回の実行時はコンソールに変なメッセージが出て、そのうちの1つが文字コード判定ライブラリのchardetからの警告だったので、どうやらこれが怪しそうです。
実は数日前も、別案件の1MB超のテキストデータ処理で、高速化のためにSeleniumの代わりにrequestsを使ったら文字化けでハマってしまい、ググったらこちらのブログに辿り着いて、

公式のベンチマークによると、chardetが0.35(call/s)に対して、cchardetは1467.77(call/s)となります。

と書かれていたのでcChardetをインストールしてしまったんですよね。
そのせいで既存のchardetと競合してしまい、chardetへの依存関係にある他のライブラリ（その中には当然、seleniumも含まれます）が全部おかしくなってしまった線が濃厚っぽいです。

/usr/lib/python3/dist-packages/requests/__init__.py:89: RequestsDependencyWarning: urllib3 (1.26.12) or chardet (3.0.4) doesn't match a supported version!

というわけで、1MB超のテキストデータを扱うことは当面なさそうなので、pip uninstall cchardetしてから再度チャレンジ…やっぱりダメでした。
コンソールの警告は出なくなりましたが、肝心のスクショは豆腐のままです。

一体どうすればいいのでしょう？
色々なライブラリをいじり過ぎて依存関係がカオスになっているので、いっそのこと新しいインスタンスを立ち上げてリセマラしたほうがいいですかね？（こういう時はVPSって便利ですよね）

Comments

[ikadzuchi]

ここは解答欄です。質問に追記してください。