Hacker Newsのコメントを、スレッド構造を崩さずに翻訳する方法

Hacker Newsは世界中に読者を持つサイトですが、レイアウトは2007年から変わっていません。padding-leftでインデントを表現した入れ子のテーブルと、小さな投票矢印がそのままです。大型ローンチが話題になると、同じスレッドの中にドイツ語、日本語、中国語、ロシア語、ポーランド語のコメントが混ざり合います。Chrome標準のページ翻訳を使うとインデントが崩れ、投票欄の位置がずれてしまいます。ここでは、スレッドのツリー構造を保ったまま外国語のHNスレッドを読む方法を紹介します。

なぜ一般的な翻訳だとHNが崩れるのか

HNはコメントを1つの深く入れ子になったHTMLテーブルとして描画しています。インデントは各行の先頭に置かれた幅40pxの透明画像で実装されていて、返信の階層が1段深くなるごとにこの画像がもう1枚追加されます。投票矢印は特定のカラム位置に固定された小さなインライン要素です。

素朴なページ翻訳はDOMをたどってテキストを置き換え、再レイアウトを引き起こします。HNではこの再レイアウトによって次の2つが崩れます。

• 幅40pxのインデント画像がずれて、見た目の階層と実際の返信の深さが一致しなくなる
• 投票矢印が本来紐づいていたコメントから離れてしまう

結果として、「一番上の投稿に返信しています」という意味のコメントが、見た目の上では別の親コメントにぶら下がってしまいます。誰が誰に返信しているのか追えなくなるのです。HNの本質的な価値であるスレッドの構造そのものが失われてしまいます。

インラインのバイリンガル表示はこう動く

Swiftinにはnews.ycombinator.com専用に調整したレンダリングが組み込まれています。翻訳は元のコメントテキストの下に挿入され、テーブル構造そのものには手を加えません。インデント画像、投票矢印、返信リンクはすべて元のカラム位置のまま残ります。

HNを含むどのページでも、2つの表示モードを選べます。

• バイリンガル — 原文を上に、翻訳を下に、両方を同時に表示します。ドイツ語の専門用語が英語の何に当たるかを知りたいときや、翻訳が皮肉のニュアンスを正しく汲み取れているか確認したいときに便利です。
• 翻訳のみ — 原文をその場で置き換えます。とにかく素早くスレッドを読みたいときはこちらのほうがすっきりします。

どちらのモードでもHNのテーブルレイアウトはそのまま保たれます。ここがChrome標準の翻訳がこのサイトでつまずくポイントです。

実際の使い方: 朝のHNチェック

1. news.ycombinator.comを開く
2. 国際的な反応があるShow HN、Ask HN、あるいはトップページのローンチスレッドを開く
3. Swiftinのランチャーをクリックする(自動翻訳を有効にしておけば、読み込むたびにこの手順は不要です)
4. スレッドが自分の言語で読める状態になり、返信の連なりも正しくネストされたまま表示される

SwiftinはHNをそのまま翻訳できます。専用のレンダリング調整は標準で組み込まれているので、追加の設定は不要です。

開発者にとって重要な理由

リリース当日のHNスレッドのコメント欄は、告知本文そのものより役に立つことが少なくありません。各国のエンジニアが集まって議論し、アーキテクチャに関するメモを共有し、社内ツールに触れ、地域ごとの規制事情を説明します。そのスレッドの英語部分だけを読むのは、実質的な機会損失です。

バイリンガル表示は、敬語やドイツ語の専門用語(Fachbegriff)をサッと突き合わせるのにも使えます。たとえばドイツ語のコメントで正確な法律用語が使われていれば、原文と訳文を並べて確認でき、あとから原文を検索することもできます。

無料プランでどこまで使えるか

HNを読むだけなら、無料プランの範囲内で十分にまかなえます。

• 製品全体でGoogleとBingによる翻訳が無制限
• より高品質な出力が必要な場面向けに、月50,000 AIトークン
• バイリンガル表示・翻訳のみ表示の両方ともFreeで利用可能
• 100以上の言語に対応

HNをよく読む人でも、コメントスレッドだけでAIトークンを使い切ることはまずありません。テキストの密度が低いからです。仮にAIトークンを使い切っても、Google/Bingへのフォールバックが翻訳を続けてくれるので、スレッドの途中で拡張機能が黙り込むことはありません。