Zenn
🗼

DeepL Pro サイト翻訳で英語ドキュメントを快適に読む

2022/07/08に公開
1件
英語
DeepL
idea

問題

DeepL Pro のウェブサイト翻訳は便利ですが、プログラミング関連の記事に適用すると以下のようにソースコード等の翻訳されてほしくない箇所まで翻訳されてしまい、翻って読みづらくなります。

解決策

DeepL にはHTML中に class="notranslate" もしくは translate="no" 属性があると、その範囲を翻訳しないという仕様があります（Google翻訳由来の仕様らしい）。

そこでTampermonkeyを使って、以下のような UserScript で翻訳したくないタグに class="notranslate" を追加して、再度 DeepL を適用します。

// ==UserScript==
// @name         add-notranslate-class-to-code-related-tags
// @namespace    http://tampermonkey.net/
// @version      0.0.1
// @description  add notranslate class to code related tags
// @author       zenwerk
// @match        *://*/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=tampermonkey.net
// @grant        none
// ==/UserScript==

(function () {
    'use strict';

    // Markdown や AsciiDoc のソースコードハイライト部分は翻訳しない
    var preTags = document.getElementsByTagName('pre');
    for (const preTag of preTags) {
        preTag.classList.add('notranslate');
    }

    // Doxygen
    var fragmentDivs = document.getElementsByClassName('fragment');
    for (const fragmentDiv of fragmentDivs) {
        fragmentDiv.classList.add('notranslate');
    }

})();

ついでにBudouXを使って改行位置を自動調整します。
すると以下のように記事が読みやすくなります。

Epubの翻訳

DeepL のファイル翻訳では Epub は非対応ですが、ブラウザ上でEpubが閲覧できれば同様の方法が適用できて便利です。
私はEpubを閲覧するときNeat Readerを使っていますが、例えばFree Ebook Go Web DevelopmentのEpubを翻訳すると以下のようになります。

同様に<pre>にnotranslateを追加すればよいですが、Neat ReaderのEpubビューワはページ内を動的に書き換えるため上記のUserScriptでは完全には対応できません。そこで開発者ツールなどで書き変わるDOMを調べMutationObserverで監視するようなUserScriptを追加します。

// ==UserScript==
// @name         add-notranslate-class-to-code-related-tags-at-neat-reader
// @namespace    http://tampermonkey.net/
// @version      0.0.1
// @description  add notranslate class to code related tags at neat-reader
// @author       zenwerk
// @match        https://*.neat-reader.com/*
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant        none
// @run-at       document-idle
// ==/UserScript==

(function () {
    'use strict';
    var viewerNode = document.getElementById('neat-epub-viewer');
    // (変更を監視する) オブザーバーのオプション
    const config = { childList: true, subtree: true };

    // 変更が発見されたときに実行されるコールバック関数
    const callback = function (mutationsList, observer) {
        // Use traditional 'for loops' for IE 11
        for (const mutation of mutationsList) {
            if (mutation.type === 'childList') {
                // ソースコード部は翻訳しない
                var preTags = document.getElementsByTagName('pre');
                for (var i = 0; i < preTags.length; i++) {
                    preTags[i].classList.add('notranslate');
                }
            }
        }
    };

    // コールバック関数に結びつけられたオブザーバーのインスタンスを生成
    const observer = new MutationObserver(callback);

    // 対象ノードの設定された変更の監視を開始
    observer.observe(viewerNode, config);
})();

UserScriptを追加し同様にDeepLを適用すると以下のようになり、快適に英語のEpubが読めます。

まとめ

DeepL Pro は最安プランでも年額9,000円するので安くはないですが、日々英語ドキュメントに向き合うことが多い人や、Packt等で買ったまま未読のEpubが大量にある人にはその価値はあると思います。
また、DeepL の誤訳ついては度々話題になりますが、プログラミング系の文書に限って言えば掲載されているコードと突き合わせながら読めばおおよそ気づくことができるのではないでしょうか。

Discussion