SlideShare une entreprise Scribd logo
1  sur  43
Télécharger pour lire hors ligne
空のテンプレから始める
Windows8ストアアプリ
2012.11.03
MICROSOFT MVP FOR VISUAL BASIC / ORACLE ACE
初音玲
自己紹介
ミク好きですが元々「初音」です。
民間エヴァンジェリストです
 Microsoft
          MVP for Developer Tools
 Oracle ACE
Codezineで連載中
監修した翻訳本がでました。
図がわかりやすくなった
読みやすくなった
31日(月)Y-01b
おさらい

アプリ    • Windows 8 ストアアプリ




デザイン   • Microsoftデザインスタイル




 UI名   • なにそれ?おいしいの?
Microsoftデザインスタイル?
   http://msdn.microsoft.com/en-us/library/windows/apps/hh464920.aspx

     「hh464920」でbingる
なにがなにやら?

                                           従来型
      Windowsストアアプリで配布
                                            配布

     Windows 8
                               デスクトップアプリ
     ストアアプリ


      Microsoft Design Style        UXガイド


      WinRT
                               .NET Framework
(Windows Runtime)
忘れないで!
Windows 8 ストアアプリは
 Win7では開発できません
 Windows   Runtime使うから


Windows
       Phone 8アプリは
 Win8無印では開発できません
 Hyper-V使うから
さあ、
開発を
始めよう
魅惑のテンプレートたち
困惑のテンプレートたち
グリッドアプリケーション

                  GroupItemPage




 ItemDetailPage               GroupDetailPage
分割アプリケーション

    ItemsPage




    SplitPage
グリッドアプリケーション
の作成例
テンプレートはStyleが花盛り
<Button
  x:Name="backButton"
  Click="GoBack"
  IsEnabled="{Binding DefaultViewModel.CanGoBack,
              ElementName=pageRoot}"
  Style="{StaticResource BackButtonStyle}"/>
<TextBlock x:Name="pageTitle" Grid.Column="1"
      Text="{Binding Title}"
      Style="{StaticResource PageHeaderTextStyle}"/>
グリッドテンプレの問題点
複雑
複雑
複雑
複雑
複雑
複雑
こんなの絶対おかしいよ
分割テンプレの問題点
複雑
複雑
複雑
複雑
複雑
複雑
こんなの絶対おかしいよ
お勧めは空のテンプレート
最小のスタイル   最速の理解
          たったこれだけ
最小のスタイル   最速の理解
          つかえない
          ロゴ画像
最小のスタイル   最速の理解
          Style定義の
          総本山
最小のスタイル   最速の理解
          アプリ定義
最小のスタイル   最速の理解
          MainPage


          テンプレで
          MainPage
          つくるのは
          これだけ
最小のスタイル   最速の理解
          超重要
Package.appxmanifest
Package.appxmanifest
Package.appxmanifest
Package.appxmanifest
実行してみましょう
実行してみましょう???
あまりにも空なテンプレ
BindableBase.vb
LayoutAwardPage.vb
StandardStyles.xaml
SuspensionManager.vb
BindableBase
INotifyPropertyChanged
PropertyChangedイベント
SetPropertyメソッド
OnPropertyChangedメソッド
LayoutAwardPage
簡単なViewModelっぽいもの
中身は…
SuspensionManager
使うために使ってあげてるんだからねっ!
StandardStyles.xaml
便利なスタイル詰め合わせ
ボタンアイコンがあるよ!
 <Style x:Key=“SaveAppBarButtonStyle” … >
   <Setter … />
   <Setter Property=“AutomationProperties.Name” Value=“Save" />
   <Setter Property="Content" Value="&#xE105;"/>
 </Style>
