マイクロソフトの翻訳者が提供する翻訳を使用して Web アプリケーションを作成する。
マイクロソフトの翻訳者が提供する翻訳を使用して Web アプリケーションを作成する。
このチュートリアルでは、Microsoft トランスレータ API を使用して、ユーザーが入力したテキストを翻訳する Web アプリケーションを作成する方法について説明します。ASP.NET を使用してページを構築し、無料の Visual Studio Express 2012 を Web 用に作成します。既に Visual Studio がインストールされている場合は、手順1をスキップするだけで、チュートリアルに従うことができます。
開始する前に、Azure で Microsoft 翻訳 API にサインアップする必要があります。無料のものを含むさまざまなオファリングがあり、無料のサービスにサインアップし、アプリを登録して資格情報をここに取得する方法を見ることができます。
http://blogs.msdn.com/b/translation/p/gettingstarted1.aspx
ここで生成したクライアント ID とクライアントシークレットは、手順4で使用されるため、メモを残しておきます。
ステップ 1.Web 用の Visual Studio Express 2012 を取得します。
始めるための最良の方法は、訪問することです http://www.asp.net/downloads [1 つの簡単なインストールですべてを取得] セクションで [今すぐインストール] ボタンを選択します。
これは、Visual Studio をインストールする Web プラットフォームのインストーラーを起動します, ASP.NET, MVC とあなたがウェブサイトを構築するために使用できる他のグッズの全体のホスト.
ステップ 2.Web アプリケーションの作成
Visual Studio を実行し、[ファイル] メニューの [新しいプロジェクト] を選択します。web サイトの作成に使用できるさまざまなプロジェクトの一覧を含むダイアログが表示されます。左側の [Visual C#] を選択し、リストから [ASP.NET Web フォームアプリケーション] を選択します。
Web アプリケーションに「トランスレータ」などの名前を付け、「OK」を押します。これで、Web アプリケーションをビルドして実行するために必要なすべてのものが作成されます。F5 キーを押してアプリケーションをビルドして実行すると、次のようなものが表示されます。
ステップ 3.テキスト翻訳用の UI の作成
このセクションでは、エンドユーザーがテキストを入力できるようにするコントロールをサイトに追加し、翻訳ボタンを押して、入力したテキストの翻訳を確認します。この種類の機能は、たとえば、さまざまな言語を話すときに顧客とやり取りする場合に便利です。
ソリューションエクスプローラで、[バージョン情報] ページを探します。デザイナーで開くと、次のようなものが表示されます。
Delete the 3 <p> tags that say ‘Use this area to provide additional information’, and replace with some controls to provide a basic translation UI, like this:
便宜上、このページのソースを次に示します。
<%@ Page Title="About" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="About.aspx.cs" Inherits="Translator.About" %> <asp: コンテンツ Runat= 「サーバー」 ID= 「BodyContent」 ContentPlaceHolderID= 「MainContent」> <hgroup クラス= 「タイトル」> <h1><%: タイトル %>.</h1> <h2>アプリの説明ページ。</h2> </hgroup> <記事> 翻訳したいテキストを入力してください:<Br /> <asp: テキストボックス ID= 「TextBox1」 Runat= 「サーバー」 高さ= 「25ピクセル」 幅= 「342px」></asp: テキストボックス> <asp: ボタン ID= 「Button1」 Runat= 「サーバー」 高さ= 「37px」 Onclick= 「Button1_Click」 テキスト= 「翻訳」 /> <Br /> 翻訳されたテキストは次のとおりです。<Br /> <asp: リテラル ID= 「Literal1」 Runat= 「サーバー」></asp: リテラル> </記事> <脇> <h3>脇タイトル</h3> <P> この領域を使用して、追加情報を提供します。 </P> <Ul> <李><A Runat= 「サーバー」 Href="~/">ホーム</A></李> <李><A Runat= 「サーバー」 Href= 「~/About.aspx」>に関しては</A></李> <李><A Runat= 「サーバー」 Href= 「~/Contact.aspx」>お問い合わせ</A></李> </Ul> </脇> </asp: コンテンツ>
デザイナーでは、ボタンをダブルクリックして "Button1_Click" コードを生成する必要があることに注意してください。次の手順でこのコードを記述します。
ステップ 4.ユーザーテキストを翻訳するコードを記述する
前のセクションでは、テキスト翻訳用の基本的な UI を作成しました。これにより、ユーザーはいくつかのテキストを書き込んで、ボタンを押すことができます。このセクションでは、ユーザーの目的のテキストをスペイン語に変換し、ページにレンダリングするボタンの背後にあるコードを記述します。
まず、ソリューションに新しいクラスを追加する必要があります。それを呼び出す AdmAccessToken 次のコードを提供します。
使用 システム 使用 システムコレクション。 使用 Linq; 使用 システム Web; 名前 空間 翻訳者 { 公共 クラス AdmAccessToken { 公共 文字列 access_token { get; set; } 公共 文字列 token_type { get; set; } 公共 文字列 expires_in { get; set; } 公共 文字列 scope { get; set; } } }
4つの文字列の名前が正確にここに一致する必要があります、または後で、コードでエラーが発生することに注意してください。
次に、Visual Studio 内で、ソリューションエクスプローラーで右クリックし、「参照」フォルダーと選択 ' 参照の追加 ' します。次のダイアログを使用して、参照を追加します。
–システムランタイムシリアル化
– XML Linq
– ServiceModel
About.aspx.cs のコードの上部には、いくつかの ' 使用 ' ステートメントが表示されます。これらに Linq を使用して追加し、次のようになります。
使用 システム 使用 システムコレクション。 使用 Linq; 使用 システム Web; 使用 Web UI; 使用 実現を行います。 使用 Linq; 名前 空間 翻訳者 { 公共 部分 クラス About : Page { 保護 無効 Page_Load (オブジェクト sender, EventArgs e) { } 保護 無効 Button1_Click (オブジェクト sender, EventArgs e) { } } }
Button1_Click コードが空であることがわかります。次のコードを追加します。このコードは、先ほど作成したクライアント ID とクライアントシークレットを使用して、トランスレーターサービスのアクセストークンを取得します。
文字列 clientID = "<Your ClientID>"; 文字列 clientSecret = "<Your Client Secret>"; 文字列 strTranslatorAccessURI = 「https://datamarket.accesscontrol.windows.net/v2/OAuth2-13」; 文字列 strRequestDetails = 文字列.形式"grant_type=client_credentials&client_id={0}&client_secret={1} &scope=http://api.microsofttranslator.com"、HttpUtility UrlEncode (clientID)、HttpUtility UrlEncode (clientSecret)); WebRequest WebRequest = システム .net WebRequest (strTranslatorAccessURI) を作成します。 webRequest ContentType = 「アプリケーション/x-www-フォーム-urlencoded」; webRequest メソッド = 投稿; バイト[] バイト = GetBytes (strRequestDetails) をエンコードします。 webRequest 応答 = バイト。長さ 使用 (System.IO.Stream outputStream = webRequest.GetRequestStream()) { outputStream.Write(bytes, 0, bytes.Length); } System.Net.WebResponse webResponse = webRequest.GetResponse(); System.Runtime.Serialization.Json.DataContractJsonSerializer serializer = 新機能 DataContractJsonSerializer を実行します。Typeof(AdmAccessToken) AdmAccessToken トークン = (AdmAccessToken) シリアライザー。ReadObject (webResponse GetResponseStream); 文字列 headerValue = ベアラ + トークン access_token;
このコードは、データマーケットサービスへの投稿を形成し、ID とシークレットを渡し、JSON オブジェクトを取得します。その後、そのオブジェクトを AdmAccessToken に逆シリアル化します。これから access_token を派生させることができます。
次に、このトークンを文字列に追加し、"ベアラー" (スペースを忘れずに) という接頭辞を付けて、トランスレータサービスに送信されるヘッダー値を作成します。
この headerValue を使用してトランスレーターサービスを呼び出し、ユーザーのテキストを渡すには、次のようなコードを使用します。
文字列 txtToTranslate = TextBox1 テキスト; 文字列 uri = 「http://api.microsofttranslator.com/v2/Http.svc/Translate?text =」 HttpUtility UrlEncode (txtToTranslate) + 「およびから = es」; WebRequest translationWebRequest = システム .net WebRequest (uri) を作成します。 translationWebRequest ヘッダーを追加 (承認、headerValue); システム WebResponse の応答 = Null; 応答 = translationWebRequest GetResponse ()。 ストリームストリーム = 応答。GetResponseStream () エンコードエンコード = GetEncoding をエンコードします。「utf-8」); StreamReader translatedStream = 新機能 StreamReader (ストリーム、エンコード)。 XmlDocument xTranslation = 新機能 XmlDocument () xTranslation LoadXml (translatedStream ReadToEnd); Literal1 テキスト = xTranslation InnerText;
テキストボックスは ' TextBox1 ' と呼ばれているので、ユーザーが入力したテキストは単にそれから派生させることができます。その後、翻訳者 HTTP サービスへの uri が作成され、テキスト自体が UrlEncoded され、uri に追加される。
「en」は「From」 (つまり、英語で入力していると仮定しています) のために使用され、「es」は「To」 (つまり、スペイン語に翻訳されます) のために使用されることに注意してください。サポートされている言語のこれらのコードの完全なリストはここにあります: http://msdn.microsoft.com/en-us/library/hh456380.aspx
トランスレータサービスは xml を返すため、コードはサービスを呼び出し、応答を xml として取得し、それをテキストにデコードします。その後、Literal1 と呼ばれる .aspx に対して作成したリテラルに結果を読み込みます。
あなたはここでアクションでそれを見ることができます:
そして、それはそれです!これで、Microsoft トランスレータ API を使用して、ASP.NET アプリケーションに機械翻訳を追加しました。
概要
このチュートリアルでは、ASP.NET を使用して Web アプリケーションを構築する方法と、それに機械翻訳を追加する方法について説明しました。microsoft トランスレータウィジェットを使用してページコンテンツの翻訳を提供し、ユーザーが生成したコンテンツを翻訳するために C# を使用して microsoft トランスレータ API をプログラミングする方法を説明しました。