[アーティクル]
08/28/2015

August 2010

Volume 25 Number 08

Windows Phone 7 - Windows Phone とクラウドの紹介

Ramon Arjona | August 2010

私は今、スペイン語の読み書きを勉強しています。私の住んでいる地域では、そこかしこの公共の場に 2 か国語で書かれた標識があるので、それを読むことでスペイン語を練習できます。問題は、ときどき特定の単語に詰まって意味を理解できなかったり、文章全体に混乱したりすることです。また、対応する英訳がないと、自分のスペイン語の解釈が正しいと確信することはなかなかできません。スペイン語の辞書を持ち歩くこともできますが、いちいちページをめくるのはあまりにもアナログです。

私は常にスマートフォンを手にしているため、欲しいのは、スマートフォンで簡単に翻訳する方法です。スマートフォンで Bing にアクセスして、クラウドベースの Microsoft Translator を使用するのも便利ですが、翻訳画面にたどり着くまで何度もキーを押さなければなりません。どうにかして、スマートフォンで翻訳機能を簡単に使えないものでしょうか。そこで、Windows Phone 7 の登場です。

この記事では、Windows Phone アプリケーションの開発について概要を説明し、そのようなアプリケーションとクラウド内の Web サービスを結び付ける方法を示します。この記事を読むにあたっては、C# と Visual Studio についての基礎知識が必要です。また、少なくとも、Extensible Application Markup Language (XAML) を使ってアプリケーションを開発した経験があれば最高ですが、必須ではありません。ここでは、4 月に更新された Windows Phone ツールの Community Technology Preview (CTP) を使用しました。この記事が公開されるころには変更が加えられているかもしれないので、developer.windowsphone.com (英語) にアクセスして、最新のドキュメントを読み、また、最新のツールをダウンロードしてください。

まずは AppID を取得する

Translator、またはその他の Bing Web サービスを操作するには、まず AppID を取得します。AppID は、登録済みの Bing アプリケーション開発者から要求が行われていることを検証するために、サービス API で使用されます。

bing.com/developers/createapp.aspx にアクセスして、Windows Live ID でサインインし、アプリケーション名、アプリケーションの説明、会社名、電子メールアドレスなどをフォームに入力します。電子メールアドレスは、新しいバージョンの公開や、古いバージョンの公開中止など、これらの API が変更されたときの通知に使用されます。具体的に Translator API の場合、この記事の執筆時点では、古いバージョンは新しいバージョンのリリース後 90 日間は公開を続けるとドキュメントに記載されています。

次に、利用規約を読み、同意することを示すためにチェックボックスをオンにして、[Agree] (同意) ボタンをクリックします。すると、新しく作成された AppID が掲載されたページが表示されます。このページにはいつでも戻ってきて参照できますが、私はいつもアプリケーションのソースファイルを作り始めるとき、自身の AppID をコピーして貼り付けています。

アプリケーションで使用予定の Web サービスの利用規約は必ず読むようにしてください。冗談ではなく、ざっと読むだけにするのはやめましょう。特に、市場を通じてユーザーにアプリケーションを配布する予定がある場合はしっかりとお読みください。アプリケーションで使用するサービスを提供するパートナーが設定したサービスレベルの目標とその他の条件を、アプリケーションの利用者のために理解する義務があります。このため、アプリケーションでマイクロソフトのサービスを使用する場合でも、その他のパーティのサービスを使用する場合でも、必ず利用規約を読んで理解するようにしてください。

これで AppID を取得でき、モバイル翻訳アプリケーションを作成する準備ができました。

シナリオを定義する

最初のアプリケーションを作成に着手する前に、市場で評判のモバイルアプリケーションをいくつか見てみました。Windows Phone やその他のスマートフォン向けのアプリケーションを見て、これらを真に優れたモバイルアプリケーションたらしめているものは何かを感じ取ろうとしました。このために、製品のレビューを読んだり、人々に意見を聞いたり、友人のスマートフォンを触らせてくれと頼んだりしました。

こうしたリサーチの結果、優れたモバイルアプリケーションを作成する鍵は、簡潔さにあることがわかりました。人気のあるアプリケーションはどれも、1 ～ 2 個のユーザーシナリオを適切に実行しています。たとえば、耳障りな雑音を発生するだけが目的のアプリケーションがありました。実際、これらのアプリケーションは、本質的にはスマートフォンへのブーブークッションを再実装しただけのものです。ユーザーは、このアプリケーションはおもしろく、少なくともお金を払ってスマートフォンに読み込む価値は十分にあると考えているのでしょう。

