AWS lambda selenium webdriverによるスクリーンショットで文字化け

Question

AWS lambda selenium webdriverでスクリーンショット取得するようにしていますが、文字化けがなかなか解消しません

以下のサイトを参考にしてフォントを設置しております。
https://masakimisawa.com/selenium_headless-chrome_python_on_lambda/

実行時にフォントがうまく置かれているか出力確認するようにして
問題なく設置できていると思っております。

別途こちらのサイトも参考にやってみましたが、
フォントキャッシュの生成というのがうまくできませんでした。
https://qiita.com/komeda-shinji/items/e049edd1389579059c53

その他簡単な方法がありましたら教えていただければと思います。
(公開されているフォントのlambdaレイヤーのARNとかありますか？)

import os
import glob

from selenium import webdriver
from ftplib import FTP_TLS


localpath = "/tmp/"
ftppath = "####/test/"


# webdriber.chrome option 設定
options = webdriver.ChromeOptions()
options.add_argument("--headless")
options.add_argument("--disable-gpu")
options.add_argument("--window-size=1704x1078")
options.add_argument("--disable-application-cache")
options.add_argument("--disable-infobars")
options.add_argument("--no-sandbox")
options.add_argument("--hide-scrollbars")
options.add_argument("--enable-logging")
options.add_argument("--log-level=0")
options.add_argument("--v=99")
options.add_argument("--single-process")
options.add_argument("--ignore-certificate-errors")
options.add_argument("--homedir=/tmp")
options.binary_location = "/opt/bin/headless-chromium"



#FTPS でファイルを 1 件アップロード
def push(local_path: str,remote_path: str) -> None:
    hostname = "##########" 
    username = "##########"
    password = "##########"

    with FTP_TLS(host=hostname, user=username, passwd=password) as ftp:
        print("UPLOAD--- " + hostname + "  " + local_path + " ---> " + remote_path)
        ftp.storbinary('STOR {}'.format(remote_path), open(local_path, 'rb'))
        


def lambda_handler(event, contxt):

    print("--------------------------------")
    print("環境変数",os.environ['HOME'])

    print("----- /opt/.font")    
    files = os.listdir("/opt/.font")
    for file in files:
        print(file)

    print("----- os.environ['HOME']")    
    files = os.listdir(os.environ['HOME'])
    for file in files:
        print(file)
        
    print("--------------------------------")
    
    url = "https://www.yahoo.co.jp/"

    driver = webdriver.Chrome("/opt/bin/chromedriver", chrome_options=options)

    print("接続--> "+url)

    driver.set_window_size(1200, 1200)
    driver.get(url)
    time.sleep(3)

    imgname = localpath + "screenshot.png"
    
    # スクリーンショット
    driver.get_screenshot_as_file(imgname)
    print("画像保存 "+imgname)

    driver.close()


    files = glob.glob(localpath+"*.png")
    for file in files:
        if os.path.isfile(file):
            filename = os.path.basename(file)
            ftpfile = ftppath + str(filename)
            localfile = localpath+str(filename)
            #print(localfile," --> ",ftpfile)
            push(local_path=localfile,remote_path=ftpfile)

            #ファイル削除
            #os.remove(localfile)

    print()

    return "ok"
    

実行結果

--------------------------------
環境変数 /opt/
----- /opt/.font
NotoSansCJKjp-Regular.otf
NotoSansMonoCJKjp-Regular.otf
ipaexg.ttf
ipaexm.ttf
----- os.environ['HOME']
.font
bin
python
--------------------------------
接続--> https://www.yahoo.co.jp/
画像保存 /tmp/screenshot.png
UPLOAD--- #########  /tmp/screenshot..png ---> #####/test/screenshot..png

Answer 1

初めまして。2つほどやり方がありそうです。

1つ目
selenium実行中にスクリーンショットしたいページへ遷移し、javascriptを埋め込んでstyle属性の変更を行う方法。ただし、iframeの対応はできない。
・Lambda上のSeleniumでスクリーンショットを撮った際に文字化けする問題の解消

