WinJS3.0 がリリースされました。

このブログで WinJS2.1 の機能をちまちまと紹介しているうちに、なんと、WinJS3.0 がリリースされてしまいました。 ライブラリの入手も、いままでは GitHub から入手して npm インストールするしかありませんでしたが、以下のページの [Direct Download] から zip に入った使える状態の js が入手できます。しかも、CDN まで用意されています。 Try WinJS http://try.buildwinjs.com/#get あたらしく 3.0 になった WinJS、いったいなにが変わったのか、詳しく以下の書かれていますので、ぜひご覧ください。 Building Apps for Windows http://blogs.windows.com/buildingapps/2014/09/17/winjs-everywhere/ ざっと読んだかぎり、WinJS3.0 では以下の 3 つの点が強化されているようです。 デスクトップ、モバイルを含めたメジャーな Web ブラウザーどの互換性強化 PC、タブレット、携帯電話(スマートフォン)で共通で使用できるよう、コントロールのユニバーサル化 アプリや Web サイトのパフォーマンスを上げるための WinJS ライブラリのモジュール化 上の文では紹介されていませんでしたが、WinJS のメジャーな PC Web ブラウザへの対応状況については以下で見ることができますので、ご覧下さい。 Try WinJS #status http://try.buildwinjs.com/#status と、いうことで、このへんをおさえておけば大丈夫でしょう。 じゃあ、今回はこのへんで…、というわけにもいかないので、私のつたない英語力と科学技術を結集して意訳した抄訳を (あれ?) 書いてみましょう。…


WinJS2.1 によるテンプレートを使用したデータバインド

いくら検索しても見つけられなかった Visual Studio 2013 のショートカットキー一覧を、US 出張の際に「紙」で もらいました。メモ代わりに内容をこのブログに載せようと思い、念のためもういちど Web を検索してみたら、すんなりと記事が見つかってしまいモンヤリしている秋のはじまり、皆様、いかがお過ごしでしょうか? Visual Studio のヒントとテクニック http://msdn.microsoft.com/ja-jp/library/dn320181.aspx 今回の記事では、Visual Studio とはまったく関係なく、Web ブラウザーからも使用できるようになった、WinJS2.1 が提供するテンプレートの機能を使用したデータバインドの方法について紹介したいと思います。 なお、データバインドがよくわからないという方は、あらかじめ以下の記事をお読みいただくとこれからの記事について理解が深まることでしょう。 Web ブラウザーから使う、WinJS2.1 入門(データバインド) http://blogs.msdn.com/b/osamum/archive/2014/07/28/winjs2-1databind.aspx   テンプレートとは? 「Template 」(テンプレート)とは、日本語ではひな形、鋳型、型板を意味し、そこに材料を流し込むなり、それの形を複製し、土台としてなにかを作成するのに使用します。 HTML + JavaScript のプログラミングにおけるテンプレートも同様です。具体的には、非表示にした、定型化された HTML エレメントの集合を複製し、データを流し込んで表示を行います。 テンプレートの処理にデータバインドを組み合わせると、各項目へのデータの設定や、件数の変化にも自動で対応されるようになるため作業効率が高まります。   WinJS の提供するテンプレート機能 WinJS では、テンプレートを WinJS.Binding.Template オブジェクトとして提供しており、JavaScript からもマークアップからも使用することができます。 WinJS のテンプレートは、ListView オブジェクトや FlipView オブジェクトと共に使ってオブジェクトをリストアイテムとして表示することができます。 コードで記述した場合 var object = new WinJS.Binding.Template(element, options); マークアップで記述した場合…


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…


Web ブラウザーから使う、WinJS2.1 入門(データバインド)