同様に、さいころを模したものを転がしたり、ディナー用のレストランをお勧めしたり、そのディナーで支払うチップの金額を計算したりするアプリケーションもあります。どのアプリケーションもユーザーシナリオが絞り込まれていて、そのシナリオで簡単かつ直感的な方法で実行されています。このアプローチは、特定のスマートフォンメーカー特有のものではありません。洗練された、直感的なユーザーエクスペリエンスを提供するべきであるという考えは、developer.windowsphone.com/windows-phone-7 (英語) で公開されている、「Windows Phone UI の設計と操作ガイド (英語)」で強調されています。

そういうわけで、翻訳アプリケーションの作業に取り掛かる前に、このアプリケーションで実現することだけに焦点を合わせることが重要です。このためには、まず、実現することを明確にイメージする必要があり、このイメージを持てば、魅力的ではあっても主なユーザーシナリオでは必要としないすてきな新機能を追加するという誘惑に打ち勝つことができます。今回のアプリケーションでは、英語とスペイン語の翻訳を行うことにしました。スペイン語から英語、英語からスペイン語に翻訳モードを簡単に切り替えることができ、1 つの単語か簡単な文章にのみ対応します。さらに、スペイン語と英語しか扱わず、他の言語は無視します。

アプリケーションを構築する

翻訳アプリケーションの構築を開始するには、Visual Studio 2010 Express for Windows Phone を起動します。[New Project] (新しいプロジェクト) を選択して、[Windows Phone Application] (Windows Phone アプリケーション) を選択します。タイトルとコンテンツの 2 つのセクションが表示されているスマートフォン画面がを備えた、既定の Windows Phone プロジェクトが開きます。これらのセクションは、XAML Grid オブジェクトで表わされていて、XAML Grid オブジェクトでは、Button や TextBlock などの子 UI 要素を配置できる一連の行や列を定義できます (図 1 参照)。

スマートフォンの画面とコードビューが表示されている既定の Windows Phone プロジェクト

図 1 スマートフォンの画面とコードビューが表示されている既定の Windows Phone プロジェクト

まず、アプリケーション名とページタイトルを編集するために、デザイナーでその UI 要素を選択します。これにより、デザイナーのコードビューウィンドウで、関連する XAML が強調表示され、どの要素を編集する必要があるかわかります。次に、ツールボックスを開いて、いくつかの UI 要素を 2 つ目の ContentGrid というグリッドにドラッグします。翻訳する単語を入力する TextBox を選択してから、翻訳結果をレンダリングする TextBlock を選択します。最後に、Button を 2 つ追加します (図 2 参照)。

TextBox、TextBlock、Button の各 UI 要素の追加

図 2 TextBox、TextBlock、Button の各 UI 要素の追加

1 つは翻訳を実行するボタンで、もう 1 つはスペイン語から英語、またはその逆に翻訳対象を切り替えるボタンです。

XAML による現代的 UI

Windows Phone 7 のユーザーエクスペリエンスの中心は、Metro というコードネームの設計システムです。そして、Metro システムに基づいた UI の実装の中核が XAML です。Silverlight または Windows Presentation Foundation (WPF) を操作した経験があれば、XAML は使い慣れていると思います。操作した経験がなければ、ここで簡単に概要を理解してください。

XAML は宣言によって UI を構築する方法の 1 つで、アプリケーションのロジックとルックアンドフィールを明確に分離できます。たとえば、アプリケーションのメインページのコードは Mainpage.xaml.cs に含まれていますが、アプリケーションの基本的なレイアウトは Mainpage.xaml に含まれているのがわかります。従来の Windows フォーム開発とは異なり、アプリケーションのコードとアプリケーションの UI のレイアウトが混在することはありません。ここで作成するアプリケーションの UI 要素はすべて、XAML ファイルの XML 要素としてモデル化されます。

これによって、ある開発者がアプリケーションのルックアンドフィールを個別に取り組んでいる間に、別の開発者がアプリケーションのロジックに取り組むことができるというメリットが生まれました。たとえば、ここでは翻訳アプリケーションの基本的な UI を大まかに設計しましたが、この UI のコードに取り組んでいる最中でも、UI 設計のエキスパートに XAML を渡すことができます。UI 設計者は、アプリケーションの実装については何も知る必要はなく、開発者はそのエキスパートが選択したカラーパレットについて何も知る必要がありません。

もちろん、今回は UI 設計者向けの予算はありません。ですが、私にはペイント (MSPaint) プログラムがあり、これを使用するだけでも、アプリケーションに付属させる画像を簡単に編集できます。

