MSC2011 D3-303 “Windows Phone/iOS/Android から Windows Azure を利用する” session follow up - Part 2 : Babel.cam ソリューション解説-1
皆様、こんにちは！それでは、Part 2から、本セッション内容の解説になります。
まず最初にご紹介したのは、Babel.Camというソリューションでした。こちらは、皆様がダウンロード可能な資料にもありますので、こちらをご覧ください。
このソリューションは何をするものか、というところですが、名前からも推測できるよう、翻訳ソリューションです。
Windows Phone のカメラで撮った、英語やフランス語等外国語の文章を、画像ファイルとしてWindows Azure ストレージにUpload します。その情報がQueue に格納されます。それを、Windows Azure (雲の絵のところです)にいる Worker Role が、常にチェックしていて、画像が入ってきたというQueueの情報をもとに、Microsoft Research が提供しているHawaii というOCRのWeb サービスに渡して、テキストファイル化します。その後、Bing Translator Services という SOAPのWeb サービスにそのテキストファイルを渡して、翻訳を行います。翻訳が完了すると、MPNS (Microsoft Push Notification Service) を使って、その通知をWindows Phone に送付すると同時に、翻訳された結果のテキストファイルを、Windows Phone に送付します。
それでは、さっそく実行してみましょう。Visual Studio 2010 を管理者権限で起動します。
※セットアップ方法は、C:\WindowsAzure\WATWindowsPhone\DocsのReadme.docx および、C:\WindowsAzure\WATWindowsPhone\Samples\WP7.1\BabelCam\C# のReadme.txt に詳しく書いてあります。Windows Azure Tookit for Windows Phone のセットアップが終わっていること、Hawaii OCR Services と Bing Translator Services のIDを取得することが必要です。セットアップについて詳しくは、次のエントリーでご紹介しますが、ソフトウェア要件は、下記のとおりです。
· Microsoft Visual Studio 2010 Professional (or higher) or both Microsoft Visual Web Developer 2010 Express and Microsoft Visual Studio 2010 Express for Windows Phone
· Microsoft ASP.NET MVC 3
· Entity Framework 4.1 Code First
· Microsoft SQL Server 2008 R2 Express (or higher)
· Windows Phone SDK 7.1 Release Candidate
· Silverlight for Windows Phone Toolkit
· Internet Information Services 7 (IIS7)
· Windows Azure SDK 1.4.1 Refresh
· Windows Azure Tools for Microsoft Visual Studio 2010 1.4 – August 2011
· Windows Identity Foundation Runtime
· Internet Explorer 9 (or any other modern Web browser supporting HTML5)
なお、実行前に、表示メニューから、ソリューションエクスプローラーを、クリックしておいてください。これにより、デバッグ中も、ソリューションエクスプローラーが表示されますので、順次、他のプロジェクトの実行等ができます。
BabelCam という Cloud プロジェクトを右クリックして、
コンテキストメニューから、デバッグ→新しいインスタンスを開始、を選択します。
そうすると、次のような画面が出ますが、SSL前提のサイトで証明書がインストールされていないので、気にせず、”このサイトの閲覧を実行する”を選んでください(毎回こうなります)。
そうすると、ログオン画面になりますので、ここでは、ユーザーID は admin と入力して、ログオンします。
※パスワードはC:\WindowsAzure\WATWindowsPhone\DocsのReadme.docx のP.27に書いてありますので、そちらをご覧ください。
ログオンすると下記の画面にリダイレクトされるはずです。
Users をクリックすると、私が追加したユーザーが出てきます。AppFabric ACSを使って、一度認証されたユーザーがここに表示されることになります(最初はだれもいません)。表示名は、その時決めることができます。私のは、Windows Live IDユーザーなのでこの名前にしてあります。
それでは、今度は、Windows Phone アプリケーションを起動しましょう。先ほどと同じく、上から3番目の、BabelCam.Phone というプロジェクトを右クリックして、
コンテキストメニューから、デバッグ→新しいインスタンスを開始、を選択します。
そうすると、次のような画面が出ます。
この画面は、Windows Azure のAppFabric のAccess Control Services のポータルにある、Identity Provider 一覧から、そのまま取得されています。これまで、AppFabric のAccess Control Services のポータルをご覧になったことがない方もおられるようでしたので、こちらに、ポータルを表示しておきます。
皆様の方で、Facebookや、Twitter等、新たなIdentity Provider を追加したい場合には、開発や設定を行って戴ければ、追加は可能です。
※これに関しては、こちらの記事をご参照ください。
Identity Providers https://msdn.microsoft.com/en-us/library/gg185971.aspx
ACS 2.0 Samples and Documentation https://acs.codeplex.com/
またWindows Azure Training Kit にも、同様のシナリオも用意されていますので、ぜひご利用ください。私もBlogで順次日本語にして、解説してきたいと思っています。
SSLの証明書がないので、Install Certificate のリンクを押してください。そうすると、下記のような手順で、画面の指示に従い、インストールが行えます。
ここで**注意点があります。OKボタンをクリックすると、再びタップしてファイルを開く**の画面(上記一番左)に戻ります。この状態で、必ずBackキーで、元のログイン画面に戻ってください。これをしないと証明書がうまくインストールされない場合があります。また手順的にも Loop になってしまいます。
次にこの画面に戻ってきたら、どれかidpを選んでクリックします。
ここではWindows Live IDを選択します。そうするとLive の認証画面にリダイレクトされます。
ここで、PgUpキーを押しますと、PC側のキーボードで入力できますので、こちらを使って入力します。
そうすると、初めて登録の時には、Live IDをこのポータルにUser登録するための画面に遷移し、表示名の入力を求められますので、適当につけます(私の場合は、上記のとおり shotaro-hotmail )。Register Succeeded で OK を押すと、下記の画面に遷移します。
チェックボックスON で Enable... にすると、MPNS (Microsoft Push Notification Service)のChannel を開いて、Live サービスにURI を登録します。このURI はWindows Azure のTable ストレージに保存されるので、後程の記事で中身を見てみましょう。
これでNotification と、翻訳済みテキストファイルを受信する準備が整いました。
※注意点として、この Push Notification を使用するときは、できるだけご自宅等の環境でお試しください。企業のネットワーク内からだとポート制限やプロキシの関係で、URI が登録できないことがあり、エラーでデバッガが止まってしまいます。
サンプル画像としてアップロードをするためにカメラを起動するボタンがついていますので、これをクリックして、適当な画像を撮影し決定、アップロードボタンをクリックします。テキストが含まれていないので関係ないのですが、一応 TO : 言語の箇所をフランス語に変更しておきます(^^;)
そうすると、この情報がWindows Azure のQueue ストレージに入り、それを常にチェックしている Worker Role がその内容を見て、画像を Hawaii OCR Service に画像を渡します。画像の中にあるテキストがテキストファイルに変換されると、今度は Bing Translator Services にそのテキストが渡され、FROM : 言語からTO : 言語に翻訳されて、その結果が返ってきます。
テキストがないので、[No text was found]という結果が返ってきます。そこで今度は、その下のリンクで、sample text image を使って同じ処理を行ってみましょう。
※このサンプルテキストイメージは、皆様の好きな画像に差し替え可能ですので、色々変更してお試しください。
TO : 言語にフランス語を指定した結果と、日本語を指定した結果、そして画面をタップして次の画面に遷移すると、履歴の画面に遷移します。リフレッシュボタンを押して、最新の結果を取得してください。
以上でBabel.Camのデモ部分の解説は終了です。この後のエントリーでは、ソースコードを見てみましょう。おもに Worker Role.cs がその中心となります。
※本稿に関して、詳しく知りたい方は、C:\WindowsAzure\WATWindowsPhone\DocsのReadme.docx をご覧ください。
鈴木 章太郎