SlideShare a Scribd company logo
2012/6/9   COD2012 - Metroアプリの作り方   1/xx




Metroアプリ
   の                                           COD2012

  作り方                                                       名古屋会場
                                                              13:00~



                                                    BluewaterSoft
                                               http://www.bluewatersoft.jp/




                                                                  biac
2012/6/9         COD2012 - Metroアプリの作り方     2/xx




                     biac                 •   1957、スプートニクの前に誕生
              (山本 康彦)                     •   1983、名古屋大学工学部(修士)卒
自己紹介                                      •   HONDA R&Dで自動車設計
               BluewaterSoft              •   1994~ ソフトウェア業界
                                          •   2012~ BluewaterSoft
            http://www.bluewatersoft.jp


           • 著書
 著作          – 「速攻入門 C#」 (2012/3) 技術評論社、共著                   わんくま同盟
             – 「ソフトな彼女とハードな彼氏。」(2012/3) アジャイ
                ルマインドvol.1 掲載
           • 記事
             – 連載中 「C#でTDD入門」CodeZine                        名古屋勉強会で
             – 「Metroスタイルアプリの開発者が知るべき3
  来場者          つのこと」、他 @IT - .NET開発者中心                       TDD道場
                …etc.                                        次回は7月7日、七夕の日
 プレゼント!
2012/6/9         COD2012 - Metroアプリの作り方        3




                                                                    • Windows 8 Metro スタイル ア
    Agenda                       • 前半                                 プリの紹介
                                                                    • 開発のおおまかな流れ



                                                                    • マルチプラットフォームに対応
                                 • 後半                                 させよう
                                                                    • 共用ライブラリの作り方

Claudia Madobe © 2011 Microsoft Corporation All Rights Reserved.
※ クラウディアさんについてはこのへん見てね ⇒ http://msdn.microsoft.com/ja-jp/hh298798
2012/6/9   COD2012 - Metroアプリの作り方   4




 Metro
スタイル
 アプリ      Windows Store         kindle           Cut the Rope




朝日新聞      楽天レシピ                 地球書店             ビデオ
2012/6/9   COD2012 - Metroアプリの作り方                            5



                1. 没入型                2.高速かつ滑                                   • 開発者にとっ
 Metro                                らか                                          ては
                – フルスクリーン             – 組み込みのアニ                                    – 個人で世界市
アプリの            – 「飾り」の廃止               メーション                                        場を相手にでき

 特徴             – メニュー非表示             – 非同期API                                       る



3. 安心で安全        4. いつでも、                                                        • タッチ操作に
                どこでも                                                              最適
– Store経由のみで    – スマホ、タブレッ                                                      • スマホやタブ
  配布              ト、デスクトップ
– サンドボックス
                                                                                  レットに適し
                – 1回購入で5台分                                                        ている
– API制限
                                     Claudia Madobe © 2011 Microsoft Corporation All Rights Reserved.
2012/6/9               COD2012 - Metroアプリの作り方                       6

                           MSの狙い ~ スマートフォン から デスクトップ まで Metro!
                デスクトップからスマホまで
                                                                                                                          売りたいのは
                                                                                                                            ココ !!




Windows 8 Release Preview Product guide http://www.microsoft.com/about/mspreview/windows8/Windows8_RP_Product_guide.pdf
p.28の画像に IS12T の写真を合成
2012/6/9   COD2012 - Metroアプリの作り方      7




                          タッチ オペレーション
                                                                                       slide




                      swipe                          drag                    pinch / stretch




                                              press & hold                           rotate




                                                      tap
                                                                 × フリック
                                                                 × スワイプして閉じる
                                                                  (RPで "drag" になった)

http://www.microsoft.com/about/mspreview/windows8/Windows8_RP_Product_guide.pdf
2012/6/9   COD2012 - Metroアプリの作り方         8



              Metroデザイン
 Metro      Windows Phone 7
   ≠              ↓                                      Metro       Metro
               Windows 8                                 アプリ         アプリ
  Win 8
                                                         Metro アプリ
Win8 Metro スタイル アプリの動               デスク
                                    トップ
                                               デスク
                                               トップ       サンドボックス
作環境: AppContainer                   アプリ        アプリ        AppContainer
                                                           (WWAHost.exe)


⇒ Win8上で動く1アプリに                                 Windows 8
  過ぎない
2012/6/9   COD2012 - Metroアプリの作り方   9


                                        例外も居る




             AppContainerで
                動いている
            Metroスタイルアプリ
2012/6/9   COD2012 - Metroアプリの作り方   10


    スタート画面やMetroアプリも、従来のウィンドウ (その1)
管理者権限付きの
ウィンドウなら、
Metro 画面よりも
前面に出て来られる。
2012/6/9   COD2012 - Metroアプリの作り方   11


      スタート画面やMetroアプリも、従来のウィンドウ (その2)
Spy++ で、Metro
アプリのウィンドウと
プロセスを見る。




※ PID 0x0000139C = 5020 (前画面参照)
2012/6/9   COD2012 - Metroアプリの作り方       12




 WinRT ?       Win8 Metroで              WinRT
                                        Windows
               使えるAPIって                 Runtime

.NET 4.5 ?     …?                                 .NET         Silverlight



               どうやって見分                Metro       .NET APIs
• WinRT                                           for Metro
               ければ…?                              style apps
• .NET(一部)     – Visual Studioに
                 頼る                                             desktop
• Win32(一部)    – MSDNには表記
• COM(一部)        あり
               – WACK (後述)
2012/6/9   COD2012 - Metroアプリの作り方   13


          VS2012のオブジェクトブラウザー




※ オブジェクトブラウザーで、見る範囲を指定できる。
2012/6/9   COD2012 - Metroアプリの作り方                           14


                                     @IT: 特集:Windows 8開発に向                     Building Windows 8: 信頼でき
               1. Windows            けて準備しよう                                   る Metro スタイル アプリを提

開発前に           Store で配布
                                                                               供する



知っておく          あるいは、Active
               Directory 内で配布。
 こと            野良アプリ不可!              http://www.atmarkit.co.jp/fdotnet/chus
                                     hin/readyforwin8app_01/readyforwin8
                                                                               http://bluewatersoft.cocolog-
                                                                               nifty.com/blog/2012/05/metro-metro-
                                     app_01_01.html                            f64.html




2. ユーザーの       3. 万全のリ               4. コントラクト                                  5. タイル、トー
プライバシー         ジューム機能                を理解せよ                                      スト、WNS
                                                                                新インターフェース
を守れ            を実装せよ                 アプリとアプリコンテ
侵害に使えそうなAPI    複雑な画面遷移は自
                                     ナとの間の契約により、                                6. 広告
                                     他のアプリと間接的に                                 Storeは年会費必要、
やプロセス間通信は      分の首を絞める
                                     連携                                         広告は重要
利用できない
2012/6/9   COD2012 - Metroアプリの作り方    15


                                     × ローカルDB           Cloud志向
                                     × ファイルの自由な
               デスクトップの                 アクセス
アプリの           発想は
                                     × プリンタ制御
                                                        – データや重い処
                                                          理はサーバー
                                     × 他アプリのコント
 構想            忘れる!!                   ロール
                                     × USBポート、
                                                          で
                                                        – ユーザー設定
                                       RS232Cポート          はクラウドに

タブレットの機        Storeの機能              Storeの認定
能                                    要件                 スマホで作れ
               – 課金                  × 単なる広告            るもの、
– マルチタッチ                             × 個人的な情報の無         と考えるのが
               – 試用版
– カメラ、GPS、G                            断取得
                                                        近道
  センサー etc.    – 広告                  × CERO Z 相当
2012/6/9   COD2012 - Metroアプリの作り方   16



                  ストア認定要件


 最低限、この要件
 をクリアしていない
 と、Storeに出品で
 きない

  =配布できない



http://msdn.microsoft.com/ja-jp/library/windows/apps/hh694083
2012/6/9   COD2012 - Metroアプリの作り方             17



                                         • 4パターン                     • 上と左の余白
    UX                                     デザインしろ
                                           – landscape (full)
                                                                       とタイトルの位
                                                                       置やサイズ
                   「鉄の掟」があ
画面の                る                       – snap                    • グリッド単位
                                           – fill                      の画面構成
デザイン                                       – portrait

• クローズボタン、検索
  ボタン、共有ボタンetc.
  は付けるな
• AppBarは下から                                                         デザイン
• ナビゲーションバーは
  上から                                                                ガイドの山
• スクロール方向は統一
  しろ
  …etc. etc.
