ライブコーディングで作るWin 8 カメラアプリ デモ – 基本機能の実装

夏ですね。 お盆になって帰省して、親戚とか地元の友達なんかが集まると、よく「おい、ちょっとなんかやってみろよ」なんてことになって、ライブコーディングを披露することになることが増えると思うのですが、そういった急なデモでもネタに困ることがないように、今回は Windows ストア アプリ、しかも Web カメラを使ったアプリをライブコーディングで作る、というデモの手順を紹介します。 なお、書き始めたら思いのほか長くなってしまったので、2 回に分けて紹介していきます。 全部の記事を投稿し終わるころには、もしかしたらお盆が過ぎてしまっているかもしれませんが、そういう場合には秋の芋煮会などで披露していただければと思います。   準備するもの キーボード、マウスつきの PC Windows 8 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 のメニュー [ツール] – [オプション] を選択して表示されるダイアログボックスで変更できます。…

0

エクステンションによる VisualStudio 2012 入力支援機能の強化

Windows ストア アプリの開発は HTML + JavaScript でも行えるため、これまで Visual Studio を使ったことがない、という開発者の方も多いでしょう。 そういった方々のために Visual Studio の機能概要についてしばらく紹介していきます。 ここまでの記事は以下になりますので、これから Visual Studio を使ってみようか、という方はぜひ以下の記事もご覧ください。 Visual Sudio 2012 の基本的な HTML + JavaScript の入力支援機能 Visual Sudio 2012 の Windows ストア アプリと Web コンテンツの基本的なデバッグ機能 Visual Studio 2012 から新しく追加された HTML + JavaScript 入力支援機能   前回は、Visual Studio 2012 から新しく追加された HTML + JavaScript の入力支援機能について紹介しました。 今回は、Visual Studio 2012…

0

Visual Studio 2012 から新しく追加された HTML + JavaScript 入力支援機能

Windows ストア アプリの開発は HTML + JavaScript でも行えるため、これまで Visual Studio を使ったことがない、という開発者の方も多いでしょう。 そういった方々のために Visual Studio の機能概要についてしばらく紹介していきます。 ここまでの記事は以下になりますので、これから Visual Studio を使ってみようか、という方はぜひ以下の記事もご覧ください。 Visual Sudio 2012 の基本的な HTML + JavaScript の入力支援機能 Visual Sudio 2012 の Windows ストア アプリと Web コンテンツの基本的なデバッグ機能   前回までは、それまでのバージョンの Visual Studio から引き継がれてきた基本的かつ特徴的ともいえる HTML + JavaScript の入力支援機能と、デバッグ機能について紹介してきました。 ここからは、Visual Studio 2012 から追加された新しい機能について紹介していきます。 今回は、HTML と JavaScript、CS の入力支援機能についてです。   Visual Studio…

0

Visual Sudio 2012 の Windows ストア アプリと Web コンテンツの基本的なデバッグ機能

前回に引き続き、これから Visual Studio を使用されるという人向けに、今回は、以前のバージョンから引き継がれた Windows ストア アプリと Web コンテンツ用の基本的なデバッグ機能について紹介します。   JavaScript のデバッグ機能 ソフトウェアの開発ツールである Visual Studio は、サポートする開発言語について強力なデバッグ機能を提供しており、JavaScript も例外ではありません。 プログラムの実行を任意の箇所で中断し、1 ステップずつの実行や変数の中身の確認、関数の場合はどの順序でどう呼ばれたかなどの情報を視覚的に確認することができます。 ここではこれら JavaScript コードのデバッグ機能について紹介します。   ブレークポイント Visual Studio では、JavaScript コードの任意のステップに停止位置を設け、実行を中断させることができます。 この機能をブレークポイントといいます。 JavaScript コードにブレークポイントを設定するには、以下の方法があります。 JavaScript コード中の任意の位置にカーソルを移動し、 Visual Studio のメニュー [デバック] – [ブレークポイントの設定/解除] を選択 キーボードの [F9] キーを押下 エディタ画面の左端の灰色の部分をクリック ブレークポイントが設定されると、実行の集団箇所が赤くマークされます。 (ブレークポイントを設定したところ)   ブレークポイントを使用したデバッグを開始するには、Visual Studio のメニュー [デバッグ] – [デバッグ 開始] を選択するか、キーボードの…

0

Visual Sudio 2012 の基本的な HTML + JavaScript の入力支援機能

Windows ストア アプリの開発は HTML + JavaScript でも行えるため、これまで Visual Studio を使ったことがない、という開発者の方にお会いすること機会があります。 そういった方々は、Windows ストア アプリの開発にあたり、頑張っていちから Visual Studio 2012 を学習して使用されているのかと思いきや、それまで Web 制作に使用されていたエディタ + FireBug などのデバッグツールでアプリのほとんどを作成し、Windows ストア アプリにパッケージングする部分だけ Visual Studio を使用されるという方が以外といらっしゃいます。(なんと、勿体ない…。) 今回はそういった Visual Studio を使ったことがないという Web 制作者の方々のために、Visual Studio 2012 に搭載されている代表的な HTML + JavaScript 開発機能について紹介します。   入力支援機能 Visual Studio にはさまざまなコード、マークアップを記述するための強力な入力支援機能が搭載されており、それは HTML, JavaScritp、 CSS についても同様です。 この入力支援機能は現在、以下二つのものが搭載されています。 インテリセンス コードスニペット   インテリセンス インテリセンスは、ユーザーがタイプした単語から、次に入力すべきワードを推測して入力候補をリスト表示し、リスト内のアイテムを選択することにより入力を補完するものです。…