SuspensionManager
SessionState
SaveAsync
RestoreAsync
RegisterFrame
UnregisterFrame
SessionStateForFrame
使い方
   Protected Overrides Sub OnNavigatedFrom ( …
       ‘hogehoge
       MyBase.OnNavigatedFrom(e)
     End Sub

   Protected Overrides Sub OnNavigatedTo( …
       ‘イベントハンドル登録
       MyBase.OnNavigatedTo(e)
       ‘hogehoge
     End Sub
アプリ例
Claudia   Clock
ガイドライン準拠でフリーダムに
ありがとうございました




Twitter:   @hatsune_
E-mail:    hatsune.a@nifty.com

Contenu connexe

Tendances

ゲームエンジンとMVC
ゲームエンジンとMVCゲームエンジンとMVC
ゲームエンジンとMVC
AimingStudy
 
2012.11.03 #odstudy Excel方眼紙に魂を削られない為のoffice講座
2012.11.03 #odstudy Excel方眼紙に魂を削られない為のoffice講座 2012.11.03 #odstudy Excel方眼紙に魂を削られない為のoffice講座
2012.11.03 #odstudy Excel方眼紙に魂を削られない為のoffice講座
真乙 九龍
 
JavaFXとRoboVMを使ってiOS上で動くアプリを試してみた
JavaFXとRoboVMを使ってiOS上で動くアプリを試してみたJavaFXとRoboVMを使ってiOS上で動くアプリを試してみた
JavaFXとRoboVMを使ってiOS上で動くアプリを試してみた
Satoshi Takami
 
ウェブサイト/ブログを組み合わせたサイトのテーマ化
ウェブサイト/ブログを組み合わせたサイトのテーマ化ウェブサイト/ブログを組み合わせたサイトのテーマ化
ウェブサイト/ブログを組み合わせたサイトのテーマ化
Hajime Fujimoto
 

Tendances (20)

ゲームエンジンとMVC
ゲームエンジンとMVCゲームエンジンとMVC
ゲームエンジンとMVC
 
WordPress初心者からの脱出! カスタムなんとかをちゃんと理解する
WordPress初心者からの脱出! カスタムなんとかをちゃんと理解するWordPress初心者からの脱出! カスタムなんとかをちゃんと理解する
WordPress初心者からの脱出! カスタムなんとかをちゃんと理解する
 
ノンプログラミングWebデザイナーがWordPressをおぼえるためにやったこと 〜巨人の肩にのってみた!〜
 ノンプログラミングWebデザイナーがWordPressをおぼえるためにやったこと 〜巨人の肩にのってみた!〜 ノンプログラミングWebデザイナーがWordPressをおぼえるためにやったこと 〜巨人の肩にのってみた!〜
ノンプログラミングWebデザイナーがWordPressをおぼえるためにやったこと 〜巨人の肩にのってみた!〜
 
更新作業で消耗しない!Web製作者のためのWordPress公式ディレクトリ活用術
更新作業で消耗しない!Web製作者のためのWordPress公式ディレクトリ活用術更新作業で消耗しない!Web製作者のためのWordPress公式ディレクトリ活用術
更新作業で消耗しない!Web製作者のためのWordPress公式ディレクトリ活用術
 
WordPressで作るポートフォリオサイト
WordPressで作るポートフォリオサイトWordPressで作るポートフォリオサイト
WordPressで作るポートフォリオサイト
 
JavaScriptと共に歩いて行く決意をした君へ
JavaScriptと共に歩いて行く決意をした君へJavaScriptと共に歩いて行く決意をした君へ
JavaScriptと共に歩いて行く決意をした君へ
 
Angular1&2
Angular1&2Angular1&2
Angular1&2
 
メニューは管理画面で設定できるようにしよう
メニューは管理画面で設定できるようにしようメニューは管理画面で設定できるようにしよう
メニューは管理画面で設定できるようにしよう
 
パララックス効果を使ったWordPressサイト
パララックス効果を使ったWordPressサイトパララックス効果を使ったWordPressサイト
パララックス効果を使ったWordPressサイト
 
2012.11.03 #odstudy Excel方眼紙に魂を削られない為のoffice講座
2012.11.03 #odstudy Excel方眼紙に魂を削られない為のoffice講座 2012.11.03 #odstudy Excel方眼紙に魂を削られない為のoffice講座
2012.11.03 #odstudy Excel方眼紙に魂を削られない為のoffice講座
 
About rails 3
About rails 3About rails 3
About rails 3
 
WordPressプラグイン開発の めんどうな作業は執事(Jenkins)にお任せ
WordPressプラグイン開発の めんどうな作業は執事(Jenkins)にお任せWordPressプラグイン開発の めんどうな作業は執事(Jenkins)にお任せ
WordPressプラグイン開発の めんどうな作業は執事(Jenkins)にお任せ
 
AngularJS勉強会「そもそもwebって」@ツクロア勉強会(2015.09.10)
AngularJS勉強会「そもそもwebって」@ツクロア勉強会(2015.09.10)AngularJS勉強会「そもそもwebって」@ツクロア勉強会(2015.09.10)
AngularJS勉強会「そもそもwebって」@ツクロア勉強会(2015.09.10)
 
WordBench 東京 とは
WordBench 東京 とはWordBench 東京 とは
WordBench 東京 とは
 
かけ算で使いこなす Xamarin
かけ算で使いこなす Xamarinかけ算で使いこなす Xamarin
かけ算で使いこなす Xamarin
 
デザイナーとエンジニアの境界線 〜 Are you a Designer or an Engineer? 〜
デザイナーとエンジニアの境界線 〜 Are you a Designer or an Engineer? 〜デザイナーとエンジニアの境界線 〜 Are you a Designer or an Engineer? 〜
デザイナーとエンジニアの境界線 〜 Are you a Designer or an Engineer? 〜
 
JavaFXとRoboVMを使ってiOS上で動くアプリを試してみた
JavaFXとRoboVMを使ってiOS上で動くアプリを試してみたJavaFXとRoboVMを使ってiOS上で動くアプリを試してみた
JavaFXとRoboVMを使ってiOS上で動くアプリを試してみた
 
ウェブサイト/ブログを組み合わせたサイトのテーマ化
ウェブサイト/ブログを組み合わせたサイトのテーマ化ウェブサイト/ブログを組み合わせたサイトのテーマ化
ウェブサイト/ブログを組み合わせたサイトのテーマ化
 
Excel 方眼紙にさよならを。
Excel 方眼紙にさよならを。Excel 方眼紙にさよならを。
Excel 方眼紙にさよならを。
 
使ってはいけないテンプレートタグ(Word bench 2015/08)
使ってはいけないテンプレートタグ(Word bench 2015/08)使ってはいけないテンプレートタグ(Word bench 2015/08)
使ってはいけないテンプレートタグ(Word bench 2015/08)
 

En vedette

おはようたいむしふと
おはようたいむしふとおはようたいむしふと
おはようたいむしふと
Akira Hatsune
 
Windowsストア[DB]アプリ入門
Windowsストア[DB]アプリ入門Windowsストア[DB]アプリ入門
Windowsストア[DB]アプリ入門
Akira Hatsune
 
Tokyo Motion Control Network 技術WG
Tokyo Motion Control Network 技術WGTokyo Motion Control Network 技術WG
Tokyo Motion Control Network 技術WG
Akira Hatsune
 
今だからこそ最新のVB新機能の話をしよう
今だからこそ最新のVB新機能の話をしよう今だからこそ最新のVB新機能の話をしよう
今だからこそ最新のVB新機能の話をしよう
Akira Hatsune
 

En vedette (14)

Kinect v2 からUSBでつないだ機器をコントロールしてみよう Vol.1
Kinect v2 からUSBでつないだ機器をコントロールしてみよう Vol.1Kinect v2 からUSBでつないだ機器をコントロールしてみよう Vol.1
Kinect v2 からUSBでつないだ機器をコントロールしてみよう Vol.1
 
Windows Azure x Nifty Cloud
Windows Azure x Nifty CloudWindows Azure x Nifty Cloud
Windows Azure x Nifty Cloud
 
おはようたいむしふと
おはようたいむしふとおはようたいむしふと
おはようたいむしふと
 
Coloris紹介
Coloris紹介Coloris紹介
Coloris紹介
 
今回のLTについて
今回のLTについて今回のLTについて
今回のLTについて
 
Windowsストア[DB]アプリ入門
Windowsストア[DB]アプリ入門Windowsストア[DB]アプリ入門
Windowsストア[DB]アプリ入門
 
Windowsストアアプリで始める Leap Motion入門
Windowsストアアプリで始めるLeap Motion入門Windowsストアアプリで始めるLeap Motion入門
Windowsストアアプリで始める Leap Motion入門
 
Leap Motion入門ハンズオン
Leap Motion入門ハンズオンLeap Motion入門ハンズオン
Leap Motion入門ハンズオン
 
Tokyo Motion Control Network 技術WG
Tokyo Motion Control Network 技術WGTokyo Motion Control Network 技術WG
Tokyo Motion Control Network 技術WG
 
Kinect2で未来をつかむ
Kinect2で未来をつかむKinect2で未来をつかむ
Kinect2で未来をつかむ
 
気持ちよい操作感を演出するスタイリッシュモーションという考え方
気持ちよい操作感を演出するスタイリッシュモーションという考え方気持ちよい操作感を演出するスタイリッシュモーションという考え方
気持ちよい操作感を演出するスタイリッシュモーションという考え方
 
今だからこそ最新のVB新機能の話をしよう
今だからこそ最新のVB新機能の話をしよう今だからこそ最新のVB新機能の話をしよう
今だからこそ最新のVB新機能の話をしよう
 
ネイティブアプリ開発を加速する、モダンバックエンドとのタイアップ手法
ネイティブアプリ開発を加速する、モダンバックエンドとのタイアップ手法ネイティブアプリ開発を加速する、モダンバックエンドとのタイアップ手法
ネイティブアプリ開発を加速する、モダンバックエンドとのタイアップ手法
 
KinebrickEV3におけるスタイリッシュモーションの取り組み
KinebrickEV3におけるスタイリッシュモーションの取り組みKinebrickEV3におけるスタイリッシュモーションの取り組み
KinebrickEV3におけるスタイリッシュモーションの取り組み
 

Similaire à 空のテンプレートから始めるWindows 8 ストアアプリ

スマ研第2回レポート
スマ研第2回レポートスマ研第2回レポート
スマ研第2回レポート
Shinpei Niiyama
 
Css nite(2010.09.23)
Css nite(2010.09.23)Css nite(2010.09.23)
Css nite(2010.09.23)
Yoshiki Ushida
 
DSL駆動によるクラウド・アプリケーション開発
DSL駆動によるクラウド・アプリケーション開発DSL駆動によるクラウド・アプリケーション開発
DSL駆動によるクラウド・アプリケーション開発
Tomoharu ASAMI
 
Blendの便利機能振り返り
Blendの便利機能振り返りBlendの便利機能振り返り
Blendの便利機能振り返り
一希 大田
 

Similaire à 空のテンプレートから始めるWindows 8 ストアアプリ (20)

2012 05-19第44回cocoa勉強会発表資料
2012 05-19第44回cocoa勉強会発表資料2012 05-19第44回cocoa勉強会発表資料
2012 05-19第44回cocoa勉強会発表資料
 
Internet Explorer 9 の新機能「固定サイト」 (Pinned sites)
Internet Explorer 9 の新機能「固定サイト」 (Pinned sites)Internet Explorer 9 の新機能「固定サイト」 (Pinned sites)
Internet Explorer 9 の新機能「固定サイト」 (Pinned sites)
 
スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向
 
ワイヤーフレームを高速にXDらしく作る
ワイヤーフレームを高速にXDらしく作るワイヤーフレームを高速にXDらしく作る
ワイヤーフレームを高速にXDらしく作る
 
スマ研第2回レポート
スマ研第2回レポートスマ研第2回レポート
スマ研第2回レポート
 
Wankuma0402
Wankuma0402Wankuma0402
Wankuma0402
 
Css nite(2010.09.23)
Css nite(2010.09.23)Css nite(2010.09.23)
Css nite(2010.09.23)
 
eZ Publish 2012年4月勉強会 - eZ Publish設計ベストプラクティス
eZ Publish 2012年4月勉強会 - eZ Publish設計ベストプラクティスeZ Publish 2012年4月勉強会 - eZ Publish設計ベストプラクティス
eZ Publish 2012年4月勉強会 - eZ Publish設計ベストプラクティス
 
ニコニコ超デザイン-Metro考察編-
ニコニコ超デザイン-Metro考察編-ニコニコ超デザイン-Metro考察編-
ニコニコ超デザイン-Metro考察編-
 
20120118 titanium
20120118 titanium20120118 titanium
20120118 titanium
 
Titanium実装最初の一歩.
Titanium実装最初の一歩. Titanium実装最初の一歩.
Titanium実装最初の一歩.
 
LightSwitch で遊んでみた Rev. 2
LightSwitch で遊んでみた Rev. 2LightSwitch で遊んでみた Rev. 2
LightSwitch で遊んでみた Rev. 2
 
DSL駆動によるクラウド・アプリケーション開発
DSL駆動によるクラウド・アプリケーション開発DSL駆動によるクラウド・アプリケーション開発
DSL駆動によるクラウド・アプリケーション開発
 
ASP.NET MVC 2 ~新機能の紹介~
ASP.NET MVC 2 ~新機能の紹介~ASP.NET MVC 2 ~新機能の紹介~
ASP.NET MVC 2 ~新機能の紹介~
 
Blendの便利機能振り返り
Blendの便利機能振り返りBlendの便利機能振り返り
Blendの便利機能振り返り
 
2013 Ignite UI 最新情報 in 岡山
2013 Ignite UI 最新情報 in 岡山2013 Ignite UI 最新情報 in 岡山
2013 Ignite UI 最新情報 in 岡山
 
お客様が望んでいるモダンデスクトップアプリとは?/傾向と対策 Part1
お客様が望んでいるモダンデスクトップアプリとは?/傾向と対策 Part1お客様が望んでいるモダンデスクトップアプリとは?/傾向と対策 Part1
お客様が望んでいるモダンデスクトップアプリとは?/傾向と対策 Part1
 
Djangoによるスマホアプリバックエンドの実装
Djangoによるスマホアプリバックエンドの実装Djangoによるスマホアプリバックエンドの実装
Djangoによるスマホアプリバックエンドの実装
 
メトロスタイルアプリ開発 最初の一歩
メトロスタイルアプリ開発最初の一歩メトロスタイルアプリ開発最初の一歩
メトロスタイルアプリ開発 最初の一歩
 
Slides mkmk5
Slides mkmk5Slides mkmk5
Slides mkmk5
 

Dernier

Dernier (11)

Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
 
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
 
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイスLoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
 
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半        2024/04/26の勉強会で発表されたものです。新人研修 後半        2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
 
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
 
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
 
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアルLoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
 
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
 
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
 
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
 
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
 

空のテンプレートから始めるWindows 8 ストアアプリ