2012/6/9          COD2012 - Metroアプリの作り方         18


                               膨大なデザイン ガイドライン
 ◆ 設計ガイド (英語のものもあり)                      ・アプリを世界対応にするためのガイドライン                  ・primitive animations
 ・Metro スタイル アプリの UX ガイドライン              ・アプリのヘルプのガイドライン                        ・progress controls
 ・ナビゲーション デザイン                           ◆ Guidelines and checklist (まだ全部英語)    ・push notifications
 ・コマンド実行の設計                              ・accessibility                         ・radio buttons
 ・タッチ操作の設計                               ・app bars                              ・Rating control
 ・可変レイアウトの設計                             ・app resources                         ・raw notifications
 ・アプリ コントラクトの一覧                          ・badges                                ・scheduled notifications
                                         ・building a device picker              ・secondary tiles
 ◆ Guidelines (日本語訳があるものもあり)
                                         ・buttons                               ・search
 ・ユーザー操作
                                         ・checkboxes                            ・SemanticZoom controls
 ・タッチによるターゲット設定
                                         ・clipboard commands                    ・sharing content
 ・視覚的なフィードバック
                                         ・combo box and list box controls       ・sliders
 ・セマンティック ズーム
                                         ・context menus                         ・spell checking
 ・クロス スライド
                                         ・DatePickers                           ・splash screens
 ・光学ズームとサイズ変更
                                         ・drag-and-drop animations              ・text and typography
 ・パンのガイドライン
                                         ・edge-based UI animations              ・text input
 ・回転のガイドライン
                                         ・file pickers                          ・thumbnails
 ・テキストと画像の選択
                                         ・file types and protocols              ・tiles
 ・スナップされたビューとページ横幅に合わせたビュー
                                         ・FlipView controls                     ・TimePickers
 ・画面に合わせたスケーリング
                                         ・Flyouts                               ・toast notifications
 ・ピクセル密度に合わせたスケーリング
                                         ・links                                 ・toggle switches
 ・UI 設計の印刷
                                         ・list animations                       ・tooltips
 ・タップのガイドライン
                                         ・location-aware applications           ・touch input
 ・オーディオ認識アプリの開発
                                         ・lock screen tiles                     ・transient UI animations
 ・カメラの UI
                                         ・message dialogs                       ・transition animations
 ・アプリのデータのローミング
                                         ・periodic notifications                ・using sensitive devices
 ・アプリ設定のガイドライン
 ・グローバルな Metro スタイル アプリの設計               ・pointer animations

http://bluewatersoft.cocolog-nifty.com/blog/2012/05/metro-a386.html 2012/5/22時点のまとめ(CP)
2012/6/9   COD2012 - Metroアプリの作り方                19



                    複雑な UI や
                                                                               HTML/CSS
                    ロジックには                             XAML
                                                                                 WinJS
    実装              XAML +                   C#、VB              C++/CX          JavaScript

                    C# (or VB)
                                                                          Windows Runtime
                                               .NET Class Library
                                                                         component (WinMD)
Webアプリの             DirectX を
移植には                使うなら
                                            .NET APIs         Win32       Direct
HTML +              C++/CX                  for Metro          API          X       WinRT
                                            style apps         (一部)       (一部)
JavaScript
※ C# と VB で作れるものに差は無いけれど、ブログ記事や Q&A は C# ばかり。Metro で VB はお勧めできない。
2012/6/9         COD2012 - Metroアプリの作り方        20


                                    Win8 Metro 開発環境
   Windows 8 (必須)                      Visual Studio 2012 (必須)             Team Foundation Server 2012

  ※ Win7新PC購入者には                       ※ 有償版 または 無償の Visual Studio
    Win8Proが1200円(*1)                    Express 2012 for Windows 8        ※ いまどきソース管理してない人なんて
                                                                             いないよね!?
                                                                             TFS 2012 は Express (無償)もアリ!
   タッチ対応ハード                              Blend for Visual Studio



                                         ※ Visual Studio 2012 に付属
                                           Expressにも付いてる!
   ※ VS付属のシミュレータで
     検証可能
                             最低限、お金が掛かるのは                                  Microsoft アカウント (必須)
                             ・Windows 8                                    インターネット接続と、Microsoft アカウント
                                                                           (現 Windows Live ID) は必須。
                             ・Store 年会費: 4900円/年(*2)

(*1) Windows 8 購入プログラム - https://windowsupgradeoffer.com/ja/Home/ProgramInfo
(*2) 個人4900円/法人9800円 - http://msdn.microsoft.com/ja-jp/library/windows/apps/hh694064.aspx#account_countries
2012/6/9   COD2012 - Metroアプリの作り方        21



                                                     1. アプリ開発              2. コード分析               3. アプリ提出用
                                                                                                     チェックリスト
                                                     ※ 起動・中断処理に               (FxCop)
                                                      時間が掛かるとか                                    4. 年齢区分の
    ストアへ                                              はパフォーマンス分
                                                      析で。(Express にも
                                                                           ※ Expressにも               検討 (ゲーム
                                                      簡易版が搭載)
                                                                             付いてます!                  は必須)


                                                     5. アップロード             6. Windows App         7. Storeにアッ
                                                        用のパッ                 Certification         プロード
                                                        ケージ作成                Kit (WACK) で
                                                                                                  8. 審査に通る
                                                                             チェック
                                                                                                     と公開
© 2011 Microsoft Corporation All Rights Reserved.


※ 実際には、開発初期段階から、頻繁にローカル用パッケージを作ってWACKでチェックすること。
2012/6/9       COD2012 - Metroアプリの作り方        22


                        Windows App Certification Kit
アプリを実際に
起動してチェック
される

- クラッシュとハング
- アプリケーション マニフェ
  ストの準拠
- Windows セキュリティ機能
- サポートされている Metro
  スタイル API
- パフォーマンス
- アプリケーション マニフェ
  スト リソース
- デバッグ構成
- ファイルのエンコード


「Windows Store 開発者向けブログ」より http://blogs.msdn.com/b/windowsstore_ja/archive/2012/05/16/10306060.aspx
2012/6/9       COD2012 - Metroアプリの作り方        23


             Storeでは、統計情報が開発者に提供される
Windows ストア
ダッシュボードの
レポート画面

ダウンロード数
レビュー点数
売上額
国別ユーザー数
年齢別ユーザー数
平均使用時間
クラッシュレポート
…など




「Windows Store 開発者向けブログ」より http://blogs.msdn.com/b/windowsstore_ja/archive/2012/05/16/10306060.aspx
2012/6/9    COD2012 - Metroアプリの作り方     24


              Win8 Metro 開発のための情報 (その1)
MSDN
デベロッパーセンター
Metro スタイル アプリ




http://msdn.microsoft.com/ja-jp/windows/apps/br229512.aspx
2012/6/9   COD2012 - Metroアプリの作り方   25


               Win8 Metro 開発のための情報 (その2)
Windows
Developer Days 2012
(2012/4/24-25)

ビデオとスライド資料




http://channel9.msdn.com/Events/Windows-Developer-Days/Windows-Developer-Days-2012
2012/6/9   COD2012 - Metroアプリの作り方   26


               Win8 Metro 開発のための情報 (その3)
Building Windows 8

Windows
エンジニアリング
チームによるブログ




http://blogs.msdn.com/b/b8_ja/
2012/6/9    COD2012 - Metroアプリの作り方   27


              Win8 Metro 開発のためのイベント情報
facebook
Go Metro




http://www.facebook.com/5Metro
2012/6/9       COD2012 - Metroアプリの作り方     28



                    Microsoft のオフライン サポート
 Developer Camp                                      Application Excellence Lab
 ・概要編                                                ※ 当面6月末まで
 ・デザイン編                                              ※ 現時点でストアに登録するほぼ
 ・実践編                                                  唯一の道

 ハンズオン
 トレーニング



http://www.facebook.com/5Metro/app_100855993378035   http://www.facebook.com/5Metro/app_384971174888643
2012/6/9   COD2012 - Metroアプリの作り方   29




              後半戦


JavaScript な人、ごめんなさい。
   ここから先は、C# です。
2012/6/9   COD2012 - Metroアプリの作り方   30



さて。Win8 Metro だけ作って満足ですか?
2012/6/9    COD2012 - Metroアプリの作り方          31



                      Windows                • 画面以外は共通化したい!
   他の                 Phone 7
                         Win8 Metroの           Win8 Metro   VM   DM
  プラット                   スナップと同じ
                         構成のUIでい
  フォーム                   けそう!                    Windows
                                                 Phone 7
                                                            VM   DM
                                                                           M
                                                                         (ロジック)

                                                                         ここは
                                                                        できるだけ
デスクトップア               Webアプリ                 WPF
                                                            VM   DM      共通に
                                             WinForm
プリ                                                                       したい!!

   フルスクリー                UIを簡素化し             ASP.NET
   ンってどうなの               てWebでも提供                                DM
                                             ASP.NET MVC
   よ!?                   したい
                                                  Data Model      できれば、VMの一部も!

※ 今日は Windows Phone 8 (Apollo) の話はしませんから! 6月20日の Windows Phone Summit に注目!!
2012/6/9       COD2012 - Metroアプリの作り方            32




   Portable                  .NETで共通に
                                                             WinRT
     Class                   使える部分だ
    Library                  けを使う!                                      .NET         Silverlight



                                                                        .NET APIs
 VS2010SP1か                  詳細はMSDN                                    for Metro
                                                                        style apps
 ら可能
 Visual Studio 2010 SP1                                                               desktop
 Portable Library Tools
                                                                PCL は
                                                              ここを使う
