Download - Efsta cod2012 master_for_slideshare
![Page 1: Efsta cod2012 master_for_slideshare](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5577b1cdd8b42af34a8b545b/html5/thumbnails/1.jpg)
Metroアプリケーション Win8/WP7の
効率的ソース運用を考える
株式会社セカンドファクトリー 杉下高仁
![Page 2: Efsta cod2012 master_for_slideshare](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5577b1cdd8b42af34a8b545b/html5/thumbnails/2.jpg)
2ndFACTORY CO.,Ltd. 1
2nd FACTRY Co., ltd
2ndFACTORYは、長年のRIA開発経験と独自の構築プロセスに基づき、革新的なイン
ターフェイスを持つアプリケーションを提供します。アプリケーションやWebサイトを
使いやすい「道具」と考え、毎日使うものだからこそ、ユーザビリティや優しさを確保し
た豊かなエクスペリエンスを実現します。RIA開発を通じ、クライアントにはROIの最大
化とビジネスの成功を、そしてエンドユーザーには豊かなエクスペリエンスをお届けしま
す。
UXを通じて人々のライフスタイルを もっと豊かに、ここちよく
![Page 3: Efsta cod2012 master_for_slideshare](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5577b1cdd8b42af34a8b545b/html5/thumbnails/3.jpg)
2ndFACTORY CO.,Ltd. 2
株式会社セカンドファクトリー
自社製品開発
UI /Cloud コンサルティング
UI 設計/開発
UI/Cloud Professional
![Page 4: Efsta cod2012 master_for_slideshare](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5577b1cdd8b42af34a8b545b/html5/thumbnails/4.jpg)
2ndFACTORY CO.,Ltd. 3
![Page 5: Efsta cod2012 master_for_slideshare](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5577b1cdd8b42af34a8b545b/html5/thumbnails/5.jpg)
2ndFACTORY CO.,Ltd. 4
ExTOUCH
使いなれたOSを、タッチPCでもっと使いやすく
http://2ndfactory.com/
![Page 6: Efsta cod2012 master_for_slideshare](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5577b1cdd8b42af34a8b545b/html5/thumbnails/6.jpg)
2ndFACTORY CO.,Ltd. 5
スピーカー紹介
杉下 高仁 学生時代にMacromedia社(現Adobe) Flashに出会い、それまでのWebにない表現力に魅了され、個人でFlashサイト制作に没頭する。その時Webを通じて (株)セカンドファクトリーの副社長と知り合い、学生期間中は夏休みに訪問してアルバイトをさせてもらうなど交流が続いた。無事卒業後に入社し、気が付けば10年とちょっと。Flash、WPF、Silverlight、Microsoft SurfaceそしてWindows Phoneと、ほぼそのキャリアすべてをユーザーインターフェースやクライアントアプリケーションに近い部分で携わってきました。 福島県郡山市生まれ。 開成小学校>郡山一中>福島高専>(株)セカンドファクトリー
![Page 7: Efsta cod2012 master_for_slideshare](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5577b1cdd8b42af34a8b545b/html5/thumbnails/7.jpg)
Windows 8 に 注目しがちですが
![Page 8: Efsta cod2012 master_for_slideshare](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5577b1cdd8b42af34a8b545b/html5/thumbnails/8.jpg)
Windows 8アプリを作ったら その資産でWindows Phoneアプリも
![Page 9: Efsta cod2012 master_for_slideshare](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5577b1cdd8b42af34a8b545b/html5/thumbnails/9.jpg)
持っているソース(=資産)を 他のプラットフォームへの 活用を考えます
![Page 10: Efsta cod2012 master_for_slideshare](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5577b1cdd8b42af34a8b545b/html5/thumbnails/10.jpg)
このセッションは製品出荷前の情報を 取り扱っています。 最終的に変更される可能性があります。
![Page 11: Efsta cod2012 master_for_slideshare](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5577b1cdd8b42af34a8b545b/html5/thumbnails/11.jpg)
Metro style apps for Windows 8 = Win8アプリ Silverlight for Windows Phone = WP7アプリ として表記しています。
![Page 12: Efsta cod2012 master_for_slideshare](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5577b1cdd8b42af34a8b545b/html5/thumbnails/12.jpg)
2ndFACTORY CO.,Ltd. 11
本日お話しすること
1. このセッションでの資産とは?
2. Win8アプリ開発での資産活用方法
• それぞれの手法と特性
3. Win8アプリからWP7アプリへの移行方法
• 経験を踏まえた おすすめの手法
4. まとめ
![Page 13: Efsta cod2012 master_for_slideshare](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5577b1cdd8b42af34a8b545b/html5/thumbnails/13.jpg)
2ndFACTORY CO.,Ltd. 12
1 このセッションでの資産とは?
![Page 14: Efsta cod2012 master_for_slideshare](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5577b1cdd8b42af34a8b545b/html5/thumbnails/14.jpg)
2ndFACTORY CO.,Ltd. 13
はじめに
当セッションでの“資産”とは
自分自身でプログラミングした
プログラムコードと定義してお話します
![Page 15: Efsta cod2012 master_for_slideshare](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5577b1cdd8b42af34a8b545b/html5/thumbnails/15.jpg)
2ndFACTORY CO.,Ltd. 14
はじめに
せっかく自分で頑張って作ったのだから
末永く、色々なところに使いたいですよね。
子供用の椅子に例えると
![Page 16: Efsta cod2012 master_for_slideshare](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5577b1cdd8b42af34a8b545b/html5/thumbnails/16.jpg)
2ndFACTORY CO.,Ltd. 15
はじめに
再利用を意識して作ることで、再利用性は高まります
www.stokke.com Tripp Trapp® Chair
![Page 17: Efsta cod2012 master_for_slideshare](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5577b1cdd8b42af34a8b545b/html5/thumbnails/17.jpg)
2ndFACTORY CO.,Ltd. 16
はじめに
それでは、プログラミングにおける
工夫とは何でしょうか?
![Page 18: Efsta cod2012 master_for_slideshare](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5577b1cdd8b42af34a8b545b/html5/thumbnails/18.jpg)
2ndFACTORY CO.,Ltd. 17
はじめに
プログラミングにおける要因
OS
プラットフォーム
プログラミング言語
デバイス
要因がたくさんありますが その中のベストを考えてみましょう
![Page 19: Efsta cod2012 master_for_slideshare](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5577b1cdd8b42af34a8b545b/html5/thumbnails/19.jpg)
2ndFACTORY CO.,Ltd. 18
プログラミングにおける資産 1a
![Page 20: Efsta cod2012 master_for_slideshare](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5577b1cdd8b42af34a8b545b/html5/thumbnails/20.jpg)
2ndFACTORY CO.,Ltd. 19
タイプ1 スキルとしての資産
自分自身が既に持つ、知識、技能を活用すること
プログラム言語の知識を(ほぼ)そのまま使える
学習コストが少なく済む
プラットフォーム間で存在するギャップだけ学習
例:
– .NET Framework
– Java
– iOS
– HTML/JavaScript
![Page 21: Efsta cod2012 master_for_slideshare](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5577b1cdd8b42af34a8b545b/html5/thumbnails/21.jpg)
2ndFACTORY CO.,Ltd. 20
タイプ2 プログラムとしての資産
以前記述したプログラムコードを利用すること
同じ処理は2度と書かない
繰り返し利用するので品質が上がる
フレームワークなどは無償公開
チャートや帳票など、高性能で
頻出の機能は販売もされている
![Page 22: Efsta cod2012 master_for_slideshare](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5577b1cdd8b42af34a8b545b/html5/thumbnails/22.jpg)
2ndFACTORY CO.,Ltd. 21
資産化しやすい部分
主に内部処理
ビジネスロジック
汎用処理
–XML解析など
![Page 23: Efsta cod2012 master_for_slideshare](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5577b1cdd8b42af34a8b545b/html5/thumbnails/23.jpg)
2ndFACTORY CO.,Ltd. 22
資産化が難しい部分
ユーザーインターフェースやデザイン
–プラットフォームごとにユーザーインターフェー
スが異なる
–デザインは差別化のためにアプリごとに異なる
![Page 24: Efsta cod2012 master_for_slideshare](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5577b1cdd8b42af34a8b545b/html5/thumbnails/24.jpg)
2ndFACTORY CO.,Ltd. 23
資産化が難しい部分
ユーザーインターフェースやデザイン
–プラットフォームごとにユーザーインターフェー
スが異なる
–デザインは差別化のためにアプリごとに異なる
そこでフレームワークやパーツ単位の資産化
–独自画面遷移フレームワーク
–セレクタ系(日付、時間、通貨)など
![Page 25: Efsta cod2012 master_for_slideshare](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5577b1cdd8b42af34a8b545b/html5/thumbnails/25.jpg)
2ndFACTORY CO.,Ltd. 24
Windows アプリ開発での資産活用方法 2
![Page 26: Efsta cod2012 master_for_slideshare](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5577b1cdd8b42af34a8b545b/html5/thumbnails/26.jpg)
2ndFACTORY CO.,Ltd. 25
Windows アプリ開発での資産活用方法
ソースコードの「リンクとして追加」
– プラットフォーム分のライブラリファイルが作成される
– ギャップはプリコンパイラで処理を分けられる
クラス ライブラリ
– .dllファイルとして再利用する
– プラットフォーム内限定(例:WPFとSilverlightで分断)
– バージョン管理がしやすい
![Page 27: Efsta cod2012 master_for_slideshare](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5577b1cdd8b42af34a8b545b/html5/thumbnails/27.jpg)
2ndFACTORY CO.,Ltd. 26
.NET Framework での方法
ポータブル クラス ライブラリ
– 複数プラットフォームで利用可能
– ギャップを発生させないための共通ライブラリしか利用できない
NEW
![Page 28: Efsta cod2012 master_for_slideshare](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5577b1cdd8b42af34a8b545b/html5/thumbnails/28.jpg)
2ndFACTORY CO.,Ltd. 27
ポータブル クラス ライブラリ
これまで不可能だった、複数のプラットフォームへ対応
できるライブラリ
– .NET Framework
– Silverlight
– Windows Phone
– .NET for Metro style apps
– Xbox 360
実際に見てみましょう
![Page 29: Efsta cod2012 master_for_slideshare](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5577b1cdd8b42af34a8b545b/html5/thumbnails/29.jpg)
2ndFACTORY CO.,Ltd. 28
ポータブル クラス ライブラリ
共通部分のため、使用できる機能は全体のごく一部
Via http://blogs.msdn.com/b/bclteam/archive/2012/05/09/announcing-portable-library-tools-2-beta-for-visual-studio-2010.aspx
![Page 30: Efsta cod2012 master_for_slideshare](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5577b1cdd8b42af34a8b545b/html5/thumbnails/30.jpg)
2ndFACTORY CO.,Ltd. 29
ポータブル クラス ライブラリ
Visual Studio 2012 RCでは標準搭載
Visual Studio 2010 では Portable Library Tools
Beta のインストールが必要
http://visualstudiogallery.msdn.microsoft.com/b0e0b5e9-e138-410b-ad10-00cb3caf4981
![Page 31: Efsta cod2012 master_for_slideshare](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5577b1cdd8b42af34a8b545b/html5/thumbnails/31.jpg)
2ndFACTORY CO.,Ltd. 30
ポータブル クラス ライブラリを使えば・・・
Q.Webサービスとの通信をすべて共通化できる?
A.△プラットフォームごとに通信呼び出し方法が
異なるため、受信データを解析など部分利用が
オススメ
Q.同じMetroだからUI共通化できないの?
A.×あくまでMetroは概念なので、
プラットフォームごとに最適化が必要
![Page 32: Efsta cod2012 master_for_slideshare](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5577b1cdd8b42af34a8b545b/html5/thumbnails/32.jpg)
2ndFACTORY CO.,Ltd. 31
3 Win8アプリからWP7アプリへの移行方法
![Page 33: Efsta cod2012 master_for_slideshare](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5577b1cdd8b42af34a8b545b/html5/thumbnails/33.jpg)
2ndFACTORY CO.,Ltd. 32
再利用可能な部分
抽象度の高い部分になります
デザインテイスト
画面構成
ページ構成
ビジネスロジック
Utilityなど補助関数
MVVMにおけるViewModelのプロパティ部分
![Page 34: Efsta cod2012 master_for_slideshare](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5577b1cdd8b42af34a8b545b/html5/thumbnails/34.jpg)
2ndFACTORY CO.,Ltd. 33
再利用できない部分
プラットフォームごとの差が大きい部分です
画面デザインそのもの
画面デザイン定義コード(パーツ単位は可能)
ユーザインタフェースやインタラクションに関わる
プログラム
![Page 35: Efsta cod2012 master_for_slideshare](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5577b1cdd8b42af34a8b545b/html5/thumbnails/35.jpg)
2ndFACTORY CO.,Ltd. 34
おすすめのコンバート方法
地道な方法が近道
ビジネスロジック、Utility関数をポータブル クラス ライ
ブラリに移行
ポータブル クラス ライブラリに含められない部分はクラ
ス化し、リンクとして追加する
ViewModelを利用している場合はViewModelのプロパテ
ィを抽出したクラスに変換する
![Page 36: Efsta cod2012 master_for_slideshare](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5577b1cdd8b42af34a8b545b/html5/thumbnails/36.jpg)
2ndFACTORY CO.,Ltd. 35
おすすめのコンバート方法の理由
以前、全コピー&ペーストの方法を試してみました
[条件]
全10ページ
Webサービスと通信して情報表示するWP7アプリ
WP7 to Win8に変換
[MSDN] Migrate/port a Windows Phone 7 app to a Metro style app
![Page 37: Efsta cod2012 master_for_slideshare](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5577b1cdd8b42af34a8b545b/html5/thumbnails/37.jpg)
2ndFACTORY CO.,Ltd. 36
おすすめのコンバート方法の理由
以前、全コピー&ペーストの方法を試してみました
[手順]
全ファイルコピペ
Win8存在しないライブラリ(toolkit系など)をカット
存在しない関数をコメントアウト
異なる名称の関数をリネーム
これをビルドが通るまで繰り返す
![Page 38: Efsta cod2012 master_for_slideshare](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5577b1cdd8b42af34a8b545b/html5/thumbnails/38.jpg)
2ndFACTORY CO.,Ltd. 37
おすすめのコンバート方法の理由
エラーを解消したアプリイメージ
発生エラーの過半数がユーザーインターフェース関連だった気が…
しかも、ここがWin8アプリ開発スタートライン…
![Page 39: Efsta cod2012 master_for_slideshare](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5577b1cdd8b42af34a8b545b/html5/thumbnails/39.jpg)
2ndFACTORY CO.,Ltd. 38
4 まとめ
![Page 40: Efsta cod2012 master_for_slideshare](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5577b1cdd8b42af34a8b545b/html5/thumbnails/40.jpg)
2ndFACTORY CO.,Ltd. 39
まとめ
資産化を意識して開発することで、資産化できる
範囲が広がります
お持ちのスキルと資産形成できる仕組みを検討し
ましょう
1つのプラットフォームに留まらず、Win8アプリ
の開発スキルをWP7アプリにも活かしましょう
地道が近道です
技術力=資産力=競争力
![Page 41: Efsta cod2012 master_for_slideshare](https://reader035.vdocuments.pub/reader035/viewer/2022081404/5577b1cdd8b42af34a8b545b/html5/thumbnails/41.jpg)
2ndFACTORY CO.,Ltd. 40
ありがとうございました