PR

PCで撮影した写真を並べて最適な1枚を選べるプログラムをつくる

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

このサンプルにはWebカメラ搭載のPCが必要です。

実行すると選択ボックスにWebカメラのデバイスが表示されています。フロントとリアカメラを装備しているタブレットPCでは、2つのデバイスが表示されます。
筆者のデスクトップPCはフロントのWebカメラだけを装備していますので、筆者の顔が表示されています(図1)。

マウスの右クリックで「Attach Camera」、「Folder」アイコンが表示されます(図2)。
「Windowsストア認定の要件」では、日本語の場合はアイコンの表示名「日本語」にする必要があります。「Attach Camera」は「写真を撮る」。「Folder」は「一覧」とする必要があります。今回は英語表記のまま使用しています。

「Attach Camera」アイコンをタップすると、シャッター音がして写真が撮られ、Webカメラの横に「削除」ボタン付きで表示されます(図3)。

続けて写真を撮ると、同じ位置に重なって表示されます、ドラッグで好きな位置に配置します(図4)。

マウスの右クリックで表示される「Folder」アイコンをタップすると、写した写真がファイル名と「削除」ボタン付きで一覧できます(図5)。
このように各画像に[削除]ボタンを追加表示する方法は、Windows ストアのお作法としては望ましくありません。アプリケーションバー内に[削除]アイコンを表示して、画像を選択し、アプリケーションバー内の[削除]ボタンで削除するのが作法に則ったやり方です。

「削除」ボタンをタップすると、メッセージが表示されて、その画像が削除されます(図6)。

「戻る(←)」アイコンでWebカメラのページに戻ると、写した写真は一か所に重なって表示されています。ドラッグして配置しなおしてください。図3の「削除」ボタンでも画像の削除は可能です。
TOPページの「戻る(←)」ボタンは不要です。最初は非表示としておき、別なページに遷移した際に、「戻る(←)」ボタンを表示させるのが、本来のやり方です。

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

図1:PCに装備されているWebカメラのデバイスが選択ボックスに表示され、Webカメラからの画像が表示されている(クリックで拡大)
図2:マウスの右クリックでバーが表示され、各アイコンが表示される(クリックで拡大)
図3:「Attach Camera」アイコンをタップするとシャッター音がして写真が撮られ、Webカメラの横に「削除」ボタン付きで追加表示される(クリックで拡大)
図4:続けて写真を撮ると、同じ位置に重なって表示され、ドラッグで好きな位置に配置する(クリックで拡大)
図5:「Folder」アイコンをタップすると、写した写真がファイル名と「削除」ボタン付きで一覧できる(クリックで拡大)
図6:「削除」ボタンでメッセージが表示されて、選択した画像が削除される(クリックで拡大)

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

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

プロジェクトの作成

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

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

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

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

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

コントロールの配置

ツールボックスからデザイン画面上に、写真を配置するCanvasコントロールを1個、Webカメラのデバイスを表示するComboBoxコントロールを1個、Webカメラからの画像を表示するCaptureElementコントロールを1個、戻る(←)ボタンとなるButtonコントロールを1個、シャッター音を鳴らすためのMediaElementコントロールを1個配置し、SourceプロパティにWAVフォルダ内のwavファイルを指定します。
画像の一覧表示に遷移するためのFrameコントロールを1個配置しておきます。また、飾りとなる画像を配置するImageコントロールを1個配置し、SourceプロパティにImageフォルダの画像を指定しておきます。

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

最後に筆者の公開しているアプリの一覧ができるButtonコントロールを配置しています。

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

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

(1)名前がPhotopAreaという要素を配置します。写した写真を配置するエリアです。
(2)名前がcameraComboBoxという要素を配置します。PCに実装されているカメラのデバイスを表示します。
(3)名前がCaptureElement1という要素を配置します。Webカメラの画像が表示されます。
(4)名前がbackButtonという

<Page
  x:Class="CameraImageSelectSave.MainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="using:CameraImageSelectSave"
  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}">
    <Canvas x:Name="PhotoArea" Margin="662,51,10,3"/>(1)
    <ComboBox x:Name="cameraComboBox" HorizontalAlignment="Left" Height="54" Margin="200,10,0,0" VerticalAlignment="Top" Width="332"/>(2)
    <CaptureElement x:Name="CaptureElement1" HorizontalAlignment="Left" Height="384" Margin="123,82,0,0" VerticalAlignment="Top" Width="512"/>(3)
    <Button x:Name="backButton" HorizontalAlignment="Left" Height="54" Margin="10,10,0,0" VerticalAlignment="Top" Width="72" Style="{StaticResource BackButtonStyle}"/>(4)

    <MediaElement x:Name="MediaElement1" HorizontalAlignment="Left" Height="37" Margin="123,490,0,0" VerticalAlignment="Top" Width="110" AutoPlay="False" Source="WAV/k1000.wav"/>(5)
    <Frame x:Name="myFrame" HorizontalAlignment="Left" Height="786" Margin="60,-18,0,0" VerticalAlignment="Top" Width="1306"/>(6)
    <Image Width="120" Height="112" Source="Image/camera.png" Margin="1236,653,10,3"/>(7)
    <AppBar x:Name="AppBar1" Background="DarkGreen" Height="100" Margin="96,665,0,3">(8)
      <StackPanel Orientation="Horizontal">(9)
        <Button x:Name="shutterButton"  HorizontalAlignment="Left" Height="91"  VerticalAlignment="Top" Width="104"  Style="{StaticResource AttachCameraAppBarButtonStyle}" IsEnabled="False"/>(10)
        <Button x:Name="ichiranButton" HorizontalAlignment="Left" Height="91"  VerticalAlignment="Top" Width="104" Style="{StaticResource FolderppBarButtonStyle}" IsEnabled="False"/>(10)
      </StackPanel>(9)
    </AppBar>(8)
    <Button x:Name="myApps" Content="kuniyasuのアプリ一覧" HorizontalAlignment="Left" Height="37" Margin="1148,9,0,0" VerticalAlignment="Top" Width="189"/>(11)
  </Grid>
</Page>
図8:各コントロールを配置した(クリックで拡大)
Think IT会員限定特典
  • 撮影した写真から最適な1枚を選ぶサンプルプログラム

薬師寺国安事務所

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

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

PCで撮影した写真を並べて最適な1枚を選べるプログラムをつくる | Think IT(シンクイット)

Think IT(シンクイット)

サイトに予期せぬエラーが起こりました。しばらくたってから再度お試しください。