※ http://msdn.microsoft.com/ja-jp/library/hh563947%28v=vs.110%29.aspx
2012/6/9   COD2012 - Metroアプリの作り方   33



        VM と M をすべて PCL で書けるか?
例: コマンド処理                          例: ファイル読み出し
VM の ICommand の中でユーザーとの対話          PCL で使える StreamReader() (図の上段)

 WPF           Metro




メッセージボックスを出してユーザーの応答を得             パス文字列は不可、Streamオブジェクトのみ。V
るメソッドを、V から VM に渡す?                で、パス文字列から Stream を作り出して、VM
可能だけど、タイヘンだ!                       経由で M に渡す?

       ヘタに意地を張ると、V が肥大化する!! うまい妥協点を探れ!
2012/6/9        COD2012 - Metroアプリの作り方          34



                                VS2012 で PCL を作る




※ VS2010SP1(Express除く)では、Portable Library Tools 2 を使う
 http://visualstudiogallery.msdn.microsoft.com/b0e0b5e9-e138-410b-ad10-00cb3caf4981/
2012/6/9   COD2012 - Metroアプリの作り方   35


          VS2012のオブジェクトブラウザー




                                               PCL の範囲によっては、
                                               ブラウザーには出てきて
                                               も、使えないことがある。
                                               たとえば WP7 を含めると、
                                               これはダメ。
                                               (WP7.x は Legacy な PCL)




※ オブジェクトブラウザーで、PCLの範囲に限定してAPIを見ているところ。
2012/6/9     COD2012 - Metroアプリの作り方    36



          VS 2010 Express for WP で PCL を使う
Windows Phone
SDK 7.1.1

参照の追加で、
PCL の dll を直
接指定する。
※ WP8 では、プロジェクト参
 照でいけるようになる気が
 する。
※ ソースへのリンクを使って
 もよい。
※ Windows Phone SDK 7.1.1 を Windows 8 Release Preview へインストールする際の注意点
  http://blogs.msdn.com/b/aonishi/archive/2012/06/04/10314544.aspx
2012/6/9   COD2012 - Metroアプリの作り方   37



        じつは、WP7 で PCL は、ちょっとツラい
WP7とSilverlightを外し
てPCLを作ると、Task
やHttpClientの非同期
アクセスなど、便利なも
のがいっぱい使える。




※ 右は、WP7とSilverlightも含めたPCLに指定しなおしたところ。Taskなどがコンパイルエラーになっている。
2012/6/9   COD2012 - Metroアプリの作り方   38



  WP7 で使うためには、非同期は昔の書き方で!
Task (つまりasync / await)
が使えないので、非同期は
Begin ~ End パターンで書
くことになる。

そのほかにも、UrlEncode()
とかが使えないとか、不便
な事がたくさん orz
2012/6/9   COD2012 - Metroアプリの作り方   39



       WP7 側から呼び出して、データをセット
Windows Phone 7.x では、
AsyncCallback メソッドの中
で、結果を受け取り、デー
タをセットする。

UI スレッドではないので、
ちょっと面倒。
2012/6/9   COD2012 - Metroアプリの作り方   40



               WPF で PCL を使う
VS2012

参照の追加で、
PCL のプロジェクト
を指定する。
2012/6/9   COD2012 - Metroアプリの作り方   41



      WPF 側から呼び出して、データをセット
WPF 4.5 では、
async / await が使
える。

await 後は UI スレッ
ドに戻るので、非同
期の結果を取り出
すのも簡単。
(Metro も同様)
2012/6/9   COD2012 - Metroアプリの作り方   42


           WPF / Metro / WP7
2012/6/9       COD2012 - Metroアプリの作り方   43



       ○ ロジックを                   × 進化中。            WP7 と

PCL     共用できる
        のは、
                                  WP7 を対象
                                  にするのは
                                                   Silverlight を
                                                   対象にしてい
まとめ     魅力                        辛い               ないなら、
                                                   お薦め!

       WP8 に期待!

       - .NET 4.5
                 WPF, WinForm, ASP.NET
       - Metro style app
       - ( WP8 ? )
2012/6/9   COD2012 - Metroアプリの作り方   44




                             • Metro スタイル アプリは、ス
                               マホとタブレットに最適!
まとめ    • 前半                  • Win8 Metro の開発と配布は、
                               Windows Phone と似てる!


                             • Win8 Metro 用だけにアプリを
                               作るのはもったいない!
       • 後半                  • Portable Class Library でロ
                               ジックの共用化を図ろう
2012/6/9   COD2012 - Metroアプリの作り方   45



ご清聴 ありがとうございました

More Related Content

Similar to Metroアプリの作り方 (COD2012)

テンプレートを使ったストアアプリの作成
テンプレートを使ったストアアプリの作成テンプレートを使ったストアアプリの作成
テンプレートを使ったストアアプリの作成
Yasuhiko Yamamoto
 
第2回ビジネスモバイル研究会
第2回ビジネスモバイル研究会第2回ビジネスモバイル研究会
第2回ビジネスモバイル研究会
Shuichi Yukimoto
 
わんくま名古屋#25(20121201) 「Win8ストア・アプリ WP8アプリ、両面撃破作戦」
わんくま名古屋#25(20121201) 「Win8ストア・アプリ WP8アプリ、両面撃破作戦」わんくま名古屋#25(20121201) 「Win8ストア・アプリ WP8アプリ、両面撃破作戦」
わんくま名古屋#25(20121201) 「Win8ストア・アプリ WP8アプリ、両面撃破作戦」
Yasuhiko Yamamoto
 
Androidが起こしたオープン・イノベーション
Androidが起こしたオープン・イノベーションAndroidが起こしたオープン・イノベーション
Androidが起こしたオープン・イノベーション
Koji Shigemura
 
AndroidのUI設計で押さえておきたいポイント
AndroidのUI設計で押さえておきたいポイントAndroidのUI設計で押さえておきたいポイント
AndroidのUI設計で押さえておきたいポイント
Takayuki Inoue
 
Windows8アプリ作成入門
Windows8アプリ作成入門Windows8アプリ作成入門
Windows8アプリ作成入門
buu0528
 
C#でiPhoneアプリ開発 with MonoTouch
C#でiPhoneアプリ開発 with MonoTouchC#でiPhoneアプリ開発 with MonoTouch
C#でiPhoneアプリ開発 with MonoTouch
Shin Ise
 
どうなる?Windows 8時代の業務アプリ開発
どうなる?Windows 8時代の業務アプリ開発どうなる?Windows 8時代の業務アプリ開発
どうなる?Windows 8時代の業務アプリ開発
Yuya Yamaki
 
スマ研第2回レポート
スマ研第2回レポートスマ研第2回レポート
スマ研第2回レポート
Shinpei Niiyama
 
Developers Summit 2013【15-B-8】タブレット進化論
Developers Summit 2013【15-B-8】タブレット進化論Developers Summit 2013【15-B-8】タブレット進化論
Developers Summit 2013【15-B-8】タブレット進化論
Akio Hoshi
 
Windowsストアアプリ開発ハンズオントレーニングに行ってきました 2012-09-22-lt
Windowsストアアプリ開発ハンズオントレーニングに行ってきました 2012-09-22-ltWindowsストアアプリ開発ハンズオントレーニングに行ってきました 2012-09-22-lt
Windowsストアアプリ開発ハンズオントレーニングに行ってきました 2012-09-22-lt
Tomokazu Kizawa
 
Cod2012 デバッグ講座
Cod2012 デバッグ講座Cod2012 デバッグ講座
Cod2012 デバッグ講座
Masuda Tomoaki
 
Androidレイアウトのスタンダードアプローチ
AndroidレイアウトのスタンダードアプローチAndroidレイアウトのスタンダードアプローチ
Androidレイアウトのスタンダードアプローチ
Takao Sumitomo
 
アプリケーション・デベロッパー 〜Xamarinによるクロスプラットフォーム開発〜
アプリケーション・デベロッパー 〜Xamarinによるクロスプラットフォーム開発〜アプリケーション・デベロッパー 〜Xamarinによるクロスプラットフォーム開発〜
アプリケーション・デベロッパー 〜Xamarinによるクロスプラットフォーム開発〜
Daiki Kawanuma
 
Current state and case introducation of AR (Autumn of 2012)- 拡張現実の現状と事例紹介
Current state and case introducation of AR (Autumn of 2012)- 拡張現実の現状と事例紹介Current state and case introducation of AR (Autumn of 2012)- 拡張現実の現状と事例紹介
Current state and case introducation of AR (Autumn of 2012)- 拡張現実の現状と事例紹介
Etsuji Kameyama
 
