PR

撮影した写真の管理ができるマイフォトアプリを作る

2013年8月31日(土)
薬師寺 国安

このサンプルにはWebカメラが必須です。実行すると選択ボックスにWebカメラのデバイスが表示されています。フロントとリアカメラを装備しているタブレットPCでは、2つのデバイスが表示されます。

筆者のデスクトップPCはフロントのWebカメラだけを搭載していますので、筆者の顔が表示されています(図1)。

マウスの右クリックで「戻る(←)」、「Attach Camera」、「Folder」、「Delete」アイコンが表示されます(図2)。

「Attach Camera」アイコンをタップすると、シャッター音がして写真が撮られ、メッセージが表示されます(図3)。

写した写真の一覧は、「Folder」アイコンをタップすると閲覧できます。フリップビューを使用していますので、左右にフリックすることで、写した写真を順次見ることができます(図4)。

最後に写した写真が最初に表示されています。画面の左上には写真の総枚数と何枚目の写真なのかが表示されています。「Delete」アイコンをタップすると、保存されている写真を削除する画面に移ります。全ての写真が一覧で表示され、「削除」ボタンが付けています。任意の画像を選択してから「削除」ボタンをタップしてください。削除された旨のメッセージが表示され、選択した画像が削除されます(図5)。

選択しないで「削除」ボタンをクリックした場合は、警告メッセージが表示されます(図6)。

※このアプリを実行すると、たまにWebカメラに画像が映っていない状況が発生します。その場合は、マウスカーソルを画面の左上隅にもっていき、現在の画面とは異なる別な画面を一度表示してください。その後、再度マウスカーソルを画面の左上隅にもっていくと、現在実行中のプロジェクトの画面が表示されますので、それをタップしてください。Webカメラに画像が表示されます。

図1:PCに装備されているWebカメラのデバイスが選択ボックスに表示され、Webカメラからの画像が表示されている(クリックで拡大)
図2:マウスの右クリックでバーが表示され、各アイコンが表示される(クリックで拡大)
図3:「Attach Camera」アイコンをタップするとシャッター音がして写真が撮られる(クリックで拡大)
図4:「Folder」アイコンをタップして写した画像をフリックで一覧している(クリックで拡大)
図5:「Delete」アイコンをタップすると、保存されている写真を削除する画面に移る。全ての写真が一覧で表示され、「削除」ボタンが付けいている。任意の画像を選択してから「削除」ボタンをタップすると、削除された旨のメッセージが表示され、選択した画像が削除される(クリックで拡大)
図6:画像を選択しないで「削除」ボタンをクリックすると、警告メッセージが出る(クリックで拡大)

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

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

プロジェクトの作成

VS 2012のメニューから[ファイル(F)/新規作成(N)/プロジェクト(P)]と選択します。
次に、「テンプレート」から「Windows ストア」を選択し、右に表示される項目名から「新しいアプリケーション(XAML)」を選択します。
「名前(N)」に任意のプロジェクト名を指定します。ここでは「myPhoto」という名前を付けています。
ソリューションエクスプローラー内のmyPhotoプロジェクトの配下に、WAVというフォルダを作成して、シャッター音となるwavファイルを追加しておきます。またImageフォルダも作成して、飾りとなる画像を追加しておきます。

ダウンロードされたサンプルファイルには、wavファイルや画像ファイルは追加済みです。

場所と各デバイスへのアクセス許可とピクチャライブラリへのアクセス許可

Webカメラにアクセスするには、ソリューションエクスプローラー内にある、Package.appmanifestをダブルクリックして開き、「機能」タブ内の「機能:」にある、「マイク」、「Webカメラ」にチェックを付けます。また作成されたXMLファイルをピクチャライブラリのサブフォルダに保存するため、「画像ライブラリ」にもチェックを付けておきます(図7)。

図7:デバイスへのアクセス、ピクチャライブラリへのアクセスを許可する(クリックで拡大)

コントロールの配置

