写真と現在位置を入れた画像日記アプリを作る

開発ツール

技術解説

連載 :

GPSや写真を応用したアプリ作りのためのサンプルプログラム集

2013年8月29日(木)

薬師寺国安

コントロールの配置

ツールボックスからMapコントロールを1個配置します。次にAppBarコントロールを配置し、その子要素として

書き出されるXAMLをリスト2のように編集します。レイアウトは図10のようになります。

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

（1）要素を配置すると、自動的に要素内に、Mapsという名前空間が定義されます。

（2）名前がmyMapという要素のCredentialsプロパティに、「Bing Maps Key」を指定します。取得方法については前述しています。Bing Maps Keyを指定しないと、実行時にBing Maps上にエラー表示が現れます。

（3）名前がAppbar1という要素を配置し、背景色にDarkGreenを指定します。マウスの右クリックで表示されるバーです。この子要素として、名前がdelButtonという

<Page
  x:Class="ImageDiary.DataShowPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="using:ImageDiary"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  xmlns:Maps="using:Bing.Maps"（1）
  mc:Ignorable="d" FontFamily="Global User Interface">

  <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <Maps:Map Credentials="Bing Maps Key" x:Name="myMap" />（2）
    <AppBar x:Name="AppBar1" Background="DarkGreen" Height="100" Margin="0,668,0,0">（3）
       <Button x:Name="delButton"  HorizontalAlignment="Left" Height="91"  VerticalAlignment="Top" Width="104"  Style="{StaticResource DeleteAppBarButtonStyle}"      />（3）
    </AppBar>（3）
  </Grid>
</Page>

図10：各コントロールを配置した（クリックで拡大）

「空白のページ」の作成(DataIchiranShowPage.xaml)

保存したデータを一覧表示するページです。

VS2012のメニューの「プロジェクト(P)／新しい項目の追加(W)」と選択します。
「新しい項目の追加」ダイアログボックスが開きますので、「空白のページ」を選択します。
「名前(N)」にDataIchiranShowPage.xamlと入力し、[追加(A)]ボタンをクリックします。

コントロールの配置

ツールボックスからScrollViewerコントロールを配置し、その子要素としてGridViewコントロールを配置します。

次にAppbarコントロールを配置し、その子要素としてStackPanel要素を配置します。
OrientationプロパティにHorizontalを指定し、その子要素として、TextBlockコントロールを1個、TextBoxコントロールを1個、Buttonコントロールを1個配置します。

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

リスト3　書き出されたXAMLコード(DataIchiranShowPage.xaml)

（1）要素の子要素として、名前がGridView1という要素を配置します。
（2）マウスの右クリックで表示されるバーとなる、要素を配置します。背景色をDarkGreenにHeightを100に指定します。
（3）要素の子要素として、要素を配置し、OrientationにHorizontalを指定して、オブジェクトのスタック方向を水平方向とします。Marginに5を指定して余白を設けます。この子要素として、要素を配置し、Textプロパティに「日付入力」と指定します。
次に、日付を入力する、名前がsearchTextBoxという要素を配置します。次に、名前がokButtonという

<Page
  x:Class="ImageDiary.DataIchiranShowPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="using:ImageDiary"
  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}" Margin="0,139,0,0">
    <ScrollViewer  HorizontalScrollBarVisibility="Visible" Margin="0,-18,0,0">（1）
      <GridView x:Name="GridView1"  HorizontalAlignment="Left" VerticalAlignment="Center" FlowDirection="LeftToRight" Height="619" Width="1366"/>（1）
    </ScrollViewer>（1）
    <AppBar Background="DarkGreen" Height="100" Margin="0,-138,0,667">（2）
      <StackPanel Orientation="Horizontal" Margin="5">（3）
        <TextBlock HorizontalAlignment="Left" Height="35"  Text="日付入力" VerticalAlignment="Center" Width="104" FontFamily="Meiryo UI" FontSize="24" FontWeight="Bold"/>（3）
        <TextBox x:Name="searchTextBox" HorizontalAlignment="Left" Height="49"  VerticalAlignment="Center" Width="358" FontFamily="Meiryo UI" FontSize="30" FontWeight="Bold" AcceptsReturn="True"/>（3）
        <Button x:Name="okButton" HorizontalAlignment="Left" Height="81" VerticalAlignment="center" Width="81" Style="{StaticResource YesAppBarButtonStyle}"/>（3）
      </StackPanel>（3）
    </AppBar>（2）
  </Grid>