Android Lecture #01 @PRO&BSC Inc.
Android Lecture #01 @PRO&BSC Inc.Android Lecture #01 @PRO&BSC Inc.
Android Lecture #01 @PRO&BSC Inc.
Yuki Higuchi
 

Similar to Metroアプリの作り方 (COD2012) (20)

テンプレートを使ったストアアプリの作成
テンプレートを使ったストアアプリの作成テンプレートを使ったストアアプリの作成
テンプレートを使ったストアアプリの作成
 
第2回ビジネスモバイル研究会
第2回ビジネスモバイル研究会第2回ビジネスモバイル研究会
第2回ビジネスモバイル研究会
 
わんくま名古屋#25(20121201) 「Win8ストア・アプリ WP8アプリ、両面撃破作戦」
わんくま名古屋#25(20121201) 「Win8ストア・アプリ WP8アプリ、両面撃破作戦」わんくま名古屋#25(20121201) 「Win8ストア・アプリ WP8アプリ、両面撃破作戦」
わんくま名古屋#25(20121201) 「Win8ストア・アプリ WP8アプリ、両面撃破作戦」
 
Androidが起こしたオープン・イノベーション
Androidが起こしたオープン・イノベーションAndroidが起こしたオープン・イノベーション
Androidが起こしたオープン・イノベーション
 
AndroidのUI設計で押さえておきたいポイント
AndroidのUI設計で押さえておきたいポイントAndroidのUI設計で押さえておきたいポイント
AndroidのUI設計で押さえておきたいポイント
 
20110824 android apps_endo
20110824 android apps_endo20110824 android apps_endo
20110824 android apps_endo
 
20110824 android apps_endo
20110824 android apps_endo20110824 android apps_endo
20110824 android apps_endo
 
Windows8アプリ作成入門
Windows8アプリ作成入門Windows8アプリ作成入門
Windows8アプリ作成入門
 
20110824 android apps_endo
20110824 android apps_endo20110824 android apps_endo
20110824 android apps_endo
 
C#でiPhoneアプリ開発 with MonoTouch
C#でiPhoneアプリ開発 with MonoTouchC#でiPhoneアプリ開発 with MonoTouch
C#でiPhoneアプリ開発 with MonoTouch
 
どうなる?Windows 8時代の業務アプリ開発
どうなる?Windows 8時代の業務アプリ開発どうなる?Windows 8時代の業務アプリ開発
どうなる?Windows 8時代の業務アプリ開発
 
スマ研第2回レポート
スマ研第2回レポートスマ研第2回レポート
スマ研第2回レポート
 
Developers Summit 2013【15-B-8】タブレット進化論
Developers Summit 2013【15-B-8】タブレット進化論Developers Summit 2013【15-B-8】タブレット進化論
Developers Summit 2013【15-B-8】タブレット進化論
 
Windowsストアアプリ開発ハンズオントレーニングに行ってきました 2012-09-22-lt
Windowsストアアプリ開発ハンズオントレーニングに行ってきました 2012-09-22-ltWindowsストアアプリ開発ハンズオントレーニングに行ってきました 2012-09-22-lt
Windowsストアアプリ開発ハンズオントレーニングに行ってきました 2012-09-22-lt
 
Cod2012 デバッグ講座
Cod2012 デバッグ講座Cod2012 デバッグ講座
Cod2012 デバッグ講座
 
Androidレイアウトのスタンダードアプローチ
AndroidレイアウトのスタンダードアプローチAndroidレイアウトのスタンダードアプローチ
Androidレイアウトのスタンダードアプローチ
 
アプリケーション・デベロッパー 〜Xamarinによるクロスプラットフォーム開発〜
アプリケーション・デベロッパー 〜Xamarinによるクロスプラットフォーム開発〜アプリケーション・デベロッパー 〜Xamarinによるクロスプラットフォーム開発〜
アプリケーション・デベロッパー 〜Xamarinによるクロスプラットフォーム開発〜
 
Androidとは何か
Androidとは何かAndroidとは何か
Androidとは何か
 
Current state and case introducation of AR (Autumn of 2012)- 拡張現実の現状と事例紹介
Current state and case introducation of AR (Autumn of 2012)- 拡張現実の現状と事例紹介Current state and case introducation of AR (Autumn of 2012)- 拡張現実の現状と事例紹介
Current state and case introducation of AR (Autumn of 2012)- 拡張現実の現状と事例紹介
 
Android Lecture #01 @PRO&BSC Inc.
Android Lecture #01 @PRO&BSC Inc.Android Lecture #01 @PRO&BSC Inc.
Android Lecture #01 @PRO&BSC Inc.
 

More from Yasuhiko Yamamoto

わんくま名古屋 #40 (20161217) Xamarinで自動化テストしよう
わんくま名古屋 #40 (20161217) Xamarinで自動化テストしようわんくま名古屋 #40 (20161217) Xamarinで自動化テストしよう
わんくま名古屋 #40 (20161217) Xamarinで自動化テストしよう
Yasuhiko Yamamoto
 
わんくま名古屋 #38 (20160521) Xamarin入門
わんくま名古屋 #38 (20160521) Xamarin入門わんくま名古屋 #38 (20160521) Xamarin入門
わんくま名古屋 #38 (20160521) Xamarin入門
Yasuhiko Yamamoto
 
UWP アプリを JavaScript で作る 3つの方法
UWP アプリを JavaScript で作る 3つの方法UWP アプリを JavaScript で作る 3つの方法
UWP アプリを JavaScript で作る 3つの方法
Yasuhiko Yamamoto
 
無償のVisual studioで作るクライアント アプリ
無償のVisual studioで作るクライアント アプリ無償のVisual studioで作るクライアント アプリ
無償のVisual studioで作るクライアント アプリ
Yasuhiko Yamamoto
 
わんくま名古屋 #37 (20151114) Windows 10 UWP アプリ開発入門(実践編)
わんくま名古屋 #37 (20151114) Windows 10 UWP アプリ開発入門(実践編)わんくま名古屋 #37 (20151114) Windows 10 UWP アプリ開発入門(実践編)
わんくま名古屋 #37 (20151114) Windows 10 UWP アプリ開発入門(実践編)
Yasuhiko Yamamoto
 
わんくま名古屋 #37 (20151114) TDD道場 #25
わんくま名古屋 #37 (20151114) TDD道場 #25わんくま名古屋 #37 (20151114) TDD道場 #25
わんくま名古屋 #37 (20151114) TDD道場 #25
Yasuhiko Yamamoto
 
わんくま名古屋#36 (20150725) Windows 10 ユニバーサル Windows アプリ開発入門
わんくま名古屋#36 (20150725) Windows 10 ユニバーサル Windows アプリ開発入門わんくま名古屋#36 (20150725) Windows 10 ユニバーサル Windows アプリ開発入門
わんくま名古屋#36 (20150725) Windows 10 ユニバーサル Windows アプリ開発入門
Yasuhiko Yamamoto
 
第8回 業開中心会議 「Windows 10 ユニバーサルアプリの概要」
第8回業開中心会議 「Windows 10 ユニバーサルアプリの概要」第8回業開中心会議 「Windows 10 ユニバーサルアプリの概要」
第8回 業開中心会議 「Windows 10 ユニバーサルアプリの概要」
Yasuhiko Yamamoto
 
わんくま名古屋#34(20150214) TDD道場#22
わんくま名古屋#34(20150214) TDD道場#22わんくま名古屋#34(20150214) TDD道場#22
わんくま名古屋#34(20150214) TDD道場#22
Yasuhiko Yamamoto
 
Visual Studio 2015 の新機能: Pex はユニットテストの福音となるか!?
Visual Studio 2015 の新機能: Pex はユニットテストの福音となるか!?Visual Studio 2015 の新機能: Pex はユニットテストの福音となるか!?
Visual Studio 2015 の新機能: Pex はユニットテストの福音となるか!?
Yasuhiko Yamamoto
 
わんくま名古屋#33(20141115) モノ作り半生
わんくま名古屋#33(20141115) モノ作り半生わんくま名古屋#33(20141115) モノ作り半生
わんくま名古屋#33(20141115) モノ作り半生
Yasuhiko Yamamoto
 
わんくま名古屋#33(20141115) TDD道場#21
わんくま名古屋#33(20141115) TDD道場#21わんくま名古屋#33(20141115) TDD道場#21
わんくま名古屋#33(20141115) TDD道場#21
Yasuhiko Yamamoto
 
開発ツールを買わずに作る♪ ユニバーサルWindowsアプリ!
開発ツールを買わずに作る♪ ユニバーサルWindowsアプリ!開発ツールを買わずに作る♪ ユニバーサルWindowsアプリ!
開発ツールを買わずに作る♪ ユニバーサルWindowsアプリ!
Yasuhiko Yamamoto
 
わんくま名古屋 #32 (20140823) TDD道場 #20
わんくま名古屋 #32 (20140823) TDD道場 #20わんくま名古屋 #32 (20140823) TDD道場 #20
わんくま名古屋 #32 (20140823) TDD道場 #20
Yasuhiko Yamamoto
 
