PR

タブレットPCの加速度センサーを使って目的の画像を直感的に探せるプログラムを作る

2013年9月30日(月)
薬師寺 国安

今回は、加速度センサーを活用して、PC本体を傾けることで画像を順次切り替え、目的の写真や画像を直感的に探すことの出来るプログラムを作ります。

このサンプルは加速度センサーを実装したタブレットPCまたはノートPCでしか動作しません。デスクトップPCでは動作しませんのでご了承ください。加速度センサーではタブレットPCやノートPCの傾きがわかります。加速度センサーの実装されていないPCでは最初に警告メッセージが表示され、動作しませんので、ご注意ください。

タブレットPCを右に傾けると、ピクチャフォルダー内にある画像が、順次表示されていきます(図1)。左に傾けると、順次前の画像に切り替わって表示されていきます(図2)。今回のキャプチャはスマホで撮っていますので、見苦しい点はお許しください。

図1:タブレットPCを右に傾けて次の画像が順次表示されている(クリックで拡大)
図2:タブレットPCを左に傾けて前の画像が順次表示されている(クリックで拡大)

実際に動かした動画は下記のようになります。スマホで撮影した動画のため、見難い点はご了承願います。

サンプル一式は、会員限定特典としてダウンロードできます。記事末尾をご確認ください。

プロジェクトの作成

VS 2012のメニューから[ファイル(F)/新規作成(N)/プロジェクト(P)]と選択します。
次に、「テンプレート」から「Windows ストア」を選択し、右に表示される項目名から「新しいアプリケーション(XAML)」を選択します。
「名前(N)」に任意のプロジェクト名を指定します。ここでは「PictureLibrayImageAccelerometer」という名前を付けています。

コントロールの配置

ツールボックスからデザイン画面上にFlipViewコントロールを1個配置します。
次に何枚中何枚目の画像を表示しているかを表示するTextBlockコントロールを1個配置します。

書き出されるXAMLコードはリスト1、レイアウトは図3のようになります。

リスト1 書き出され編集されたXAMLコード(MainPage.xaml)

(1)FlipView1という名前の要素を配置し、FlowDirectionプロパティにLeftToRightと指定します。
(2)PageTextBlockという名前の要素を配置します。何枚目中何枚目の画像かを表示します。文字色はCrimsonを指定しています。

<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>
図3:各コントロールを配置した(クリックで拡大)

ピクチャライブラリへのアクセス許可

ピクチャライブラリにアクセスしますので、ピクチャライブラリへのアクセス許可が必要です。ソリューションエクスプローラー内のPackage.appmanifestファイルをダブルクリックして開き、「機能」タブ内の「機能:」にある、「画像ライブラリ」にチェックを付けます(図4)。

図4:「画像ライブラリ」にチェックを付ける(クリックで拡大)
Think IT会員限定特典
  • タブレットPCを傾けて写真を直感的に探せるプログラム

薬師寺国安事務所

薬師寺国安事務所代表。Visual Basic プログラミングと、マイクロソフト系の技術をテーマとした、書籍や記事の執筆を行う。
1950年生まれ。事務系のサラリーマンだった40歳から趣味でプログラミングを始め、1996年より独学でActiveXに取り組む。1997年に薬師寺聖とコラボレーション・ユニット PROJECT KySS を結成。2003年よりフリーになり、PROJECT KySS の活動に本格的に参加、.NETやRIAに関する書籍や記事を多数執筆する傍ら、受託案件のプログラミングも手掛ける。Windows Phoneアプリ開発を経て、現在はWindows ストア アプリを多数公開中

Microsoft MVP for Development Platforms - Client App Dev (Oct 2003-Sep 2012)。Microsoft MVP for Development Platforms - Windows Phone Development(Oct 2012-Sep 2013)。Microsoft MVP for Development Platforms - Client Development(Oct 2013-Sep 2014)。Microsoft MVP for Development Platforms-Windows Platform Development (Oct 2014-Sep 2015)。

連載バックナンバー

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

他にもこの記事が読まれています