Notepad++ で html を翻訳したときに、プレビューに使えるプラグイン2選

役立ち情報
スポンサーリンク

とあるクライアント (こちらの記事に関連したクライアントです) からの翻訳依頼では、htmlソースがWordファイルやExcelファイルで提供されることがあるため、Notepad++でhtmlを翻訳することがあります。

Wordファイル、Excelファイルを開くと、その中にhtmlソースが書かれており、

その中のhtmlタグは触らずにテキストのみを対象言語に翻訳して、納品するというものです。

Notepad++上で、htmlソースを開き、必要な文字列を翻訳しているのですが、

htmlタグやそれ以外の文字列は色分けして表示されるとはいえ、

翻訳後のhtmlが正常に表示されるかは、実際にhtmlとして表示してみるまで分かりません。

正直、タグを壊したか壊していないかは分かりますが、

納品物として壊れたhtmlを納品するわけにはいかないので、最終確認は必要です、ということです・・・。

長いので、以下のコンテンツから、必要そうなところだけ、かいつまんで読んでいただければと思います。

スポンサーリンク

プラグインを使う前までのプレビュー方法

プラグインの存在を知るまでは、とても古典的なやり方でした。

翻訳後、原文ファイルと翻訳ファイルを、htmlとしてブラウザ上で開き、

2つ左右に並べて一文ずつ確認していました。

  1. Notepad++ 上で翻訳したhtmlをすべてコピー
  2. メモ帳を起動し、1. でコピーした内容を貼り付け、保存
  3. 2. のファイルの拡張子を .txt から .html へ変換
  4. 3. で変換したhtml ファイルを開いてブラウザ上で表示確認
  5. 上記の1.~4.を原文、翻訳文の両方に対して行う
htmlファイルをブラウザ (Google Chrome) で表示して英日を比較
htmlファイルをブラウザ (Google Chrome) で表示して英日を比較

なお、2つのファイルを左右に整列させるには、1) Windowsキーを押したまま、矢印キー (← または →) をクリックして1つのファイルを左側または右側に表示した後、2) 隣に並べるもう1つのファイルをクリックして選択すればOKです。

この確認方法のデメリットは、以下3点です。

  1. .txtファイルにhtmlをコピー&ペーストすることの面倒さ
  2. .txtから.htmlに変換することの面倒さ (=手動で拡張子を変更)
  3. 原文と翻訳文両方の.htmlファイルができるので、不要になったら削除することの面倒さ

この後、ご紹介するプラグインを使えば、この3つの手間がすべて省けます!

Notepad++の使い方

プラグインの紹介の前に、Notepad++のインストールも含めて、ここに記しておきたいと思います。

Notepad++とは

Notepad++
Notepad++

Windows上で動作する、フリーのテキストエディタです。

動作が重くないので、とても使いやすいと感じています。

何より、70以上ものコンピュータ言語に対応していて、シンタックスハイライトしてくれるのが、

多くのユーザーを惹きつけているのだと思います。

私が個人的に、Notepad++が気に入っている点は、ファイル保存しなくても、内容を記憶していてくれる点です。

つまり、保存せずにアプリケーションを閉じても、編集中のhtmlを保持してくれていて、次回アプリケーションを立ち上げたときに、そのままアプリ上に表示してくれます。

WordやExcelで納品する前の一時ファイルの編集として使っていて、htmlで保存する必要はなく、無駄なファイルを作らなくて済みます

Notepad++は、Windowsで動作するフリーなテキストエディタである。Stack Overflowが毎年実施している人気調査によれば、2015年で1位、2019年で3位と上位に位置している。