わんくま名古屋#31(20140524) TDD道場 #19
わんくま名古屋#31(20140524) TDD道場 #19わんくま名古屋#31(20140524) TDD道場 #19
わんくま名古屋#31(20140524) TDD道場 #19
Yasuhiko Yamamoto
 
わんくま名古屋#31(20140524) ユニバーサルWindowsアプリ開発の勧め
わんくま名古屋#31(20140524) ユニバーサルWindowsアプリ開発の勧めわんくま名古屋#31(20140524) ユニバーサルWindowsアプリ開発の勧め
わんくま名古屋#31(20140524) ユニバーサルWindowsアプリ開発の勧め
Yasuhiko Yamamoto
 
Windows ストア アプリでスレッド間排他処理
Windows ストア アプリでスレッド間排他処理Windows ストア アプリでスレッド間排他処理
Windows ストア アプリでスレッド間排他処理
Yasuhiko Yamamoto
 
Windows 8.1 Update 1 の噂をまとめてみた
Windows 8.1 Update 1 の噂をまとめてみたWindows 8.1 Update 1 の噂をまとめてみた
Windows 8.1 Update 1 の噂をまとめてみた
Yasuhiko Yamamoto
 
タダで始めるテストファースト入門 ~ C# Express + NUnit
タダで始めるテストファースト入門 ~ C# Express + NUnitタダで始めるテストファースト入門 ~ C# Express + NUnit
タダで始めるテストファースト入門 ~ C# Express + NUnit
Yasuhiko Yamamoto
 
わんくま名古屋 #29 (2013/11/23) TDD道場 #17
わんくま名古屋 #29 (2013/11/23) TDD道場 #17わんくま名古屋 #29 (2013/11/23) TDD道場 #17
わんくま名古屋 #29 (2013/11/23) TDD道場 #17
Yasuhiko Yamamoto
 

More from Yasuhiko Yamamoto (20)

わんくま名古屋 #40 (20161217) Xamarinで自動化テストしよう
わんくま名古屋 #40 (20161217) Xamarinで自動化テストしようわんくま名古屋 #40 (20161217) Xamarinで自動化テストしよう
わんくま名古屋 #40 (20161217) Xamarinで自動化テストしよう
 
わんくま名古屋 #38 (20160521) Xamarin入門
わんくま名古屋 #38 (20160521) Xamarin入門わんくま名古屋 #38 (20160521) Xamarin入門
わんくま名古屋 #38 (20160521) Xamarin入門
 
UWP アプリを JavaScript で作る 3つの方法
UWP アプリを JavaScript で作る 3つの方法UWP アプリを JavaScript で作る 3つの方法
UWP アプリを JavaScript で作る 3つの方法
 
無償のVisual studioで作るクライアント アプリ
無償のVisual studioで作るクライアント アプリ無償のVisual studioで作るクライアント アプリ
無償のVisual studioで作るクライアント アプリ
 
わんくま名古屋 #37 (20151114) Windows 10 UWP アプリ開発入門(実践編)
わんくま名古屋 #37 (20151114) Windows 10 UWP アプリ開発入門(実践編)わんくま名古屋 #37 (20151114) Windows 10 UWP アプリ開発入門(実践編)
わんくま名古屋 #37 (20151114) Windows 10 UWP アプリ開発入門(実践編)
 
わんくま名古屋 #37 (20151114) TDD道場 #25
わんくま名古屋 #37 (20151114) TDD道場 #25わんくま名古屋 #37 (20151114) TDD道場 #25
わんくま名古屋 #37 (20151114) TDD道場 #25
 
わんくま名古屋#36 (20150725) Windows 10 ユニバーサル Windows アプリ開発入門
わんくま名古屋#36 (20150725) Windows 10 ユニバーサル Windows アプリ開発入門わんくま名古屋#36 (20150725) Windows 10 ユニバーサル Windows アプリ開発入門
わんくま名古屋#36 (20150725) Windows 10 ユニバーサル Windows アプリ開発入門
 
第8回 業開中心会議 「Windows 10 ユニバーサルアプリの概要」
第8回業開中心会議 「Windows 10 ユニバーサルアプリの概要」第8回業開中心会議 「Windows 10 ユニバーサルアプリの概要」
第8回 業開中心会議 「Windows 10 ユニバーサルアプリの概要」
 
わんくま名古屋#34(20150214) TDD道場#22
わんくま名古屋#34(20150214) TDD道場#22わんくま名古屋#34(20150214) TDD道場#22
わんくま名古屋#34(20150214) TDD道場#22
 
Visual Studio 2015 の新機能: Pex はユニットテストの福音となるか!?
Visual Studio 2015 の新機能: Pex はユニットテストの福音となるか!?Visual Studio 2015 の新機能: Pex はユニットテストの福音となるか!?
Visual Studio 2015 の新機能: Pex はユニットテストの福音となるか!?
 
わんくま名古屋#33(20141115) モノ作り半生
わんくま名古屋#33(20141115) モノ作り半生わんくま名古屋#33(20141115) モノ作り半生
わんくま名古屋#33(20141115) モノ作り半生
 
わんくま名古屋#33(20141115) TDD道場#21
わんくま名古屋#33(20141115) TDD道場#21わんくま名古屋#33(20141115) TDD道場#21
わんくま名古屋#33(20141115) TDD道場#21
 
開発ツールを買わずに作る♪ ユニバーサルWindowsアプリ!
開発ツールを買わずに作る♪ ユニバーサルWindowsアプリ!開発ツールを買わずに作る♪ ユニバーサルWindowsアプリ!
開発ツールを買わずに作る♪ ユニバーサルWindowsアプリ!
 
わんくま名古屋 #32 (20140823) TDD道場 #20
わんくま名古屋 #32 (20140823) TDD道場 #20わんくま名古屋 #32 (20140823) TDD道場 #20
わんくま名古屋 #32 (20140823) TDD道場 #20
 
わんくま名古屋#31(20140524) TDD道場 #19
わんくま名古屋#31(20140524) TDD道場 #19わんくま名古屋#31(20140524) TDD道場 #19
わんくま名古屋#31(20140524) TDD道場 #19
 
わんくま名古屋#31(20140524) ユニバーサルWindowsアプリ開発の勧め
わんくま名古屋#31(20140524) ユニバーサルWindowsアプリ開発の勧めわんくま名古屋#31(20140524) ユニバーサルWindowsアプリ開発の勧め
わんくま名古屋#31(20140524) ユニバーサルWindowsアプリ開発の勧め
 
Windows ストア アプリでスレッド間排他処理
Windows ストア アプリでスレッド間排他処理Windows ストア アプリでスレッド間排他処理
Windows ストア アプリでスレッド間排他処理
 
Windows 8.1 Update 1 の噂をまとめてみた
Windows 8.1 Update 1 の噂をまとめてみたWindows 8.1 Update 1 の噂をまとめてみた
Windows 8.1 Update 1 の噂をまとめてみた
 
タダで始めるテストファースト入門 ~ C# Express + NUnit
タダで始めるテストファースト入門 ~ C# Express + NUnitタダで始めるテストファースト入門 ~ C# Express + NUnit
タダで始めるテストファースト入門 ~ C# Express + NUnit
 
わんくま名古屋 #29 (2013/11/23) TDD道場 #17
わんくま名古屋 #29 (2013/11/23) TDD道場 #17わんくま名古屋 #29 (2013/11/23) TDD道場 #17
わんくま名古屋 #29 (2013/11/23) TDD道場 #17
 

Recently uploaded

論文紹介:BAM-DETR: Boundary-Aligned Moment Detection Transformer for Temporal Sen...
論文紹介:BAM-DETR: Boundary-Aligned Moment Detection Transformer for Temporal Sen...論文紹介:BAM-DETR: Boundary-Aligned Moment Detection Transformer for Temporal Sen...
論文紹介:BAM-DETR: Boundary-Aligned Moment Detection Transformer for Temporal Sen...
Toru Tamaki
 
論文紹介:Task-aligned Part-aware Panoptic Segmentation through Joint Object-Part ...
論文紹介:Task-aligned Part-aware Panoptic Segmentation through Joint Object-Part ...論文紹介:Task-aligned Part-aware Panoptic Segmentation through Joint Object-Part ...
論文紹介:Task-aligned Part-aware Panoptic Segmentation through Joint Object-Part ...
Toru Tamaki
 
【AI論文解説】LLMの事前学習をvisionに適用する手法Autoregressive Image Models
【AI論文解説】LLMの事前学習をvisionに適用する手法Autoregressive Image Models【AI論文解説】LLMの事前学習をvisionに適用する手法Autoregressive Image Models
【AI論文解説】LLMの事前学習をvisionに適用する手法Autoregressive Image Models
Sony - Neural Network Libraries
 
