対象
テンプレート
対象となるサービス
すべて
内容
翻訳後のコメント掲載にひと手間加えたく、以下のようなことが実現可能かお伺いしたく思います。
【前提】
・わんコメ、ゆかコネNEO、OBSを使用
・ゆかコネ連携コメント翻訳を使用し、配信上にコメント表示
【やりたいこと】
翻訳前コメントor翻訳後コメントどちらかだけを配信上に表示するようにして、かつ翻訳後であれば表示内容を変更したい（イメージ図です↓）
【考えている実現方法①】
①OBSのカスタムCSSを用いて、翻訳後テキストの色変更など設定をしておく
②カスタムCSS or JavaScriptを用いて、「翻訳前と翻訳後のテキストを取得して比較⇒一致なら翻訳前のコメントのみ表示、不一致なら翻訳後のコメントのみ表示」という条件式を設定する
【考えている実現方法②】
①OBSのカスタムCSSを用いて、翻訳後コメントだけ表示されるように設定しておく
②カスタムCSS or JavaScriptを用いて、「翻訳前と翻訳後のテキストを取得して比較⇒一致ならそのまま表示、不一致なら文字色変更などの処理を行ったうえで表示」という条件式を設定する
コメントの取得、条件式の設定などが必要になるところから、CSSだけ弄って実現させるのは厳しいのかと思っており、仮にCSSで実現できるとしてもどう弄ればいいものか分かりかねており、、、（CSSは多少弄れる知識はあるものの、JavaScriptは知識がほぼ無く、、、）
お手数ですが、上記のような仕組みが実現可能か、実現可能であればどこを弄ればいいか、ご教示いただきたく思います。よろしくお願いいたします。
1 Like
ASTIE
2
一点問題となる点があります
「翻訳前と後が同じかどうかの判定が必要」 という部分です
翻訳ではアルファベットを含む日本語投稿や絵文字などコメントの内容によって微妙に間違ったり変換されたりすることがあります
また独自スタンプも一部翻訳されるなどして動作しなくなるエンジンもあります
そのため、翻訳前後の違いで判断する場合は挙動が怪しく見えるコメントがいくらか発生する可能性がある点はご留意ください
ブレても構わないということであれば、ベースするテンプレートをテンプレートフォルダのcustomフォルダに複製して、script.jsでコメントのHTML文字列を事前に加工する処理を挟んでください（ベースにするテンプレートにより挟む箇所は異なります）
下記はコメント処理をする関数の例です（テストしていないので動く保証はありません・・・
// commentはコメントの中身（文字列）
function rewriteTranslatedComment(commentStr) {
const tmp = document.createElement('div')
tmp.innerHTML = commentStr
const origin = tmp.querySelector('.origin') // 翻訳元があるHTML
const translated = tmp.querySelector('.t') // 翻訳後があるHTML
// 翻訳コメントでない場合は何もしない
if (!origin || !translated) return commentStr
// 翻訳元と翻訳後の文字列が同じ
if (origin.innerText === translated.innerText) {
// 翻訳元のHTMLだけ返す
return origin.innerHTML
}
// 中身が違うときは翻訳後だけ返す
return `【翻訳】${translated.innerHTML}`
}
comment.data.comment = rewriteTranslatedComment(comment.data.comment)
具体的な実装については無償ではしていないため例示までとなりますがご了承ください 
ご返信ありがとうございます。
確かに、日本語の中に紛れた英語や絵文字などで微妙に翻訳が走ったとしても翻訳対象になってしまいますね。考慮が足りていませんでした。
一度試してみて、想定外の動作の方が多くなるようであれば標準の使い方に戻す方針で考えます。
サンプルのご提示ありがとうございます。非常にありがたいです。
参考にして実装チャレンジしてみようと思います。
先日はありがとうございました。
ご提示いただいたサンプルを参考にしつつ、あれこれ調べて加工することでやりたかったことが実現しました。
最初、すべてのコメントが翻訳で差分ありと判定されてしまっていたのですが、どうも翻訳後コメントを囲っている括弧が邪魔していたらしく、その括弧も除去してから比較することで正常に判定してくれるようになりました。
需要があるかはわかりませんが、こちらにscript.jsとカスタムCSSの内容を投稿します。
■script.js内容 ※テンプレートはbasicを使用
const app = Vue.createApp({
setup() {
document.body.removeAttribute('hidden')
},
data () {
return {
comments: []
}
},
methods: {
getClassName(comment) {
if (comment.commentIndex % 2 === 0) {
return 'comment even'
}
return 'comment odd'
},
getStyle(comment) {
return OneSDK.getCommentStyle(comment)
},
// 翻訳コメントに対しての追加処理①（差分チェック）
rewriteTranslatedComment(commentStr) {
const tmp = document.createElement('div')
tmp.innerHTML = commentStr
const origin = tmp.querySelector('.origin') // 翻訳元があるHTML
const translated = tmp.querySelector('.t') // 翻訳後があるHTML
// 翻訳コメントでない場合は何もしない
if (!origin || !translated) return commentStr
const originText = origin.textContent.trim()
let translatedText = translated.textContent.trim()
// 翻訳後テキストを囲っている括弧を削除
if (translatedText.startsWith('(') && translatedText.endsWith(')')) {
translatedText = translatedText.slice(1, -1).trim()
}
if (originText === translatedText) {
// 翻訳前と同じ → 翻訳前コメント（要素含む）だけを返す
return origin.outerHTML
}
// 翻訳後と異なる → 【翻訳】+ 翻訳後コメント（要素含む）だけを返す
return `<span class="translated-label">【翻訳】</span>${translated.outerHTML}`
}
},
mounted () {
let cache = new Map()
commentIndex = 0
OneSDK.setup({
permissions: OneSDK.usePermission([OneSDK.PERM.COMMENT])
})
OneSDK.subscribe({
action: 'comments',
callback: (comments) => {
const newCache = new Map()
comments.forEach(comment => {
const index = cache.get(comment.data.id)
if (isNaN(index)) {
comment.commentIndex = commentIndex
newCache.set(comment.data.id, commentIndex)
++commentIndex
} else {
comment.commentIndex = index
newCache.set(comment.data.id, index)
}
// 翻訳コメントに対しての追加処理②（コメント表示）
comment.data.comment = this.rewriteTranslatedComment(comment.data.comment)
})
cache = newCache
this.comments = comments
}
})
OneSDK.connect()
},
})
OneSDK.ready().then(() => {
app.mount("#container");
})
■OBSのカスタムCSS内容
/* 翻訳後のコメントを囲む括弧を表示しない */
.par {
display: none;
}
/* 【翻訳】テキストの設定 */
.translated-label {
color: rgba(255,255,100,1);
}