0

MSDN 開発体験テンプレートを使用した動画アプリの開発(応用編)

Windows 8 の新しい UI 環境 (かつて Metro と呼ばれた) で動作するアプリケーション、通称「Windows ストア アプリ」の開発方法について書いています。 Windows ストア アプリは C,C++,VB,C#,JavaScript のいずれかの言語で開発することができますが、このブログでは HTML + JavaScript での開発について紹介していきます。 なお、以下は前回までの投稿記事となりますので、まだお読みになっていない方はこれからの記事を読む前にぜひご覧ください。 始めよう、Windows 8 アプリ開発 (準備編) Windows ストア アプリ(HTML + JavaScript)の構造 Windows ストア アプリと Web コンテンツの違い (1/3) Windows ストア アプリと Web コンテンツの違い (2/3) Windows ストア アプリと Web コンテンツの違い (3/3) Windows 8 アプリの開発に使用するツール Visual Studio 2012 を使用した…

0

MSDN 開発体験テンプレートを使用したニュースリーダーアプリの開発 (準備編)

Windows 8 の新しい UI 環境 (かつて Metro と呼ばれた) で動作するアプリケーション、通称「Windows ストア アプリ」の開発方法について書いています。 Windows ストア アプリは C,C++,VB,C#,JavaScript のいずれかの言語で開発することができますが、このブログでは HTML + JavaScript での開発について紹介していきます。 なお、以下は前回までの投稿記事となりますので、まだお読みになっていない方はこれからの記事を読む前にぜひご覧ください。 始めよう、Windows 8 アプリ開発 (準備編) Windows ストア アプリ(HTML + JavaScript)の構造 Windows ストア アプリと Web コンテンツの違い (1/3) Windows ストア アプリと Web コンテンツの違い (2/3) Windows ストア アプリと Web コンテンツの違い (3/3) Windows 8 アプリの開発に使用するツール Visual Studio 2012 を使用した…

0

Visual Studio 2012 に既定で用意されている Windows ストア アプリ用テンプレート

Windows 8 の新しい UI 環境 (かつて Metro と呼ばれた) で動作するアプリケーション、通称「Windows ストア アプリ」の開発方法について書いています。 Windows ストア アプリは C,C++,VB,C#,JavaScript のいずれかの言語で開発することができますが、このブログでは HTML + JavaScript での開発について紹介していきます。 なお、以下は前回までの投稿記事となりますので、まだお読みになっていない方はこれからの記事を読む前にぜひご覧ください。 始めよう、Windows 8 アプリ開発 (準備編) Windows ストア アプリ(HTML + JavaScript)の構造 Windows ストア アプリと Web コンテンツの違い (1/3) Windows ストア アプリと Web コンテンツの違い (2/3) Windows ストア アプリと Web コンテンツの違い (3/3) Windows 8 アプリの開発に使用するツール Visual Studio 2012 を使用した…

0

Visual Studio 2012 を使用した Windows 8 アプリの開発

Windows 8 の新しい UI 環境 (かつて Metro と呼ばれた) で動作するアプリケーション、通称「Windows ストア アプリ」の開発方法について書いています。 Windows ストア アプリは C,C++,VB,C#,JavaScript のいずれかの言語で開発することができますが、このブログでは HTML + JavaScript での開発について紹介していきます。 なお、以下は前回までの投稿記事となりますので、まだお読みになっていない方はこれからの記事を読む前にぜひご覧ください。 始めよう、Windows 8 アプリ開発 (準備編) Windows ストア アプリ(HTML + JavaScript)の構造 Windows ストア アプリと Web コンテンツの違い (1/3) Windows ストア アプリと Web コンテンツの違い (2/3) Windows ストア アプリと Web コンテンツの違い (3/3) Windows 8 アプリの開発に使用するツール   今回は Visual Studio…

2

Windows 8 アプリの開発に使用するツール

HTML + JavaScript を使用した WSindows ストア アプリの開発方法について書いています。 この記事から読み始める方々のために補足しておきますと 「Windows ストア アプリ」 とは Windows 8 の、かつて Metro と呼ばれた新しい UI上で動作するアプリケーションのことを言います。 なお、以下は前回までの投稿記事となりますので、まだお読みになっていない方はこれからの記事を読む前にぜひご覧ください。 始めよう、Windows 8 アプリ開発 (準備編) Windows ストア アプリ(HTML + JavaScript)の構造 Windows ストア アプリと Web コンテンツの違い (1/3) Windows ストア アプリと Web コンテンツの違い (2/3) Windows ストア アプリと Web コンテンツの違い (3/3)   Windows ストア アプリ (HTML + JavaScritp) を開発するためのツール 今回は…

0