機械翻訳を使用してWeb ページ全体の翻訳機能を追加する。(20110413)

このエントリは次の記事を翻訳したものです。

Quickly add other languages to your site using automatic translation

途中からかなり意訳?というか自分で書いちゃってますが、もうちょっと日本の状況に合わせていますので、ご了承ください。

一つ一つサイトを手動で翻訳する代わりに、機械翻訳を使うという方法があります。機械翻訳を使用すると、異なる言語で手間をかけずにサイトを表示することが可能になります。Microsoft Translator ウィジェットはわざわざ翻訳サイトに行かなくても、サイト内に翻訳サービスを組み込むことが可能です。このエントリではこのウィジェットをサイトに組み込む方法を紹介します。

まずは、この演習を始めるにあたって簡単な Web サイトを作成し、そこに追加機能を加えていきます。もし、すでにサイトをお持ちであればそれを使っていただいても構いません。(WebMatrix で作成されたサイトである必要はありません。ただし、インターネット上でアクセス可能なサイトである必要があります。)

当然のことながら、この演習では WebMatrix を使用します。もし、まだダウンロードされていない場合はこちらからダウンロードしてインストールしてください。(ただし、必須というわけではありません)

https://www.microsoft.com/web/webmatrix/

WebMatrix のテンプレートを使ってサイトを作成する

WebMatrix では新たに Web サイトを作る方法がいくつかあります。今回はテンプレートからサイトを作成します。

今回は「ベーカリー」というテンプレートを使いたいと思います。このテンプレートは 機械翻訳が効果を発揮する EC サイトのテンプレートで、HTML 5 や CSS 3 なども採用しています。

WebMatrix のスタート画面で 「テンプレートからサイトを作成する」を選択します。

「ベーカリー」のテンプレートを選択し、サイト名を「MyBakery」 として OK ボタンを押します。

WebMatrix がサイトに必要なファイルを生成します。まずはこの状態で「実行」ボタンを押してください。

WebMatrix で提供されている「ベーカリー」のサイトが表示されます。

今後、ほかの記事ではこれを本屋に変更したり、PayPal や Facebook を組み込む方法を紹介する予定です。まずは、今回は機械翻訳機能を組み込んでページ全体を翻訳する方法を紹介したいと思います。

Translation ウィジェットを入手する

Microsoft Translator ウィジェットは HTML で実装されているため、インターネットに公開されているサイトであれば、サーバーサイドの技術に関わらず利用することができます。また、このウィジェットをサイトに組み込むことで自動的にマイクロソフトのサーバーが生成した翻訳済みのHTML コードを入手することができます。これからこのウィジェットの入手方法について紹介していきたいと思います。

まずはこちらのサイトを開いてください。 www.microsofttranslator.com/widget

まずは「Site address」の部分に翻訳したいサイトのURLを入力してください。このURLはインターネット上に実在するサイトである必要があります。

「Site language」では、サイトが現在表示している言語を設定してください。ここでは日本語を選択しておきます。

後は、このコントロールを画面上にウィジェットとして表示させるか、ツールバーとして表示させるかを決めます。今回はツールバーを使用したいので、「Display widget control」のチェックは外します。
ウィジェットとして表示させる場合は常に画面上に表示され、いつでもサイトを翻訳することができます。一方でツールバーとして表示させる場合は「Site language」 で設定した言語とブラウザの言語設定が異なる場合に表示されます。

次に、翻訳の設定を行います。”manual”、”notify”、”auto” の3つの選択肢から選択を行います。これは 「Display widget control」 のチェックの状態によって選択肢が変ってきます。

チェックがオンの場合

· manual - 翻訳するかどうかをユーザーに選択してもらう場合に選択します。

チェックがオフの場合

· notify – サイトの言語とブラウザの言語が異なる場合にツールバーを表示し選択を翻訳言語の選択を行う場合に選択します。

· auto – 常に翻訳する場合に選択します。

Microsoft Translator の使用許諾に合意したら「Generate Code」 ボタンをクリックし、ウィジェットのコードを生成します。

生成が完了するとテキストボックスが表示されるので、それをコピーします。

参考：Divタグの Style 属性を変更することで見た目を変更することができます。

ベーカリー サイトに翻訳ウィジェットを追加する

再び WebMatrix に戻って先ほど作ったベーカリー サイトを編集します。webMatrix を使うとすべてのページで共通のデザインを定義したりといったサイトのレイアウトを簡単に設定できます。ウィジェットを配置するには、すべてのページにツールバーを配置できる、この共通ページが最適な場所です。

WebMatrix で「ファイル」の作業領域を開きます。この作業領域ではベーカリー サイトのファイルを確認したり編集したりすることができます。作業領域を切り替えるには画面の左下のボタンを押してください。

ファイルの一覧の中から “_SiteLayout.cshtml” を選択して開いてください。

このファイルでサイト全体のレイアウトの定義を行っています。ファイルの中にid 属性にそれぞれ “header”、”body”、”footer” と設定された <div> タグが見つかったかと思います。これから Microsoft Translator ウィジェットをページの “header” 部分に配置します。

先ほど、Microsoft Translator のサイトで取得したタグを <div id="header"> のすぐ下に貼り付けてください。

それではサイトを実行してみましょう。もし、ブラウザの言語設定が日本語の場合、ツールバーが表示されないので、ブラウザの言語設定を他の言語に変えてみてください。

注：変更の仕方は、「インターネットオプション」の「全般」タグにある「言語」ボタンをクリックしてください。「追加」ボタンを押して言語を追加して「日本語」を「削除」ボタンで削除してください。(後で「追加」ボタンで「日本語」を戻すことができます。)もし、言語設定を変更してもツールバーがうまく表示できない場合や言語設定を変更したくない場合は、「Display widget control」のチェックをオンにしてウィジェット形式でページ上の適当な場所に配置してください。

翻訳前

翻訳後

このウィジェットは WebMatrix を使用しなくても、皆様のサイトに組み込むことができますので、是非お試し下さい。