Matsuo-Iwasawa Lab. Research unit Introduction
Matsuo-Iwasawa Lab. Research unit IntroductionMatsuo-Iwasawa Lab. Research unit Introduction
Matsuo-Iwasawa Lab. Research unit Introduction
Matsuo Lab
 
最速の組織を目指して全社で大規模スクラムを導入してみた話 #dxd2024 #medicalforce
最速の組織を目指して全社で大規模スクラムを導入してみた話 #dxd2024 #medicalforce最速の組織を目指して全社で大規模スクラムを導入してみた話 #dxd2024 #medicalforce
最速の組織を目指して全社で大規模スクラムを導入してみた話 #dxd2024 #medicalforce
chisatotakane
 
【AI論文解説】クラスタリングベースアプローチによる大規模データセット自動キュレーション
【AI論文解説】クラスタリングベースアプローチによる大規模データセット自動キュレーション【AI論文解説】クラスタリングベースアプローチによる大規模データセット自動キュレーション
【AI論文解説】クラスタリングベースアプローチによる大規模データセット自動キュレーション
Sony - Neural Network Libraries
 
LoRaWAN AI Image Sensorエンドデバイス AIG01カタログ
LoRaWAN AI Image Sensorエンドデバイス AIG01カタログLoRaWAN AI Image Sensorエンドデバイス AIG01カタログ
LoRaWAN AI Image Sensorエンドデバイス AIG01カタログ
CRI Japan, Inc.
 
Imitation learning for robotics 勉強会資料(20240701)
Imitation learning for robotics 勉強会資料(20240701)Imitation learning for robotics 勉強会資料(20240701)
Imitation learning for robotics 勉強会資料(20240701)
Natsutani Minoru
 
"ros2rapper", Hardware implimentation of ROS2 communication Protocol without ...
"ros2rapper", Hardware implimentation of ROS2 communication Protocol without ..."ros2rapper", Hardware implimentation of ROS2 communication Protocol without ...
"ros2rapper", Hardware implimentation of ROS2 communication Protocol without ...
たけおか しょうぞう
 
Kyndryl Developer Services のご紹介 2024年7月
Kyndryl Developer Services のご紹介  2024年7月Kyndryl Developer Services のご紹介  2024年7月
Kyndryl Developer Services のご紹介 2024年7月
Takayuki Nakayama
 
Matsuo-Iwasawa Lab. | Research unit Introduction
Matsuo-Iwasawa Lab. | Research unit IntroductionMatsuo-Iwasawa Lab. | Research unit Introduction
Matsuo-Iwasawa Lab. | Research unit Introduction
Matsuo Lab
 
Matsuo-Iwasawa lab. Research Unit Introduction
Matsuo-Iwasawa lab. Research Unit IntroductionMatsuo-Iwasawa lab. Research Unit Introduction
Matsuo-Iwasawa lab. Research Unit Introduction
Matsuo Lab
 

Recently uploaded (12)

論文紹介:BAM-DETR: Boundary-Aligned Moment Detection Transformer for Temporal Sen...
論文紹介:BAM-DETR: Boundary-Aligned Moment Detection Transformer for Temporal Sen...論文紹介:BAM-DETR: Boundary-Aligned Moment Detection Transformer for Temporal Sen...
論文紹介:BAM-DETR: Boundary-Aligned Moment Detection Transformer for Temporal Sen...
 
論文紹介:Task-aligned Part-aware Panoptic Segmentation through Joint Object-Part ...
論文紹介:Task-aligned Part-aware Panoptic Segmentation through Joint Object-Part ...論文紹介:Task-aligned Part-aware Panoptic Segmentation through Joint Object-Part ...
論文紹介:Task-aligned Part-aware Panoptic Segmentation through Joint Object-Part ...
 
【AI論文解説】LLMの事前学習をvisionに適用する手法Autoregressive Image Models
【AI論文解説】LLMの事前学習をvisionに適用する手法Autoregressive Image Models【AI論文解説】LLMの事前学習をvisionに適用する手法Autoregressive Image Models
【AI論文解説】LLMの事前学習をvisionに適用する手法Autoregressive Image Models
 
Matsuo-Iwasawa Lab. Research unit Introduction
Matsuo-Iwasawa Lab. Research unit IntroductionMatsuo-Iwasawa Lab. Research unit Introduction
Matsuo-Iwasawa Lab. Research unit Introduction
 
最速の組織を目指して全社で大規模スクラムを導入してみた話 #dxd2024 #medicalforce
最速の組織を目指して全社で大規模スクラムを導入してみた話 #dxd2024 #medicalforce最速の組織を目指して全社で大規模スクラムを導入してみた話 #dxd2024 #medicalforce
最速の組織を目指して全社で大規模スクラムを導入してみた話 #dxd2024 #medicalforce
 
【AI論文解説】クラスタリングベースアプローチによる大規模データセット自動キュレーション
【AI論文解説】クラスタリングベースアプローチによる大規模データセット自動キュレーション【AI論文解説】クラスタリングベースアプローチによる大規模データセット自動キュレーション
【AI論文解説】クラスタリングベースアプローチによる大規模データセット自動キュレーション
 
LoRaWAN AI Image Sensorエンドデバイス AIG01カタログ
LoRaWAN AI Image Sensorエンドデバイス AIG01カタログLoRaWAN AI Image Sensorエンドデバイス AIG01カタログ
LoRaWAN AI Image Sensorエンドデバイス AIG01カタログ
 
Imitation learning for robotics 勉強会資料(20240701)
Imitation learning for robotics 勉強会資料(20240701)Imitation learning for robotics 勉強会資料(20240701)
Imitation learning for robotics 勉強会資料(20240701)
 
"ros2rapper", Hardware implimentation of ROS2 communication Protocol without ...
"ros2rapper", Hardware implimentation of ROS2 communication Protocol without ..."ros2rapper", Hardware implimentation of ROS2 communication Protocol without ...
"ros2rapper", Hardware implimentation of ROS2 communication Protocol without ...
 
Kyndryl Developer Services のご紹介 2024年7月
Kyndryl Developer Services のご紹介  2024年7月Kyndryl Developer Services のご紹介  2024年7月
Kyndryl Developer Services のご紹介 2024年7月
 
Matsuo-Iwasawa Lab. | Research unit Introduction
Matsuo-Iwasawa Lab. | Research unit IntroductionMatsuo-Iwasawa Lab. | Research unit Introduction
Matsuo-Iwasawa Lab. | Research unit Introduction
 
Matsuo-Iwasawa lab. Research Unit Introduction
Matsuo-Iwasawa lab. Research Unit IntroductionMatsuo-Iwasawa lab. Research Unit Introduction
Matsuo-Iwasawa lab. Research Unit Introduction
 

