Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Microsoft MVP ComCamp–Webcast 1stround. 
Universal Appとは? -デバイスに依存しないアプリケーション開発-
Today’s goal 
今後の展望 
背景 
トレンド 
開発方法
Name 
鈴木孝明 
Twitter Account 
@xin9le 
Award 
Microsoft MVP for Visual C# 
Web Site 
http://xin9le.net 
About Me
デバイス非依存なアプリケーションの必要性 
背景
様々なデバイスの登場 
多様な 
画面サイズ 
Phone 
Tablet 
PC
加速するIoT(Internet of Things) 
モノと 
ネットの 
融合 
さらに 
広がるIT
Apple Watch
Google Glass
別端末でも同一のサービスを提供 
モバイルと 
ビジネスの 
融合 
既存 
サービスの 
活用
注目されるBYOD (個人端末活用) 
個人所有の 
デバイスは 
バラバラ 
企業側の 
コスト削減 
2台持ち不要 
効率的な 
業務の遂行
モバイル開発のアプローチ 
リッチな体験 
Cross-platform apps 
Universal Windows apps 
Browser-based apps
クロスプラットフォームなモバイルアプリケーション開発
対象プラットフォーム 
iOS / Android / Mac 
Xamarinの中身 
ネイティブAPIのC#ラッパー+ 基本クラスライブラリ(BCL)群 
上記プラットフォームで動作する.NET環境 
Xamarinとは
開発プラットフォーム 
Native UI 
C# + AXML 
Native UI 
C# + XAML 
Native UI 
C# + XIB 
コード共有 
統合された 
開発環境
ネイティブAPI カバー率100% 
Xamarin.iOS 
Xamarin.Android
Xamarin.Android 
Xamarin.iOS 
アプリのビルド
Xamarin.Forms 
ネイティブ 
実行 
ひとつの 
C#コード 
主要な3つの 
Mobile 
Platform 
40以上の 
コントロール
Xamarin.Formsのコード例 
http://xamarin.com/forms
製品 
グレード 
価格(1ユーザー/年) 
Xamarin.Android 
Business 
¥127,800 
Enterprise 
¥243,000 
Xamarin.iOS 
Business 
¥127,800 
Enterpr...
オンライン講座 
http://xamarin.com/university 
製品ダウンロード 
http://xamarin.com/download 
さあ、Xamariましょう
Windowsデバイスにおけるプラットフォームを超えたアプリケーション構築 
UnivarsalWindows App
各社のモバイル展開アプローチ
対象プラットフォーム 
Windowsストアアプリ/ Windows Phone / Xbox One※ 
コード共有による開発生産性を提供 
ロジックやコントロール、アセット等を共有 
デバイスごとに発生していた開発/保守コストを削減 
Un...
Shared Project 
3つの 
プロジェクト 
構成 
デバイス用 
からSharedを 参照 
Xamarinでも 
利用可能
プログラミングモデル
Windows 9で 
RT / Phoneが統合される予定
Web技術をベースにしたハイブリッド型のモバイルアプリ開発
対象プラットフォーム 
iOS / Android / Windows Phone 
Web技術を利用 
各デバイスのブラウザで描画 
ネイティブAPIのJavaScriptラッパー 
Apache Cordovaとは 
HTML | CSS ...
プログラミングモデル
プラットフォームを超えたコードの再利用 
再利用性の追求
Portable Class Library 
Windows Phone 
Windows Store Apps 
.NET Framework 
複数環境で 
コード共有 
Xamarin 
Silverlight 
Xbox 
なども可
MVVM (Model -View -ViewModel) 
View 
ViewModel 
Model 
Data Binding 
Commands 
Notifications 
UI / UI Logic 
Presentaion 
...
多様化する画面解像度への柔軟な対応 
画面レイアウト
様々な画面解像度 
4096×2160 
2560 ×1600 
1920 ×1080 
1024 ×768
画面の向き 
Portrait 
Landscape 
レイアウト 
変更による 
UI最適化
絶対配置 
位置や大きさが要素に直接指定されて決まる 
リサイズはイベントをフックして自前で位置と大きさを再計算 
相対配置 
周りの要素とそれらの関係で位置や大きさが決まる 
リサイズはフレームワークによる自動制御 
絶対配置と相対配置
モダンUIは相対配置が基本 
Web 
Windows 
iOS 
Android 
XAML 
Auto Layout 
Layout 
CSS 3
Mobile First / Cloud First 時代のトレンドをおさらい 
まとめ
これだけは押さえよう 
相対配置 
Xamarin 
Universal 
Windows 
App 
Apache 
Cordova 
開発生産性 
を追求 
MVVM 
多様な 
デバイスを 
受け入れる 
Portable 
Class ...
Enjoy Universal App!! 
Thank you
For your happy developer life. 
Microsoft MVP ComCamp
Universal Appとは? -デバイスに依存しないアプリケーション開発-
Universal Appとは? -デバイスに依存しないアプリケーション開発-
Upcoming SlideShare
Loading in …5
×

Universal Appとは? -デバイスに依存しないアプリケーション開発-

2,169 views

Published on

2014/09/24
Microsoft MVP ComCamp – Webcast 1st round.
発表資料

Published in: Technology
  • Be the first to comment

