その 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

ワールドカップ、日本戦前に入れておきたい Windows ストア アプリ 5 選!

Multi-Device Hybrid Apps (Preview) のインストール方法について書こうと思い Live Writer を起動したものの、明日がワールドカップ日本戦であることを思い出して、仕事が手につかなくなってしまった….わけではないのですが、より多くの Windows 8 ユーザーの方々に Windows ストア アプリを使っていただこうということで今回は、ワールドカップにちなんだアプリを五つ紹介です。 この Windows ストア アプリを使いつつ試合を観戦すれば、より試合を楽しめること間違いなし!、だと思います、たぶん。 と、いうことで、私が独断と偏見で、フットボール好きの皆様にかってにオススメする   ワールドカップ、 日本戦前に入れておきたい Windows ストア 無料アプリ 5 選!   1. リアサカ LIVE 「リアサカ LIVE」 はなんと、Windows タブレット 公式観戦アプリで Windows ストア独占配信アプリだそうです! (いま知った) 試合中に、スコア、シュート数、FK数、保有率はもちろん、選手毎のパス数、パス成功率など詳細なデータをリアルタイムに更新してくれる、まさな試合観戦の友、といったアプリです。 詳しい機能については、特集ページが用意されていますので、ぜひご覧ください。 Windows タブレット 公式観戦アプリ – Microsoft atLife http://www.microsoft.com/ja-jp/atlife/pcinfo/1405/sport_cp/application.aspx ダウンロードは こちら から。 リアサカ LIVA http://apps.microsoft.com/windows/ja-jp/app/live/401efc40-a4e6-4b9d-abe6-f13c8449e016  …

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 Phone 8.1 で使用できる WinJS コントロール一覧

ただいま de:code に向けて絶賛セッションデモを作成中です。 私の担当する DE-015-「Visual Studio 2013 Update 2 と HTML5 によるクロスデバイス、クロスプラットフォーム開発の全貌」では、Windows ストア アプリから Windows Phone 8.1 アプリを作るデモを予定しております。 そんなわけで、本日実際にデモを作りはじめたわけなのですが、WinJS コントロールの動作が Windows Phone アプリで微妙に怪しい。 具体的には FlyOut がどうにも動作しないので、「WinJS、まだまだだナー」なんてやいのやいの言ってたらなんと、 _人人人人人人人人人人_ >Windows Phone で      < >サポートしてなかった!!<  ̄^Y^Y^Y^Y^Y^Y^Y^Y^ ̄ 失意のまま、デモの作り直しを決意したわけなのですが、私と同じ失敗を少しでも多くの人が避けられるよう、WinJS が提供するコントロールの PC、Phone 対応状況一覧を作ってみましたよ。 WinJS が提供するコントロールの PC/Phone の対応一覧 (2014 年 5 月 20 日現在) コントロール サポート 説明 AppBar コマンドを表示します。 BackButton 戻るナビゲーションをユーザーに提供するボタン。 DatePicker…

0

開発者向けイベント「de:code」、担当セッションをチラ見せ

2014 年 5 月 29 日 (木) – 30 日 (金)、東京は芝の ザ・プリンス パークタワー東京で、日本マイクロソフト主催による開発者向け有償イベント「de:code」が開催されます。 2014 年 5 月 29 日 (木) – 30 日 (金) ザ・プリンス パークタワー東京 同イベントで、以下の 2 セッションを担当させていただきます。 日時 2014 年 5 月 29 日 (木) 16:30 – 17:20 セッション ID DE-015 セッションタイトル Visual Studio 2013 Update 2 と HTML5 によるクロスデバイス、 クロスプラットフォーム開発の全貌 日時 2014…

0

ゲーム用 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

[HTML5API] contentEditable 属性を使用したリッチテキストエディタの実現

HTML5 から要素に contentEditable 属性が指定できるようになりました。 今回は contentEditable 属性について紹介するとともに、とかく疑問に思われがちな contentEditable 属性の使いかたについて紹介していきます。 contentEditable 属性とは? contentEditable 属性は、designMode 属性と同じく、Web コンテンツの内容をユーザーから編集可能にするものです。 designMode 属性がドキュメント全体に対するものに対し、 contentEditable 属性はここのエレメントに対して作用します。 contentEditable 属性を true に設定することで、ユーザーに当該エレメントのコンテンツの編集を許可します。 (※) contentEditable 属性は designMode 属性と同じく、もともとは Internet Explorer 5.5 からの独自機能でしたが HTML5 で標準的な API として採用されました。 さて、ここで実際に contentEditable 属性を true に設定した div タグをこのページ上に表示してその機能を体験していただきたかったのですが、ここのブログシステムがそういったものを制限しているようなので、以下のに ifame で貼りつけました。ぜひお試しください。 なお、実際に記述しているタグは以下のとおりです。 <div contenteditable="true">         <p>この文字列は div タグで書かれていますがユーザーから編集することができますよ。</p>         < p>他のページから書式のついた文字列をコピーし、こちらに貼りつけてみてください。</p>…

2

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