夏ですね。

お盆になって帰省して、親戚とか地元の友達なんかが集まると、よく「おい、ちょっとなんかやってみろよ」なんてことになって、ライブコーディングを披露することになることが増えると思うのですが、そういった急なデモでもネタに困ることがないように、今回は Windows ストア アプリ、しかも Web カメラを使ったアプリをライブコーディングで作る、というデモの手順を紹介します。

なお、書き始めたら思いのほか長くなってしまったので、2 回に分けて紹介していきます。

全部の記事を投稿し終わるころには、もしかしたらお盆が過ぎてしまっているかもしれませんが、そういう場合には秋の芋煮会などで披露していただければと思います。

 

準備するもの

  1. キーボード、マウスつきの PC

  2. Windows 8

  3. Visual Studio 2012 (※)

(※) Visual Studio 2012 をお持ちでない方は以下から無償版が入手できるので速やかにインストールしてください。 なお、使用する OS は Windows 8  でないと Windows ストア アプリの開発はできないので、お持ちでないという方は、速やかに量販店などから購入してください。

 

Windows ストア アプリ開発に関するダウンロード
http://msdn.microsoft.com/ja-JP/windows/apps/br229516

 

Visual Studio 2012 エディタのフォントサイズの変更

エディタのフォントサイズは観客からよく見えるように最低でも 18 ポイント以上にしておきましょう。

フォントのサイズは、Visual Studio 2012 のメニュー [ツール] – [オプション] を選択して表示されるダイアログボックスで変更できます。

image

フォントサイズが大きく、また、プロジェクタの画面が狭いとエディタ画面か隠れてしまいコードを記述する難易度があがります。

こういった状況に慣れるために普段から狭い画面で練習するとともに、第六感と心の眼を鍛えておきましょう。

 

拡大鏡の起動

操作箇所やメニューをピンポイントで拡大して見せるために、拡大鏡を起動しておきましょう。

拡大鏡はウィンドウズキー + [+] キーで起動します。

ウィンドウキー + [+] キーで拡大表示、ウィンドウズキー + [-] キーで縮小表示します。

image

以上で準備は完了です。

あとは、本能のおもむくままコードを書き上げ、聴衆からの喝采を浴びるだけです。

 

ライブコーディングの開始

ウィットに富んだ小粋な小話やジョークで場を温めたら、いよいよライブコーディングの開始です。

