Mais conteúdo relacionado Semelhante a ~初心者がこれから Web アプリの開発をするために~ (20) Mais 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 フォルダ以下にプロジェク
ト一式が出来る
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
25. Web アプリの分布
Static サイト
静的な HTML ページ、CSS、画像から構成
ページ遷移は、フルリロード
サーバーレンダラー
サーバーサイドでページを組み立てる。
クライアントサイドのスクリプトでは、簡
単な検証やホバー効果、Ajax の呼び出し
ページ遷移は、フルリロード
クライアントサイドで スクリプト を多用してい
ない
ASP.NET アプリケーションがこれに該当
26. Web アプリの分布
ハイブリッドデザイン
サーバーレンダラーに似てる
リッチさを提供するクライアントサイドの
JavaScript を多用
フルリロードをしないページと、フルリ
ロードする幾つかのページで構成
Project Silk のサンプルアプリ である
Mileage Stats はこのタイプ
31. アプリケーション構築時の考慮事項
チームスキル
デザイナー
UX、UI、グラフィックスを担当
クライアントサイドの開発者
UI やユーザーインタラクションの高度なプログラ
ミングとテストを担当
サーバーサイドの開発者
web ページや業務機能やデータベースのプログラ
ミングとテストを担当
33. Modernizr
ブラウザーの機能/サポート状況を、CSS
と JavaScript に公開する OSS の
JavaScript ライブラリ
geolocation, canvas, SVG, border-radius,
等
html タグに、CSS クラスを追加する
サポートしていない場合は、”no-” から始まる
スタイルシートを2パターン用意しておけば、
対応してる/してない時でUI を切り替えれる
37. 構造
UX
最新のブラウザーで JavaScript 有効:魅
力的な UX
JavaScript が無効/古いブラウザー:とり
あえず表示可能
Progressive Enhancement
最初はサーバー側で HTML 作成
ブラウザが対応していたら、クライアント
サイドで、どんどんリッチにする
38. 構造
jQuery Template
HTML を生成するテンプレート
データと文書構造を分離して、テストを容
易に!
ASP.NET MVC/ASP.NET Web Forms は jQuery
Template を利用出来る
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/