Universal Appとは? -デバイスに依存しないアプリケーション開発-

  1. 1. Microsoft MVP ComCamp–Webcast 1stround. Universal Appとは? -デバイスに依存しないアプリケーション開発-
  2. 2. Today’s goal 今後の展望 背景 トレンド 開発方法
  3. 3. Name 鈴木孝明 Twitter Account @xin9le Award Microsoft MVP for Visual C# Web Site http://xin9le.net About Me
  4. 4. デバイス非依存なアプリケーションの必要性 背景
  5. 5. 様々なデバイスの登場 多様な 画面サイズ Phone Tablet PC
  6. 6. 加速するIoT(Internet of Things) モノと ネットの 融合 さらに 広がるIT
  7. 7. Apple Watch
  8. 8. Google Glass
  9. 9. 別端末でも同一のサービスを提供 モバイルと ビジネスの 融合 既存 サービスの 活用
  10. 10. 注目されるBYOD (個人端末活用) 個人所有の デバイスは バラバラ 企業側の コスト削減 2台持ち不要 効率的な 業務の遂行
  11. 11. モバイル開発のアプローチ リッチな体験 Cross-platform apps Universal Windows apps Browser-based apps
  12. 12. クロスプラットフォームなモバイルアプリケーション開発
  13. 13. 対象プラットフォーム iOS / Android / Mac Xamarinの中身 ネイティブAPIのC#ラッパー+ 基本クラスライブラリ(BCL)群 上記プラットフォームで動作する.NET環境 Xamarinとは
  14. 14. 開発プラットフォーム Native UI C# + AXML Native UI C# + XAML Native UI C# + XIB コード共有 統合された 開発環境
  15. 15. ネイティブAPI カバー率100% Xamarin.iOS Xamarin.Android
  16. 16. Xamarin.Android Xamarin.iOS アプリのビルド
  17. 17. Xamarin.Forms ネイティブ 実行 ひとつの C#コード 主要な3つの Mobile Platform 40以上の コントロール
  18. 18. Xamarin.Formsのコード例 http://xamarin.com/forms
  19. 19. 製品 グレード 価格(1ユーザー/年) Xamarin.Android Business ¥127,800 Enterprise ¥243,000 Xamarin.iOS Business ¥127,800 Enterprise ¥243,000 Xamarin.Mac Business ¥127,800 Enterprise ¥243,000 価格 http://www.xlsoft.com/jp/products/xamarin/price.html
  20. 20. オンライン講座 http://xamarin.com/university 製品ダウンロード http://xamarin.com/download さあ、Xamariましょう
  21. 21. Windowsデバイスにおけるプラットフォームを超えたアプリケーション構築 UnivarsalWindows App
  22. 22. 各社のモバイル展開アプローチ
  23. 23. 対象プラットフォーム Windowsストアアプリ/ Windows Phone / Xbox One※ コード共有による開発生産性を提供 ロジックやコントロール、アセット等を共有 デバイスごとに発生していた開発/保守コストを削減 Universal Windows Appとは ※ 将来的にできるようになる予定だが、対応時期などは未発表
  24. 24. Shared Project 3つの プロジェクト 構成 デバイス用 からSharedを 参照 Xamarinでも 利用可能
  25. 25. プログラミングモデル
  26. 26. Windows 9で RT / Phoneが統合される予定
  27. 27. Web技術をベースにしたハイブリッド型のモバイルアプリ開発
  28. 28. 対象プラットフォーム iOS / Android / Windows Phone Web技術を利用 各デバイスのブラウザで描画 ネイティブAPIのJavaScriptラッパー Apache Cordovaとは HTML | CSS JavaScript | TypeScript
  29. 29. プログラミングモデル
  30. 30. プラットフォームを超えたコードの再利用 再利用性の追求
  31. 31. Portable Class Library Windows Phone Windows Store Apps .NET Framework 複数環境で コード共有 Xamarin Silverlight Xbox なども可
  32. 32. MVVM (Model -View -ViewModel) View ViewModel Model Data Binding Commands Notifications UI / UI Logic Presentaion Logic Business Logic デバイス固有 再利用可能なコード (PCL or Shared Project)
  33. 33. 多様化する画面解像度への柔軟な対応 画面レイアウト
  34. 34. 様々な画面解像度 4096×2160 2560 ×1600 1920 ×1080 1024 ×768
  35. 35. 画面の向き Portrait Landscape レイアウト 変更による UI最適化
  36. 36. 絶対配置 位置や大きさが要素に直接指定されて決まる リサイズはイベントをフックして自前で位置と大きさを再計算 相対配置 周りの要素とそれらの関係で位置や大きさが決まる リサイズはフレームワークによる自動制御 絶対配置と相対配置
  37. 37. モダンUIは相対配置が基本 Web Windows iOS Android XAML Auto Layout Layout CSS 3
  38. 38. Mobile First / Cloud First 時代のトレンドをおさらい まとめ
  39. 39. これだけは押さえよう 相対配置 Xamarin Universal Windows App Apache Cordova 開発生産性 を追求 MVVM 多様な デバイスを 受け入れる Portable Class Library
  40. 40. Enjoy Universal App!! Thank you
  41. 41. For your happy developer life. Microsoft MVP ComCamp

×