Visual Studio で Less、CoffeeScript、MarkDown を使うには?

以前の記事「エクステンションによる VisualStudio 2012 入力支援機能の強化」で、Visual Studio の Web 開発の機能を強化するアドイン、Web Essentials について紹介しましたが、なぜか Less、Cooffee Script、MarkDown を使用する方法については記載しませんでしたので、今回紹介します。 Web Essentials とは? Visual Studio の Web 開発関連の機能を強化するアドインで、今回紹介する Less、Cooffee Script、MarkDown 以外にも、CSS、JavaScript ファイルのミニファイアや、画像、CSS に指定された色やフォントのプレビュー機能など、非常にたくさんの機能を提供します。 Web Essentials がサポートしている機能の詳細については以下のサイトをご覧ください。 Web Essentials http://vswebessentials.com/ Web Essentials のセットアップ Web Essentials の Visual Studio 2013 へのセットアップは以下の手順で行います。 Visual Studio 2013 を起動 メニュー、[ツール] – [拡張機能と更新プログラム] を選択 [拡張機能と更新プログラム] ダイアログボックスが表示されるので、ダイアログボックス中央のリストボックスから 「Web Essentials 2013」を選択し、[ダウンロード] …

1

Windows ストア アプリで使え…そうな Web API 大全!

前回の記事で、「WinJS2.0 の新機能-前篇」的なことを書いたので、今回は当然「WinJS2.0 の新機能-後編」を書こうと思っのですが、今回は Windows ストア アプリからも使えそうな Web API を紹介します。 なぜこうなったかというと、じつは @IT さん主催の Windows ストア アプリコンテスト 「2013 流行語アプリ選手権&総選挙」 が行われていて、なにか参加者の開発の助けになるような記事を はてなブログ のほうに書くように言われて書いたので、こちらのブログにもそのカーボン・コピーを載せた次第です。 2013流行語アプリ選手権&総選挙 by @IT Windowsタブレット向けアプリ開発 – @IT https://aka.ms/w8appcontest そんなわけで、今回は、このコンテストに応募される方々向けに Windows ストア アプリからたぶん使えそうな、各種サービスがインターネット上に公開している Web API を紹介します。 なお、サービスによっては有償アプリからの利用を認めていなかったり、無償でも何らかの使用制限があったりするので、実際にアプリに実装する際にはかならず各 API のライセンスを確認してください。 一般的な Web API を紹介する前に Windows ストア アプリ用に SDK として組み込まれているものを紹介していきましょう。 Windows ストア アプリ用に SDK が用意されているもの Live Connect API Live…

0

HTML+JavaScript で作る Windows 8.1 アプリ(WinJS2.0)の新機能 – 前篇

いよいよ明日公開になる Windows 8.1 特集ということで、前回の記事に引き続き Windows ストア アプリの新機能について紹介していきます。 今回は、HTML + JavaScript で作成する Windows ストア アプリ全体のフレームワークである、Windows Library for JavaScript こと、WinJS の 2.0 についてです。 この WinJS 2.0 の新機能について、前篇と後編の二回に別けて紹介していきます。 上の図は Windows 8.1 で追加、変更された API の一覧です。青いところが追加された API、黒字が変更された API、白枠がデスクトップ アプリでも使用できる API です。 Windows 8.1 の Windows Runtime API にさまざまな新機能が追加されたのと同じように WinJS2.0 にもさまざまな新機能が追加されています。 WinJS2.0 に追加された新機能は以下の 3 つに大別することができます。 新しいコントロールの追加 既存のコントロールの機能強化 JavaScript 用の新しい API 今回は…

0

Windows 8 アプリの Windows 8.1 アプリへの移行

Windows 8.1 が 10 月 18 日 (金) に公開されるということで、今回の記事では Widows 8 用に作成した Windows ストア アプリを Windows 8.1 用にマイグレーションする方法と、大きな仕様の変更について紹介します。 Windows 8 と Windows 8.1 Windows 8 は 2013 年 10 月現在、全世界でのライセンス数が 10 億を超えており、ストアには 10 万以上以上のアプリがあります。 また NETMARKETSHARE のデータによれば、Windows 8 がインストールされたコンピューターの数は、Mac OS のすべてのバージョンを足した数を超えています。 Windows 8.1 はこの市場を完全に引き継ぎ、さらに拡大すべく、インテル機、Windows RT を含めたすべての Windows 8 ユーザーに無償で配布されます。 つまり、これまである全ての Windows 8が 遠からず Windows 8.1…

0

『HTML5で作るWindows 8アプリ』まとめリンク

来月の 10 月 18 日に Windows 8.1 がリリースされます。 それと同時に Windows ストア アプリのデザインや仕様も若干ですが変わってきます。 このブログでは、次回からは Windows 8.1 ベースの Windows ストア アプリの新機能を紹介していきます。 そんなわけで今回の記事は、Windows 8 用アプリ開発のまとめという意味で、Windows ストア アプリを開発するための MSDN のドキュメントと、いままで投稿した Windows 8 用ストア アプリを開発するための記事をまとめて紹介します。 Windows 8 用とは言っても Windows 8.1 用のストア アプリの開発にも十分使えますので、これから Windows ストア アプリの開発を始められる方は、ぜひご覧ください。       Windows ストア アプリ Windows ストア アプリの紹介 http://msdn.microsoft.com/ja-JP/windows/apps/hh974576     開発のプランニング アプリの計画 http://msdn.microsoft.com/library/windows/apps/hh465427 ユーザーエクスペリエンスのガイドライン http://msdn.microsoft.com/library/windows/apps/hh770552 Windows…

