DeepLで翻訳前と翻訳後のテキストをまとめてコピーするスニペット

はじめに

対象読者

• DeepL のブラウザ版を頻繁に使っている人
• DeepL の翻訳前テキストと翻訳後テキストを、別の箇所に同時に貼り付けるのを楽にしたい人

前置き

• 2022/06 時点での DeepL の仕様に依存します
  • 特に DOM に指定されている id, class 名

動作環境

• Chrome 101 以後にて確認
• devtool の console にてスニペットを実行してください
  • 一度実行したコマンドは、次回実行時は十字キーの ↑ を入力することで履歴から呼び出せるので、そうして再実行させていくのが楽で便利です

完成形

スニペット

幅広 サイズ表示

let beforetext = document.getElementById('source-dummydiv').innerHTML
let aftertext = document.getElementById('target-dummydiv').innerHTML
let textarea = document.createElement('textarea')
textarea.textContent = aftertext + beforetext
let box = document.getElementById('lmt__dict_container')
box.appendChild(textarea)
textarea.select()
document.execCommand('copy')
box.removeChild(textarea)

モバイル サイズ表示

let beforetext = document.getElementById('source_textarea').value
let aftertext = document.getElementsByClassName('TextInput-module--textarea--oUXvH')[1].value
let textarea = document.createElement('textarea')
textarea.textContent = aftertext + '\n' + beforetext
let box = document.getElementById('gatsby-focus-wrapper')
box.appendChild(textarea)
textarea.select()
document.execCommand('copy')
box.removeChild(textarea)

クリップボードに格納されたテキスト

I shouldn't have time to write articles like this or make snippets, but I'm escaping reality.
However, I should have been able to get out of the lumberjack dilemma.
このような記事を書いたりスニペットを作ったりしている時間はないはずなのに、現実逃避をしている。
ただし、木こりのジレンマからは脱せられているはずだ。

中身の解説

テキストを取得

• 翻訳前テキスト

let beforetext = document.getElementById('source_textarea').value

• 翻訳後のテキスト

let aftertext = document.getElementsByClassName('TextInput-module--textarea--oUXvH')[1].value

テキストエリアに格納

• 二つのテキストをまとめて格納するための要素を作成

let textarea = document.createElement('textarea')

• 二つのテキストを改行区切りで格納
  • ここでは個人的な用途から翻訳後テキストを上にしています
  • 上下逆にしたい人は、逆にしてください

textarea.textContent = aftertext + '\n' + beforetext

textarea を一時的に 近くの ID 内に作成

• 作成させたい ID 要素の定義

let box = document.getElementById('gatsby-focus-wrapper')

• box 要素内に textarea 要素を作成

box.appendChild(textarea)

textarea にカーソルを入れてコピー

• テキスト選択

textarea.select()

• コピー

document.execCommand('copy')

後処理として textarea 要素の削除

box.removeChild(textarea)

おわりに

感想

• Slack でやり取りする際、多国籍のチームがあるため、二つの言語を両方コピペしている日々でした。これによってちょっと……いや、だいぶ楽になった……？　と思う。

参考記事

• Webllica - JavaScript でテキストをクリップボードへコピーする方法
  • これは本当、うまいこと考えたものだなーと感心しました。感謝。

2022/06/09 追記

記録

• 2020/12 ～ 2022/06/08 までは以下のコードで動いていましたが、DeepL 側の仕様変更があったようです

let beforetext = document.getElementById('source-dummydiv').textContent
let aftertext = document.getElementById('target-dummydiv').textContent
let textarea = document.createElement('textarea')
textarea.textContent = aftertext + '\n' + beforetext
let box = document.getElementById('dl_translator')
box.appendChild(textarea)
textarea.select()
document.execCommand('copy')
box.removeChild(textarea)

2022/11/16 追記

記録

• DeepL 側の仕様変更にともない let box = document.getElementById('lmt__dict') を let box = document.getElementById('lmt__dict_container') へ変更。
• 以下は以前の記録

幅広 サイズ表示

let beforetext = document.getElementById('source-dummydiv').innerHTML
let aftertext = document.getElementById('target-dummydiv').innerHTML
let textarea = document.createElement('textarea')
textarea.textContent = aftertext + beforetext
let box = document.getElementById('lmt__dict')
box.appendChild(textarea)
textarea.select()
document.execCommand('copy')
box.removeChild(textarea)