Windows ストアアプリのつくりかた (JS + HTML + CSS)

id:nobuoka(@nobuoka)

2013-01-24 Kyoto.js #4

自己紹介と概要

● id:nobuoka - はてなブックマークチーム

● Java, JavaScript, Perl, Ruby あたりの言語が好き

● 仕事では Perl と JavaScript

● 今日は Windows ストアアプリの話

– Windows ストアアプリ開発者との情報共有

– 興味をもってる人向け情報

– 興味ない人でも設計の話とか IE 10 情報とか何かしら参考になると思う

最近は Windows ストアアプリの開発を行うなど

● 「はてなブックマーク」 と 「MeteorLine」

MeteorLine (Windows ストア)はてなブックマーク (Windows ストア)

Windows ストアアプリって?

● Windows 8 上で動作する新しい種類のアプリケーション

● 全画面表示、タッチに最適化

● 要はタブレット向けアプリのようなもの

● 原則として Windows ストアからのみインストールできる

● 開発に使用できる言語は:

– C, C++, C#, VB のいずれか + XAML

– JavaScript + HTML + CSS● Web 開発者にとって取り組みやすい

参考: Windows ストア アプリとは (Windows)

JS + HTML + CSS での開発の場合基本は IE 10 上の web アプリと同じ

● もちろん違いも: 通常の web アプリとの違い (MSDN)

– WinRT API が使えるとかタッチ拡張サポートとか

開発環境のこと

開発環境

● Windows 8 が必要

● シミュレータがあるので、タッチできるデバイスがなくてもタッチ操作のデバッグなどは可能

– とはいえ実際に触ってみるのとシミュレータで動かすのではやはり感触が違うので、実機があった方がいい

IDE: Visual Studio Express 2012 for Windows 8

参考: Visual Studio Express 2012 for Windows 8 製品情報

IDE: Visual Studio Express 2012 for Windows 8

● Windows ストアアプリ開発専用の Visual Studio 2012 の無料のエディション

● Visual Studio ばりばり使うなら Professional とかも

● JavaScript, HTML, CSS のコード補完が優秀

– Web 開発用の Visual Studio Express 2012 for Web もあるので web 開発に使ってもいいかも

● Blend for Visual Studio が付属しているが使ってないので何とも言えない

– XAML とかなら便利っぽいけど、HTML + CSS なら手で書いた方がいいのでは?

Visual Studio を用いたデバッグ

● DOM Explorer による HTML, CSS の動的な確認

● JS へのブレークポイント挿入、ステップ実行

– JS のコードに debugger 文を挿入

– コードエディタ左端をクリックしてブレークポイント指定● JavaScript コンソールコマンド (console.log メソッドと

か) による JavaScript コンソールへの出力

● 基本的には web 開発と一緒

– Firebug とか Chrome のデベロッパーツールとか

参考: クイック スタート: アプリのデバッグ (JavaScript)

Visual Studio 上でのコード補完

● 優秀なコード補完 IntelliSense

– 動的型付け言語としてはかなり優秀だと思うが、静的型付け言語と比べるとやはり劣る

– XML ドキュメントコメントによる補助が必要● ドキュメントを書く動機づけになる

● JS での慣例を反映し、this に対するプロパティ候補表示の場合にのみアンダースコア (_) 始まりのプロパティを表示するようになっている

– that の場合にも表示させたい

– カスタマイズ可能!! (カスタマイズの参考)参考: JavaScript IntelliSense

バージョン管理: Git

● バージョン管理には Git を使ってる

– Visual Studio と相性が悪いとかそういうことはない● GitHub for Windows の Git Shell を使用

– 個人的には Windows で Git を使うならコレ;exe からインストールするだけで使えるので超便利

– 端末は Windows PowerShell (デフォルト)

– 端末上の表示はおかしいが日本語ファイル名にも対応● リモートリポジトリを Dropbox に作ったりしてる

– Windows 8 シミュレータを起動しているときに Dropbox のフォルダ内のファイルを変更すると無限アップロード地獄に陥るので注意

WinJS を用いたアプリ開発どんな雰囲気なのか

WinJS ライブラリとコントロール

● WinJS: Windows ストアアプリ開発のためのライブラリ

– Windows Library for JavaScript

– クラス定義や名前空間定義のヘルパーから、テンプレート、アニメーション、各種コントロールまで

– 簡単に読めるし読むと勉強になるので読むといい● コントロールとは?

– control [名] 制御装置，(テレビなどの)調整用つまみ.

– 見た目があって、ユーザーへの情報表示やユーザーとのインタラクションのためのもの

– ボタン要素もコントロールの一種

– HTML コントロールと WinJS コントロール

クラス定義と名前空間