</Page>

図11：各コントロールを配置した（クリックで拡大）

次に、ソリューションエクスプローラー内のMainWindow.xamlを展開して表示される、MainWindow.xaml.vbをダブルクリックしてリスト4のコードを記述します。

ロジックコードを記述する

リスト4　(MainWindow.xaml.vb)

写真、オーディオ録音、ビデオなどをキャプチャするクラスを提供する、Windows.Media Captrue名前空間をインポートします。

Imports Windows.Media.Capture

ファイル、フォルダおよびアプリケーションの設定を管理するクラスの含まれる、Windows.Storage名前空間をインポートします。

Imports Windows.Storage

メディア形式のプロパティが作成された時に必要となるクラス、およびほかのプログラミング要素を提供するクラスの含まれる、Windows.Media.MediaProperties名前空間をインポートします。

Imports Windows.Media.MediaProperties

シーケンシャルアクセスストリーム、および、ランダムアクセスストリームに対する読み取りと書きこみのサポートを提供するクラスの含まれる、Windows.Storage.Streams名前空間をインポートします。

Imports Windows.Storage.Streams

Imports Windows.UI
Imports Windows.UI.Popups

地理的位置にアクセスできるようにするクラスの含まれる、Windows.Devices.Geolocation名前空間をインポートします。

Imports Windows.Devices.Geolocation

デバイスを列挙するためのクラスを提供する、Windows.Devices.Enumeration名前空間をインポートします。

Imports Windows.Devices.Enumeration

アプリケーションウインドウやウインドウ対話を作成し管理するサポートと、Windows上の入力イベントを処理するクラスの含まれる、Windows.UI.Core名前空間をインポートします。

Imports Windows.UI.Core

Public NotInheritable Class MainPage
  Inherits Page
  
  Dim myIndex As Integer

Windowsランタイムコアイベントメッセージディスパッチャを提供するクラスであるCoreDispatcher型のメンバ変数、myCoreDispacherを宣言します。

  Dim myCoreDispacher As CoreDispatcher

インデックスによってアクセスできる要素の読み取り専用コレクションを表す、IstorageFile型のメンバ変数myPictureFilesを宣言します。

 Dim myPictureFiles As IReadOnlyList(Of IStorageFile)

フォト、オーディオ録音およびビデオをキャプチャする、新しいMediaCaptureクラスのインスタンス、myMediaCaptureメンバ変数を宣言します。

  Dim myMediaCapture As MediaCapture

  Dim Index As Integer

BitmapImageクラス型のメンバ変数saveBmpを宣言します。

  Dim saveBmp As BitmapImage

現在の地理的場所にアクセス可能にするGeolocatorクラス型のメンバ変数、myGeolocatorメンバ変数を宣言します。

  Dim myGeolocator As Geolocator
 
  Dim myLatitude As String
  Dim myLongitude As String
  Dim no As Integer = 0

DeviceInformationオブジェクトのコレクションを表すメンバ変数myCameraを宣言します。

  Dim myCamera As DeviceInformationCollection
 
  Dim saveImageFileName As String
  Dim flag As Boolean = False
  Dim cameraNo As Integer = -1

ページがアクティブになった時の処理

XMLファイルが作成された時は、ListBoxに追加したり、現在位置を取得したり、カメラのデバイスを取得したりする、DataShowプロシージャを実行します。
AddHandlerステートメントで、現在アクティブ化されているウインドウのVisibleプロパティの値が変更された時に発生する、VisibilityChangedイベントに、イベントハンドラを指定します。

  Protected Overrides Sub OnNavigatedTo(e As Navigation.NavigationEventArgs)
    DataShow()
      AddHandler Window.Current.VisibilityChanged, AddressOf Current_Changed
    MyBase.OnNavigatedTo(e)
  End Sub

現在アクティブ化されているウインドウのVisibleプロパティの値が変更された時に発生する処理

Webカメラは、バックグラウンドにまわって、フォアグラウンドに戻った時、その処理を停止し、Webカメラが動作しなくなりますので、この処理が必要です。

Webカメラがバックグラウンドからフォアグラウンドに戻った場合は、再度新しいMediaCaptureのインスタンスを作成する、CameraRestartプロシージャを実行します。

