その Web サイト、Web Application Template (WAT) で Windows ストア アプリ化しよう!

前回と引き続き、WinJS 関連の記事を書こうと思ったのですが、さる事情から Web Application Template (WAT) というツールについて紹介します。   Web Application Template (WAT) とは? Web Application Template (以降 WAT と記述) は公開されている既存の Web サイトを Windows ストア アプリにするための Visual Studio 2013 用のテンプレートです。 WebView で単純に Web サイトを表示するのとは異なり、設定ファイル (json 形式) に HTML コンテンツのエレメントの id や class 名を指定することで、既存の Web サイトのページの任意の部分を非表示にしたり、スタイルシートを上書きするなどできます。同時に、アプリバーや、チャームなど、Windows ストア アプリの特徴的な機能も提供されます。 また、Windows ストア アプリ用の JavaScript コードも追加できるので、既存の Web アプリ (ページ) に、アプリならではのハードウェアを利用した機能を追加することも可能です。…

0

Visual Studio 2013 を使用した Universal Windows App(ユニバーサルアプリ) の開発

前回の記事で、「次は WinJS のテンプレート機能について書きます」と書いたのですが、さる事情から、今回は Visual Studio 2013 Update 2 から追加された Universal Windows App (以降、ユニバーサルアプリ) の開発方法について書きます。 ユニバーサル アプリとは Windows ストア アプリと Windows Phone 8.1 のアプリを同時に開発する仕組みです。 ユニバーサル アプリのテンプレートが生成するソリューションには、Windows ストア アプリ用のプロジェクトと、Windows Phone 8.1 用のプロジェクト、そしてこの 2 つのプロジェクトが共有するコードを保持する共有プロジェクトの 3 つのプロジェクトが含まれます。 (ユニバーサルアプリ テンプレートが生成するソリューション) ユニバーサルアプリは、Windows ストア アプリの開発言語 JavaScript、C#、C++ 用のテンプレートが用意されています。 (※Visual Basic 用はまだ提供されていません。) なお、この記事は HTML + JavaScript のプロジェクトについてのみ説明しています。   ユニバーサルアプリの開発 ユニバーサルアプリを開発するには、ユニバーサルアプリ用のテンプレートを選択するか、Windows ストア アプリのソリューションに Windows…

0

Visual Studio 2013 Update 2 での HTML5 関連の強化点

Visual Studio 2013 は、先月 (2014/5) 公開された Windows 2013 Update 2 によってHTML5 を使用した開発についての機能が大幅に追加されました。 今回の記事では、Visual Studio 2013 Update 2 によって行われた HTML5 関連の機能強化によって、あらたになにができるようになったのか、その全体像を俯瞰的に紹介します。 (※) この記事は、日本マイクロソフトの有償イベント de:code のセッション DE-015 をもとに書いています。   開発基盤としての HTML5 Visual Studio 2013 Update 2 の強化点について紹介する前に、簡単に HTML5 の特徴について振り返ってみましょう。 HTML5 の特徴というと、セマンティックであるとか、マークアップが簡略化されたであるとか、マルチメディアのサポートだとかありますが、いちばん特徴的なのは、アプリケーションのプラットフォームとして設計されているということでしょう。 もともと、HTML はオンライン上のドキュメント、「文書」を記述する目的に設計され発展してきましたが、HTML5 ではそれに加え、アプリケーションのプラットフォームとしての仕様も盛り込まれています。 さらには、仕様を策定する際には、XMLHttpRequest に代表されるような、当時、Web 標準ではなかったものの、HTML ベースのアプリケーション開発に広くデファクトスタンダートとして使われてきた技術を多く取り入れるとともに、慣例的に多く使われながらも「次世代の HTML」と目されていた XHTML で廃止されたタグにも意味を与えて復活させ、既存コンテンツと互換とスキルセットの蓄積を活かせるようにしました。 また、アプリケーションの機能の範囲をブラウザ内に閉じることはせず、ストレージやネットワーク、センサーやデバイス向けの API の仕様を策定し、デスクトップアプリと遜色のない機能を実装しました。現在はまだ、HTML5 のすべての API を実装した…

1

Windows 8.1 Update で追加された Internet Explorer 11 の新機能まとめ

