プレゼン資料 20141222f
32
ASP.NET で ででで Ajax でで 2014 年 12 年 22 年 © ででで 1 JAZUG 年年 ( 年年年年 ) 年年年年年
-
Upload
echigoya-jp -
Category
Software
-
view
274 -
download
3
Transcript of プレゼン資料 20141222f
ASP.NET でお手軽 Ajax 実装
2014 年 12 月 22 日
© 越後屋 1
JAZUG 福岡 ( ふくあず ) 年末勉強会
はじめに
© 越後屋 2
こへだ [LINEスタンプ販売中 ]@koedahttps://twitter.com/koeda/status/507491537744191488
←ここらへん
意識高い系の人 wなのでやさしく見守ってください
自己紹介
© 越後屋 3
長濱 義道
別名、越後屋です。
主に BtoB プロジェクトの PM をやっています。PMP(Project Management Professional) #1416635コーディングは好きですが、第一線は退いています。 ( という体 )プレイングマネージャなんてものは身も心もプロジェクトも潰します。
最近は技術者のはずなのにしゃべって食べている感がとてもあります。
Twitter ： gnanormal真面目に仕事関係のつぶやきをしています。
あらためまして…
© 越後屋 4
修羅の国からこんばんは！Homage to Naohiro Chikita, MS MVP
なぜ今頃 Ajax の話？
Azure の勉強会なのですが、Azure を採用する場合はWeb サイト ( サービス ) が Azure 上で稼働し、その Web サイトの開発に採用されるのはASP.NET が多いかと思います。※( 忘年会から参加予定のとある MS MVP は OSS での開発に力を入れていますが… )
そこで当然のように実装されるようになったAjax についてお話したいと思います。
※ エンタープライズにおける Azure 開発調査 越後屋 2014.12
© 越後屋 5
余談ですが…今回の内容は ASP.NET の Ajax お手軽実装であり、ASP.NET MVC の Ajax お手軽実装ではありません。
とある MS MVP さんが「 WebForm(ASP.NET) 」ｵﾜﾀｰｽ ( 超訳 ) と言われていましたが、個人的には MV* で開発するならASP.NET MVC に拘る必要がなく、他の言語 ( フレームワーク ) でもいいと思いますし、今までの経緯から察するとMicrosoft が WebForm をなくすというのは考えにくいと思っています。
© 越後屋 6
■ 質問 最近の越後屋さんは SPA や TypeScript の話ばかりしているのに 今回に限って ASP.NET を押すって なにか腑に落ちません。
■ 回答 ﾀﾞﾏｯﾃﾛ この後の忘年会でお酒が入って ( ご要望があれば ) いろいろと詳しく話します！
© 越後屋 7
いや、真面目な話…
2014 年春頃に Azure が大幅な値下げ↓
保守的な企業内においてもクラウドでの開発、運用に対して
かなり現実味を帯び始める↓
ASP.NET や Ajax に関しての問い合わせや講習、研修依頼が各企業から格段に増える
© 越後屋 8
ここ最近の話①
■ とある顧客との会話 ( 要約 )
顧客「 VS2008 まであった Control Toolkit※ が VS2010 では使えなくなっていて Ajax の実装が面倒になったんですよね。 なんでなくなったんですかねぇ…」
越 「 VS2010 から標準機能になりましたよ？」
顧客「！！！」※ 正確には ASP.NET AJAX Control Toolkit
© 越後屋 9
ここ最近の話②
■ とある修羅イバー との会話 ( 要約 )
越 「 ASP.NET で Ajax の実装は楽ですよね。 あれを知ると jQuery なんかで 実装するってとても面倒に感じますよね。」
修羅「え？そんなに簡単なんですか？」
越 「ええ、 VS の GUI でこうやってこうやって…」
修羅「！！！」© 越後屋 10
ここ最近の話③
■ とある顧客との会話 ( 要約 )
顧客「 ASP.NET で Ajax を実装すると 意図しない動きをするので助けて！」
越 「 Ajax コントロールの範囲、 間違ってませんか？」
顧客「！！！」
© 越後屋 11
ここまでのまとめ
© 越後屋 12
・とても簡単な ASP.NET の Ajax 実装が 予想以上に普及していない
・実装の仕方があまり理解されていない
・参考にできる文献などが少なく※
エンジニアが自己解決できていない
※ その環境に適した有用な情報かどうか判断しづらい状況
代表的な問題を解決します！
•消えた Control Toolkit• 実装方法•注意点
※ このスライド以降、 Ajax と非同期処理いう文言が混在していますが、 同義として扱っていますのでご注意ください
© 越後屋 13
代表的な問題を解決します！
•消えた Control Toolkit• 実装方法•注意点
© 越後屋 14
Control Toolkit はどこに？
VS2008 までは ASP.NET AJAX やControl Toolkit のインストールが必要でした。
しかし、 VS2010以降は標準機能となっています。
© 越後屋 15
VS2010
© 越後屋 16
VS2012
© 越後屋 17
最新の VS
VS2013 と VS2015 Preview※はAzure を使用して
確認してみましょう。
※Connect(); で Visual Studio 14 が 正式に Visual Studio 2015 となり、 Preview がリリースされています ( 日本語対応版あります！ )
© 越後屋 18
代表的な問題を解決します！
•消えた Control Toolkit• 実装方法•注意点
© 越後屋 19
実装方法
①ScriptManager の配置
②UpdatePanel の配置
③非同期させるコントールを ②で配置した UpdatePanel 内に配置
④UpdatePanel のプロパティで Triggers に非同期イベントを追加
⑤非同期イベントの実装
⑤以外はすべて GUI操作で完結します！
© 越後屋 20
ということで…
© 越後屋 21
やりましょう ( 違 )Homage to Masayoshi Son
IE ちゃん！
© 越後屋 22
漢語太郎 /3日目東レ 13a@kngtrhttps://twitter.com/kngtr/status/404478911368531968/photo/1
おまけ
• 非同期処理中になにか表示したい場合、 ( 「お待ちください」などの表示 ) BlockUI を使わずに UpdateProgress を 配置することで簡単に実装できます。
※もちろん GUI操作です ※ BlockUI での実装は結構手間が かかります
© 越後屋 23
代表的な問題を解決します！
•消えた Control Toolkit• 実装方法•注意点
© 越後屋 24
注意点①
• 非同期でも PageLoad は発生します
例：非同期処理が走ると表示していた 内容が消えた IsPostBackだけの分岐では 初期化処理などが想定外の動きをします。 ⇒ ScriptManager.IsInAsyncPostBack で 分岐するロジックを追加する
© 越後屋 25
注意点②
• 部分更新するもの以外をUpdatePanel に配置しない
例：非同期処理が走ると表示していた 内容が消えた 注意点①との複合的な問題となり ViewState に格納した内容が 消えたりします
© 越後屋 26
注意点③
• 必要以上に使わない
例： UpdatePanel を多数配置して Ajax を実装したらとても遅くなった
ページデータをすべてサーバ側に送って 該当 UpdatePanel 内のコントールのみを ブラウザ更新する処理です。
© 越後屋 27
注意点③’
ViewState も送受信の対象になります！
何も考えずに何でも ViewState に突っ込んでいると遅くなります
⇒必要なものだけ ViewState に入れる！ また、 ViewStateMode を 正しく設定しておく！
© 越後屋 28
注意点④
• UpdatePanel 内で想定外の部分が 更新される
例： UpdatePanel 内で UpdatePanel を 入れ子にしている
親子関係により更新対象が決まります。 ⇒親子の UpdateMode を設定する
© 越後屋 29
まとめ
ASP.NET で UpdatePanel を使用したAjax 実装はとても簡単です。
正しい使用方法や陥りやすいワナ事象を抑えておけば問題なく使えます。
これを機に Ajax をお手軽実装しませんか？
© 越後屋 30
© 越後屋 31
ご清聴ありがとうございました。
なにかありましたらお気軽に声をかけてください。
参考
・ UpdatePanel コントロールの概要
http://msdn.microsoft.com/ja-jp/library/bb386454.aspx
・ 2 つの AJAX ：「 jQuery AJAX API 」と「 ASP.NET AJAX 」
http://codezine.jp/article/detail/6898・クライアント スクリプト内の UpdateProgress
コントロールのプログラミング
http://msdn.microsoft.com/ja-jp/library/bb386518%28v=vs.100%29.aspx© 越後屋 32
![プレゼン資料 Version 20171018(TC協会用）.ppt [ … Microsoft PowerPoint - プレゼン資料_Version_20171018(TC協会用）.ppt [互換モード] Author 2970013 Created](https://static.fdocuments.net/doc/165x107/5ced206188c9935f398cf61c/-version-20171018tcppt-microsoft-powerpoint-.jpg)
