Windows 8.1 Previewがストアアプリ開発に与える影響

速習 Windowsストアアプリケーション 番外編1

　Windows 8の大型アップデート、Windows 8.1 Previewが一般公開されました。今回はいつもの「速習Windowsストアアプリ」の流れを外れて、Windows 8.1の機能について開発者に与える影響を中心に紹介していこうと思います。

• 参考：Windows 8.1 Preview のダウンロード

　これまで「速習Windowsストアアプリ」の連載でも、ストアアプリの実装だけでなく、ストアプリの、Windows 8のコンセプト（作法）を合わせて紹介してきました。8.1 Previewはそのコンセプトの変更も示唆しています。その辺も注意しながら読んでみてください。

※注意

　本記事はPreview版のWindows 8.1に基づいて書かれています。今後の版を重ねるうちに仕様が変更されることもあります。

8.1の変更点

コントロールの追加

　Windows 8.1 Previewでは、新しいコントロールが追加されました。

　アプリケーションバーに新しいアイテムが追加され、より表現の幅が増しました。画面を分割するセパレートや、オンオフの状態を持ったトグルスイッチ的なボタン、それぞれのボタンの色を変更することも可能になりました。

　日付を選択させるDatePickerや、時間を選択するTimePickerが追加されました。これは望んでいた人も多いと思います。

　画面を分割するハブコントロールが追加されました。

　メニューや設定用のフライアウトも追加されました。設置用のフライアウトは8.0までは外部ライブラリを利用していましたので、これも待望の機能ですね。

　コンボボックスにヘッダーを表示できるようになったのも嬉しい機能です。

利用可能なデバイスの増加

　Windows 8.1 Previewでは、新しいデバイスが利用可能になりました。

　これまで制限があった外部デバイスへのアクセスが緩和され、Point of service（POS）やUSBなどが利用可能になります。

新しいAPIの追加

　Windows 8.1 Previewでは、新しいAPIが追加されました。

　先ほどのデバイスの追加もそうですが、音声読み上げ対応、コントロールのビットマップ画像への変換など便利な機能が追加されています。

UI/UXに対する変更

　Windows 8.1 Previewでは、これまでは最大同時に2つ表示可能だったストアプリの表示数が、画面解像度に合わせて最大4つに変更されました。このこと自体は便利な変更点ではあるのですが、Windows 8の特徴的な機能だったチャームの役割が変化することになりそうです。

8.1 Previewでは同時に2つ以上のストアアプリが表示可能

　Windows 8.1 Previewでは同時に4つのストアアプリが表示されるなど、これまで以上にメインのストアアプリが判別し辛くなり、そのせいかMicrosoft公式のストアアプリは8.1では検索チャームの検索ボタンだけではなく、Windows 8では推奨されなかった検索フォームが備わるように変更されました。

Microsoft公式のBINGスポーツなども画面に検索フォームを持つ

　Microsoft公式のストアアプリだけでなく、我々開発者のストアアプリも上記のような変更に合わせた実装が求められるようになりそうです。

新しいコントロール

　Windows 8.1 Previewで、新しいコントロールが追加されました。

アプリケーションバー

　アプリケーションバーに、区切り線やカスタムコントロールを追加できるようになりました。

アプリケーションバー

Imageコントロールの表示サンプル

<Page.BottomAppBar>
    <AppBar>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="50*"/>
                <ColumnDefinition Width="50*"/>
            </Grid.ColumnDefinitions>
            <StackPanel x:Name="LeftPanel" Orientation="Horizontal" Grid.Column="0" HorizontalAlignment="Left">
                <AppBarButton x:Uid="Camera" Icon="Camera" Label="Camera"/>
            </StackPanel>
            <StackPanel x:Name="RightPanel" Orientation="Horizontal" Grid.Column="1" HorizontalAlignment="Right">
                <AppBarButton x:Uid="Add" Icon="Add" Label="Add" />
                <AppBarButton x:Uid="Remove" Icon="Remove" Label="Remove"/>
                <AppBarSeparator/>
                <AppBarButton x:Uid="Delete" Icon="Delete" Label="Delete"/>
            </StackPanel>
        </Grid>
    </AppBar>
</Page.BottomAppBar>