xonshの日本語訳やったったたったたったたった

やりたいこと

• xonshの作者の@scopatzに褒められたい
• xonsh日本代表の@vaaaaanquish (通称@kawapatz) に褒められたい
• @scopatzも@kawapatzも、xonshの日本語訳を作成したいらしい
• 俺がやる

やったこと

• googleのページ全体翻訳を利用して、 https://xon.sh にあるhtmlを翻訳しまくる

成果物

• 日本語訳ページ
  • https://fervent-mestorf-e04dda.netlify.com/
• github
  • https://github.com/xonsh-jp/xonsh-jp.github.io

手法

• こんな感じで進みました

1. wgetでhttps://xon.sh の翻訳すべきurlを取得
2. seleniumでurlを巡回しながらページ翻訳し、翻訳結果のhtmlを保存
3. 静的ページのdeploy

1. wgetで https://xon.sh の翻訳すべきurlを取得

• これで再帰的にhttps://xon.sh して、リソースを取得してくれます。wgetかわいい

wget -r -l0 https://xon.sh/

• 参考
  • wgetのmanを読むのが早いです

2. seleniumでurlを巡回しながらページ翻訳し、翻訳結果のhtmlを保存

• 流れはこんな感じです

a. seleniumで翻訳すべきページに移動し、googleのページ翻訳機能を起動させる
b. 翻訳すべきページをゆっくりスクロールする
c. 翻訳されたページを出力する

a. seleniumで翻訳すべきページに移動し、googleのページ翻訳機能を起動させる

• あるページでgoogleのページ翻訳機能を起動させるには、右クリックして「日本語に翻訳」を選択するだけです。

図1: 右クリックして「日本語に翻訳」を表示

• cliclick (https://github.com/BlueM/cliclick) を使うと、右クリックして「日本語に翻訳」を、コマンドラインベースで行えるので、これを使いました
  • 図1 の場合だと、
    • 右クリック
    • 6回、ARROW_DONWボタンを押す
    • ENTERボタンを押す
  • で日本語に翻訳を選択できます。

# rcは、right clickをさします
# 10,200は、画面上の位置をさします(x,y)

# 自分の環境の場合、x=10,y=200のところで下記の操作を行うと
# 日本語に翻訳を選択が必ず行えるようにセッティングしています(笑)

cliclick rc:10,200 \
        kp:arrow-down \
        kp:arrow-down \
        kp:arrow-down \
        kp:arrow-down \
        kp:arrow-down \
        kp:arrow-down \
        kp:enter

• 参考
  • githubに全てが書いてあります。とてもシンプルで良いです
    • https://github.com/BlueM/cliclick

b. 翻訳すべきページをゆっくりスクロールする

• googleのページ翻訳は、webブラウザが表示されている面の内容のみを翻訳しているため、https://xon.sh のあるhtmlの1ページに対して、すべてを表示させる必要があります。
  • (topからbottomまで、ゆっくりスクロールする必要がある)
• 下記の例は、あるページに対して、PAGE_DOWNを連続で行い、ページの一番下まで行くと処理を終了します。

from selenium import webdriver
from selenium.webdriver.common.keys import Keys

DRIVER = webdriver.Chrome('/path/to/chromedriver')

_pos = 0
while True:
    body.send_keys(Keys.PAGE_DOWN)
    sleep 2 
    pos = DRIVER.execute_script("return window.pageYOffset")
    if _pos == pos:
        break
    _pos = pos

• 参考
  • selenium python binding
    • https://selenium-python.readthedocs.io/api.html
  • CromeDriver
    • http://chromedriver.chromium.org/getting-started

c. 翻訳されたページを出力する

• 下記で取得できます。

DRIVER.page_source

3. 静的ページのdeploy

• https://www.netlify.com/ を使って、deployしました。
• ボタン押してたら、deployできたので、解説は不要だと思います。いい時代。
• (余談) github.ioは相対パスのせいなのか、あるdirectory内のimage,css,jsがうまく読み取れなかった 😢

今日のxonsh

• xonshだと何も考えずに上記の流れをつなぎ合わせられるので、つなぎ合わせたプログラムを貼っておきます。
• translate_page関数は、https://xon.sh のあるhtmlのfile_pathを受け取って、翻訳結果のhtmlを返します

from selenium import webdriver
from selenium.webdriver.common.keys import Keys
import os

DRIVER = webdriver.Chrome('/path/to/chromedriver')

def translate_page(file_path):
    DRIVER.get(f'https://{file_path}')
    body = DRIVER.find_element_by_css_selector('body')

    # 念のためページの先頭に戻ります
    DRIVER.execute_script("window.scrollTo(0, 0)")
    
    # 画面上の座標 x=10, y=200 に右クリックした場合にうまく翻訳機能が発火することを祈ります
    cliclick rc:10,200 \
            kp:arrow-down \
            kp:arrow-down \
            kp:arrow-down \
            kp:arrow-down \
            kp:arrow-down \
            kp:arrow-down \
            kp:enter
    sleep 1
    
    # 気分は無限ループ
    _pos = 0
    while True:
        body.send_keys(Keys.PAGE_DOWN)
        sleep 2 
        pos = DRIVER.execute_script("return window.pageYOffset")
        if _pos == pos:
            break
        _pos = pos
    
    return DRIVER.page_source

今後やること

• domain を取得して、xonshの日本語ドキュメントの公式っぽくする
• @scopatzに連絡する
• https://xon.sh のhtmlを対象に翻訳したため、html以外で翻訳すべきものを網羅できていない
  • また、一部翻訳の処理のミスでできてない部分があるため、その対応
• 今回作成した日本語ドキュメントから、https://xon.sh に移動するような仕組みを作って、本家のサイトへの流入を増やす
• この日本語ドキュメントをもとに、みんなで一部ずつ翻訳していけるような仕組みを考える

最後に

Merry Xonshmas!