~初心者がこれから Web アプリの開発をするために~

3,582 views

Published on

HTML5 プログラミング生​放送勉強会 第11回@大阪

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

No Downloads
Views
Total views
3,582
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
11
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

~初心者がこれから Web アプリの開発をするために~

  1. 1. モダンな Web アプリ開発 ガイドライン の紹介~初心者がこれから Web アプリの開発をするために~ HTML5 プログラミング生放送勉強会 第11回@大阪 2011/11/19 お だ
  2. 2. 織田 信亮 (おだ しんすけ)開発者してますSQLWorld 代表http://d.hatena.ne.jp/odashinsuke/@shinsukeodaHTML5 あんまり知りませんjQuery すらほぼ初心者
  3. 3. 最近の活動プログラミング生放送勉強会 第9回@大阪 開発を彩る技術たち http://pronama.wordpress.com/2011/06/22/pronama-9-report/第1回Jenkins勉強会 in 大阪 .NET なプロジェクトでも Jenkins を使っ てみた https://wiki.jenkins- ci.org/pages/viewpage.action?pageId=58002673
  4. 4. 今日お話しする内容Web アプリ開発ガイドラインって何?環境構築どんな事が出来るの?導入アーキテクチャまとめ
  5. 5. 今日お話しする内容Web アプリ開発ガイドラインって何?環境構築どんな事が出来るの?導入アーキテクチャまとめ
  6. 6. Web アプリ開発ガイドラインって何?Microsoft patterns & practices 設計/開発/実装のリファレンス集 http://msdn.microsoft.com/ja-jp/library/ff653621.aspxProject Silk Client-Side Web Development for Modern Browsers http://msdn.microsoft.com/en-us/library/hh396380.aspx http://silk.codeplex.com/
  7. 7. patterns & practices (日本語)幾つか紹介 アプリケーション アーキテクチャガイド 2.0 http://www.microsoft.com/japan/msdn/vstudio/2010/solutions/archite cture/ Microsoft エンタープライズ ライブラリ 開発者向けガイダンス http://msdn.microsoft.com/ja-jp/library/ff953181(PandP.50).aspx Windows Phone 7の開発者向けガイダンス http://msdn.microsoft.com/ja-jp/library/gg490765.aspx
  8. 8. Project Silk を読むと…(主観) HTML の Web アプリケーションでどんな 事が出来るのか JavaScript / JavaScript のライブラリ の使い方とか勉強出来そう 子供が産まれました 個人の感想であり、(商品の)効果・効能をあらわすものではあり ません
  9. 9. 今日お話しする内容 Project Silk Readme Chapter 1 Chapter 2
  10. 10. Project Silk ってなに? Web アプリを構築するためのガイダンス クロスブラウザ リッチな UI リッチな UI は JavaScript を大量に書 く メンテしやすい実装方法 モジュール方式 Mileage Stats というアプリを通して紹 介
  11. 11. Project Silk の想定読者 Web 開発者 HTML, CSS, JavaScript, jQuery, ASP.NET MVC の経験があること JavaScript Object literals, immediate functions, closures, object prototypes, scoping rules jQuery Selectors, wrapped sets, chaining
  12. 12. 今日お話しする内容Web アプリ開発ガイドラインって何?環境構築どんな事が出来るの?導入アーキテクチャまとめ
  13. 13. 必須環境 VS2010 Pro以上 VS2010 SP1 ASP.NET MVC 3 SQL Server Compact 4.0 Entity Framework 4.1 - Update 1 NuGet v1.4以上 IE9 or 他のモダンブラウザーVisual Web Developer 2010 Expressでも大丈夫!※一部開けないプロジェクト有
  14. 14. 環境構築Microsoft Web Platform Installer 3.0でインストール Visual Web Developer 2010 Express VS2010 SP1 ASP.NET MVC 3 SQL Server Compact 4.0 Entity Framework 4.1 - Update 1
  15. 15. Project Silk ダウンロード Project Silk - September 2011 http://www.microsoft.com/download/en/details.aspx ?id=27290 Silk-RTM.exe を実行し、任意の場所に解 凍 MileageStats フォルダ以下にプロジェク ト一式が出来る
  16. 16. 外部ライブラリ(NuGet)MileageStats.sln を開くNuGet Package Manager Console 起動.InstallRequiredNuGetPackages.ps1 を実行
  17. 17. 外部ライブラリ(JavaScript) jqPlot jQuery でチャート作成プラグイン https://bitbucket.org/cleonello/jqplot/downloads/ Jquery.jqplot.1.0.0a_r701.zip をダウンロード/解凍 次のファイルをコピーする
  18. 18. 外部ライブラリ(JavaScript) MileageStatsMileageStats.WebScripts distexcanvas.min.js distjquery.jqplot.min.js distpluginsjqplot.cursor.min.js distpluginsjqplot.dateAxisRenderer.min.js distpluginsjqplot.canvasAxisTickRenderer.min.js distpluginsjqplot.canvasTextRenderer.min.js MileageStatsMileageStas.WebContent distjquery.jqplot.css
  19. 19. 今日お話しする内容Web アプリ開発ガイドラインって何?環境構築どんな事が出来るの?導入アーキテクチャまとめ
  20. 20. 動かしてみよう!
  21. 21. 出来そうなことOpen ID での認証Jump List(Windows 7 タスクバー)Drag & Dropチャート
  22. 22. 今日お話しする内容Web アプリ開発ガイドラインって何?環境構築どんな事が出来るの?導入アーキテクチャまとめ
  23. 23. Web アプリの分布Static サイト 静的な HTML ページ、CSS、画像から構成 ページ遷移は、フルリロードサーバーレンダラー サーバーサイドでページを組み立てる。 クライアントサイドのスクリプトでは、簡 単な検証やホバー効果、Ajax の呼び出し ページ遷移は、フルリロード クライアントサイドで スクリプト を多用してい ない ASP.NET アプリケーションがこれに該当
  24. 24. Web アプリの分布ハイブリッドデザイン サーバーレンダラーに似てる リッチさを提供するクライアントサイドの JavaScript を多用 フルリロードをしないページと、フルリ ロードする幾つかのページで構成 Project Silk のサンプルアプリ である Mileage Stats はこのタイプ
  25. 25. Web アプリの分布シングルページインターフェース ページ全体のロードは1回だけ ページの変更やデータのロードでもフルリ ロードせずに実行 Hotmail、Office Live、Twitter がこのタイプ
  26. 26. モダンなWebアプリケーションの特徴標準に焦点を当てている 複数のプラットフォーム/デバイスで動かす ために、標準の規格を採用対話的 ユーザーの操作にフィードバックを提供 (メッセージの表示/非表示や、マウスオー バー、ドラッグ&ドロップ等) モダンなブラウザで高速な JavaScript エ ンジンを活用
  27. 27. モダンなWebアプリケーションの特徴ページ全体のリロードを控える ページ全体のリロードの回数を減らす リロードは遅い!それに使いにくい!非同期 データや HTML コンテンツを取得するため に、リロードを行わず Ajax を利用 非同期なので、UI がロックされない
  28. 28. モダンなWebアプリケーションの特徴データ管理 クライアントサイドのデータをキャッシュ プリフェッチ(事前読込) クライアントサイドのパフォーマンスを向上 データのキャッシュは、サーバーへのアクセス回 数も減るため、サーバーリソースへの影響も少な くなる
  29. 29. アプリケーション構築時の考慮事項チームスキル デザイナー UX、UI、グラフィックスを担当 クライアントサイドの開発者 UI やユーザーインタラクションの高度なプログラ ミングとテストを担当 サーバーサイドの開発者 web ページや業務機能やデータベースのプログラ ミングとテストを担当
  30. 30. アプリケーション構築時の考慮事項テクノロジー Ajax JavaScript jQuery Modernizr ASP.NET MVC Razor DI(Dependency Injection)
  31. 31. Modernizr ブラウザーの機能/サポート状況を、CSS と JavaScript に公開する OSS の JavaScript ライブラリ geolocation, canvas, SVG, border-radius, 等 html タグに、CSS クラスを追加する サポートしていない場合は、”no-” から始まる スタイルシートを2パターン用意しておけば、 対応してる/してない時でUI を切り替えれる
  32. 32. 今日お話しする内容Web アプリ開発ガイドラインって何?環境構築どんな事が出来るの?導入アーキテクチャまとめ
  33. 33. アーキテクチャ早い段階で、ブラウザ/バージョンのサポートする範囲を決める 古いバージョンを選ぶと、技術的な選択肢 が制限されユーザーエクスペリエンスにも 影響が出る shim や polyfill といった物を使うと、古 いブラウザでも似た様なことが出来るよう になるかも
  34. 34. アーキテクチャMileage Stats のクライアントサイドアーキテクチャを解説 構造 モジュール方式 通信 ナビゲーション データ
  35. 35. 構造UX 最新のブラウザーで JavaScript 有効:魅 力的な UX JavaScript が無効/古いブラウザー:とり あえず表示可能Progressive Enhancement 最初はサーバー側で HTML 作成 ブラウザが対応していたら、クライアント サイドで、どんどんリッチにする
  36. 36. 構造jQuery Template HTML を生成するテンプレート データと文書構造を分離して、テストを容 易に! ASP.NET MVC/ASP.NET Web Forms は jQuery Template を利用出来る
  37. 37. モジュール方式アプリケーション全体を簡素化責務の明確な境界を確立懸念を分離テストがし易いメンテナンスも容易再利用が可能 jQuery UI Widget と JavaScript オブジェクトを使って、 モジュール化している
  38. 38. 通信モジュール化で分割するけど、孤立はしていない直接通信 高レベルな Widget が低レベルな Widget を操作する際に使用(限定的)PUB/SUB での疎結合 パブリッシュ-サブスクライブ 方式 依存関係を減らす メッセージは独自定義可能
  39. 39. ナビゲーションボタンやハイパーリンクのクリック時にフルリロードしないクライアントサイドでイベントを処理jQuery BBQ プラグイン アドレスバーの URL を変更 特定のアプリケーションの状態を直接返せるので、 アドレスをブックマーク可能(ディープリンク) ブラウザの戻るボタンが機能する ページ内でのタブの変更とか
  40. 40. データ単一のオブジェクトを介して Ajax 経由で通信を行う単一のオブジェクトにする利点 呼び出しのコードがシンプルになる データキャッシュの実装もしやすい キャッシュは、クロスブラウザの観点から、HTML5 local storage は使わず、JavaScript オブジェク トを利用重いデータは、プリフェッチしておく
  41. 41. 今日お話しする内容Web アプリ開発ガイドラインって何?環境構築どんな事が出来るの?導入アーキテクチャまとめ
  42. 42. まとめExpress Edition でも動きますここで紹介したのは、ほんの触りです。 コード全く紹介していません続きは Web (英語)で そのうち訳されるかも?少しずつ 日本語訳 載せていってます http://w.livedoor.jp/odashinsuke/d/Proj ect%20Silk
  43. 43. 参考資料Project Silk: Client-Side WebDevelopment for Modern Browsers http://msdn.microsoft.com/en- us/library/hh396380.aspxpatterns & practices: Project Silk http://silk.codeplex.com/

×