以下の手順でライブコーディングを行います。

  1. メニュー [ファイル] – [新しいプロジェクト] を選択しします。
     
  2. [新しいプロジェクト] ダイアログボックスが表示されるので、画面左の [テンプレート] で 「JavaScript」、画面中央のテンプレートのリストで「ナビゲーション アプリケーション」 を選択して [OK] ボタンをクリックします。

    image

    このとき拡大鏡を巧みに使用して、操作の手順を観客に見えるようにしてください、 
     
  3. ソリューションエクスプローラーから default.html を開き、</body> 付近でコメントアウトされている、 id が appber の div タグをクリップボードにコピーします。
    これはアプリバーを表示すめためのタグです。
     
  4. コピーしたアプリバーのタグを pages/home/home.html の body の閉じタグ (</body>) の上に貼りつけ、コメントアウトを解除します。
     
  5. アプリバーのタグ内にある button タグの data-win-options 属性を以下のように変更します。

    image

    これでアプリバーが表示されるようになるので、一度アプリを起動して、アプリバー内にカメラのアイコンが表示されるのを観客に見せるのも良いでしょう。
  6. 同ページ中の以下のタブを削除します。

    image

  7. 削除したタブの代わりに以下のタブを記述します。このとき div とタイプし、キーボードの [Tab] キーを押下すると、インテリセンスにより div タグが生成されるので便利です。

    image

  8. ソリューションエクスプローラーで pages/home/home.js をタプルクリックしてオープンします。

  9. ready メソッドの下で改行し、コードを記述するための空間を確保します。

    image

  10. ready メソッド内にアプリバーで cmdCamara ボタンをクリックされた際のイベントハンドラを記述します。なお、addEventListener メソッドの第二引数を記述する際には func と入力し、キーボードの [Tab] キーを 2 回押下すると無名関数が自動で記述されるので便利です。なお、今回の処理では addEventListener メソッドの第三引数省略していますが実行には問題ありません。
  11. image

  12. イベントハンドラ内の記述するために、addEventListener メソッドの第二引に指定した匿名関数の { (中括弧) の中で改行します。

    image

  13. 匿名関数内に、ボタンがクリックされた際の処理を記述しまていきます。まずはじめに、capt という変数に Woindows API  の media.capture クラスの参照を格納します。 入力の際にはインテリセンスが効きますので、うまく利用して華麗に入力してください。

    var capt = Windows.Media.Capture;

  14. キャプチャを行う UI のインスタンスを変数に格納します。

    var captUI = new capt.CameraCaptureUI();

  15. キャプチャを行うための captureFileAsync メソッドを記述します。引数には写真をキャプチャするための UI モードを指定します。 記述量が多そうに見えますが、インテリセンスが働くのでそれほどでもありません。   

    captUI.captureFileAsync(capt.CameraCaptureUIMode.photo)

  16. つづけて、CaptureFileAsync メソッドが完了した際に実行される done メソッド゜に、キャプチャされた画像を受け取るための匿名関数を記述します。

    captUI.captureFileAsync(capt.CameraCaptureUIMode.photo).done(function(){});

  17. done メソッドの引数に指定した匿名関数にコードを記述するため { (中括弧) 内で改行します。また、引数に変数 file を指定します。

    (略)CameraCaptureUIMode.photo).done(function(file){

    });

  18. 匿名関数の内に、引数として受け取った画像を処理するためのコードを記述していきます。
    まずは、画像を表示するための img エレメントのインスタンスを生成します。 これは複数枚の写真を表示できるようにするためです。

    var img = document.createElement("img");

  19. 受け取った file (画像)のパスを img エレメントの src 属性に指定します。

    img.src = URL.createObjectURL(file);

  20. img エレメントを既存のタグ <div id=”content”> に追加します。 

    document.getElementById("content").appendChild(img);

  21. 画像が重なって表示されるように style 属性の position に absolute を指定します。   

    img.style.position = "absolute";

ここまでのコードは以下の通りです。

document.getElementById("cmdCamera").addEventListener("click", function () {
var capt = Windows.Media.Capture;
var captUI = new capt.CameraCaptureUI();
captUI.captureFileAsync(capt.CameraCaptureUIMode.photo).done(
function (file) {
                    var img = document.createElement("img");
                    img.src = URL.createObjectURL(file);
                    document.getElementById("content").appendChild(img);
                     img.style.position = "absolute";
               });
});

簡単ですよネ。

さて、ここまでのコードで写真を撮る機能が実装できました。

観客を退屈させたないためにもここで一旦、アプリを起動し、写真が撮れる様子を観客に見せて軽くド肝を抜いておきたいところです。

しかし、実際に撮影可能とするにはアプリの設定で、アプリが Web カメラを使用するのを許可しなければなりません。

アプリからの Web カメラの使用を許可かするには、以下の設定を行います。

 

アプリの Web カメラ使用の許可設定

アプリから、Web カメラのようなハードウェアのリソースにアクセスする際には、配布パッケージの設定で許可を行う必要があります。

手順は以下のとおりです。

  1. [ソリューションエクスプローラー] のツリービューで、ファイル package.appxmanifest をダブルクリックします。

    image

  2. Visual Studio 2012 の IDE 内に、アプリの配布パッケージのプロパティを設定されるための UI が表示されるので、[機能] タブをクリックし、同タブ内の [Web カメラ] チェックボックスにチェックをつけます。

    image

以上で実行の準備が整いました。

実際にアプリを実行してみましょう。

 

アプリの実行

Visual Studio 2012 のメニュー [デバッグ] – [デバッグ開始] を選択するか、キーボードの [F5] キーを押下してアプリを実行します。

アプリが起動してきたら、画面下の端をスワイプするか、タッチ機能がない場合は、画面の下端でマウスの右ボタンをクリックしてアプリバーを表示させてください。

アプリバーにはカメラのマークの [撮影] アイコンが表示されるのでタッチするか、クリックします。

image

初回起動時には 「Web カメラを使用してもいいですか?」 という質問ダイアログボックスが表示れるので、[許可] ボタンをタッチするかクリックします。

image

アプリに Web カメラの使用が許可されると、アプリに Web カメラに映っている映像が表示されるので、良い感じにウケそうなところで画面をタッチするかマウスでクリックします。

写真が撮影されるので、撮影された写真に問題がなければ [OK] ボタンをタッチするかクリックします。

画面には撮影された写真が表示されます。

繰り返し数枚写真を撮ってみましょう。

うまくアプリが動かない、という人は、以下からサンプルプロジェクトをダウンロードして試してみてください。

 

 

さて、ここまでのコーディングでは、写真は、一か所に重なって表示されますが、これを動かすことはできません。

次回は、撮影した写真を、タッチジェスチャーを使用してヌルヌル動かすデモの手順を紹介します。

 

Web Statistics