今月初旬、サンフランシスコで行われた開発者向けのイベント Build 2014 で Windows 8.1 Update が発表されました。 このアップデートには Internet Explorer 11 の新機能も含まれており、あとでブログで紹介しようと思っていたら先に本社のブログ、技術情報が先に公開されてしまったので、そちらを紹介したいと思います。 Windows 8.1 Update では Internet Explorer 11 の F12 開発者ツールの機能アップと、旧い Internet Explorer 向けにつくられた Web ページを利用するためのエンタープライズモードという機能が追加されました。 今回のこの記事では、この 2 つのトピックについて紹介したいと思います。   F12 開発者ツールのアップデート Windows 8.1 Update では Internet Explorer 11 の F12 開発者ツールの機能強化がされましたが、これはあくまでも既存の機能を強化するものであり、大きな機能の追加ではありませんでした。しかしながらそのアップデートは、DOM エクスプローラー、デバッガー、コンソール、分析ツール、と、そのほとんどに行われており、各機能はより強力に進化しています。 Windows 8.1 Update で行われた Internet Explorer 11 の F12 開発者ツールの機能強化については以下のドキュメントをご覧ください。…

2

ゲーム用 Windows ストア アプリテンプレート (ブロック崩し編)

「ブロック崩し」って、たまにやりたくなりますよね? アプリのストアで検索してインストールしてみるものの、なんか違うんだよなー、ということがありませんでしょうか? いろいろインストールしてみるものの、なんかしっくりこない、なんか違う、満足できない。 そういった不満を一気に解決する究極的にして絶対的な方法があります。 それは「自分で自分の欲求を充分に満たす自分だけのブロック崩しを作る」という方法です。 しかしながらイチから作るのは結構面倒です。 そういった方々のためにブロック崩しゲームの Windows ストア アプリ用テンプレートを作ってみました。(Windows 8.1 用) このテンプレートを使用すると、既定の状態で簡単なブロック崩しゲームができるようになっているので、開発者の皆さんはブロックの画像や、背景画像を差し換えたり、ブロックの出現バターンのロジック (単純な 2 重ループ文で書かれています) を書き換えたりして自分だけのブロック崩しゲームを作ってみてください。 (プロジェクトを実行したところ) プロジェクト テンプレートの入手 以下の URL から zip ファイルをダウンロードしてください。 https://win8apptemplate.codeplex.com/downloads/get/823372 プロジェクトテンプレートのインストール方法 ダウンロードした zip ファイルを解凍せずに以下のフォルダに配置します。 ドキュメント\Visual Studio 2013\Templates\ProjectTemplates\JavaScript 配置後、Visual Studio 2013 を起動し、メニュー [ファイル] – [新規作成] – [プロジェクト] を選択して [新しいプロジェクト] ダイアログボックスを表示します。 同ダイアログボックス左の [テンプレート] ツリーで「JavaScript」を選択すると、テンプレートリストに「BrockBreaker」というテンプレートが表示されるので選択して [OK] ボタンをクリックしてください。 (インストールしたプロジェクトテンプレートが表示されたところ) プロジェクト作成後、キーボードの [F5] キーを押下すると、簡単なステージが開始されます。 このテンプレートには…

0

Windows ストア アプリをテストインストールする方法

今回の記事は、Windows ストア アプリを Windows ストアに提出せずに、開発元とは異なる環境にテストインストールする方法についてです。 どこかに書いたかな? と思ったのですが、書いてなかったようなので今書きます。   Windows ストア アプリを Windows ストアを介さずに配布する方法 Windows ストア アプリは、その名前が示すとおり、基本的にはすべからく Windows ストアを介して配布されます。 しかし例外が 2 つあります。 ひとつめは、企業内での使用を目的とした Windows ストアに公開する必要性のないアプリを配布する場合です。 その場合は「サイドローディング」という方法を使って、あらかじめサイドローディング用のライセンスキーをインストールしておいた PC、ARM デバイス に直接 Windows ストア アプリをインストールします。 この方法についての詳細は、以下のドキュメントをご参照ください。 エンタープライズ アプリの展開 http://msdn.microsoft.com/ja-jp/library/windows/apps/jj657971.aspx もうひとつの方法は、サイドローディング用ではなく、テスト用の開発者ライセンスキーをインストールしておき、Windows ストアをインストール方法です。 今回はこの方法について紹介します。   Windows ストア アプリ テスト用開発者ライセンスの取得と インストール方法 Visual Studio による開発者ライセンスの取得 Windows ストア アプリのテスト用ライセンスは、Visual Studio 2013 の初回起動時にダウンロードされ、その環境にインストールされます。 なお Visual…

0

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

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