Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Similar a ～初心者がこれから Web アプリの開発をするために～
Similar a ～初心者がこれから Web アプリの開発をするために～ (20)
Más de Oda Shinsuke
Más de Oda Shinsuke (20)
～初心者がこれから Web アプリの開発をするために～
- 1. モダンな Web アプリ開発 ガイドライン の紹介 ～初心者がこれから Web アプリの開発をするために～ HTML5 プログラミング生放送勉強会 第11回＠大阪 2011/11/19 お だ
- 2. 織田 信亮 (おだ しんすけ) 開発者してます SQLWorld 代表 http://d.hatena.ne.jp/odashinsuke/ @shinsukeoda HTML5 あんまり知りません jQuery すらほぼ初心者
- 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
- 6. Web アプリ開発ガイドラインって何？ Microsoft patterns & practices 設計/開発/実装のリファレンス集 http://msdn.microsoft.com/ja-jp/library/ff653621.aspx Project Silk Client-Side Web Development for Modern Browsers http://msdn.microsoft.com/en-us/library/hh396380.aspx http://silk.codeplex.com/
- 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. Project Silk を読むと…(主観) HTML の Web アプリケーションでどんな 事が出来るのか JavaScript / JavaScript のライブラリ の使い方とか勉強出来そう 子供が産まれました 個人の感想であり、（商品の）効果・効能をあらわすものではあり ません
- 9. 今日お話しする内容 Project Silk Readme Chapter 1 Chapter 2
- 10. Project Silk ってなに？ Web アプリを構築するためのガイダンス クロスブラウザ リッチな UI リッチな UI は JavaScript を大量に書 く メンテしやすい実装方法 モジュール方式 Mileage Stats というアプリを通して紹 介
- 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
- 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. 環境構築 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. Project Silk ダウンロード Project Silk - September 2011 http://www.microsoft.com/download/en/details.aspx ?id=27290 Silk-RTM.exe を実行し、任意の場所に解 凍 MileageStats フォルダ以下にプロジェク ト一式が出来る
- 16. 外部ライブラリ(NuGet) MileageStats.sln を開く NuGet Package Manager Console 起動 .InstallRequiredNuGetPackages.ps1 を 実行
- 19. 外部ライブラリ(JavaScript) jqPlot jQuery でチャート作成プラグイン https://bitbucket.org/cleonello/jqplot/downloads/ Jquery.jqplot.1.0.0a_r701.zip をダウンロード/解凍 次のファイルをコピーする
- 20. 外部ライブラリ(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
- 22. 動かしてみよう！
- 23. 出来そうなこと Open ID での認証 Jump List(Windows 7 タスクバー) Drag & Drop チャート
- 25. Web アプリの分布 Static サイト 静的な HTML ページ、CSS、画像から構成 ページ遷移は、フルリロード サーバーレンダラー サーバーサイドでページを組み立てる。 クライアントサイドのスクリプトでは、簡 単な検証やホバー効果、Ajax の呼び出し ページ遷移は、フルリロード クライアントサイドで スクリプト を多用してい ない ASP.NET アプリケーションがこれに該当
- 26. Web アプリの分布 ハイブリッドデザイン サーバーレンダラーに似てる リッチさを提供するクライアントサイドの JavaScript を多用 フルリロードをしないページと、フルリ ロードする幾つかのページで構成 Project Silk のサンプルアプリ である Mileage Stats はこのタイプ
- 27. Web アプリの分布 シングルページインターフェース ページ全体のロードは1回だけ ページの変更やデータのロードでもフルリ ロードせずに実行 Hotmail、Office Live、Twitter がこのタイプ
- 28. モダンなWebアプリケーションの特徴 標準に焦点を当てている 複数のプラットフォーム/デバイスで動かす ために、標準の規格を採用 対話的 ユーザーの操作にフィードバックを提供 (メッセージの表示/非表示や、マウスオー バー、ドラッグ&ドロップ等) モダンなブラウザで高速な JavaScript エ ンジンを活用
- 29. モダンなWebアプリケーションの特徴 ページ全体のリロードを控える ページ全体のリロードの回数を減らす リロードは遅い！それに使いにくい！ 非同期 データや HTML コンテンツを取得するため に、リロードを行わず Ajax を利用 非同期なので、UI がロックされない
- 30. モダンなWebアプリケーションの特徴 データ管理 クライアントサイドのデータをキャッシュ プリフェッチ(事前読込) クライアントサイドのパフォーマンスを向上 データのキャッシュは、サーバーへのアクセス回 数も減るため、サーバーリソースへの影響も少な くなる
- 31. アプリケーション構築時の考慮事項 チームスキル デザイナー UX、UI、グラフィックスを担当 クライアントサイドの開発者 UI やユーザーインタラクションの高度なプログラ ミングとテストを担当 サーバーサイドの開発者 web ページや業務機能やデータベースのプログラ ミングとテストを担当
- 32. アプリケーション構築時の考慮事項 テクノロジー Ajax JavaScript jQuery Modernizr ASP.NET MVC Razor DI(Dependency Injection)
- 33. Modernizr ブラウザーの機能/サポート状況を、CSS と JavaScript に公開する OSS の JavaScript ライブラリ geolocation, canvas, SVG, border-radius, 等 html タグに、CSS クラスを追加する サポートしていない場合は、”no-” から始まる スタイルシートを2パターン用意しておけば、 対応してる/してない時でUI を切り替えれる
- 35. アーキテクチャ 早い段階で、ブラウザ/バージョンのサ ポートする範囲を決める 古いバージョンを選ぶと、技術的な選択肢 が制限されユーザーエクスペリエンスにも 影響が出る shim や polyfill といった物を使うと、古 いブラウザでも似た様なことが出来るよう になるかも
- 36. アーキテクチャ Mileage Stats のクライアントサイド アーキテクチャを解説 構造 モジュール方式 通信 ナビゲーション データ
- 37. 構造 UX 最新のブラウザーで JavaScript 有効：魅 力的な UX JavaScript が無効/古いブラウザー：とり あえず表示可能 Progressive Enhancement 最初はサーバー側で HTML 作成 ブラウザが対応していたら、クライアント サイドで、どんどんリッチにする
- 38. 構造 jQuery Template HTML を生成するテンプレート データと文書構造を分離して、テストを容 易に！ ASP.NET MVC/ASP.NET Web Forms は jQuery Template を利用出来る
- 39. モジュール方式 アプリケーション全体を簡素化 責務の明確な境界を確立 懸念を分離 テストがし易い メンテナンスも容易 再利用が可能 jQuery UI Widget と JavaScript オブジェクトを使って、 モジュール化している
- 40. 通信 モジュール化で分割するけど、孤立はし ていない 直接通信 高レベルな Widget が低レベルな Widget を操作する際に使用(限定的) PUB/SUB での疎結合 パブリッシュ-サブスクライブ 方式 依存関係を減らす メッセージは独自定義可能
- 41. ナビゲーション ボタンやハイパーリンクのクリック時に フルリロードしない クライアントサイドでイベントを処理 jQuery BBQ プラグイン アドレスバーの URL を変更 特定のアプリケーションの状態を直接返せるので、 アドレスをブックマーク可能(ディープリンク) ブラウザの戻るボタンが機能する ページ内でのタブの変更とか
- 42. データ 単一のオブジェクトを介して Ajax 経由 で通信を行う 単一のオブジェクトにする利点 呼び出しのコードがシンプルになる データキャッシュの実装もしやすい キャッシュは、クロスブラウザの観点から、HTML5 local storage は使わず、JavaScript オブジェク トを利用 重いデータは、プリフェッチしておく
- 44. まとめ Express Edition でも動きます ここで紹介したのは、ほんの触りです。 コード全く紹介していません 続きは Web (英語)で そのうち訳されるかも？ 少しずつ 日本語訳 載せていってます http://w.livedoor.jp/odashinsuke/d/Proj ect%20Silk
- 45. 参考資料 Project Silk: Client-Side Web Development for Modern Browsers http://msdn.microsoft.com/en- us/library/hh396380.aspx patterns & practices: Project Silk http://silk.codeplex.com/