Metroアプリの作り方 (COD2012)

  • 1. 2012/6/9 COD2012 - Metroアプリの作り方 1/xx Metroアプリ の COD2012 作り方 名古屋会場 13:00~ BluewaterSoft http://www.bluewatersoft.jp/ biac
  • 2. 2012/6/9 COD2012 - Metroアプリの作り方 2/xx biac • 1957、スプートニクの前に誕生 (山本 康彦) • 1983、名古屋大学工学部(修士)卒 自己紹介 • HONDA R&Dで自動車設計 BluewaterSoft • 1994~ ソフトウェア業界 • 2012~ BluewaterSoft http://www.bluewatersoft.jp • 著書 著作 – 「速攻入門 C#」 (2012/3) 技術評論社、共著 わんくま同盟 – 「ソフトな彼女とハードな彼氏。」(2012/3) アジャイ ルマインドvol.1 掲載 • 記事 – 連載中 「C#でTDD入門」CodeZine 名古屋勉強会で – 「Metroスタイルアプリの開発者が知るべき3 来場者 つのこと」、他 @IT - .NET開発者中心 TDD道場 …etc. 次回は7月7日、七夕の日 プレゼント!
  • 3. 2012/6/9 COD2012 - Metroアプリの作り方 3 • Windows 8 Metro スタイル ア Agenda • 前半 プリの紹介 • 開発のおおまかな流れ • マルチプラットフォームに対応 • 後半 させよう • 共用ライブラリの作り方 Claudia Madobe © 2011 Microsoft Corporation All Rights Reserved. ※ クラウディアさんについてはこのへん見てね ⇒ http://msdn.microsoft.com/ja-jp/hh298798
  • 4. 2012/6/9 COD2012 - Metroアプリの作り方 4 Metro スタイル アプリ Windows Store kindle Cut the Rope 朝日新聞 楽天レシピ 地球書店 ビデオ
  • 5. 2012/6/9 COD2012 - Metroアプリの作り方 5 1. 没入型 2.高速かつ滑 • 開発者にとっ Metro らか ては – フルスクリーン – 組み込みのアニ – 個人で世界市 アプリの – 「飾り」の廃止 メーション 場を相手にでき 特徴 – メニュー非表示 – 非同期API る 3. 安心で安全 4. いつでも、 • タッチ操作に どこでも 最適 – Store経由のみで – スマホ、タブレッ • スマホやタブ 配布 ト、デスクトップ – サンドボックス レットに適し – 1回購入で5台分 ている – API制限 Claudia Madobe © 2011 Microsoft Corporation All Rights Reserved.
  • 6. 2012/6/9 COD2012 - Metroアプリの作り方 6 MSの狙い ~ スマートフォン から デスクトップ まで Metro! デスクトップからスマホまで 売りたいのは ココ !! Windows 8 Release Preview Product guide http://www.microsoft.com/about/mspreview/windows8/Windows8_RP_Product_guide.pdf p.28の画像に IS12T の写真を合成
  • 7. 2012/6/9 COD2012 - Metroアプリの作り方 7 タッチ オペレーション slide swipe drag pinch / stretch press & hold rotate tap × フリック × スワイプして閉じる (RPで "drag" になった) http://www.microsoft.com/about/mspreview/windows8/Windows8_RP_Product_guide.pdf
  • 8. 2012/6/9 COD2012 - Metroアプリの作り方 8 Metroデザイン Metro Windows Phone 7 ≠ ↓ Metro Metro Windows 8 アプリ アプリ Win 8 Metro アプリ Win8 Metro スタイル アプリの動 デスク トップ デスク トップ サンドボックス 作環境: AppContainer アプリ アプリ AppContainer (WWAHost.exe) ⇒ Win8上で動く1アプリに Windows 8 過ぎない
  • 9. 2012/6/9 COD2012 - Metroアプリの作り方 9 例外も居る AppContainerで 動いている Metroスタイルアプリ
  • 10. 2012/6/9 COD2012 - Metroアプリの作り方 10 スタート画面やMetroアプリも、従来のウィンドウ (その1) 管理者権限付きの ウィンドウなら、 Metro 画面よりも 前面に出て来られる。
  • 11. 2012/6/9 COD2012 - Metroアプリの作り方 11 スタート画面やMetroアプリも、従来のウィンドウ (その2) Spy++ で、Metro アプリのウィンドウと プロセスを見る。 ※ PID 0x0000139C = 5020 (前画面参照)
  • 12. 2012/6/9 COD2012 - Metroアプリの作り方 12 WinRT ? Win8 Metroで WinRT Windows 使えるAPIって Runtime .NET 4.5 ? …? .NET Silverlight どうやって見分 Metro .NET APIs • WinRT for Metro ければ…? style apps • .NET(一部) – Visual Studioに 頼る desktop • Win32(一部) – MSDNには表記 • COM(一部) あり – WACK (後述)
  • 13. 2012/6/9 COD2012 - Metroアプリの作り方 13 VS2012のオブジェクトブラウザー ※ オブジェクトブラウザーで、見る範囲を指定できる。
  • 14. 2012/6/9 COD2012 - Metroアプリの作り方 14 @IT: 特集:Windows 8開発に向 Building Windows 8: 信頼でき 1. Windows けて準備しよう る Metro スタイル アプリを提 開発前に Store で配布 供する 知っておく あるいは、Active Directory 内で配布。 こと 野良アプリ不可! http://www.atmarkit.co.jp/fdotnet/chus hin/readyforwin8app_01/readyforwin8 http://bluewatersoft.cocolog- nifty.com/blog/2012/05/metro-metro- app_01_01.html f64.html 2. ユーザーの 3. 万全のリ 4. コントラクト 5. タイル、トー プライバシー ジューム機能 を理解せよ スト、WNS 新インターフェース を守れ を実装せよ アプリとアプリコンテ 侵害に使えそうなAPI 複雑な画面遷移は自 ナとの間の契約により、 6. 広告 他のアプリと間接的に Storeは年会費必要、 やプロセス間通信は 分の首を絞める 連携 広告は重要 利用できない
  • 15. 2012/6/9 COD2012 - Metroアプリの作り方 15 × ローカルDB Cloud志向 × ファイルの自由な デスクトップの アクセス アプリの 発想は × プリンタ制御 – データや重い処 理はサーバー × 他アプリのコント 構想 忘れる!! ロール × USBポート、 で – ユーザー設定 RS232Cポート はクラウドに タブレットの機 Storeの機能 Storeの認定 能 要件 スマホで作れ – 課金 × 単なる広告 るもの、 – マルチタッチ × 個人的な情報の無 と考えるのが – 試用版 – カメラ、GPS、G 断取得 近道 センサー etc. – 広告 × CERO Z 相当
  • 16. 2012/6/9 COD2012 - Metroアプリの作り方 16 ストア認定要件 最低限、この要件 をクリアしていない と、Storeに出品で きない =配布できない http://msdn.microsoft.com/ja-jp/library/windows/apps/hh694083
  • 17. 2012/6/9 COD2012 - Metroアプリの作り方 17 • 4パターン • 上と左の余白 UX デザインしろ – landscape (full) とタイトルの位 置やサイズ 「鉄の掟」があ 画面の る – snap • グリッド単位 – fill の画面構成 デザイン – portrait • クローズボタン、検索 ボタン、共有ボタンetc. は付けるな • AppBarは下から デザイン • ナビゲーションバーは 上から ガイドの山 • スクロール方向は統一 しろ …etc. etc.
  • 18. 2012/6/9 COD2012 - Metroアプリの作り方 18 膨大なデザイン ガイドライン ◆ 設計ガイド (英語のものもあり) ・アプリを世界対応にするためのガイドライン ・primitive animations ・Metro スタイル アプリの UX ガイドライン ・アプリのヘルプのガイドライン ・progress controls ・ナビゲーション デザイン ◆ Guidelines and checklist (まだ全部英語) ・push notifications ・コマンド実行の設計 ・accessibility ・radio buttons ・タッチ操作の設計 ・app bars ・Rating control ・可変レイアウトの設計 ・app resources ・raw notifications ・アプリ コントラクトの一覧 ・badges ・scheduled notifications ・building a device picker ・secondary tiles ◆ Guidelines (日本語訳があるものもあり) ・buttons ・search ・ユーザー操作 ・checkboxes ・SemanticZoom controls ・タッチによるターゲット設定 ・clipboard commands ・sharing content ・視覚的なフィードバック ・combo box and list box controls ・sliders ・セマンティック ズーム ・context menus ・spell checking ・クロス スライド ・DatePickers ・splash screens ・光学ズームとサイズ変更 ・drag-and-drop animations ・text and typography ・パンのガイドライン ・edge-based UI animations ・text input ・回転のガイドライン ・file pickers ・thumbnails ・テキストと画像の選択 ・file types and protocols ・tiles ・スナップされたビューとページ横幅に合わせたビュー ・FlipView controls ・TimePickers ・画面に合わせたスケーリング ・Flyouts ・toast notifications ・ピクセル密度に合わせたスケーリング ・links ・toggle switches ・UI 設計の印刷 ・list animations ・tooltips ・タップのガイドライン ・location-aware applications ・touch input ・オーディオ認識アプリの開発 ・lock screen tiles ・transient UI animations ・カメラの UI ・message dialogs ・transition animations ・アプリのデータのローミング ・periodic notifications ・using sensitive devices ・アプリ設定のガイドライン ・グローバルな Metro スタイル アプリの設計 ・pointer animations http://bluewatersoft.cocolog-nifty.com/blog/2012/05/metro-a386.html 2012/5/22時点のまとめ(CP)
  • 19. 2012/6/9 COD2012 - Metroアプリの作り方 19 複雑な UI や HTML/CSS ロジックには XAML WinJS 実装 XAML + C#、VB C++/CX JavaScript C# (or VB) Windows Runtime .NET Class Library component (WinMD) Webアプリの DirectX を 移植には 使うなら .NET APIs Win32 Direct HTML + C++/CX for Metro API X WinRT style apps (一部) (一部) JavaScript ※ C# と VB で作れるものに差は無いけれど、ブログ記事や Q&A は C# ばかり。Metro で VB はお勧めできない。
  • 20. 2012/6/9 COD2012 - Metroアプリの作り方 20 Win8 Metro 開発環境 Windows 8 (必須) Visual Studio 2012 (必須) Team Foundation Server 2012 ※ Win7新PC購入者には ※ 有償版 または 無償の Visual Studio Win8Proが1200円(*1) Express 2012 for Windows 8 ※ いまどきソース管理してない人なんて いないよね!? TFS 2012 は Express (無償)もアリ! タッチ対応ハード Blend for Visual Studio ※ Visual Studio 2012 に付属 Expressにも付いてる! ※ VS付属のシミュレータで 検証可能 最低限、お金が掛かるのは Microsoft アカウント (必須) ・Windows 8 インターネット接続と、Microsoft アカウント (現 Windows Live ID) は必須。 ・Store 年会費: 4900円/年(*2) (*1) Windows 8 購入プログラム - https://windowsupgradeoffer.com/ja/Home/ProgramInfo (*2) 個人4900円/法人9800円 - http://msdn.microsoft.com/ja-jp/library/windows/apps/hh694064.aspx#account_countries
  • 21. 2012/6/9 COD2012 - Metroアプリの作り方 21 1. アプリ開発 2. コード分析 3. アプリ提出用 チェックリスト ※ 起動・中断処理に (FxCop) 時間が掛かるとか 4. 年齢区分の ストアへ はパフォーマンス分 析で。(Express にも ※ Expressにも 検討 (ゲーム 簡易版が搭載) 付いてます! は必須) 5. アップロード 6. Windows App 7. Storeにアッ 用のパッ Certification プロード ケージ作成 Kit (WACK) で 8. 審査に通る チェック と公開 © 2011 Microsoft Corporation All Rights Reserved. ※ 実際には、開発初期段階から、頻繁にローカル用パッケージを作ってWACKでチェックすること。
  • 22. 2012/6/9 COD2012 - Metroアプリの作り方 22 Windows App Certification Kit アプリを実際に 起動してチェック される - クラッシュとハング - アプリケーション マニフェ ストの準拠 - Windows セキュリティ機能 - サポートされている Metro スタイル API - パフォーマンス - アプリケーション マニフェ スト リソース - デバッグ構成 - ファイルのエンコード 「Windows Store 開発者向けブログ」より http://blogs.msdn.com/b/windowsstore_ja/archive/2012/05/16/10306060.aspx
  • 23. 2012/6/9 COD2012 - Metroアプリの作り方 23 Storeでは、統計情報が開発者に提供される Windows ストア ダッシュボードの レポート画面 ダウンロード数 レビュー点数 売上額 国別ユーザー数 年齢別ユーザー数 平均使用時間 クラッシュレポート …など 「Windows Store 開発者向けブログ」より http://blogs.msdn.com/b/windowsstore_ja/archive/2012/05/16/10306060.aspx
  • 24. 2012/6/9 COD2012 - Metroアプリの作り方 24 Win8 Metro 開発のための情報 (その1) MSDN デベロッパーセンター Metro スタイル アプリ http://msdn.microsoft.com/ja-jp/windows/apps/br229512.aspx
  • 25. 2012/6/9 COD2012 - Metroアプリの作り方 25 Win8 Metro 開発のための情報 (その2) Windows Developer Days 2012 (2012/4/24-25) ビデオとスライド資料 http://channel9.msdn.com/Events/Windows-Developer-Days/Windows-Developer-Days-2012
  • 26. 2012/6/9 COD2012 - Metroアプリの作り方 26 Win8 Metro 開発のための情報 (その3) Building Windows 8 Windows エンジニアリング チームによるブログ http://blogs.msdn.com/b/b8_ja/
  • 27. 2012/6/9 COD2012 - Metroアプリの作り方 27 Win8 Metro 開発のためのイベント情報 facebook Go Metro http://www.facebook.com/5Metro
  • 28. 2012/6/9 COD2012 - Metroアプリの作り方 28 Microsoft のオフライン サポート Developer Camp Application Excellence Lab ・概要編 ※ 当面6月末まで ・デザイン編 ※ 現時点でストアに登録するほぼ ・実践編 唯一の道 ハンズオン トレーニング http://www.facebook.com/5Metro/app_100855993378035 http://www.facebook.com/5Metro/app_384971174888643
  • 29. 2012/6/9 COD2012 - Metroアプリの作り方 29 後半戦 JavaScript な人、ごめんなさい。 ここから先は、C# です。
  • 30. 2012/6/9 COD2012 - Metroアプリの作り方 30 さて。Win8 Metro だけ作って満足ですか?
  • 31. 2012/6/9 COD2012 - Metroアプリの作り方 31 Windows • 画面以外は共通化したい! 他の Phone 7 Win8 Metroの Win8 Metro VM DM プラット スナップと同じ 構成のUIでい フォーム けそう! Windows Phone 7 VM DM M (ロジック) ここは できるだけ デスクトップア Webアプリ WPF VM DM 共通に WinForm プリ したい!! フルスクリー UIを簡素化し ASP.NET ンってどうなの てWebでも提供 DM ASP.NET MVC よ!? したい Data Model できれば、VMの一部も! ※ 今日は Windows Phone 8 (Apollo) の話はしませんから! 6月20日の Windows Phone Summit に注目!!
  • 32. 2012/6/9 COD2012 - Metroアプリの作り方 32 Portable .NETで共通に WinRT Class 使える部分だ Library けを使う! .NET Silverlight .NET APIs VS2010SP1か 詳細はMSDN for Metro style apps ら可能 Visual Studio 2010 SP1 desktop Portable Library Tools PCL は ここを使う ※ http://msdn.microsoft.com/ja-jp/library/hh563947%28v=vs.110%29.aspx
  • 33. 2012/6/9 COD2012 - Metroアプリの作り方 33 VM と M をすべて PCL で書けるか? 例: コマンド処理 例: ファイル読み出し VM の ICommand の中でユーザーとの対話 PCL で使える StreamReader() (図の上段) WPF Metro メッセージボックスを出してユーザーの応答を得 パス文字列は不可、Streamオブジェクトのみ。V るメソッドを、V から VM に渡す? で、パス文字列から Stream を作り出して、VM 可能だけど、タイヘンだ! 経由で M に渡す? ヘタに意地を張ると、V が肥大化する!! うまい妥協点を探れ!
  • 34. 2012/6/9 COD2012 - Metroアプリの作り方 34 VS2012 で PCL を作る ※ VS2010SP1(Express除く)では、Portable Library Tools 2 を使う http://visualstudiogallery.msdn.microsoft.com/b0e0b5e9-e138-410b-ad10-00cb3caf4981/
  • 35. 2012/6/9 COD2012 - Metroアプリの作り方 35 VS2012のオブジェクトブラウザー PCL の範囲によっては、 ブラウザーには出てきて も、使えないことがある。 たとえば WP7 を含めると、 これはダメ。 (WP7.x は Legacy な PCL) ※ オブジェクトブラウザーで、PCLの範囲に限定してAPIを見ているところ。
  • 36. 2012/6/9 COD2012 - Metroアプリの作り方 36 VS 2010 Express for WP で PCL を使う Windows Phone SDK 7.1.1 参照の追加で、 PCL の dll を直 接指定する。 ※ WP8 では、プロジェクト参 照でいけるようになる気が する。 ※ ソースへのリンクを使って もよい。 ※ Windows Phone SDK 7.1.1 を Windows 8 Release Preview へインストールする際の注意点 http://blogs.msdn.com/b/aonishi/archive/2012/06/04/10314544.aspx
  • 37. 2012/6/9 COD2012 - Metroアプリの作り方 37 じつは、WP7 で PCL は、ちょっとツラい WP7とSilverlightを外し てPCLを作ると、Task やHttpClientの非同期 アクセスなど、便利なも のがいっぱい使える。 ※ 右は、WP7とSilverlightも含めたPCLに指定しなおしたところ。Taskなどがコンパイルエラーになっている。
  • 38. 2012/6/9 COD2012 - Metroアプリの作り方 38 WP7 で使うためには、非同期は昔の書き方で! Task (つまりasync / await) が使えないので、非同期は Begin ~ End パターンで書 くことになる。 そのほかにも、UrlEncode() とかが使えないとか、不便 な事がたくさん orz
  • 39. 2012/6/9 COD2012 - Metroアプリの作り方 39 WP7 側から呼び出して、データをセット Windows Phone 7.x では、 AsyncCallback メソッドの中 で、結果を受け取り、デー タをセットする。 UI スレッドではないので、 ちょっと面倒。
  • 40. 2012/6/9 COD2012 - Metroアプリの作り方 40 WPF で PCL を使う VS2012 参照の追加で、 PCL のプロジェクト を指定する。
  • 41. 2012/6/9 COD2012 - Metroアプリの作り方 41 WPF 側から呼び出して、データをセット WPF 4.5 では、 async / await が使 える。 await 後は UI スレッ ドに戻るので、非同 期の結果を取り出 すのも簡単。 (Metro も同様)
  • 42. 2012/6/9 COD2012 - Metroアプリの作り方 42 WPF / Metro / WP7
  • 43. 2012/6/9 COD2012 - Metroアプリの作り方 43 ○ ロジックを × 進化中。 WP7 と PCL 共用できる のは、 WP7 を対象 にするのは Silverlight を 対象にしてい まとめ 魅力 辛い ないなら、 お薦め! WP8 に期待! - .NET 4.5 WPF, WinForm, ASP.NET - Metro style app - ( WP8 ? )
  • 44. 2012/6/9 COD2012 - Metroアプリの作り方 44 • Metro スタイル アプリは、ス マホとタブレットに最適! まとめ • 前半 • Win8 Metro の開発と配布は、 Windows Phone と似てる! • Win8 Metro 用だけにアプリを 作るのはもったいない! • 後半 • Portable Class Library でロ ジックの共用化を図ろう
  • 45. 2012/6/9 COD2012 - Metroアプリの作り方 45 ご清聴 ありがとうございました