![結局、RIAはどれを使うべきなのか?](../cloudria01/title.gif)
SilverlightとAmazon S3で“クラウドRIA”を作ってみた
クラスメソッド株式会社
福田 寅成
2010/8/26
SOAP通信を利用したAmazon S3へのアクセス
今回、SilverlightからAmazon S3には、SOAPを利用してアクセスします。Amazon S3はRESTとSOAPでアクセスできますが、RESTの場合、ヘッダベースで認証する必要があります。Silverlightでは、その部分のカスタマイズが許可されていないので、SOAPを利用して通信します。
Amazon S3の場合のRESTは、前回のAdobe AIRやWPFアプリケーションなどのデスクトップアプリケーションで主に利用する通信手段です。もちろん、どちらもSOAPでアクセスしてもOKです。
□ clientaccesspolicy.xmlの配置
SilverlightアプリケーションをWebサーバやクラウドに配置する際の基本としては、「crossdomain.xml」「clientaccesspolicy.xml」に関して確認しておく必要があります。ドメインをまたいでデータをやりとりする場合には、それらをあらかじめ配置しておく必要があります。そうしないと、セキュリティエラーが通信の際に発生してしまいます。
これらポリシーファイルの配置に関しては、本番利用時には詳細な設定を行う必要があります。また、配置するサイト全体のポリシーにかかわる重要事項なので、実際のプロジェクトではプロジェクトの開始時点で各所とあらかじめ調整をしておく必要があります。
今回は、clientaccesspolicy.xmlをアプリで表示したいバケットの直下に配置しておきます(前回紹介した「S3 Firefox Organizer」を使ってアップロードするといいでしょう)。
また、clientaccesspolicy.xmlの設定に関しては今回は「SOAPからアクセスのあった場合のみアクセスを受け入れる」設定にしています。以下は実際の設定です。
<?xml version="1.0" encoding="utf-8" ?>
<access-policy>
<cross-domain-access>
<policy>
<allow-from http-request-headers="SOAPAction">
<domain uri="*"/>
</allow-from>
<grant-to>
<resource include-subpaths="true" path="/"/>
</grant-to>
</policy>
</cross-domain-access>
</access-policy>
SilverlightS3プロジェクトの直下に上記サンプルを置いておきましたので、サンプルをダウンロードされた方は確認してみてください。
□ サービス参照の設定
アプリケーションをゼロから作成する場合、空のSilverlightアプリケーションを作成し、以下のサービス参照の設定を行えば、後はXAMLとC#のソースコードファイルを編集していくだけです。
今回は、SOAPを使ってAmazon S3にアクセスするので、下記の手順でサービス参照をプロジェクトに追加します。
Visual StudioのSilverlightプロジェクトを右クリックし、[サービス参照の追加]をクリックします。開いたダイアログで、Amazon S3のWSDLを入力します。WSDLの[アドレス]は「https://s3.amazonaws.com/doc/2006-03-01/AmazonS3.wsdl?」です。
![]() |
図5 サービス参照の追加 |
[移動]ボタンをクリックすると、サービスが検索されます。サービスに「AmazonS3」が出たら、[名前空間]の「ServiceReference1」を「AWSS3」に修正して[OK]をクリックします。すると、Service Referencesに「AWSS3」が追加され、プロジェクトルートに「ServiceReference.ClientConfig」ファイルが生成されます。
□ サービス参照の設定の修正
次に、先ほど生成された「ServiceReference.ClientConfig」を修正します。デフォルトの設定ファイルは、下記のようになっています。
<configuration>
<system.serviceModel>
<bindings>
<basicHttpBinding>
<binding name="AmazonS3SoapBinding" maxBufferSize="2147483647"
maxReceivedMessageSize="2147483647">
<security mode="Transport">
<transport>
<extendedProtectionPolicy policyEnforcement="Never" />
</transport>
</security>
</binding>
</basicHttpBinding>
</bindings>
<client>
<endpoint address="https://s3.amazonaws.com/soap" binding="basicHttpBinding"
bindingConfiguration="AmazonS3SoapBinding" contract="AWSS3.AmazonS3"
name="AmazonS3" />
</client>
</system.serviceModel>
</configuration>
これを以下の設定に修正します。
<configuration>
<system.serviceModel>
<bindings>
<basicHttpBinding>
<binding name="AmazonS3SoapBinding" maxBufferSize="2147483647"
maxReceivedMessageSize="2147483647">
<security mode="Transport" />
</binding>
<binding name="CustomAWS" maxBufferSize="2147483647"
maxReceivedMessageSize="2147483647">
<security mode="None" />
</binding>
</basicHttpBinding>
</bindings>
<client>
<endpoint address="http://バケット名.s3.amazonaws.com/soap" binding="basicHttpBinding"
bindingConfiguration="CustomAWS" contract="AWSS3.AmazonS3"
name="AmazonS3" />
</client>
</system.serviceModel>
</configuration>
以下は、修正の概要です。
- endpointのaddressの部分にバケット名を追加
- bindingConfigurationをCustomAWSに変える
- 新たにbindingとしてCustomAWSを追加。ここでHTTPでアクセスするように設定を変える
□ Silverlight 3のナビゲーションフレームワークを使う
今回のアプリケーションの実装上の特徴は、ナビゲーションフレームワークとサービス参照を利用したデータ取得です。
ナビゲーションフレームワークはSilverlight 3から登場した新機能です。以下は、主な利用の流れです。
- 画面をPageを継承したXAMLで作成
- PageをFrameクラスで管理
- 各画面でどの画面に行くかを指定したり、FrameからFrame内の画面を何にするか指定
- 画面が遷移すると、Webブラウザ上のURLも変化(ディープリンク)
まず、Main.xamlのコードを見てみると、この画面(Pageではない)は下記のようなコードです。
<Grid x:Name="LayoutRoot" Width="640" Height="480">
<Grid.Background>
<ImageBrush ImageSource="../Style/wood_bg.png"/>
</Grid.Background>
<navigation:Frame x:Name="MainContent" Source="/Views/BucketList.xaml"/>
</Grid>
下の方にMainContentという名前のFrameがあり、そのSourceがバケット一覧画面(Page)です。今回は各画面(Page)からどの画面(Page)に飛ぶかを各画面のイベントハンドラで実装しています。
例えば、バケット一覧DataGridで選択されているバケットの行が変更された場合(SelectionChangedイベントが発生した場合)、下記のような形で画面遷移処理を行っています。
Uri contentListPageUri = new Uri(String.Format("/Views/ContentList.xaml?bucketName=" + bucketName), UriKind.Relative);
NavigationService.Navigate(contentListPageUri);
ここでは、コンテンツ一覧画面にバケット名をパラメータとして渡しつつ画面を遷移しています。画面遷移はNavigationServiceのNavigateにURLを設定するだけです。Navigateメソッドが実装されると、Frame内のコンテンツが指定されたPageに差し替わります。
各画面用の共通ヘッダにはコンテンツ一覧に戻る「ListBuckets」ボタンがあります。これも同様の処理をHeader.xaml.csで行っているだけです。
このようにナビゲーションフレームワークは画面間で(主に)URLパラメータベースで値をやりとりします。パラメータはWebブラウザ上のURLに現れるので、注意してください。
なお、Expression Blendで用意されているビヘイビアを利用した画面遷移の実装も可能です。こちらはXAMLベースでノーコーディングで実装可能です。一方で、コードビハインドで処理を記述すると、「きめ細かい処理制御ができる」というメリットがあります。
□ サービス参照を利用したデータ取得処理
残りは、データの取得処理です。Amazon S3からデータを取得する場合は、少しめんどくさい処理を行う必要があります。これは、認証周りに関するわずらわしい処理で、今回その処理は「S3Helper.cs」「S3Util.cs」にまとめてあり、各画面の処理はそれらユーティリティを利用してシンプルに行っています。
バケット一覧画面(BucketList.xaml)の初期表示処理を見てみます。Pageクラスを継承した画面はナビゲーションに関するイベントハンドラを持っています。ここではOnNavigatedToメソッドを見てみます。
DateTime timeStamp = S3Helper.GetDatestamp();
AWSS3.AmazonS3Client s3 = S3Util.getS3();
s3.ListAllMyBucketsCompleted += new EventHandler<AWSS3.ListAllMyBucketsCompletedEventArgs>(s3_ListAllMyBucketsCompleted);
s3.ListAllMyBucketsAsync(S3Util.AWS_AWS_ID, timeStamp,
S3Helper.GenerateSignature(S3Util.AWS_SECRET_KEY, S3Util.S3_OPERATION_LIST_ALL_MY_BUCKETS, timeStamp));
このメソッドではAmazonS3Clientを利用して、バケット一覧取得処理(ListAllMyBucketsAsync)を呼び出しています。呼び出す際の引数がいろいろ必要で、ユーティリティを利用してそれらを準備しています。
基本的に非同期処理なので、通信完了イベントをあらかじめ設定してから、通信処理を呼び出しています。通信完了イベントでは、イベント結果からバケットの一覧を取得し、バケット一覧データグリッドのItemsSourceにセットしています。
バケット一覧画面でバケットを選択した際のコンテンツ一覧取得処理もほぼ同様です。画面表示前に画面に表示したくないファイル(clientaccesspolicy.xml)をLINQで簡単にフィルタしています。
AWSS3.ListBucketResult res = e.Result;
AWSS3.ListEntry[] originalContents = res.Contents;
var queryResult = from content in originalContents
where content.Key != "clientaccesspolicy.xml"
orderby content.Key
select content;
AWSS3.ListEntry[] contents = queryResult.ToArray();
ContentDataGrid.ItemsSource = contents;
RIAとクラウドのペアはベストパートナーである
前回の記事から時間が空いてしまいましたが、その間もRIAとクラウドの周辺は目まぐるしく変化しています。
RIAに関しては、今年はSilverlight 4、Flex 4、Adobe AIR 2の正式版が登場しました。今後RIAの本格的な業務への応用、すなわち「ビジネスRIA」としてのRIAの利用が増えて来るものと予想されます。
クラウドに関してはWindows Azureが1月に正式公開され、さらに2月に入って実際の課金も始まりました。また、Amazon Data Services Japanが今年から本格的に日本国内での活動を開始しています。
このRIAとクラウドのペアはベストパートナーであると考えています。それぞれがそれぞれの良さを最大限に引き出し、新たなアプリケーション開発のスタンダードを築いていくことでしょう。
今回でいったんクラウドRIAの連載は終わりです。これまで記事を読んでいただきありがとうございました。
□ @IT関連記事
![]() |
クラウド活用「雲活」のために押さえるべき39のポイント 安藤幸央のランダウン(50) 活用するべきサービスか否か、クラウドの利点・問題点、クラウドプラットフォーム提供企業になるための条件、開発者がするべきことに分けて紹介 「Java Solution」フォーラム 2010/2/2 |
![]() |
FlexとSilverlightで同じアプリを作って比較してみた 結局、RIAはどれを使うべきなのか?(最終回) 業務用で定番のマスタメンテナンスの簡単なアプリを作成。RIA技術を比較検証する際の1つの手段として参考にしてほしい 「リッチクライアント & 帳票」フ ォーラム 2009/2/24 |
![]() |
体験してみて分かった“雲”の違い 特集:クラウド体験記(後編) Amazon EC2、Windows Azureの使用感を述べ、Force.comやGoogle App Engineを含めた、エンジニアにとってのクラウド活用の価値を総括 「Insider.NET」フォーラム
2009/4/14 |
![]() |
Silverlightは次世代のJavaScriptフレームワーク? ついに正式リリース! いまこそ知りたい!! どの環境でも動くマイクロソフトのRIA技術Silverlightについて、実際に動く2つのサンプルを見ながら、その特徴と技術を解説 「リッチクライアント & 帳票」フ ォーラム 2007/9/7 |
![]() |
.NETを知らない人でも分かるSilverlight入門 「マイクロソフトの技術は.NETを知らないと学習できないのでは?」という読者にこそ読んでもらいたい、リッチクライアント技術Silverlightの入門連載。 もちろん、知っている人も大歓迎! |
![]() |
Silverlight 2で.NET技術をカッコよく使おう 連載「.NETを知らない人でも分かるSilverlight入門」の続編のSilverlight 2入門連載です。Silverlightで.NET技術をよりカッコよく簡単に使えるRIAを作ってみましょう |
![]() |
Silverlight制作をデザイナと開発者でコラボしてみた 実録:デザイナ×開発者コラボを成功するポイントとは Expression Blend×Visual Studioのコラボは本当に簡単なのか? 面白コンテンツの制作過程をドキュメントでお届け |
![]() |
プロトタイプ機能を備えた“本物”のデザイナーのツール Expression Blend 3+SketchFlowを使ってみた 先日発表された最新デザインツールについて、主な新機能6つと、Silverlightアプリに肉付けできるプロトタイプ機能を紹介 |
編集部より:クラウドコンピューティングに興味を持った読者は下記インデックスページをご確認ください。随時更新中で、クラウド・コンピューティングの最新情報も分かります。
クラウド・コンピューティング技術。そのすべては、ここにある
プロフィール:福田 寅成(ふくだ ともなり) クラスメソッド株式会社 エンタープライズサービス部門 システムエンジニア 大手SIerでの長いJava開発経験を経てクラスメソッドに。 Java、JavaScript/Ajax、Flex、AIR、C#など、さまざまな分野に関する技術調査研究、および業務アプリケーション開発に携わる。 FlexやAIRの開発依頼はコチラ |
![]() |
1-2 |
INDEX | ||
検証特集:クラウドの“クライアント”としてRIAを試す(終) SilverlightとAmazon S3で“クラウドRIA”を作ってみた |
||
Page1 クラウドとRIAの組み合わせを試してみよう Amazon S3のデータを扱うSilverlightアプリ Amazon S3+Silverlightアプリを作る準備 |
||
![]() |
Page2 SOAP通信を利用したAmazon S3へのアクセス RIAとクラウドのペアはベストパートナーである |
![]() |
リッチクライアント&帳票 全記事一覧へ |
- GASで棒、円、折れ線など各種グラフを作成、変更、削除するための基本 (2017/7/12)
資料を作る際に、「グラフ」は必要不可欠な存在だ。今回は、「グラフの新規作成」「グラフの変更」「グラフの削除」について解説する - GET/POSTでフォームから送信された値をPHPで受け取る「定義済みの変数」【更新】 (2017/7/10)
HTMLのフォーム機能についておさらいし、get/postメソッドなどの内容を連想配列で格納するPHPの「定義済みの変数」の中身や、フォーム送信値の取り扱いにおける注意点について解説します【PHP 7.1含め2017年の情報に合うように更新】 - PHPのfor文&ループ脱出のbreak/スキップのcontinue【更新】 (2017/6/26)
素数判定のロジックからbreak文やcontinue文の利点と使い方を解説。for文を使ったループ処理の基本とwhile文との違い、無限ループなども併せて紹介します【PHP 7.1含め2017年の情報に合うように更新】 - Spreadsheetデータの選択、削除、挿入、コピー、移動、ソート (2017/6/12)
Spreadsheetデータの選択、挿入、削除、コピー、移動、ソートに使うメソッドの使い方などを解説する
![]() |
|
|
|
![]() |