翻訳アプリケーションに新しいアイコンを用意する

プロジェクトを作成したときに自動的に追加された、既定の ApplicationIcon.png をダブルクリックすると、画像を編集するソフトウェアが起動します。私の開発マシンでは、ペイントが起動します。ペイントで、おもしろみのない歯車のアイコンを、大文字の T に置き換えます。それから、黒い背景をピンク単色にします。グラフィックデザインコンテストでは何の賞も受賞できそうにありませんが、私は気に入っています (図 3 参照)。

ペイントで作成した新しいプロジェクトアイコン

図 3 ペイントで作成した新しいプロジェクトアイコン

変更を確認するために、[Start] (開始) ボタンを押して Windows Phone 7 のエミュレーターにアプリケーションを配置します。以前のバージョンの Windows Phone エミュレーターを操作したことがある方は、開発者のエクスペリエンスがどれだけ向上したかがすぐにおわかりになると思います。Windows Phone 6.5 のエミュレーターの操作には骨が折れ、デバッガーを開始してエミュレーターにアタッチするために手動で構成する必要がありました。Windows Phone 7 開発環境では、緑色の [Start] (開始) ボタンを一度押すだけですべてが機能します。また、エミュレーターにアプリケーションの主要な UI がすばやく読み込まれ、表示されるのも嬉しいところです (図 4 参照)。

Windows Phone 7 のエミュレーターに表示されたアプリケーション

図 4 Windows Phone 7 のエミュレーターに表示されたアプリケーション

アプリケーションのアイコンを表示するために、主要 UI が表示されている画面から、エミュレーターのメイン画面に移動します。先ほど作成した翻訳アイコンが表示されているので、問題はないようです (図 5 参照)。

image: Checking the New App Icon in the Emulator

図 5 エミュレーターでの新しいアプリケーションアイコンの確認

アプリケーションマニフェスト

アプリケーションアイコンは、プロジェクトの Properties フォルダーにある WMAppManifest.xml というファイルで定義されています。アプリケーションアイコンの名前を変更するには、プロジェクトの ApplicationIcon.png の名前を変更してから、次のように IconPath 要素に変更した名前を反映します。

<IconPath IsRelative="true"
   IsResource="false">myicon.png
   </IconPath>

アプリケーションがこのアイコンを見つけられないと、黒い背景に白い円のある、実行時の既定のアイコンが割り当てられます。

使用する機能を検討する必要がある、このファイルのもう 1 つの要素は Capabilities 要素です。この要素には、アプリケーションで使用する特定の機能が含まれています。使用するのは、アプリケーションで必要なものだけにすることをお勧めします。ファイルをスキャンすると、この翻訳アプリケーションでは使用しないであろう機能が多数あることがおわかりになると思います。

たとえば、ID_CAP_GAMERSERVICES では、アプリケーションで Xbox のゲーム API を操作する必要があることを宣言します。ID_CAP_LOCATION 機能では、アプリケーションがデバイスのロケーション機能を活用することを宣言します。そして、ID_CAP_PUSH_NOTIFICATION では、アプリケーションが Windows Phone 7 のプッシュ通知機能を操作することを宣言します。これらはどれも優れた機能ですが、ここで作成する翻訳アプリケーションには必要ないため、無視します。実際にはおそらく、データを送受信するためにアプリケーションでネットワークを使用することを宣言する ID_CAP_NETWORKING 機能のみが必要です。

Microsoft Translator API

Microsoft Translator は、3 種類の API を公開しています。SOAP API は、厳密な型指定が行われる、ユーザーにとって使いやすい API です。AJAX API は、翻訳を UI に埋め込みたい Web ページの開発者にとって主に便利です。HTTP API は、SOAP API も AJAX API も適切でないときに便利な API です。