0

Windows 8 アプリに広告を表示して収益化する方法

前回の記事で紹介したように、Windows ストア アプリには Windows ストアでアプリを販売する以外に、アプリ内に広告を表示して収益を得る手段が用意されています。 今回は、この Windows ストア アプリに広告を表示するための仕組み、Microsoft Advertising SDK について紹介します。   Microsoft Advertising SDK   Microsoft Advertising SDK ( 以降 Ad SDK ) は Windows ストア アプリに広告を表示するためのライブラリで、これを使用すると、マイクロソフトの営業さんが汗水たらして (夏場はとくに) 広告主から出稿してしていただいた広告が表示され、アプリの提供者に表示されたぶんの広告費が支払われます。 ちなみに Ad SDK の課金はインプレッション課金というもので、広告が表示されさえすれば売り上げが発生します。 他の広告モデルのように、ユーザーが広告をクリックしたり、リンク先でなにかを購入したりというアクションは必要ありません。(※) (※) もちろん、広告が商品の購入アクションにつながったほうが広告料を後々上げられるようになるので、広告主の売り上げにつながるような効果的な露出をぜひ考えてみてください。   Ad SDK の入手とインストール   Windows 8.1 公開と同時にリリースされる Visual Studio 2013 にはあらかじめ Ad SDK が含まれています。 しかし、Windows 8…

0

これであなたも億万長者(?)Windows ストア アプリのマネタイズ方法まとめ

今回は Windows ストア アプリをお金に換える = マネタイズ(収益化) の方法について紹介します。 Windows ストア アプリには、複数のマネタイズの方法が用意されており、そのいずれか、あるいは複数を組み合わせて売上を得ることができます。 マネタイズの方法には、アプリそのものの販売から、アプリ内販売、広告モデルなどが用意されており、アプリの形態やサービスの内容に合わせ、柔軟に対応させることができます。 各マネタイズの方法について紹介する前に、マネタイズの基盤となる Windows ストアについて、販売という観点から紹介しましょう。   Windows ストア Windows ストアは Windows 8 のスタート画面に組み込まれた Windows 8 の新しい UI 環境で動作するアプリの販売所です。 Windows ストアにアプリを公開することで、世界中のすべての Windows 8 ユーザーがそのアプリを購入することができるようになります。 Windows ストアへのアプリの提出と販売に必要な作業は、オンラインで完結しており、従来のデスクトップ用アプリケーションを販売するときのような、CD に記録し、パッケージに梱包し、流通を手配し、店頭への陳列、在庫管理、といったことが必要なくなり、また、ダウンロード販売のように、サーバーの用意や、決済システムの導入、クレジットカード決済を行うための加盟契約、といったことも必要ありません。   売り上げについて Windows ストアで販売したアプリの売上のうち、アプリの提供者は、Windows ストアの使用料を抜いた 70% を受け取ることができます。 ただし、総売り上げが $25,000 を超えると、アプリの提供者は売り上げの 80% を受け取ることができるようになります。 なお、Windows ストアを介さずに得た収益については、マイクロソフトでは関与せず、Windows ストアの使用料の徴収は行われません。 提出するアプリの品質について Windows ストアは、アプリを単に公開するだけの場所ではなく、「ストア」と名前にあるとおり基本的にはアプリを販売する場所です。   Windows ストアでは無償のアプリも公開することができますが、これは無償…

0

WordPress のブログを Windows 8 アプリ化する方法

今回は WordPress で構築されているブログサイトを Windows ストア アプリ化する方法について紹介します。 なお、今回の内容は、Windows ストア アプリ (Windows 8 の新しい UI 上で動作するアプリ) の開発者が対象となっておりますので、これから Windows ストア アプリの開発を始ようという方は、この記事を読む前に、以下のドキュメントをご覧いただくことをお薦めします。   始めよう、Windows 8 アプリ開発 (準備編) http://blogs.msdn.com/b/osamum/archive/2012/10/10/windows-8.aspx   さらに、今回の記事は WordPress で既に何らかのブログをホストしているか、WordPress の基本的な設定、もしくは操作が可能な方を対象としていますので、WordPress がよくわからないという方は、先に WordPress に触れたことのない方は市販の本などで勉強されることをお薦めします。 ちなみに Microsoft Web Platform Installer (WebPI) を使用すると、Windows 環境に WordPress を簡単にインストールして試すことができますので、これから WordPress を勉強される方はこちらもお使いください。   Microsoft Web Platform Installer http://www.microsoft.com/web/downloads/platform.aspx   WordPresss でリッチな RSS を公開する設定…

0

ライブコーディングで作る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

ライブコーディングで作る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