var MyClass = WinJS.Class.define(function () { // constructor}, { instanceMethod: function () { /* … */ }}, { staticMethod: function () { /* … */ }});var c = new MyClass();c.instanceMethod();

WinJS.Namespace.define(“namespace”, { name: value});namespace.name; // => value

WinJS コントロールの生成方法

● HTML 側に data-win-control 属性を書く, または

– JS で WinJS.UI.processAll の呼び出しが必要

● JS 側で WinJS コントロールのコンストラクタを呼び出す

● 基本的に見た目が付随するので、WinJS コントロールには対応する HTML 要素が 1 つ存在する

<div data-win-control=“WinJS.UI.ListView”></div>

var listView = new WinJS.UI.ListView(elem);

参考: HTML コントロールの追加とイベントの処理

ページ遷移の話

● IE エンジン上で動くので、普通の web ページのようなページ遷移は可能

– その場合のページ遷移には文書移動が伴うので不便

– スクリプトはすべて読み直しになる● アプリ内でグローバルにしておきたいスクリプトもあるの

で文書移動はさせたくない

– 文書は保ったまま、ページの内容を文書中に読み込む

– 単一ページナビゲーションというナビゲーションモデル

アプリ全体(HTML 文書)

ページの内容

参考: PageControl オブジェクトとナビゲーション

単一ページナビゲーションの実装

● WinJS.Navigation を使用

– 現在ページや履歴を管理するオブジェクト

– ページ遷移のメソッド呼び出しでイベント発生● navigator.js (WinJS の一部ではないが、ページ遷移対応のプロジェクトテンプレートに入っている)

– WinJS.Navigation にイベントリスナを登録し、ページ遷移のイベントが発生したときに対応するページコントロールを読み込んで表示

● Model と View の関係

● もちろんこの仕組みを使わなくてもいい

– Pjax とかあるよね (詳しく知らない)

参考: PageControl オブジェクトとナビゲーション

グリッドアプリケーション分割アプリケーションナビゲーションアプリケーション

単一ページナビゲーションの実装

参考: PageControl オブジェクトとナビゲーション

navigator.js で定義　　　　　　　　

Application.PageControlNavigator objページを表すオブジェクトを入れ替える

WinJS.Navigation現在ページや履歴の管理 ページ遷移イベント通知

WinJS.UI.Pages.PageControl objページを表すオブジェクト

URL に対応するページコントロールをインスタンス化・表示

ページ遷移メソッド呼び出し

グリッドアプリケーション分割アプリケーションナビゲーションアプリケーション

Model

View

ページコントロールとは(WinJS.UI.Pages.PageControl)

● 「ページ」 を表す WinJS コントロール

– HTML, CSS, JavaScript で構成される

– ページを構成する際に必要なものが全て含まれる● Visual Studio のファイルエクスプローラの 「追加」 →

「新しい項目」 から、HTML, CSS, JS の組として 1 つのページコントロールを作成できる

● ページ全体を表すだけでなく、ページの一部を表すこともできる = カスタムコントロールとして使うことができる

● 実装としては XHR で HTML ファイルを取得して、要素を cloneNode して現在の文書中に埋め込むという感じ

– IE 10 の cloneNode まわりのバグに注意 (参考)

バインディングとテンプレート(WinJS.Binding, WinJS.Binding.Template)

● HTML 要素のカスタムデータ属性に JS オブジェクトとの対応関係を書いておいて、JS 側から HTML 側に値を結び付けることができる

● テンプレートを使えば HTML 構造に JS 側から値を埋め込んだものを簡単に複数個作り出せる

– テンプレート内に条件分岐とかはなくて健全な感じ

<div data-win-control=“WinJS.Binding.Template”> <span data-win-bind=“textContent: name”></span></div>

template.render({ name: “your name” });

参考: データとスタイルのバインド

List と ListView(WinJS.Binding.List と WinJS.UI.ListView)

● List は普通の配列と似たインターフェイスをもつオブジェクト

– 要素追加や削除などの際にイベントが発生する● ListView はその名の通り複数の項目を並べて表示

– List に結び付けて、List の変更に自動的に追従

– ListLayout と GridLayout がある

参考: ListView コントロールの追加

Promise による非同期処理(WinJS.Promise)

● Common JS Promises/A 提案 の実装

● 非同期処理をメソッドチェインで書ける

– コールバック関数を渡したりするより読み書きしやすい

WinJS.xhr({ url: “http://b.hatena.ne.jp/” }).then(function (xhr) { console.log(xhr.responseText);}, function onError (xhrOrError) { console.error(xhrOrError);}).then(function () { // ...});

CSS だと -ms-grid, -ms-flex が重要

● display: -ms-grid

– IE 10 単独実装 (だよね?)

– 要素を格子状に分割して、子要素をそれぞれどのグリッドに配置するのかを自由に決めることができる

– アプリを作るならほぼ必須● display: -ms-flexbox

– 最新の W3C の勧告候補だと display: flex になってるやつ (のはず)

とりあえず雰囲気はこんな感じ

● 詳しいこと書きだすときりがないので雰囲気がわかりそうなことを書いた

– WinRT API のこととかは全然触れてない● 実際に開発する人は MSDN のドキュメントを読もう!

● WinJS ライブラリのソースコードを読むのもオススメ

MeteorLine のはなし

ソースコードを一部公開

● 最初期バージョンのソースコードを公開した

– nobuoka / win-store-MeteorLine - GitHub● 簡素な設計、素朴な実装

● どうやって開発を進めたか機能ごとに紹介してみる

– Twitter のユーザー認証 (アカウント追加)

– アカウント一覧表示、削除

– Home Timeline の表示 (User Stream API 使用)

– アプリ設定の追加

全体の設計

アカウント一覧のページコントロール

accountListアカウントの管理

アカウント追加のページコントロール

アカウント追加

twitterClientTwitter サーバーとのやりとり

タイムライン一覧のページコントロール

アカウント削除・参照

タイムラインを表すのページコントロール

タイムラインを表すのページコントロール

タイムライン取得ツイート投稿

変更通知

図中では TwitterClient と OauthCredentialsObtainer をまとめて twitterClient としてる

まずはプロジェクト作成

● 「新しいプロジェクト」 → 「テンプレート」 → 「JavaScript」

● 既にページ構造もできてる: 「グリッド...」 「分割...」

● 単一ページだがページ遷移機能付: 「ナビゲーション...」

● その他、ページ遷移機能無しのプロジェクトテンプレート

● 今回は 「ナビゲーション アプリケーション」

とりあえずいじる

● 単一ページ内でアカウント管理とタイムライン一覧をタブで切り替えるように

Twitter ユーザー認証の機能を追加

Twitter ユーザー認証の機能を追加

● コミット ee959a7094a

● アカウント追加のためのページコントロール

● oauth ライブラリを追加

● OAuth 認証のための処理を記述

– Client Credentials は Config.js に記述 ("YOUR_CONSUMER_KEY",　"YOUR_CONSUMER_SECRET")

● アカウント一覧は WinJS.Binding.List で管理 global.accountList

– List の変化をイベントとして検知して、変更されるたびに localSettings に JSON 文字列として保存

Twitter ユーザー認証の機能を追加

アカウント一覧のページコントロール

accountListアカウントの管理

アカウント追加のページコントロール

アカウント追加

twitterClientTwitter サーバーとのやりとり

タイムライン一覧のページコントロール

アカウント削除・参照

タイムラインを表すのページコントロール

タイムラインを表すのページコントロール

タイムライン取得ツイート投稿

アカウント一覧の表示とアカウント削除

アカウント一覧の表示とアカウント削除

● コミット 98142480634

● アカウント一覧のためのページコントロール

● WinJS.UI.ListView コントロールでアカウント一覧を表示

● 削除のコマンドがたたかれた場合は global.accountList からアカウント情報を削除

アカウント一覧の表示とアカウント削除

アカウント一覧のページコントロール

accountListアカウントの管理

アカウント追加のページコントロール

アカウント追加

twitterClientTwitter サーバーとのやりとり

タイムライン一覧のページコントロール

アカウント削除・参照

タイムラインを表すのページコントロール

タイムラインを表すのページコントロール

タイムライン取得ツイート投稿

Home Timeline の表示

Home Timeline の表示

● コミット f870b6d6a4e

● TwitterClient 作成

– IE 10 の XHR における ms-stream を使って Streaming API を扱う (参考)

● XHR 2 の responseType 属性 (“document” とか指定すれば HTML ドキュメントがとれるやつ)

● Timeline を複数表示するためのページコントロール

● Timeline のページコントロール

Home Timeline の表示

アカウント一覧のページコントロール

accountListアカウントの管理

アカウント追加のページコントロール

アカウント追加

twitterClientTwitter サーバーとのやりとり

タイムライン一覧のページコントロール

アカウント削除・参照

タイムラインを表すのページコントロール

タイムラインを表すのページコントロール

タイムライン取得ツイート投稿

アプリ設定の追加

アプリ設定の追加

● コミット 674bc41f384

● アプリ設定の開き方

– Windows ストアアプリにおけるアプリ設定の表示方法

Windows ストアアプリ開発に関して思ったことなど

● HTML + CSS + JS で書けるのは取り組みやすい

● 一方で GUI アプリケーションの設計に関しては web 開発の知識では足りなくて慣れるまで苦労した

– MVC とかちゃんと理解してなかったので● UI 部品などのコンポーネント化は大事だなーと思った

– 基本的にはページコントロールで部品を作るとよさそう

– 1 つのコントロールの中に view とか model とか control が混在することもあるけど、どの部分が何に相当するのか意識しておけば将来変更しやすい

おわり

アカウント一覧のページコントロール

accountListアカウントの管理

アカウント追加のページコントロール

アカウント追加

twitterClientTwitter サーバーとのやりとり

タイムライン一覧のページコントロール

アカウント削除・参照

タイムラインを表すのページコントロール

タイムラインを表すのページコントロール

タイムライン取得ツイート投稿