2つ目
fontファイルを設置して読み込む方法。

上記の実装を鑑みてfontファイルを読み込む上で2点怪しいなと思っている部分がありまして、
・fontファイルパスの権限に問題はないか？(読み込み、実行は可能？)
・fontキャッシュの更新を行っているのか？(こちら参照)

ご確認のほどよろしくお願いいたします。

参考
【 fc-cache 】コマンド――フォントキャッシュを更新する

Comments

[miyazy]

ご回答いただきありがとうございます。

1つ目について
　コードを追加してみましたがうまくいきませんでした。(コードの内容が理解できてないです。)
2つ目について
　fontファイルのパスについて確認したところ、読み込みも実行も不可となっていました。
　変更を試みたのですがうまくいきません。(圧縮前に権限をつけて圧縮しています。)
　権限の変更方法がありました、お教え願います。
fontキャッシュの更新について
　お教えいただいたサイトを参考に調査中ですが、まだ内容を理解しきれておりません。

[退会済みユーザー]

> 1つ目について

// execute_script内のjavascriptコードを読み込み、実行する。
execute_script
// styleタグを生成する。
var style = document.createElement('style');
// styleタグに対して、fontに関するcssを埋め込む。
style.textContent = `@import url('//fonts.googleapis.com/css?family=Source+Code+Pro');@importurl('//fonts.googleapis.com/earlyaccess/notosansjp.css');`;
// headタグ内にstyleタグを埋め込む。
document.head.appendChild(style);
// bodyタグ内のstyleのfontFamilyの変更
document.body.style.fontFamily = "'Noto Sans JP', sans-serif";
// preタグの子要素を持つcodeタグの部分に対してfontの変更を行う。
document.querySelectorAll('pre > code').forEach((el, idx) =>{
el.style.fontFamily = "'Source Code Pro', 'Noto Sans JP', monospace";
});

[退会済みユーザー]

> 2つ目について

権限に関すること
ファイル実行するfontファイルに関して権限変更しないといけないと思うので、lambda実行時に変更する必要がありそうです。
こちらのコードが役に立ちそうですので、ご確認ください。
https://github.com/kuroroblog/check_price/blob/master/automate.py#L14

[退会済みユーザー]

> fontキャッシュの更新について
何か困ったことがありましたら、ご連絡ください〜

[miyazy]

ありがとうございます。

def addExecutePermission(path,target):
mode_map = {
"u": stat.S_IXUSR,
"g": stat.S_IXGRP,
"o": stat.S_IXOTH,
"a": stat.S_IXUSR | stat.S_IXGRP | stat.S_IXOTH,
}

print(path)

mode = path.stat().st_mode
for t in target:
mode |= mode_map[t]

path.chmod(mode)

addExecutePermission("/opt/.font/NotoSansCJKjp-Regular.otf","ug")

教えていただいたコードを参考に以上のコードを追加してみましたが、エラーが出てしまします。
File "/var/task/lambda_function.py", line 59, in addExecutePermission
mode = path.stat().st_mode
AttributeError: 'str' object has no attribute 'stat'

[退会済みユーザー]

from pathlib import Path

をimportして

addExecutePermission(Path("/opt/.font/NotoSansCJKjp-Regular.otf"), "ug")

に変更するとどのようになりますか？

[miyazy]

次のようなエラーが出ました。

{
"errorMessage": "[Errno 30] Read-only file system: '/opt/.font/NotoSansCJKjp-Regular.otf'",
"errorType": "OSError",
"stackTrace": [
[
"/var/task/lambda_function.py",
76,
"lambda_handler",
"addExecutePermission(Path(\"/opt/.font/NotoSansCJKjp-Regular.otf\"),\"ug\")"
],
[
"/var/task/lambda_function.py",
61,
"addExecutePermission",
"path.chmod(mode)"
],
[
"/opt/python/pathlib.py",
1117,
"chmod",
"self._accessor.chmod(self, mode)"
],
[
"/opt/python/pathlib.py",
346,
"wrapped",
"return strfunc(str(pathobj), *args)"
]
]
}

