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