1. Featuring Project Silk & Liike
楽しい "モダン" Web 開発のちょっとディープなお話
日本マイクロソフト株式会社
デベロッパー & プラットフォーム統括本部
エバンジェリスト
井上 章 (いのうえ あきら)
blogs.msdn.com/chack twitter.com/chack411

2. セッションのゴール
Session Takeaways
• Web 開発のトレンドと今後 を知る
• Project Silk / Liike の概要 を学ぶ

3. アジェンダ
Project Silk / Liike
• Web 開発のトレンド
• patterns & practices Project Silk / Liike
• Project Silk: Mileage Stats に見る
アーキテクチャとテクノロジー
• JavaScript のモジュール化アプローチ
• Project Liike: Mileage Stats に見る
モバイル Web エクスペリエンス
• Web 開発の今後

4. Web 開発のトレンド

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. マルチデバイス エクスペリエンス
Devices, Platforms, Browsers
• クロス デバイス
• PC, スマートフォン, タブレット ...
• クロス プラットフォーム
• iOS, Android, Windows Phone ...
• クロス ブラウザー
• Web 標準と HTML5 / CSS3
• 実装レベル差異への対応

7. モダン Web アプリ エクスペリエンス
Single Page Application Architecture
ASP.NET
HTML
View
HTTP
Async
View
Model REST Web API
JSON
クライアント XML サーバー

8. patterns & practices
Project Silk / Liike

9. patterns & practices ガイダンス
マイクロソフト プラットフォームを使った
アプリケーションの設計開発および実装のリファレンス
（ドキュメント & サンプルコード）
patterns & practices MSDN ホーム:
http://msdn.microsoft.com/en-us/library/ff921345.aspx
Windows Azure Guidance
Enterprise Library Guidance
Mobile Web Guidance
Windows Phone 7 Guidance
…

10. Project Silk and Liike
Project 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. Project Silk: Mileage Stats に見る
アーキテクチャとテクノロジー

12. Mileage Stats: アーキテクチャ
Navigation BBQ Plug-in
Layout Manager
Template Template jQuery
Templates
Client
Pub/Sub
jQuery UI
Widget Widget Widget Widget Factory
Data Manager Data Cache JavaScript
Server
JSON Endpoints ASP.NET MVC

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. JavaScript の
モジュール化アプローチ

15. Modularity: モジュール性
モジュール化の利点
• モジュールの疎結合化と相互影響の低減、再利用性の向上
• デバッグ、テスト、メンテナンスの容易性
• チーム開発への対応
JavaScript モジュール化アプローチ
• JavaScript Objects
• jQuery Plug-ins
• jQuery を拡張するための実装手段
• jQuery UI Widgets
• jQuery UI で提供される Widget Factory を使った実装

16. モジュール種別とアプローチの選択
モジュールの種類と役割
UI モジュール UI 要素 (コントロール等)
Behavioral モジュール 要素への振る舞いを追加 (アニメーション等)
UI に限定しないアプリケーション全体で必要とされる役割
Infrastructure モジュール
(データ アクセスや通信等)
JavaScript のモジュール化へのアプローチ
JavaScript Object jQuery Plug-ins jQuery UI Widgets
UI モジュール × ○ ◎
Behavioral モジュール ○ ◎ ○
Infrastructure モジュール ◎ ○ ×

17. JavaScript Objects
JavaScript の基本的な 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. jQuery Plug-ins
// Code example not in Mileage Stats
jQuery を拡張するための (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. jQuery UI Widgets
// tagger widgets definition
jQuery 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. Project Liike: Mileage Stats に見る
モバイル Web エクスペリエンス

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. デバイス検出とビューの切り替え
モバイル Web エクスペリエンス
ASP.NET 4.5 によるビューの切り替え (Display Modes)
• デバイス間で異なる HTML マークアップと UI エクスペリエンスの提供
• サーバーサイドにおけるマルチデバイス対応手法

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. Web 開発の今後 ...

25. 言語とフレームワークとライブラリと...
Web 開発の今後
HTML5 / CSS3
• Web 標準として急速に普及
• マルチ プラットフォームにおける共通 UI マークアップ
• 残るクロス ブラウザ・クロス プラットフォーム問題

26. 言語とフレームワークとライブラリと ...
Web 開発の今後
JavaScript
• 第一級のプログラミング言語としての進化と普及
• オブジェクト指向の知識と理解
• JavaScript ライブラリの普及やサーバー サイドへの応用
• jQuery / jQuery UI / jQuery Mobile / Modernizr / knockout.js ...
• サーバー サイド JavaScript "node.js"

27. サーバー サイドのサービス化とその利用
Web 開発の今後
進む Web API の利用
• サーバー サイドのサービス インターフェースの実装と公開
• 実装手段の選択、非同期処理、ステートレス ...
クライアント サイド実装の多様化
• Web アプリケーション アーキテクチャの変化
• 非同期処理の知識と理解
• マルチデバイス対応

28. ネイティブ アプリ開発のための Web 技術
Web 開発の今後
応用が進む HTML5 + CSS3 + JavaScript
• Windows 8: Windows ストア アプリ開発
• HTML5 + CSS3 + JavaScript + WinRT APIs
• Windows デベロッパー センター:
http://dev.windows.com/
• これまでも...
• Windows デスクトップ ガジェット / Google デスクトップ ガジェット ...

29. Web 開発の今後に向けて
開発者が避けては通れない Web 技術
HTML5 / CSS3 / JavaScript ...
最適な技術選択と
アプリケーション アーキテクチャの検討
複雑化するクライアント サイド実装への対応
最適な開発環境・ツールの選択
コーディング、デバッグ、テストへの支援

30. リファレンス
patterns & practices
http://msdn.microsoft.com/en-us/library/ff921345
Project Silk: Client-Side Web Development for Modern Browsers
http://msdn.microsoft.com/en-us/library/hh396380
Project Liike: Building Modern Mobile Web Apps
http://msdn.microsoft.com/en-us/library/hh994907
MSDN ASP.NET デベロッパー センター
http://msdn.microsoft.com/ja-jp/asp.net/
THE TRUTH IS OUT THERE ～ 井上 章のブログ ～
http://blogs.msdn.com/chack/

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.