カメラでクラウディア(Webカメラと画像を合成保存)2カ月で160本作った還暦開発者が送る10のアプリ開発ノウハウ(1)(1/5 ページ)

古(いにしえ)からのVBでWindows 8.1向けのさまざまな機能のアプリを開発する手順やコツを解説していく。初回は、Webカメラの映像と画像を合成保存する方法と一覧表示について。

» 2013年10月30日 18時00分 公開
[薬師寺国安PROJECT KySS]

古(いにしえ)からのVBで、最新のWindows 8.1アプリ開発

 2013年、日本時間10月17日の20時にWindows 8.1が一般向けにリリースされた。これを機会に、とあるコンテスト企画を切っ掛けに2カ月で160アプリを作った筆者が、今回より10回にわたって、Windows 8.1用のWindowsストアアプリのサンプル作成、および解説を行う(お付き合いのほどよろしくお願いいたします)。

 まずは、今回のWindowsストアアプリを作成した筆者の開発環境を説明しておこう。

  • Windows 8.1 Enterprise(x64)
  • Visual Studio 2013 Ultimate(x86)

 なお上記の環境がない場合でも、無料のVisual Studio Express 2013(以下、VS2013)がサイトよりダウンロードできるので、以降、サンプルアプリのソースコード確認に使っていただきたい。

「カメラでクラウディア」アプリについて

 では、早速サンプル開発の解説に入っていこう。今回のサンプルプログラム「CameraWithClaudia.zip」はこちらからダウンロードできる。このサンプルを動作させるには、Webカメラとタッチディスプレイの付いたPCが必要だ。

 なお、今回のサンプル「カメラでクラウディア」では、日本マイクロソフトのサイトで提供されているクラウディアの画像を使用している。

 必ず使用ガイドラインに則って利用していただきたい。今回の記事利用には、日本マイクロソフトより使用許諾をいただいている。

「カメラでクラウディア」アプリの動作

 まず、[写真を撮る]アイコンで、Webカメラからの画像を撮る。右側に、写した画像が表示され、クラウディアの画像が表示された、ListBoxが表示される(図1)。

図1 Webカメラから写真を撮る

 ListBoxより気に入ったクラウディアの画像を選択する。すると、Webカメラで撮った画像上にクラウディアの画像が合成される(図2)。

図2 ListBoxからクラウディアの画像を選択する

 クラウディアの画像をピンチで拡大縮小し、好きな位置に配置する(図3)。

図3 ピンチで拡大縮小し、好きな位置に配置する

 「合成保存」ボタンの使用が可能になるので、このボタンをタップする。合成保存された旨のメッセージが表示される(図4)。合成保存されると、画面上には何も表示されなくなる。

図4 「合成保存」ボタンで保存する

 保存した画像の一覧は「一覧」アイコンで確認できる(図5)。

図5 「一覧」ボタンで、保存した画像の一覧ができる

 気に入らない画像は選択して、マウスの右クリックで表示される、アプリケーションバー内の「削除」または「一括削除」アイコンで削除が可能だ。「削除」ボタンでは、削除したい画像を選択して削除する。「一括削除」ボタンでは、画像を選択することなく、このアイコンをタップするだけで全画像が削除されるので、注意が必要だ(図6)。

図6 マウスの右クリックで表示される「削除」「一括削除」ボタンで、保存した画像の削除ができる

 サンプルアプリの主要なファイルは以下で構成されている。順に紹介しよう。

       1|2|3|4|5 次のページへ

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。