Featuring Project Silk & Liike楽しい "モダン" Web 開発のちょっとディープなお話日本マイクロソフト株式会社デベロッパー & プラットフォーム統括本部エバンジェリスト井上 章 (いのうえ あきら)blogs.m...
セッションのゴールSession Takeaways• Web 開発のトレンドと今後 を知る• Project Silk / Liike の概要 を学ぶ
アジェンダProject Silk / Liike• Web 開発のトレンド• patterns & practices Project Silk / Liike• Project Silk: Mileage Stats に見る  アーキテクチ...
Web 開発のトレンド
Productivity Future Vision近未来の IT, Cloud, Web ...• 不可欠な Web 技術 (HTTP 1.1, HTML5, CSS3 ...)• Web API の進化と普及 (REST, JSON ......
マルチデバイス エクスペリエンスDevices, Platforms, Browsers• クロス デバイス  • PC, スマートフォン, タブレット ...• クロス プラットフォーム  • iOS, Android, Windows Ph...
モダン Web アプリ エクスペリエンスSingle Page Application Architecture                                       ASP.NET                    ...
patterns & practices  Project Silk / Liike
patterns & practices ガイダンスマイクロソフト プラットフォームを使ったアプリケーションの設計開発および実装のリファレンス(ドキュメント & サンプルコード)patterns & practices MSDN ホーム:htt...
Project Silk and LiikeProject Silk     (シルク)Client-Side Web Development for Modern Browsersモダン ブラウザのためのクライアント サイド Web 開発ガイ...
Project Silk: Mileage Stats に見る      アーキテクチャとテクノロジー
Mileage Stats: アーキテクチャ                      Navigation                  BBQ Plug-in                    Layout Manager     ...
Mileage Stats: テクノロジー• BBQ Plug-in  • jQuery Back Button & Query Library • http://benalman.com/projects/jquery-bbq-plugin/...
JavaScript のモジュール化アプローチ
Modularity: モジュール性モジュール化の利点• モジュールの疎結合化と相互影響の低減、再利用性の向上• デバッグ、テスト、メンテナンスの容易性• チーム開発への対応JavaScript モジュール化アプローチ• JavaScript ...
モジュール種別とアプローチの選択モジュールの種類と役割UI モジュール               UI 要素 (コントロール等)Behavioral モジュール       要素への振る舞いを追加 (アニメーション等)            ...
JavaScript ObjectsJavaScript の基本的な        mstats.dataStore = {                            _data: {},モジュール実装手段             ...
jQuery Plug-ins                                           // Code example not in Mileage StatsjQuery を拡張するための             ...
jQuery UI Widgets                                          // tagger widgets definitionjQuery UI で提供される                   ...
Project Liike: Mileage Stats に見る     モバイル Web エクスペリエンス
レスポンシブ Web デザインモバイル Web エクスペリエンスCSS3 メディア クエリによる      div {                          font-family: Meiryo;スタイルとレイアウト変更     ...
デバイス検出とビューの切り替えモバイル Web エクスペリエンスASP.NET 4.5 によるビューの切り替え (Display Modes)• デバイス間で異なる HTML マークアップと UI エクスペリエンスの提供• サーバーサイドにおけ...
Single Page Application Architectureモバイル Web エクスペリエンス単一ページ構成のクライアント中心実装• JavaScript, Web API や HTML5 を活用した、優れた Web UX の提供 ...
Web 開発の今後 ...
言語とフレームワークとライブラリと...Web 開発の今後HTML5 / CSS3• Web 標準として急速に普及• マルチ プラットフォームにおける共通 UI マークアップ • 残るクロス ブラウザ・クロス プラットフォーム問題
言語とフレームワークとライブラリと ...Web 開発の今後JavaScript• 第一級のプログラミング言語としての進化と普及 • オブジェクト指向の知識と理解• JavaScript ライブラリの普及やサーバー サイドへの応用 • jQue...
サーバー サイドのサービス化とその利用Web 開発の今後進む Web API の利用• サーバー サイドのサービス インターフェースの実装と公開• 実装手段の選択、非同期処理、ステートレス ...クライアント サイド実装の多様化• Web アプ...
ネイティブ アプリ開発のための Web 技術Web 開発の今後応用が進む HTML5 + CSS3 + JavaScript• Windows 8: Windows ストア アプリ開発 • HTML5 + CSS3 + JavaScript +...
Web 開発の今後に向けて   開発者が避けては通れない Web 技術     HTML5 / CSS3 / JavaScript ...       最適な技術選択と  アプリケーション アーキテクチャの検討   複雑化するクライアント サイ...
リファレンスpatterns & practiceshttp://msdn.microsoft.com/en-us/library/ff921345Project Silk: Client-Side Web Development for Mo...
© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be...
Upcoming SlideShare
Loading in...5
×

Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話

1,719
-1

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,719
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
7
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話

  1. 1. Featuring Project Silk & Liike楽しい "モダン" Web 開発のちょっとディープなお話日本マイクロソフト株式会社デベロッパー & プラットフォーム統括本部エバンジェリスト井上 章 (いのうえ あきら)blogs.msdn.com/chack twitter.com/chack411
  2. 2. セッションのゴールSession Takeaways• Web 開発のトレンドと今後 を知る• Project Silk / Liike の概要 を学ぶ
  3. 3. アジェンダProject Silk / Liike• Web 開発のトレンド• patterns & practices Project Silk / Liike• Project Silk: Mileage Stats に見る アーキテクチャとテクノロジー• JavaScript のモジュール化アプローチ• Project Liike: Mileage Stats に見る モバイル Web エクスペリエンス• Web 開発の今後
  4. 4. Web 開発のトレンド
  5. 5. Productivity Future Vision近未来の IT, Cloud, Web ...• 不可欠な Web 技術 (HTTP 1.1, HTML5, CSS3 ...)• Web API の進化と普及 (REST, JSON ...)• サーバー ロジック と クライアント UI の疎結合• クライアント側実装の多様化 • HTML5, CSS3, ECMAScript 5 • マルチデバイス (PC, Tablet, Mobile …) • レスポンシブ Web デザイン http://www.microsoft.com/office/vision/
  6. 6. マルチデバイス エクスペリエンスDevices, Platforms, Browsers• クロス デバイス • PC, スマートフォン, タブレット ...• クロス プラットフォーム • iOS, Android, Windows Phone ...• クロス ブラウザー • Web 標準と HTML5 / CSS3 • 実装レベル差異への対応
  7. 7. モダン Web アプリ エクスペリエンスSingle Page Application Architecture ASP.NET HTML View HTTP Async View Model REST Web API JSON クライアント XML サーバー
  8. 8. patterns & practices Project Silk / Liike
  9. 9. patterns & practices ガイダンスマイクロソフト プラットフォームを使ったアプリケーションの設計開発および実装のリファレンス(ドキュメント & サンプルコード)patterns & practices MSDN ホーム:http://msdn.microsoft.com/en-us/library/ff921345.aspxWindows Azure GuidanceEnterprise Library GuidanceMobile Web GuidanceWindows Phone 7 Guidance…
  10. 10. Project Silk and LiikeProject Silk (シルク)Client-Side Web Development for Modern Browsersモダン ブラウザのためのクライアント サイド Web 開発ガイダンスhttp://silk.codeplex.com/Project Liike (リーケ)Building Modern Mobile Web Appsモダン モバイル ブラウザのためのクライアント サイド Web 開発ガイダンスhttp://msdn.microsoft.com/en-us/library/hh994907
  11. 11. Project Silk: Mileage Stats に見る アーキテクチャとテクノロジー
  12. 12. Mileage Stats: アーキテクチャ Navigation BBQ Plug-in Layout Manager Template Template jQuery TemplatesClient Pub/Sub jQuery UI Widget Widget Widget Widget Factory Data Manager Data Cache JavaScriptServer JSON Endpoints ASP.NET MVC
  13. 13. Mileage Stats: テクノロジー• BBQ Plug-in • jQuery Back Button & Query Library • http://benalman.com/projects/jquery-bbq-plugin/ • Ajax 処理におけるブラウザ履歴管理プラグイン• jQuery Templates Plug-in • http://api.jquery.com/category/plugins/templates/ • テンプレート レンダリング エンジン• Publish and Subscribe Pattern (pub/sub) • Object 間ルーズ コミュニケーションのためのデザインパターン • Mileage Stats では独自実装 (mstats.pubsub.js)• jQuery UI Widget Factory • jQuery UI で提供されるモジュール ビルディング ブロック
  14. 14. JavaScript のモジュール化アプローチ
  15. 15. Modularity: モジュール性モジュール化の利点• モジュールの疎結合化と相互影響の低減、再利用性の向上• デバッグ、テスト、メンテナンスの容易性• チーム開発への対応JavaScript モジュール化アプローチ• JavaScript Objects• jQuery Plug-ins • jQuery を拡張するための実装手段• jQuery UI Widgets • jQuery UI で提供される Widget Factory を使った実装
  16. 16. モジュール種別とアプローチの選択モジュールの種類と役割UI モジュール UI 要素 (コントロール等)Behavioral モジュール 要素への振る舞いを追加 (アニメーション等) UI に限定しないアプリケーション全体で必要とされる役割Infrastructure モジュール (データ アクセスや通信等)JavaScript のモジュール化へのアプローチ JavaScript Object jQuery Plug-ins jQuery UI WidgetsUI モジュール × ○ ◎Behavioral モジュール ○ ◎ ○Infrastructure モジュール ◎ ○ ×
  17. 17. JavaScript ObjectsJavaScript の基本的な mstats.dataStore = { _data: {},モジュール実装手段 get: function (token) { return this._data[token]; },Mileage Stats の set: function (token, payload) {JavaScript Objects 実装 }, this._data[token] = payload;mstats.pinnedsite.js clear: function (token) { this._data[token] = undefined;mstats.data.js },mstats.pubsub.js clearAll: function () { this._data = {};mstats.events.js } };...
  18. 18. jQuery Plug-ins // Code example not in Mileage StatsjQuery を拡張するための (function($) {モジュール実装方法 $.fn.doubleSizeMe = function() {• シンプルな実装 return this.each(function() { var $this = $(this),• JavaScript の複雑さを回避 width = $this.width(), height = $this.height();• jQuery ベースの容易な機能拡張 $this.width(width * 2); $this.height(height * 2); });jQuery Plug-ins 実装オフィシャル ガイドライン };http://docs.jquery.com/Plugins/Authoring })(jQuery); // How to use doubleSizeMe plug-in $(.icon).doubleSizeMe();
  19. 19. jQuery UI Widgets // tagger widgets definitionjQuery UI で提供される (function($) {Widget Factory を使った $.widget(qs.tagger, {モジュール実装 options: { dataUrl: jQuery.widget(ns.name, {...}); }, _create: function () {• ライフタイム、ステート、継承、テーマ、 ... Object/Widget との通信などで利点 }, destroy: function () {Mileage Stats の ... $.Widget.prototype.destroy.call(this);jQuery UI Widgets 実装 }mstats.status.js, mstats.summary.js ... }); }(jQuery));Widget QuickStart // How to use tagger widgetガイダンスでは独立した章とサンプルが用意 $(span[data-tag]).tagger({ dataUrl: http://example.com/});
  20. 20. Project Liike: Mileage Stats に見る モバイル Web エクスペリエンス
  21. 21. レスポンシブ Web デザインモバイル Web エクスペリエンスCSS3 メディア クエリによる div { font-family: Meiryo;スタイルとレイアウト変更 } font-size: 1em;• 単一 HTML マークアップによる ... UI エクスペリエンスの提供 @media only screen and (max-width: 640px) {• デザイン中心のマルチデバイス div { 対応手法 font-size: 0.5em; text-align: center; } }
  22. 22. デバイス検出とビューの切り替えモバイル Web エクスペリエンスASP.NET 4.5 によるビューの切り替え (Display Modes)• デバイス間で異なる HTML マークアップと UI エクスペリエンスの提供• サーバーサイドにおけるマルチデバイス対応手法
  23. 23. Single Page Application Architectureモバイル Web エクスペリエンス単一ページ構成のクライアント中心実装• JavaScript, Web API や HTML5 を活用した、優れた Web UX の提供 Visible UI HTML/CSS Web UI HTML/CSS/JS Navigation Application Layer MVC 4 APIs JavaScript Data Services Data Access Layer JSON/XML JavaScript Web API クライアント サーバー
  24. 24. Web 開発の今後 ...
  25. 25. 言語とフレームワークとライブラリと...Web 開発の今後HTML5 / CSS3• Web 標準として急速に普及• マルチ プラットフォームにおける共通 UI マークアップ • 残るクロス ブラウザ・クロス プラットフォーム問題
  26. 26. 言語とフレームワークとライブラリと ...Web 開発の今後JavaScript• 第一級のプログラミング言語としての進化と普及 • オブジェクト指向の知識と理解• JavaScript ライブラリの普及やサーバー サイドへの応用 • jQuery / jQuery UI / jQuery Mobile / Modernizr / knockout.js ... • サーバー サイド JavaScript "node.js"
  27. 27. サーバー サイドのサービス化とその利用Web 開発の今後進む Web API の利用• サーバー サイドのサービス インターフェースの実装と公開• 実装手段の選択、非同期処理、ステートレス ...クライアント サイド実装の多様化• Web アプリケーション アーキテクチャの変化• 非同期処理の知識と理解• マルチデバイス対応
  28. 28. ネイティブ アプリ開発のための Web 技術Web 開発の今後応用が進む HTML5 + CSS3 + JavaScript• Windows 8: Windows ストア アプリ開発 • HTML5 + CSS3 + JavaScript + WinRT APIs • Windows デベロッパー センター: http://dev.windows.com/• これまでも... • Windows デスクトップ ガジェット / Google デスクトップ ガジェット ...
  29. 29. Web 開発の今後に向けて 開発者が避けては通れない Web 技術 HTML5 / CSS3 / JavaScript ... 最適な技術選択と アプリケーション アーキテクチャの検討 複雑化するクライアント サイド実装への対応 最適な開発環境・ツールの選択 コーディング、デバッグ、テストへの支援
  30. 30. リファレンスpatterns & practiceshttp://msdn.microsoft.com/en-us/library/ff921345Project Silk: Client-Side Web Development for Modern Browsershttp://msdn.microsoft.com/en-us/library/hh396380Project Liike: Building Modern Mobile Web Appshttp://msdn.microsoft.com/en-us/library/hh994907MSDN ASP.NET デベロッパー センターhttp://msdn.microsoft.com/ja-jp/asp.net/THE TRUTH IS OUT THERE ~ 井上 章のブログ ~http://blogs.msdn.com/chack/
  31. 31. © 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×