メトロスタイルアプリ開発最初の一歩

メトロスタイルアプリ開発最初の一歩

• 1.
  メトロスタイルアプリ開発 最初の一歩 青柳 臣一 MetroStyleDeveloper #02 2012年4月19日（土）
• 2.
  自己紹介 Twitter: @ShinichiAoyagi ブログ: http://shinichiaoyagi.blogspot.com/ 仕事 職場 自宅 ソフトウエア開発 WPF、Silverlight、 淀屋橋 吹田 C#、VB、
• 3.
  Windows 8 • 正式名 – Windows 8 – Windows 8 Pro – Windows RT 発売時期は不明 • Windows 8 Consumer Preview リリース中
• 4.
  Windows 8 のエディション ※ITPro より
• 5.
  メトロスタイル Apps とデスクトップApps
• 6.
  メトロスタイル Apps Windows WinRT フル スクリーン Store サスペンド タイル Share
• 7.
  Windows Store 要登録 有料 審査 メトロスタイル Apps
• 8.
  WinRT • 新しいランタイム –.NET Framework、Silverlight、Windows Phone のいずれとも異なる • 制限された API（セキュアー） • 非同期を前提とした API
• 9.
  フルスクリーン • 最低 1024px×768px •スナップ 320px固定
• 10.
  サスペンド • いつの間にか終了 • 起動時に復帰
• 11.
  インターネットエクスプローラー • IE10 相当 •メトロスタイル IE とデスクトップ IE • メトロスタイル IE から Windows Store やアプリへシームレスに連携 – 例: http://www.buildwindows.com/
• 12.
  デモ • Visual Studio11 Beta
• 13.
  XAML (1) <Grid Background="{StaticResourceApplicationPageBackgroundBrush}"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Grid Grid.Row="0"> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Button Grid.Column="0" x:Name="OpenButton" FontSize="48“ Content="開く" Width="300" Margin="16,16,16,16“ Click="OpenButton_Click"/> <Border Grid.Column="1"> <TextBlock x:Name="FileNameText" FontSize="48“ Margin="16,16,16,16" VerticalAlignment="Center"/> </Border> </Grid> <Image x:Name="PictureImage" Grid.Row="1" Margin="16,16,16,16"/> </Grid>
• 14.
  XAML (2) • だいたいWPF、Silverlight、WP7 と同 じ感じ • けど、いろいろ違うところもあり – そもそも属する名前空間が違ったり （Windows.UI.Xaml.Controls） – TextBlock には Background が無かったり – Border や TextBlock は sealed だったり
• 15.
  画像を選択 (1) private voidOpenButton_Click(object sender, RoutedEventArgs e) { var openPicker = new FileOpenPicker(); openPicker.ViewMode = PickerViewMode.Thumbnail; openPicker.SuggestedStartLocation = PickerLocationId.PicturesLibrary; openPicker.FileTypeFilter.Add(".jpg"); var asyncOpe = openPicker.PickSingleFileAsync(); asyncOpe.Completed = onCompleted; } private void onCompleted(IAsyncOperation<Windows.Storage.StorageFile> asyncInfo, AsyncStatus asyncStatus) { if (asyncStatus == AsyncStatus.Completed) { var file = asyncInfo.GetResults(); var path = file.Path; this.Dispatcher.Invoke(Windows.UI.Core.CoreDispatcherPriority.Normal, (s, e) => { this.FileNameText.Text = path; }, this, null); } }
• 16.
  非同期 • 50ms 以上かかりそうなものはみんな非同 期 – 例: ファイルを作成 StorageFolder.CreateFileAsync() – 例: ファイルを列挙 CreateFileQuery() して GetFilesAsync() • 同期版の API はそもそも存在しない
• 17.
  画像を選択 (2) • async/await privateasync void OpenButton_Click(object sender, RoutedEventArgs e) { var openPicker = new FileOpenPicker(); openPicker.ViewMode = PickerViewMode.Thumbnail; openPicker.SuggestedStartLocation = PickerLocationId.PicturesLibrary; openPicker.FileTypeFilter.Add(".jpg"); var file = await openPicker.PickSingleFileAsync(); this.FileNameText.Text = file.Path; }
• 18.
  ありがとうございました。