Private Sub Current_Changed(sender As Object, e As VisibilityChangedEventArgs)
  If e.Visible = True Then
    CameraRestart()
  End If
End Sub

Webカメラがバックグラウンドからフォアグラウンドに移った際、再度新しいMediaCaptureのインスタンスを作成する処理

メンバ変数myMediaCaptureにCaptureElementのSourceプロパティの値を指定し、新しいMediaCaptureのインスタンスを作成します。

InitializeAsyncメソッドで、以下の内容でMediaCaptureオブジェクトを初期化します。

新しいMediaCaptureInitializationSettingsクラスのインスタンスを作成します。MediaCaptureInitializationSettingsクラスは、MediaCaptureオブジェクトの初期化設定をするクラスです。
VideoDevideIdプロパティにcameraComboBoxのから選択されたインデックスに対応する、コレクション変数myCameraのデバイスIDを指定します。

CaptureElement1のSourceプロパティにデバイスIDで初期化されたmyMediaCaptureを指定します。
StartPreviewAsyncメソッドでプレビューを開始します。これで、Webカメラの画像が表示されます。非同期処理で行われるため、メソッドの先頭にAsyncを追加します。

Private Async Sub CameraRestart()
        myMediaCapture = CaptureElement1.Source
      myMediaCapture = New MediaCapture
 
      Try
        Await myMediaCapture.InitializeAsync(New MediaCaptureInitializationSettings With {.VideoDeviceId = myCamera(cameraComboBox.SelectedIndex).Id})
        CaptureElement1.Source = myMediaCapture
        Await myMediaCapture.StartPreviewAsync
      Catch
        Exit Sub
      End Try  End Sub

XMLファイルが作成された時はListBoxに追加したり、現在位置を取得したり、カメラのデバイスを取得したりする処理

DateTextBlock内に今日の日付と、文字列「の出来事」を連結して表示します。

ピクチャライブラリにアクセスします。CreateFolderAsyncでImageDiaryXMLサブフォルダを作成しますが、CreationCollisionOption.OpenIfExistsを指定することで、既にフォルダが存在する場合は、そのフォルダ名を返してくれます。フォルダが存在しない場合は新規に作成してくれます。

CreationCollisionOption列挙体については下記URLを参照してください。
→　CreationCollisionOption enumeration

GetFilesAsyncメソッドでImageDiaryXMLサブフォルダ内のファイルを取得し、ファイルのコレクションを表す変数myFileに格納しておきます。
Countプロパティで、サブフォルダ内のファイルの個数を取得し、0より大きい場合、つまり1個でもXMLファイルが存在した場合は、ichiranButtonの使用を可能とします。
文字列型の新しいリストである、myXmlListオブジェクトを作成します。
ImageDiaryXMLフォルダ内のファイルを格納しているコレクション変数myFile内を、変数fileResultで反復処理しながら、以下の処理を行います。

Addメソッドで、パスと拡張子を除いたファイル名を取得し、文字列「.xml」と連結して、myXmlListオブジェクトに追加していきます。
fileListBoxのItemsSourceプロパティにmyXmlListオブジェクトを追加します。ListBox内にXMLファイルが表示されます。
ファイルが存在しなかった場合は、ichiranButtonの使用を不可とし、fileListBoxとオブジェクトの関連付けを破棄します。

myGeolocatorオブジェクトが作成されていない場合は、新しいGeolocatorクラスのインスタンスmyGeolocatorオブジェクトを作成します。
場所認識の精度レベルを表す、DesiredAccuracy プロパティにはDefaultを指定しておきます。Default以外にHighがありますが、パフォーマンスが低下する恐れがありますので、Defaultを指定しています。

Window.Current.CoreWindow.Dispatcherで、現在アクティブになっている、ウインドウの内部コアオブジェクトのイベントディスパッチャを取得して、myCoreDispacherで参照します。

AddHandlerステートメントで、場所が更新された時のPositionChangedイベント時のイベントハンドラ、myGeolocator_PositionChangedを追加します。

同じく、AddHandlerステートメントで、更新された場所を提供するGeolocatorの機能が変更された時に発生する、StatusChanged時のイベントハンドラ、myGeolocator_StatusChangedを追加します。

