ライブコーディングで作るWin 8 カメラアプリ デモ – タッチ処理と共有機能の実装

前回から撮影機能を持った Windows ストア アプリをライブコーディングで作成する手順について書いています。 前回の記事では、PC についている Web カメラを使用して撮影を行うという基本的な機能を実装しました。 今回は、撮影した写真をタッチジェスチャで移動、回転、サイズ変更を行う機能と、写真を他の Windows ストア アプリ共有する機能を実装します。 上記の各機能を実現するコードは、タイプするには長く、時間もかかるため、あらかじめ用意したコードを張り付けていきます。   貼りつけるコードの準備 ライブコーディングの醍醐味はリアルタイムにコードを書き、その場でソフトウェアを作っていくことにあります。 しかしながら、セッションの目的から外れた必ずしもライブコーディングで説明する必要のない冗長なコードの記述が必要になる場合があります。 そのようなときは無理せずにあらかじめ用意しておいたコードを貼り付けて使用しましょう。 Visual Studio では、ツールバーに記述したコードを張り付けておくことができます。 以下で貼りつけておくコードと、Visual Studio のツールバーにコードを登録する方法について説明します。 手順は以下のとおりです。   以下のコードをクリップボードにコピーします。 function manipulateElement(e) {         var m = new MSCSSMatrix(e.target.style.transform);         e.target.style.transform = m         .rotate(e.rotation * 180 / Math.PI)         .scale(e.scale)         .translate(e.translationX, e.translationY)     } function goGesture(image)…

0

Web フォントとハートブレイク・カフェ

前回のブログ記事でお伝えしたとおり、セッションで使用するデモ用に、HTML5 + CSS3 を使った架空の喫茶店のページを作成しております。 その喫茶店の名は「ハートブレイク・カフェ」。 店のコンセプトは、「傷ついた街の天使が羽根を休める….、ということはどうでも良くて、前回の記事から、このサンプルに使用している ”いまどきの” Web 技術について紹介しております。 今日は Web フォントについて書きたいと思います。 「ハートブレイク・カフェ」のロゴは、画像ではなく  Web フォントの 「Lobster」 というフォントを指定して表示しています。 ちなみにこの「Lobster」というフォントは Windows には標準で含まれていませんが、Web フォントをサポートしている Web ブラウザーでアクセスすると、Windows はもちろん、Mac でも Linux でも「Lobster」 フォントが正しく表示されます。(※ コーヒーカップの絵は画像ですよ。)   Web フォントとは Web フォントは、クライアントにインストールされていないフォントであっても、Web からフォント提供することで、指定通りの字体の表示を行わせる技術で、CSS3 でサポートされています。(※) フォントというと、ほとんどの場合機種依存であり、異なるプラットフォームで同じ文字を表示をさせるには、形状が似たフォントを指定するなどの工夫が必要でしたが、 Web フォントを使用すると、こういった面倒はありません。 (※) 実は、Web フォントは CSS3 以前から存在しており、以前より CSS の @font-face から使用することができました。機能自体の実装もけっこう早くて、Internet Explorer では 4 の時代からサポートしていました。Web フォントの指定は CSS2.1 で廃止されていましたが、後方互換のためか多くの…

0