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

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」

はてなブックマーク (Windows ストア) MeteorLine (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 の呼び出しが必要

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

● JS 側で WinJS コントロールのコンストラクタを呼び出す
var listView = new WinJS.UI.ListView(elem);

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

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

ページ遷移の話
● IE エンジン上で動くので、普通の web ページのような
ページ遷移は可能
– その場合のページ遷移には文書移動が伴うので不便
– スクリプトはすべて読み直しになる
● アプリ内でグローバルにしておきたいスクリプトもあるの
で文書移動はさせたくない
アプリ全体
– 文書は保ったまま、ページの内容を (HTML 文書)

文書中に読み込むページの内容
– 単一ページナビゲーションという
ナビゲーションモデル

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

単一ページナビゲーションの実装
グリッドアプリケーション
分割アプリケーション
● WinJS.Navigation を使用ナビゲーションアプリケーション

– 現在ページや履歴を管理するオブジェクト
– ページ遷移のメソッド呼び出しでイベント発生
● navigator.js (WinJS の一部ではないが、ページ遷移対応のプロジェクトテンプレートに入っている)
– WinJS.Navigation にイベントリスナを登録し、ページ
遷移のイベントが発生したときに対応するページコント
ロールを読み込んで表示
● Model と View の関係
● もちろんこの仕組みを使わなくてもいい
– Pjax とかあるよね (詳しく知らない)

単一ページナビゲーションの実装
グリッドアプリケーション
分割アプリケーション
ナビゲーションアプリケーション
WinJS.UI.Pages.PageControl obj
ページを表すオブジェクト
URL に対応するページコントロールを
インスタンス化・表示

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

navigator.js で定義　　　　　　　　
Application.PageControlNavigator obj
ページを表すオブジェクトを入れ替える
View

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


ページコントロールとは
(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 ライブラリのソースコードを読むのもオススメ

ソースコードを一部公開
● 最初期バージョンのソースコードを公開した
–nobuoka / win-store-MeteorLine - GitHub
● 簡素な設計、素朴な実装
● どうやって開発を進めたか機能ごとに紹介してみる
– Twitter のユーザー認証 (アカウント追加)
– アカウント一覧表示、削除
– Home Timeline の表示 (User Stream API 使用)
– アプリ設定の追加

全体の設計
タイムラインを表すタイムラインを表す
のページコントロールのページコントロール
アカウント一覧の
ページコントロール

アカウント
タイムライン一覧削除・参照アカウント追加の
タイムライン取得のページコントロールページコントロール
ツイート投稿

変更通知

アカウント追加

twitterClient accountList
Twitter サーバーとのやりとりアカウントの管理

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

まずはプロジェクト作成
● 「新しいプロジェクト」 → 「テンプレート」 →
「JavaScript」
● 既にページ構造もできてる: 「グリッド...」「分割...」
● 単一ページだがページ遷移機能付: 「ナビゲーション...」
● その他、ページ遷移機能無しのプロジェクトテンプレート

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

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

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

● コミット ee959a7094a

● アカウント追加のためのページコントロール
● oauth ライブラリを追加
● OAuth 認証のための処理を記述
– Client Credentials は Config.js に記述
("YOUR_CONSUMER_KEY",　"YOUR_CONSUMER_SECRET")
● アカウント一覧は WinJS.Binding.List で管理
global.accountList

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


アカウント
ツイート投稿



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

● コミット 98142480634

● アカウント一覧のためのページコントロール
● WinJS.UI.ListView コントロールでアカウント一覧を表示
● 削除のコマンドがたたかれた場合は
global.accountList からアカウント情報を削除


アカウント
ツイート投稿



Home Timeline の表示
● コミット f870b6d6a4e

● TwitterClient 作成
– IE 10 の XHR における ms-stream を使って
Streaming API を扱う (参考)
● XHR 2 の responseType 属性 (“document” と

か指定すれば HTML ドキュメントがとれるやつ)
● Timeline を複数表示するためのページコントロール
● Timeline のページコントロール

Home Timeline の表示

アカウント
ツイート投稿



アプリ設定の追加
● コミット 674bc41f384

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

Windows ストアアプリ開発に関して
思ったことなど
● HTML + CSS + JS で書けるのは取り組みやすい
● 一方で GUI アプリケーションの設計に関しては web 開
発の知識では足りなくて慣れるまで苦労した
– MVC とかちゃんと理解してなかったので
● UI 部品などのコンポーネント化は大事だなーと思った
– 基本的にはページコントロールで部品を作るとよさそ
う
– 1 つのコントロールの中に view とか model とか
control が混在することもあるけど、どの部分が何に相
当するのか意識しておけば将来変更しやすい

おわり

アカウント
ツイート投稿



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

More Related Content

What's hot

Viewers also liked

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

More from Yu Nobuoka

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