今回は、加速度センサーを活用して、PC本体を傾けることで画像を順次切り替え、目的の写真や画像を直感的に探すことの出来るプログラムを作ります。
このサンプルは加速度センサーを実装したタブレットPCまたはノートPCでしか動作しません。デスクトップPCでは動作しませんのでご了承ください。加速度センサーではタブレットPCやノートPCの傾きがわかります。加速度センサーの実装されていないPCでは最初に警告メッセージが表示され、動作しませんので、ご注意ください。
タブレットPCを右に傾けると、ピクチャフォルダー内にある画像が、順次表示されていきます（図1）。左に傾けると、順次前の画像に切り替わって表示されていきます（図2）。今回のキャプチャはスマホで撮っていますので、見苦しい点はお許しください。
実際に動かした動画は下記のようになります。スマホで撮影した動画のため、見難い点はご了承願います。
サンプル一式は、会員限定特典としてダウンロードできます。記事末尾をご確認ください。
プロジェクトの作成
VS 2012のメニューから[ファイル(F)／新規作成(N)／プロジェクト(P)]と選択します。
次に、「テンプレート」から「Windows ストア」を選択し、右に表示される項目名から「新しいアプリケーション(XAML)」を選択します。
「名前(N)」に任意のプロジェクト名を指定します。ここでは「PictureLibrayImageAccelerometer」という名前を付けています。
コントロールの配置
ツールボックスからデザイン画面上にFlipViewコントロールを1個配置します。
次に何枚中何枚目の画像を表示しているかを表示するTextBlockコントロールを1個配置します。
書き出されるXAMLコードはリスト1、レイアウトは図3のようになります。
リスト1 書き出され編集されたXAMLコード(MainPage.xaml)
（1）FlipView1という名前の
（2）PageTextBlockという名前の
<Page
x:Class="PictureLibraryImageAccelerometer.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:PictureLibraryImageAccelerometer"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<FlipView x:Name="FlipView1" HorizontalAlignment="Left" Margin="0,113,0,0" VerticalAlignment="Top" FlowDirection="LeftToRight" Width="1366"/>（1）
<TextBlock x:Name="PageTextBlock" HorizontalAlignment="Center" Height="71" Margin="625,38,483,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="258" FontFamily="Meiryo UI" FontSize="48" FontWeight="Bold" Foreground="Crimson"/>（2）
</Grid>
</Page>
ピクチャライブラリへのアクセス許可
ピクチャライブラリにアクセスしますので、ピクチャライブラリへのアクセス許可が必要です。ソリューションエクスプローラー内のPackage.appmanifestファイルをダブルクリックして開き、「機能」タブ内の「機能：」にある、「画像ライブラリ」にチェックを付けます（図4）。
- この記事のキーワード
バックナンバー
この記事の筆者
筆者の人気記事
Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。