Wikipediaの Notepad++ページ (https://ja.wikipedia.org/wiki/Notepad%2B%2B) より

Notepad++のインストール方法

Notepad++のダウンロードページから、最新バージョンをダウンロードします。

当記事執筆時点では、v8.3.1が最新でした。

64bit or 32bitの確認方法

Notepad++には64bitと32bitがありますが、OSのbitに合わせます。

確認方法は、Windowsマーク > 設定 > システム > 詳細情報から、以下の [システムの種類] を確認します。

64bit オペレーティングシステム
64bit オペレーティングシステム

64ビットオペレーティングシステム、もしくは、32ビットオペレーティングシステムの記載があるはずです。

Notepad++でhtmlを開く

htmlが入っているとはいえ、WordやExcelをそのままNotepad++で開こうとすると、文字化けします。

ですので、以下の手順でhtmlをNotepad++上で開きます。

  1. WordやExcelの中のhtmlをCtrl + A で全選択して、コピー
  2. Notepad++上で、ファイル > 新規作成をして、そこに1. で貼り付けた内容をペースト
Notepad++で、標準テキストで開いた状態
Notepad++で、標準テキストで開いた状態

上記の通り、htmlソースをそのまま貼り付けただけでは、テキストとして認識されたままです。

(タグも、文字列も同じく黒一色)

Notepad++で言語をHTMLに設定する

そこで、Notepad++上で、言語 > H > HTMLを選択すると、タグやテキストを色分けして表示してくれます。

言語選択でHTMLに設定
言語選択でHTMLに設定

以下画像の通り、htmlタグは青く、URLは紫、それ以外の文字列は、黒で表示されて、見やすくなりました。

2つ上の画像との違いを比べてみてください。

Notepad++で、htmlとして開いた状態
Notepad++で、htmlとして開いた状態

これだけでもよいのですが、開いたhtmlを編集すると原文が上書きされて (当たり前ですが)、原文がどうだったか分からなくならないように、原文と翻訳文を2つ並べて表示できたら便利ですよね。

ということで、以下にその手順も記載しました。

Notepad++で原文と翻訳文を左右に並べて表示する

  1. 上記と同じく、Notepad++ 上で、ファイル > 新規作成をしてもう1つのWindowを開く
  2. 1. で開いた方のWindowのタイトル (例:新規1) 上で右クリックし、[別のビューへ移動] を選択する
別のビューへ移動
別のビューへ移動

すると、以下のような感じで左右に並べて、翻訳や比較ができます。

左側が原文 (英語)、右側が翻訳文 (日本語) です (すでに翻訳後の状態として見てください)。

英語と日本語を並べて表示
英語と日本語を並べて表示

[別のビューへ移動] の下に [別のビューへ複製] というのがありますが、これを選択すると、一見、二つのWindowが表示されたように見えますが、複製なので、一方を編集すると、もう一方にも反映されますのでご注意!

htmlプレビュー用プラグイン

上記までで、原文と翻訳文を左右に並べて、翻訳する手順をご紹介しました。

この後は、翻訳後のhtmlがきちんとブラウザ上で表示されるかをきちんと確認する必要があります。

繰り返しになりますが、htmlを壊していないことの確認をせずに納品して後々トラブルになることを避けるためです。

プラグインその1:MarkdownViewer++

htmlをプレビューできる、1つ目のプラグインは、MarkdownViewer++です。

2つ目に紹介するプラグインよりは、こちらのプラグインの方が個人的には好みです。使いやすいと感じるので。

なお、Windowsであること、.NET Framework 4.0以上が入っていることが前提です。

MarkdownViewer++のインストール方法

インストール方法は2つありますが、1つ目の方が簡単で速くできます。

1. Notepad++の「プラグイン管理 (Plugin Manager)」から

1. Notepad++の画面から、プラグイン > プラグイン管理を選択します。

Markdownviewer++のインストール手順1
Markdownviewer++のインストール手順1

[プラグイン管理] の画面にて、以下の手順を行います。

Markdownviewer++のインストール手順2
Markdownviewer++のインストール手順2

2. 検索ボックスに markdownと入力し、[次を検索] をクリック

3. 検索結果の中から、MarkdownViewer++の左側のチェックボックスにチェック

4. 右上のインストールボタンをクリック

5. [Notepad++を終了しようとしています] のポップアップ画面で、[はい] を選択

6. ユーザーアカウント制御のポップアップが出てきたら、変更を加えることを許可

7. Notepad++を再起動すると、インストール完了

もしこの手順でインストールできない場合は、次のマニュアルインストールをお試しください。

2. マニュアルでインストールする方法

マニュアルでインストールする方法は、少し手間ですが、結果は、1つ目の方法と同じです。

1. リリース一覧から、最新リリースを選択し、そのリリースページへ飛びます。

2. Assets一覧の中から、x64 (64bit) もしくは x86 (32bit) のいずれかの .zip ファイルをダウンロードします。

Notepad++が64bit であればx64 (64bit)、32bitであれば x86 (32bit) の方を選択します。

3. .zip ファイルを解凍し、MarkdownViewerPlusPlus.dllが含まれていることを確認します。

4. Notepad++のインストールディレクトリ (例: C:\Program Files\Notepad++\plugins) に、MarkdownViewerPlusPlusという名前のフォルダを作成します。

5. 上記フォルダに、3. で確認した、MarkdownViewerPlusPlus.dllファイルをコピーして貼り付けます。

6. Notepad++を手動で再起動します。

これで、手動でプラグインのインストールができました。

MarkdownViewer++プラグインをアクティブにする方法

MarkdownViewer++を使用すると、画面右側に、htmlをプレビューすることができます。

MarkdownViewer++でプレビュー
MarkdownViewer++でプレビュー

原文と翻訳文の両方を一度にプレビューできたら便利ですが、アクティブなウィンドウしかプレビューできません。もう一方のウィンドウをクリックすると、そちらのプレビューに切り替わります。

MarkdownViewer++をアクティブにする方法は3つあります。

1. ショートカットキー: Ctrl + Shift + M を押します

2. アイコンをクリック:メニューバーの一段下に、ツールバーがありますが、その中の、黒い長方形に白抜きのM+のアイコンです

Markdown++のアイコン
Markdown++のアイコン

3. メニューバーから:Notepad++ > MarkdownViewer++ > MarkdownViewer++ を選択

Markdown++のプラグインメニュー
Markdown++のプラグインメニュー

プラグインその2:Preview HTML

htmlを表示するための Preview HTML です。

Preview HTMLのインストール方法

MarkdownViewer++と同じく、2つの方法があります。

プラグイン管理から行う方が、簡単で速くできます。

1. Notepad++の「プラグイン管理 (Plugin Manager)」から
  1. Notepad++の画面から、プラグイン > プラグイン管理を選択します。
  2. 検索ボックスに previewと入力し、[次を検索] をクリック
  3. 検索結果の中から、Preview HTMLの左側のチェックボックスにチェック
  4. 右上のインストールボタンをクリック
  5. [Notepad++を終了しようとしています] のポップアップ画面で、[はい] を選択
  6. ユーザーアカウント制御のポップアップが出てきたら、変更を加えることを許可
  7. Notepad++を再起動すると、インストール完了
PreviewHtmlのインストール手順
PreviewHtmlのインストール手順

もしこの手順でインストールできない場合は、次のマニュアルインストールをお試しください。

2. マニュアルでインストールする方法
  1. Preview htmlのページ > Downloads から、The 64-bits plugin または The 32-bits plugin のいずれかをダウンロードします。
  2. .zip ファイルを解凍し、PreviewHTML.dllが含まれていることを確認します。
  3. Notepad++のインストールディレクトリ (例: C:\Program Files\Notepad++\plugins) に、PreviewHTMLという名前のフォルダを作成します。
  4. 上記フォルダに、3. で確認した、PreviewHTML.dllファイルをコピーして貼り付けます。
  5. Notepad++を手動で再起動します。

上記手順1にて、Notepad++が64bit であればThe 64-bits plugin、32bitであれば The 32-bits plugin の方を選択します。

上記手順1でダウンロードする際、User IDはanonymous、Passwordは画面にアスキーアートで表示されているパスワードを入力します。何が書いてあるか分からないときは、[Speak password for “anonymous”] をクリックすると読み上げてくれます。

Preview HTMLプラグインをアクティブにする方法

Preview Htmlを使用すると、ポップアップ画面として、htmlをプレビューすることができます。

MarkdownViewer++でプレビュー
MarkdownViewer++でプレビュー

メニューバーと、htmlソースの間に、埋め込む感じで表示することもできます。

ただし、横長になるので、縦にスクロールするのが少し大変なので、ポップアップ画面で確認する方が見やすいと思います。

Preview Htmlをアクティブにする方法は2つあります。

1.アイコンをクリック:メニューバーの一段下に、ツールバーがありますが、その中の、白い文書に青文字が書いてあるアイコンです

Preview HTMLのアイコン
Preview HTMLのアイコン

2.メニューバーから:Notepad++ > Preview HTML > Preview HTML を選択

Preview HTMLのプラグインメニュー
Preview HTMLのプラグインメニュー

MarkdownViewer++とPreview HTMLの違い

違いとしては3点あります。

  1. 表示される場所
  2. <title>の部分も表示してくれるのは、MarkdownViewer++
  3. プルダウンメニューを正しく表示してくれるのは、Preview HTML

1. 示される場所

MarkdownViewer++では、画面右側に埋め込まれた感じで表示されます。(以下画像の青い囲み部分)

一方、Preview HTMLでは、ポップアップで表示されるという点が違います。(以下画像の赤い囲み部分)

好みの問題なので、お好きな方のプラグインを使ってみてください。

2つのプラグインの比較
2つのプラグインの比較

2. <title>タグの表示

もう1点は、<title>タグで囲まれた文字列を、MarkdownViewer++では、表示してくれません。

が、Preview HTMLでは、ポップアップ画面の最上部にウィンドウタイトルとして表示してくれます。

Titleタグを、MarkdownViewer++では確認できないが、Preview HTMLでは確認できる
Titleタグを、MarkdownViewer++では確認できないが、Preview HTMLでは確認できる

html上で確認できるからよい、という考えであれば、MarkdownViewer++でよいですし、

すべてを表示して確認したい、ということであればPreview HTMLの方を使ってみてください。

3. <select>タグの表示

3点目は、<select></select>タグで表されるプルダウンメニューは、Preview HTMLでは正しく表示してくれましたが、MarkdownView++では、プルダウンで表示されるべき選択肢がズラッと羅列されただけでした。

htmlはMarkdownではなくMarkupなので、正しく表示させるにはPreview HTMLを使う方がよいようです。

マークアップとマークダウンの違い

参考URL:【マークダウン記法とは?】マークダウンの書き方を網羅的に解説

まとめ

手動で、.txtにhtmlの内容を貼り付けて、.htmlへ変換していたときに比べたら、プレビュー確認 (動作確認) が格段に早くなりました。

自分が不便だなと思っていることは、誰かが同様に不便だなと思っていることで、

きっと何か便利なツールがすでに開発されているに違いない、そうであってほしい、と思いながら検索して探してみると、

いいものが見つかることがよくあります。

ぜひ、MarkdownViewer++ または Preview HTML を使っていただいて、

楽に翻訳作業を進めるときのヒントにしていただければ嬉しいです。

最後までこの記事をお読みいただき、ありがとうございました。

タイトルとURLをコピーしました