ここでは、目的を達成するための作業を一番簡単に実行できるため、SOAP インターフェイスを選択します。Solution Explorer (ソリューションエクスプローラー) で、[References] (参照) を右クリックします。次に [Add Service Reference] (サービス参照の追加) を選択し、Translator API (http://api.microsofttranslator.com/V2/Soap.svc) に、SOAP インターフェイスのエンドポイントを入力します。[Namespace] (名前空間) テキストボックスに、サービスエンドポイント名を「TranslatorService」と入力し、[OK] をクリックします (図 6 参照)。

SOAP サービス参照の追加

図 6 SOAP サービス参照の追加

残りは Visual Studio によって処理され、SOAP インターフェイスのクライアントコードが生成されます。

それでは、アプリケーションにコードをいくつか加えてみましょう。次のように、アプリケーションの MainPage クラスの宣言に、AppID、および TranslatorService クライアントへの参照を追加します。

string appID = <<your appID>>;
  TranslationService.LanguageServiceClient client = 
    new TranslationService.LanguageServiceClient();

IntelliSense によって、翻訳サービスに数多くの魅力的なメソッドがあることが表示されます。一番目を引くのは、すべてのメソッドが非同期であることです。ネットワーク操作が完了するのを待っている間に、クライアントアプリケーションをブロックする理由はないので、これは理にかなっています。これは、実行する特定の操作に対してそれぞれデリゲートを登録する必要があることを意味しています。今回必要なのは、LanguageServiceClient によって公開される TranslateAsync メソッドと TranslateAsyncComplete イベントだけです。ですが、確かに他のメソッドも魅力的です。それらのメソッドが、翻訳アプリケーションのユーザーシナリオに適しているかどうか確認してみましょう。

ひときわ目立つメソッドは GetLanguagesForTranslateAsync と GetLanguageNamesAsync の 2 つです。1 つ目のメソッドでは、Translator サービスによってサポートされている言語コードの一覧を返します。このメソッドを呼び出すと、スペイン語の言語コードは "es" であることがわかります。GetLanguageNamesAsync メソッドでは、特定のロケールにローカライズされた、特定の言語コードの言語名の一覧を返します。たとえば、このメソッドにロケールおよび言語コードとして "es" を渡すと、"Español" という文字列が返ってきます。多言語を扱う翻訳アプリケーションを開発する場合、どちらのメソッドも便利です。

SpeakAsync というメソッドも魅力的です。このメソッドは、文字列とロケールを受け取り、その単語がネイティブスピーカーによって発音されている WAV ファイルへの URL を返します。これはすばらしい機能です。たとえば、文字列を入力して、翻訳結果を取得し、続いて翻訳結果の文字列を SpeakAsync メソッドに渡すと、スペイン語でだれかとコミュニケーションを取るのに使用できる WAV ファイルを取得できます。また、ある単語の発音に自信がないとき、SpeakAsync メソッドを使用すると、その単語がどのように発音されるかを聞くことができます。

どれもかなりすてきな機能で、すてきだという理由だけでアプリケーションに追加したくなり、その気持ちに抵抗するのは難しいことです。ですが、ひとまずは主張を曲げず、最初に大まかに描いたユーザーシナリオを実行することに集中するべきです。明確なイメージを心に留めておくと、「あと 1 つだけでも追加してみたい」といった誘惑に直面したときに、このような姿勢を貫くことが容易になります。後ほど、Translator API で提供される機能を使用するつもりですが、今はまだそのときではありません。

翻訳アプリケーションを作成するためにコードを組み立てるのは簡単です。まず、次のように TranslateCompleted にデリゲートを登録します。

client.TranslateCompleted += new
  EventHandler<TranslationService.TranslateCompletedEventArgs>
  
(client_TranslateCompleted);

次に、TextBlock のテキストを翻訳済みのテキストに設定する、TranslateCompleted のイベントハンドラーを実装します。

void client_TranslateCompleted(object sender,
   TranslationService.TranslateCompletedEventArgs e)
 {
   TranslatedTextBlock.Text = e.Result;
 }
We wire up the button to submit the text we’ve entered for translation:
 private void TranslateButton_Click(object sender, 
   RoutedEventArgs e)
 {
   client.TranslateAsync(appID, TranslateTextBox.Text, fromLanguage,
     toLanguage);             
 }

続いて、スペイン語から英語、または英語からスペイン語に翻訳モードを切り替える 2 つ目のボタンに、いくつかの簡単なコードを追加します。このボタンでは、グローバル状態変数を管理し、翻訳ボタンのテキストを変更してその状態を示します。

最後に、アプリケーションをエミュレーターに配置してテストを行います。ほんの数行のコードを使用し、1 時間ほどの開発時間で、完全に機能する翻訳アプリケーションが完成します。

翻訳アプリケーションを拡張する

シンプルな翻訳アプリケーションもすてきですが、ユーザーシナリオを拡張すると、もっと機能の多いアプリケーションを構築できます。Metro の設計ガイドラインに適合する方法で、Translator API によって提供される言語を翻訳アプリケーションともっと多く結び付けられると理想的です。また、翻訳対象を管理するボタンを取り除き、翻訳対象をより簡単かつ直感的な方法で管理できると最高です。何をするにしても、デバイスを指で操作するユーザーにとって使いやすいものでなくてはならず、また、操作性がすばやく簡単であることも重要です。

このためには、既定のリストプロジェクトを使用してアプリケーションを構築します。新しいプロジェクトを開始して、[Windows Phone List Application] (Windows Phone リストアプリケーション) を選択します。ContentGrid に ListBox コントロールがある、既定の画面が表示されます。ListBox には、ダミーのテキストを置き換える、テキストの翻訳先となる 6 つの言語を含めます (図 7 参照)。

既定の Windows Phone リストアプリケーション

図 7 既定の Windows Phone リストアプリケーション

プロジェクトの SampleData フォルダーにある MainViewModelSampleData.xaml ファイルを編集します。このファイルには、次のような XML があります。

<local:ItemViewModel LineOne="design one" LineTwo="Maecenas praesent accumsan bibendum" LineThree="Maecenas praesent accumsan bibendum dictumst eleifend facilisi faucibus habitant inceptos interdum lobortis nascetur"/>

この XML を編集すると、ListBox のデザイン時ビューを変更して、ListBox にすべての言語 (スペイン語、ドイツ語、英語、ポルトガル語、イタリア語、フランス語) を含めることができます。デザイン時ビューに変更が反映されるのは、このファイルを保存した後です。これは、ListBox コントロールが、MainViewModelSampleData.xaml で定義される Items 要素にデータバインドされるためです。これは ListBox コントロールの ItemsSource 属性で制御されます。

また、実行時に ListBox の内容を更新することもできます。Visual Studio によって生成されたファイルを見てみると、MainViewModelSampleData.xaml ファイルに含まれているプレースホルダーのデータと同じデータで埋められている ObservableCollection<ItemViewCollection> があります。たとえば、GetLanguageNamesAsync メソッドによって返される言語に基づいて、UI の言語の一覧を動的に生成する場合は、MainViewModel.cs ファイルを編集して、Items コレクションを設定します。今のところは、静的な言語一覧を指定する方が望ましいので、直接 ItemViewModel オブジェクトのコレクションを編集します。リストアプリケーションを実行すると、図 8 のような UI が表示されます。

リストアプリケーションの UI

図 8 リストアプリケーションの UI

ユーザーがいずれかのボタンに触れると、シンプルな翻訳アプリケーションの UI と実質的には同じ詳細ページが表示されます。翻訳する単語を入力する TextBox、翻訳済みのテキストを含む TextBlock、および翻訳を指示する Button があります。翻訳方向を管理するもう 1 つの Button は追加せず、代わりに Translator API を使用します。簡単な翻訳アプリケーションの双方向翻訳はこの多言語のシナリオでは意味を成さず、UI の別のレイヤーを追加することで、アプリケーションの動作がスムーズになるどころか遅くなります。さいわい Translator API では、渡されている言語が自動的に検出されます。

まず、翻訳クライアントの DetectAsync メソッドを呼び出すためにコードをいくつか追加して、翻訳するテキストを渡したら、DetectAsyncComplete イベントハンドラーから TranslateAsync を呼び出します。このイベントハンドラーは次のようになります。

void client_DetectCompleted(object sender, 
  TranslationService.DetectCompletedEventArgs e)
{
  string languageCode = e.Result;
  client.TranslateAsync(appID, TranslateTextBox.Text, fromLanguage, tolanguage);
}

ユーザーが選択したボタンによって、翻訳先の言語がわかります。また、Translator API で自動的に検出されるので、翻訳元の言語もわかります。コーディングに 1 時間もかけずに、ユーザーが 2 回 (入力は含めていません) 触れるだけで翻訳できる、簡単な多言語翻訳アプリケーションを作成できました。

簡潔さ

簡潔さは、Windows Phone 7 開発の中核です。アプリケーションでは、1 つのユーザーシナリオを適切に実行することに集中するべきです。Windows Phone 7 SDK CTP に付属しているツールを使用すると、簡単かつ強力なアプリケーションの提供が可能になるだけではなく、その提供を容易に行えます。また、クラウドを操作するのは簡単で、開発者の時間を少々費やすだけで Microsoft Translator Web サービスを Windows Phone アプリケーションと結び付けられることがわかりました。Visual Studio などの使い慣れたツールや、Metro のような明確なガイドラインを使用することで、Windows Phone とクラウドが一体となり、開発者とユーザーに新しい機会が提供されます。

Ramon Arjona は、マイクロソフトの Windows Mobile チームのシニアテストリーダーです。

この記事のレビューに協力してくれた技術スタッフの VikramDendi と Sandor Maurice に心より感謝いたします。