FindAllAsyncメソッドで全てのビデオキャプチャデバイスを列挙して、DeviceInfomationオブジェクトのコレクションである、myCameraコレクション変数に格納します。

Webカメラが実装されている場合は、コレクション変数myCameraが格納しているデバイスの個数分、繰り返し変数iで反復処理を行います。
DeviceInfomationの列挙体である、変数cameraInfoで、コレクション変数myCameraが格納しているデバイスを参照させます。
cameraComboBoxにAddメソッドで取得したデバイス名を追加します。フロントカメラやリアカメラを実装しているタブレットPCでは、2つのデバイス名が追加されます。cameraComboBoxのSelectedIndexが0より小さい場合、ついまりデバイスが選択されていない場合は、最初のデバイスを選択します。選択されている場合は、それを選択状態にします。
「Attach Camera」アイコンの使用を可能にします。エラーが発生した場合はErrorShowプロシージャを実行します。

非同期処理で行われるため、メソッドの先頭にAsyncを追加します。

  Private Async Sub DataShow()
    AppBar1.Visibility = Xaml.Visibility.Visible
    Try
      DateTextBlock.Text = DateTime.Now.ToString("yyyy年MM月dd日") & "の出来事"
      Dim myStorageFolder As StorageFolder = Windows.Storage.KnownFolders.PicturesLibrary
      Dim mySubFolder = Await myStorageFolder.CreateFolderAsync("ImageDiaryXML", CreationCollisionOption.OpenIfExists)
      Dim myFile = Await mySubFolder.GetFilesAsync()
      If myFile.Count > 0 Then
          ichiranButton.IsEnabled = True
          Dim myXmlList As New List(Of String)
          For Each fileResult As StorageFile In myFile
            myXmlList.Add(Path.GetFileNameWithoutExtension(fileResult.Path) & ".xml")
          Next
          fileListBox.ItemsSource = myXmlList
      Else
          ichiranButton.IsEnabled = False
          fileListBox.SelectedIndex = -1
          fileListBox.ItemsSource = Nothing
      End If
 
      If myGeolocator Is Nothing = True Then
          myGeolocator = New Geolocator
          myGeolocator.DesiredAccuracy = PositionAccuracy.Default
          myCoreDispacher = Window.Current.CoreWindow.Dispatcher
      End If
      AddHandler myGeolocator.PositionChanged, AddressOf myGeolocator_PositionChanged
      AddHandler myGeolocator.StatusChanged, AddressOf myGeolocator_StatusChanged
      cameraComboBox.Items.Clear()
 
      myCamera = Await DeviceInformation.FindAllAsync(DeviceClass.VideoCapture)
      For i As Integer = 0 To myCamera.Count - 1
          Dim cameraInfo = myCamera(i)
          cameraComboBox.Items.Add(cameraInfo.Name)
      Next
        If cameraNo < 0 Then
          cameraComboBox.SelectedIndex = 0
          shutterButton.IsEnabled = True
        Else
          cameraComboBox.SelectedIndex = cameraNo
          shutterButton.IsEnabled = True
        End If
      Catch
        ErrorShow()
      End Try
    End Sub

エラーが発生した時の処理

警告メッセージを表示し、「AttachCamera」ボタンの使用を不可とします。非同期処理で行われるため、メソッドの先頭にAsyncを追加します。

  Private Async Sub ErrorShow()
    Dim message As New MessageDialog("カメラが装備されておりません。")
    Await message.ShowAsync
    shutterButton.IsEnabled = False
    Exit Sub
  End Sub

場所が変更された時の処理

緯度と経度のデータや都市の住所データを含めることができるGeoPositionクラス型の変数psoを宣言し、PositionChangedイベントに関連付けられた場所データを取得します。

現在の緯度をメンバ変数myLatitudeに、経度をmyLongitudeに格納します。

  Private Sub myGeolocator_PositionChanged(sender As Geolocator, args As PositionChangedEventArgs)
    Dim pos As Geoposition = args.Position
    myLatitude = pos.Coordinate.Latitude 
    myLongitude = pos.Coordinate.Longitude 
  End Sub

開発 / Windowsストアアプリ / Windows 8 / サンプルアプリ / カメラ / GPS

画像日記を作るプログラム

4228_1.zip

著者

薬師寺国安

この著者の記事一覧この著者の
記事一覧

薬師寺国安事務所

薬師寺国安事務所代表。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）。