ツールボックスからデザイン画面上にWebカメラのデバイスを表示するComboBoxコントロールを1個、Webカメラからの画像を表示するCaptureElementコントロールを1個、飾りとなる画像を表示するImageコントロールを1個配置し、SourceプロパティにImageフォルダの画像を指定しておきます。
画像の一覧表示や削除画面に遷移するためのFrameコントロールを1個配置しておきます。

次に、マウスの右クリックで表示される、AppBarコントロールを配置し、その子要素として、StackPanelコントロールを配置し、また、その子要素として、Buttonコントロールを4個配置します。
「戻る(←)」、「Attach Camera」、「Folder」、「Delete」アイコンに該当するボタンです。

シャッター音を鳴らすためにMediaElementコントロールを配置し、SourceプロパティにWAVフォルダ内のwavファイルを指定します。

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

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

(1)名前がComboBox1という要素を配置します。PCに実装されているカメラのデバイスを表示します。

(2)名前がCaptureElement1という要素を配置します。Webカメラの画像が表示されます。

(3)要素を配置し、SourceプロパティにImageフォルダの画像を指定します。

(4)名前がmyFrameという要素を配置します。画像の一覧ページや、削除ページに遷移するためのフレームです。

(5)要素を配置します。マウスの右クリックで表示されるバーです。背景色にDarkGreen、Heightに100と指定しておきます。

(6)要素の子要素として 要素を配置し、OrientationプロパティにHorizontal、Marginに5を指定し、余白を設けます。

(7)要素の子要素として、名前がbackButton、cameraButton、ichiranButton、deleteButtonという4つの

(8)MediaElement1という名前の要素を配置します。
SourceプロパティにWAVフォルダ内にある、wavファイルを指定します。これがシャッター音になります。AutoPlayプロパティにはFalseを指定して、自動再生を禁じておきます。

<Page
  x:Class="myPhoto.MainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="using:myPhoto"
  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}">
    <ComboBox x:Name="ComboBox1" HorizontalAlignment="Left" Height="57" Margin="10,24,0,0" VerticalAlignment="Top" Width="305" FontFamily="Meiryo UI" FontSize="20"/>(1)
    <CaptureElement HorizontalAlignment="Left" Height="768" Margin="342,0,0,0" VerticalAlignment="Top" Width="1024" x:Name="CaptureElement1"/>(2)
    <Image HorizontalAlignment="Left" Height="114" Margin="2,650,0,0" VerticalAlignment="Top" Width="147" Source="Image/フォト.png"/>(3)
    <Frame Content="" HorizontalAlignment="Left" Height="768" Margin="0,0,-4,0" VerticalAlignment="Top" Width="1370" x:Name="myFrame"/>(4)
    <AppBar Background="DarkGreen" Height="100" Margin="0,668,0,0">(5)
      <StackPanel Margin="5" Orientation="Horizontal">(6)
        <Button x:Name="backButton" Style="{StaticResource BackButtonStyle}" Margin="36,0,36,27"/>(7)
        <Button x:Name="cameraButton" Style="{StaticResource AttachCameraAppBarButtonStyle}"/>(7)
        <Button x:Name="ichiranButton" Style="{StaticResource FolderppBarButtonStyle}"/>(7)
        <Button x:Name="deleteShowButton" Style="{StaticResource DeleteAppBarButtonStyle}" />(7)
      </StackPanel>(6)
    </AppBar>(5)
    <MediaElement HorizontalAlignment="Left" Height="36" Margin="40,448,0,0" VerticalAlignment="Top" Width="127" x:Name="MediaElement1" Source="WAV/k1000.wav" AutoPlay="False"/>(8)

  </Grid>
</Page>
図8:各コントロールを配置した(クリックで拡大)

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

写した画像の一覧をFlipViewで表示するページです。

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

Think IT会員限定特典
  • マイフォトのサンプルプログラム

薬師寺国安事務所

薬師寺国安事務所代表。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会員サービスの概要とメリットをチェック

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