[退会済みユーザー]

なるほど、自分の方で少し動かしてみます。
明日のお昼頃には何かしら返事いたします。????‍♂️

[miyazy]

ご親切にありがとうございます。
よろしくお願いします。

[退会済みユーザー]

すみません。とりあえず、スクリーンショットとる機構までは再現できました。
ただ、文字化け問題はまだ解消できていない状態です。
意外と難しいですね笑

[退会済みユーザー]

うまくいきました。
今日明日中にまとめますのでお待ちください。

[miyazy]

ありがとうございます。よろしくお願いします。

[退会済みユーザー]

お待たせしました。

こちらの記事にまとめましたので、ご一読いただけますと理解が深まると思います。
https://kuroro.blog/python/0Sd4HERaGbzIpSsyEVoz/

またこちらgithubのコードになります。
https://github.com/kuroroblog

実際動かしてみて、わからない部分が出てきましたら、ご連絡いただけますと幸いです。????‍♂️

[miyazy]

上手くいきました、ありがとうございます。
短時間にこんなに丁寧にまとめていただいて、感謝とともに尊敬いたします。

記事をみてフォントについてやり方は問題ないのではと思ったのですが、
ダウンロードした内容をみてうまくいかなかった原因がわかりました。
「.fonts」ではなく「.font」としておりました。
結局はそこを訂正したらうまくいきました。
大変ご迷惑おかけしました。

[退会済みユーザー]

お〜、フォルダ名だったんですね。(笑)

エンジニアやっていると、ついやってしまいますよね〜！！
なりより、うまく行ってよかった！！

問題文のコード読んでみて、いい感じに書けていて、いいエンジニアが育ってる感じでして素直に嬉しいです。

Enjoy!!!

[miyazy]

記事についてひとつ要望なのですが、
コードとフォントをdeploy.zipとしてアップロードしておりますが、
lambdaのコードソースに直接記入する方法も紹介していただきたいです。
こちらの方法ですとコードの修正が簡単にできるので便利だと思います。
その際、フォントは別途レイヤーにアップし環境変数を/opt/とすることになります。

このようなやり方を紹介しているサイトは私の探した限りは見受けられなかったので、
参考になる人が多いのではないでしょうか。

[退会済みユーザー]

そうですね。

> lambdaのコードソースに直接記入する方法も紹介して

動くことを確認しましたので、しばらくお待ちください。修正します。

ご指摘ありがとうございます。????‍♂️

[退会済みユーザー]

.fontsをLayerにして記事修正を行いました。

コード直書き方法の追記の件ですが、
・直書きしてバグが発生する < zipファイルで固めてアップしたのちに、後でコード確認して理解を深める方が離脱なく問題解決に繋がりそう。
・複数解を記事内で提示して、問題解決できなくなる。
・.fontsをLayerにしたことで、コードの編集はできるようになった。

ので、今回は記入しないことにしました。

後々の機能開発にて、コメント機能を追加する予定で別解という形でコード直書きできる旨を伝える或いは、関連記事として作成するなどを考慮いたします。

ご指摘ありがとうございます。????‍♂️

[miyazy]

記事確認しました。素早いご対応関心するばかりです。
＞・.fontsをLayerにしたことで、コードの編集はできるようになった。
容量が少なければZIPでアップロードしても編集できましたね。
これならすぐ修正ができていいです。

この記事にもっと早く出会いたかったです。
サーバーレスを使う方法、dockerを使う方法などはありましたが、いまいち理解できずに苦労しておりました。ZIPを何度もアップロードし直して苦労していた次第です。

[退会済みユーザー]

そうだったんですね。
僕もLambda触ったの1年ぶりで、色々変わっててとてもワクワクしました！笑

多くの方に記事が見られて、幸せな人生が歩めますように〜！！