110709 silverlight square_tanaka_pub

1,409
-1

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,409
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

110709 silverlight square_tanaka_pub

  1. 1. 1<br />Silverlight×Javaで業務アプリ<br />田中 孝佳 (@tanaka_733)<br />2011/07/09<br />
  2. 2. AGENDA<br />背景<br />Javaと.NET(C#)の違い<br />公開の仕方<br />Wc3の設計思想<br />通信部分の実装<br />認証機能<br />ログの出力<br />ファイルダウンロード<br />まとめ<br />2011/07/09<br />2<br />
  3. 3. あらかじめおことわり<br />Javaとの連携部分を中心に話すので、MVVM的な話はほとんどありません<br />でも、MVVM的に作ってますよ<br />同様に細かいViewの作り方もないです<br />サンプルコードが細かい字ですが、あとで公開します<br />デモもやるつもりですが、マシンスペックの都合で動かないかも・・・<br />2011/07/09<br />3<br />
  4. 4. Agenda<br />背景<br />Javaと.NET(C#)の違い<br />公開の仕方<br />Wc3の設計思想<br />通信部分の実装<br />認証機能<br />ログの出力<br />ファイルダウンロード<br />まとめ<br />2011/07/09<br />4<br />
  5. 5. 自己紹介<br />㈱ワークスアプリケーションズ所属<br />ERPパッケージの会社です<br />研究部門 クラウド担当<br />パブリッククラウドでERPパッケージを提供<br />お仕事<br />AWS, Java, Oracle, Silverlight<br />お仕事ブログ<br />http://dev.worksap.co.jp/Members/t_tanaka/<br />趣味<br />Silverlight, WP7(without 実機)<br />Azure<br />Kinect(without Xbox)<br />趣味のブログ(URL変えました。リダイレクトされます)<br />http://techblog.hilife-jp.info/<br />2011/07/09<br />5<br />1.背景<br />
  6. 6. お仕事の内容<br />2011/07/09<br />6<br />1.背景<br />
  7. 7. 業務アプリのSilverlight実用例<br />社内製のクラウド管理ツールWc3のフロント<br />2011/07/09<br />7<br />1.背景<br />
  8. 8. Silverlightを選択した理由<br />RIA技術の調査<br />JavaのGUI作成コストは高い!<br />クライアントアプリは当然高い<br />ブラウザ系でもなかなか決定打がない・・・<br />Flashよりも業務アプリ向き<br />UI部品とか、アーキテクチャとか<br />開発生産性の向上<br />GUIツールがいけてる<br />アーキテクチャがいけてそう<br />2011/07/09<br />8<br />1.背景<br />
  9. 9. サーバーサイドはJavaで<br />社内的な事情で。。。<br />Javaエンジニア多し<br />クライアントはWindowsがほぼ全部でも、サーバー側はそうとは限らない<br />これはこれで面白いという判断もあり<br />サーバーとクライアントを分離できる<br />レガシーシステムのRIA化にも役立つ(かも)<br />2011/07/09<br />9<br />1.背景<br />
  10. 10. どうやって通信するんでしょう?<br />2011/07/09<br />10<br />1.背景<br />.NETならWCF RIA Services使えるのに・・・<br />
  11. 11. RESTful APIで通信<br />RESTful API<br />URIに対してリソースを割当てる<br />URIに対するHTTPメソッドで、XML, JSONetc… を取得<br />メッセージの中身を見ても比較的理解できる<br />WCF<br />SOAPベース(バイナリ形式だけど中身はSOAP)<br />リクエストはXML形式で送信<br />レスポンスも基本XML(REST対応でJSON, RSSなども可能)<br />メッセージの中身を見ると死ねる・・・<br />2011/07/09<br />11<br />1.背景<br />
  12. 12. JSONって?<br />JavaScript ObjectNotation<br />JavaScirptベースの記述法をベースにオブジェクトを記述できる<br />多くのプログラム言語で解釈できる<br />RFC4627で仕様が決まってはいるけど細かな実装が違ったりする・・・<br />リストとか日付とか<br />C#はDataContractJsonSerializerでOK<br />JavaはSDKには入っていない<br />で、各ライブラリごとに微妙に動作が異なる<br />リストの振る舞いが仕様通りのJacksonを使用<br />2011/07/09<br />12<br />1.背景<br />
  13. 13. RESTでJSONの例<br />2011/07/09<br />13<br />1.背景<br />リクエストの例)<br />http://example.com/rest/products/827635/detail<br />レスポンスの例)<br />
  14. 14. SOAPメッセージ<br />2011/07/09<br />14<br />1.背景<br />リクエストの例)<br />レスポンスの例)<br />
  15. 15. RESTfulとWCF(SOAP)の所感<br />2011/07/09<br />15<br />1.背景<br />
  16. 16. クライアントとサーバーを疎結合にできます<br />明確な境界をクライアントとサーバーの間作ります<br />実装言語に依存しないAPIを定義できます<br />つまり、APIさえ維持できれば任意の言語の実装に置き換えられます<br />サーバーサイドをIISで.NETにしたり<br />.NETやJavaでクライアントアプリを作ったり<br />(やりたくないけど)HTML+JavaScriptにしたり<br />2011/07/09<br />16<br />1.背景<br />
  17. 17. クライアントとサーバーを疎結合にできます<br />2011/07/09<br />17<br />1.背景<br />
  18. 18. AGENDA<br />背景<br />JavaとC#の違い<br />公開の仕方<br />Wc3の設計思想<br />通信部分の実装<br />認証機能<br />ログの出力<br />ファイルダウンロード<br />まとめ<br />2011/07/09<br />18<br />
  19. 19. 年表<br />2011/07/09<br />19<br /> 2.JavaとC#の違い<br />
  20. 20. 言語レベルの違い<br />2011/07/09<br />20<br /> 2.JavaとC#の違い<br />
  21. 21. 言語レベルの違い<br />2011/07/09<br />21<br /> 2.JavaとC#の違い<br />Javaはhowを詳細に記述させられるC#はhowよりwhatに専念できる<br />
  22. 22. イベントリスナの登録<br />2011/07/09<br />22<br /> 2.JavaとC#の違い<br />Java<br />C#<br />リスナを定義したインターフェースの実装クラスを登録<br />(上は匿名内部クラスを利用)<br />ラムダ式、もしくは関数ポインタで、イベントハンドラに追加<br />
  23. 23. 文字列の比較(演算子オーバーロード)<br />2011/07/09<br />23<br /> 2.JavaとC#の違い<br />C#<br />Java<br />Javaでは演算子オーバーロードがないので<br />Stringの==比較は参照の一致です。<br />C#を知らないJavaプログラマが見たら、「この人、初心者だ」といいかねない<br />書き方です。<br />
  24. 24. 指定の型を返り値の型にしたい<br />2011/07/09<br />24<br /> 2.JavaとC#の違い<br />C#<br />Java<br />JavaではGenericsの型情報は、実行時には完全には残らないので、<br />引数指定が必要です。<br />しかもクラスしか指定できません。<br />C#ではメソッドで指定した型を返り値の型として定義できます。<br />また、クラスではなく、構造体も指定できます。<br />
  25. 25. 開発ツール(IDE)の違い<br />C#はVisualStudio<br />Javaはいろいろ<br />Eclipse (Eclipse Foundation)<br />NetBeans (NetBeans Community)<br />JDeveloper (Oracle)<br />IntelliJ IDEA (JetBrains)<br />設定とかコンパイラの実装が違って面倒な問題を起こすこともしばしば・・・<br />2011/07/09<br />25<br /> 2.JavaとC#の違い<br />Eclipseなどは自分でコンパイラを持っているので、<br />Eclipseではコンパイルが通るけど、<br />いざjavacでリリースビルドが通らないとかあります<br />
  26. 26. サーバーの違い<br />.NETはIIS<br />Javaはいろいろ<br />JavaEE準拠(仕様に定められた機能を持っている)<br />WebShpere (IBM)<br />WebLogic(Oracle)<br />GlassFish etc…<br />準拠していないもの(その分軽量などのメリット有)<br />Tomcat<br />Jetty<br />Springetc…<br />どれを選ぶかが実装にも影響を与える<br />2011/07/09<br />26<br /> 2.JavaとC#の違い<br />
  27. 27. JavaとC#の違い<br />2011/07/09<br />27<br /> 2.JavaとC#の違い<br />
  28. 28. AGENDA<br />背景<br />Javaと.NET(C#)の違い<br />公開の仕方<br />Wc3の設計思想<br />通信部分の実装<br />認証機能<br />ログの出力<br />ファイルダウンロード<br />まとめ<br />2011/07/09<br />28<br />
  29. 29. サーバーサイドJavaでXAPをどう公開するか<br />2011/07/09<br />29<br />3.公開の仕方<br />
  30. 30. HTMLをIISと同様に書きます<br />2011/07/09<br />30<br />3.公開の仕方<br />IISじゃないから、aspxはかけないけど。<br />
  31. 31. AP<br />Web<br />HTMLとXAPを静的ファイルとして公開<br />2011/07/09<br />31<br />3.公開の仕方<br />../index.html<br />html文書<br />HTML<br />../Clientbin/hoge.xap<br />XAP<br />XAP<br />これはServletが公開してもいいし、<br />Webサーバー(apache)が公開してもいい。<br />AzureBlobとかCDNとかで公開するのもあり。<br />
  32. 32. xapをAPと別な場所におく場合の注意<br /><iframe>による読み込みが必要な場合<br />ホストするHTMLと別なホストにxapがある場合<br />ブログとかにxapを配置する場合も必要かも<br />clientaccesspolicy.xmlの配備が必要な場合<br />xapのある場所と別ホストのWebサービスを呼び出す場合<br />Webサービス側に必要<br />信頼されたOOBは不要<br />おまけにWP7でも不要<br />2011/07/09<br />32<br />3.公開の仕方<br />
  33. 33. xapをAPと別な場所におく場合の注意<br />2011/07/09<br />33<br />3.公開の仕方<br />コンテンツ配信サーバー(CDNとかBlobとか)<br />Webサービス<br />XAP<br />clientaccesspolicy.xml<br />Webサーバー<br />HTML<br /><ifarame><br />…<br />別ホストのWebサービスを呼び出すので<br />clientaccesspolicy.xml<br />必須<br />別ホストのXAPを<br />参照するのでiframeで<br />
  34. 34. AGENDA<br />背景<br />Javaと.NET(C#)の違い<br />公開の仕方<br />Wc3の設計思想<br />通信部分の実装<br />認証機能<br />ログの出力<br />ファイルダウンロード<br />まとめ<br />2011/07/09<br />34<br />
  35. 35. アーキテクチャ図<br />2011/07/09<br />35<br /> 4.Wc3の設計思想<br />
  36. 36. こういう構成になります<br />2011/07/09<br />36<br /> 4.Wc3の設計思想<br />AWS (EC2)<br />社内<br />AP<br />Web<br />クライアント(ブラウザ)<br />DB<br />JSON <br />over HTTPS<br />xap<br />JDBC<br />Query<br />Cloud Srevice endpoint<br />
  37. 37. サーバー側のライブラリ<br />2011/07/09<br />37<br />JPA(Java Persistence Assistant)<br />標準仕様が定められたORマッパー<br />SQLを埋め込まずにDBアクセスできる<br />拡張メソッド、ラムダ式がないので使い勝手は・・・<br />マルチDB対応できる<br />Oracle, SQL Server, MySQL, SQLite etc…<br />実装はEclipseLinkを使用<br />JAX-RS<br />RESTfulAPIのサービスを提供するライブラリ<br />実装はJerseyを使用<br />AWS API + Concurrent Framework<br />AWS のAPIをJavaから非同期で叩く<br /> 4.Wc3の設計思想<br />
  38. 38. Silverlight側のライブラリ<br />2011/07/09<br />38<br />Silverlight ToolKit<br />UI部品が足りないので<br />Blend SDK<br />Expression Blendは使わなくても、これは必須<br />Prism<br />MVVMサポート<br />DI的な使い方<br />テストサポート<br />Rx<br />非同期をLINQ的に簡単に扱える<br /> 4.Wc3の設計思想<br />
  39. 39. AGENDA<br />背景<br />Javaと.NET(C#)の違い<br />公開の仕方<br />Wc3の設計思想<br />通信部分の実装<br />認証機能<br />ログの出力<br />ファイルダウンロード<br />まとめ<br />2011/07/09<br />39<br />
  40. 40. HttpWebRequestを使います<br />Visual Studioの自動生成はwadlに対応してないので自分で実装<br />wadl: wsdlのREST API版<br />再送処理とかを考えるとWebClientより柔軟<br />2011/07/09<br />40<br />5.通信部分の実装<br />
  41. 41. 2011/07/09<br />41<br />5.通信部分の実装<br />非同期APIなんて面倒だ!!<br />
  42. 42. Rx使いましょう<br />非同期をLINQ的に簡単に<br />個人的におすすめの解説はこちら<br />http://www.slideshare.net/neuecc/reactive-extensions-8049041<br />Data Developer Center入りして開発プロジェクトとしても継続されそう<br />NuGetから取得可能<br />安定版もリリースされました<br />2011/07/09<br />42<br />5.通信部分の実装<br />
  43. 43. HTTP処理はクライアント側で<br />MSDNドキュメントに詳細があります<br />http://msdn.microsoft.com/en-us/library/dd920295%28v=vs.95%29.aspx<br />※ただし英語版で<br />クライアント側じゃないとできないこと<br />404以外のステータスコードの取得<br />エラー時のレスポンスボディの取得<br />気をつけること<br />CooKieなどは自前で管理(ブラウザは管理しない)<br />2011/07/09<br />43<br />5.通信部分の実装<br />
  44. 44. サンプルコード<br />2011/07/09<br />44<br />5.通信部分の実装<br />
  45. 45. JSON⇔C#、Javaのクラスを定義<br />2011/07/09<br />45<br />5.通信部分の実装<br />
  46. 46. サンプルコード<br />2011/07/09<br />46<br />5.通信部分の実装<br />
  47. 47. 2011/07/09<br />47<br />5.通信部分の実装<br />の前に<br />DEMO<br />
  48. 48. DEMOの構成<br />2011/07/09<br />48<br />5.通信部分の実装<br />ポートが違う場合も必須<br />clientaccesspolicy.xml<br />デバッグ起動<br />デバッグ起動<br />
  49. 49. 2011/07/09<br />49<br />5.通信部分の実装<br />DEMO<br />
  50. 50. AGENDA<br />背景<br />Javaと.NET(C#)の違い<br />公開の仕方<br />Wc3の設計思想<br />通信部分の実装<br />認証機能<br />ログの出力<br />ファイルダウンロード<br />まとめ<br />2011/07/09<br />50<br />
  51. 51. 認証方法(WCF使わない前提)<br />2011/07/09<br />51<br />6.認証機能<br />
  52. 52. Cookieを使う方法の1つ<br />ログイン成功時に、サーバー側でCookieを埋め込む<br />ユーザー/パスワードはDBに格納<br />パスワードは適宜ソルト付きハッシュ化&ストレッチングしてね<br />クライアント側はそのCookieを使ってリクエストを送信<br />Cookieでログイン中か判断<br />Cookieに秘密情報を入れるのはよろしくない<br />XSSとかあるとばれる<br />RESTAPIとは相性悪い<br />最初に必ずログインが必要だから<br />2011/07/09<br />52<br />6.認証機能<br />
  53. 53. サンプルコード<br />2011/07/09<br />53<br />6.認証機能<br />
  54. 54. 2011/07/09<br />54<br />6.認証機能<br />DEMO<br />
  55. 55. HTTPBasic/Digest認証を使う方法<br />HTTPで定義されている認証<br />RESTAPIとも比較的相性がよい<br />ダイアログが出てくるやつです<br />Basic認証は盗聴や改ざんが容易<br />せめて通信はHTTPSで<br />SilverlightではHTTP通信をクライアントにする必要があります<br />2011/07/09<br />55<br />6.認証機能<br />
  56. 56. サンプルコード<br />2011/07/09<br />56<br />6.認証機能<br />
  57. 57. 2011/07/09<br />57<br />6.認証機能<br />DEMO<br />
  58. 58. Azure Storage, AWS API認証方式<br />最近REST的なAPIで取り入れられている方式<br />あらかじめ1組の文字列(鍵)をクライアントとサーバーで共有<br />鍵から生成する一意な文字列をリクエストに付与<br />リピート攻撃を防ぐため現在時刻も入れる<br />API単位で認証するため、RESTとは相性よし<br />Silverlightから使う場合、鍵情報をメモリに乗せておかないといけない<br />2011/07/09<br />58<br />6.認証機能<br />
  59. 59. Azure Storage, AWS API認証方式<br />2011/07/09<br />59<br />6.認証機能<br />元のリクエスト文字列<br />受け取ったリクエスト<br />現在時刻<br />AccessKeyにひもづくSecretKey<br />DB<br />SecretKey<br />HMAC-SHA256署名<br />HMAC-SHA256署名<br />生成した署名<br />送信<br />生成した署名<br />AccessKey<br />受け取った署名<br />両者の一致を確認<br />
  60. 60. サンプルコード<br />2011/07/09<br />60<br />6.認証機能<br />
  61. 61. AGENDA<br />背景<br />Javaと.NET(C#)の違い<br />公開の仕方<br />Wc3の設計思想<br />通信部分の実装<br />認証機能<br />ログの出力<br />ファイルダウンロード<br />まとめ<br />2011/07/09<br />61<br />
  62. 62. ログをどうやってだそう・・・<br />2011/07/09<br />62<br />8.ログの出力<br />ブラウザでは、<br />Console.WriteLineしても<br />なにも起きない・・・<br />
  63. 63. そうだ、開発者ツールがある!<br />2011/07/09<br />63<br />8.ログの出力<br />
  64. 64. JavaScript経由で出力(旧)<br />2011/07/09<br />64<br />8.ログの出力<br />なぜか、Chromeでは正しく動作しない・・・<br />
  65. 65. JavaScript経由で出力(改)<br />2011/07/09<br />65<br />8.ログの出力<br />ホストするHTMLでscript書いておいて<br />Silverlightから呼び出し<br />
  66. 66. 2011/07/09<br />66<br />8.ログの出力<br />DEMO<br />
  67. 67. AGENDA<br />背景<br />Javaと.NET(C#)の違い<br />公開の仕方<br />Wc3の設計思想<br />通信部分の実装<br />認証機能<br />ログの出力<br />ファイルダウンロード<br />まとめ<br />2011/07/09<br />67<br />
  68. 68. Azure管理コンソールでこんなことできます<br />2011/07/09<br />68<br />9.ファイルダウンロード<br />
  69. 69. 疑問に思いませんでしたか?<br />2011/07/09<br />69<br />9.ファイルダウンロード<br />Silverlightではファイルは<br />保存ダイアログ経由でしか保存できないはず<br />デフォルトファイル名が指定できないとか、<br />呼び出せるスレッドが限定されているとかいろいろ使いづらい制約が・・・<br />
  70. 70. ブラウザからの実行<br />2011/07/09<br />70<br />9.ファイルダウンロード<br />何よりの違いは、<br />ブラウザからファイルを開けること<br />(ファイルタイプの関連付けが必要)<br />ちなみにOOB(OutOfBrowser)なら、起動処理をCOMにして呼び出すこともできます。<br />
  71. 71. これもJavaScript経由で実現できます<br />2011/07/09<br />71<br />9.ファイルダウンロード<br />追記:<br />実はNavigateメソッド使えばJavaScriptは必要ありませんでした。<br />
  72. 72. Navigateメソッドを使います<br />2011/07/09<br />72<br />9.ファイルダウンロード<br />_blank を指定して、<br />新しいウィンドウもしくはタブが開いて<br />ダウンロードが開始されます。<br />
  73. 73. ダウンロードさせるにはサーバーサイドも一工夫<br />2011/07/09<br />73<br />9.ファイルダウンロード<br />
  74. 74. 2011/07/09<br />74<br />9.ファイルダウンロード<br />DEMO<br />
  75. 75. AGENDA<br />背景<br />Javaと.NET(C#)の違い<br />公開の仕方<br />Wc3の設計思想<br />通信部分の実装<br />認証機能<br />ログの出力<br />ファイルダウンロード<br />まとめ<br />2011/07/09<br />75<br />
  76. 76. まとめ<br />Silverlightは好きなサーバーサイドテクノロジと一緒に使える<br />明確な境界(API)を作るこが必須<br />適切なフレームワークも大切<br />開発生産性の向上、個人のスキルに依存しない<br />通信・認証まわりは大事<br />みんなが書く必要はないので適宜ライブラリ化<br />非同期必須なのでRxがいいんじゃない<br />細かい機能が意外と求められる<br />ログ出力とかファイルダウンロードとか<br />2011/07/09<br />76<br />11.まとめ<br />
  77. 77. 2011/07/09<br />77<br />ご清聴ありがとうございました<br />

×