前回の記事から、HTML5 アプリケーションのフレームワーク WinJS2.1 の使い方について紹介しています。 今回は WinJS2.1 を使用したデータバインドの使用方法について紹介します。   データバインドとは データバインドとは、文字通りデータとなにがしかを結合することであり、Web のフロントエンド開発では、多くの場合 HTML のエレメントと JavaScript で扱われるデータを結合する機能を言います。 データバインドを使用すると、HTML エレメントのプロパティ毎にいちいちデータをセットする処理を記述する必要がなくなります。 あらかじめ使用するデータと、それらに対応した HTML エレメントのプロパティを定義しておけば、メソッドをひとつ実行するだけで、その内容を UI に反映させることができます。また、この HTML エレメントのプロパティに対応するデータの定義は、HTML マークアップの data-win-bind 属性の中に定義しておけるので、HTML エレメントのプロパティと、対応するデータが変更されても JacaSctipt コードを変更する必要はありません。これによってデータと UI エレメントの関係を抽象化することができます。   データバインドに使用するデータ HTML エレメントとバインドするデータは、プロパティを持つオブジェクトでかつ、HTML エレメントのプロパティの値として適切なものである必要があります。たとえば、HTML エレメントの backGround-color 属性に単なる数字を指定しても、backGround-color 属性に指定できるのは、カラーコードやカラー名であるため、その内容は反映されません。 HTML エレメントにバインド可能なデータは以下のようなものです。 var myBlogsData = {        pageTitle : “monoe’s blog”,     url:”http://blogs.msdn.com/b/osamum”,    …


Web ブラウザーから使う、WinJS2.1 入門(導入とコントロールの配置)

今年の Build 2014 で発表されたとおり、それまで Windows ストア アプリ (HTML+JavaScript) の専用フレームワークであった WinJS はオープンソースとなり、Web ブラウザー上で動作する HTML5 アプリのフレームワークとして生まれ変わりました。 このブログでは、新しくなった WinJS の使い方について、数回にわけて紹介していきます。 なお、ここで紹介する内容は、最新の Internet Explorer だけでなく Chrome、Firefox でも動作します。   WinJS とは? WinJS の正式名称は Windows Library for JavaScript と言い、以前は Windows ストア アプリ専用のフレームワークでした。 WinJS はデータバインドやテンプレート、マークアップによるリッチなコントロール、非同期実行のモデル、ページのナビゲーションモデルや HTTP 呼び出しなど、HTML + JavaScript でアプリケーションを開発する際に必要となってくるさまざまな機能を提供します。 現在、WinJS の機能を実際に さまざまなモダンWeb ブラウザーから体験できるページが用意されています。 Try BuildWinJS http://try.buildwinjs.com/ (Try BuildWinJS の画面) WinJS の入手…

1

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…


オープンソースになった WinJS を GitHub から取得する方法

Build 2014 で WinJS がオープンソースとして公開されることがアナウンスされました。     これは単純に WinJS のソースコードを公開するということだけではなく、WinJS が Windows ストア アプリだけでなく HTML5 をサポートしたモダン Web ブラウザー上でも動作するということを意味していました。 オープンソースとなった WinJS は GitHub で公開されましたが、そこで公開されているアセットはソースであり、ライブラリとしてすぐに使用できる状態ではありません。そのため入手後、ライブラリにコンパイルする必要があります。また、コンパイルするための環境も用意する必要があります。 今回の記事では、GitHub からの WinJS ソースの入手と、ライブラリとして使用可能な状態にコンパイルする方法について紹介します。 さて、WinJS と入手とコンパイルの説明に入る前に、WinJS をご存じのない方のために簡単に紹介しておきましょう。 WinJS とは? WinJS の本来の名前は Windows Library for JavaScript と言い、以前は Windows ストア アプリのフレームワークでした。 現在では HTML5 ベースのアプリケーションのフレームワークの位置づけとなります。(正式にアナウンスされているわけではありませんが)     WinJS は FlipView や ListView といった、通常 HTML と JavaScript で自作すると結構な工数がかかるリッチなコントロール類やデータバインド、Promise モデルの非同期の仕組み等々、アプリケーションの開発の手助けになる多くの機能を提供します。 以下のページで、WinJS…


ゲーム用 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] キーを押下すると、簡単なステージが開始されます。 このテンプレートには…


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 今回は…