HTMLとJavaScriptではじめるWindowsストアアプリ開発入門

概 要

Windowsストアアプリ開発のノウハウとAPIをサンプルコードを示しながら詳しく解説した開発入門書です。Windowsストアアプリは、HTML、CSS、JavaScriptを知っていればC言語などのWindows向けプログラム言語を知らなくても作ることができます。本書では、はじめてWindowsストアアプリを作ろうと考えているウェブ技術者向けにWindowsストアアプリのAPIについて、個々のAPIごとにシンプルなサンプルアプリを用意し、そのコードの概要をわかりやすく解説しています。開発ツールの使い方、開発ライセンスの取得方法、実機での動作確認方法、加速度センサーやGPS情報などタブレット端末ならではの機能を利用する方法もわかります。

著者 羽田野太巳
価格 本体3500円(税別)
ISBN 978-4-7980-3572-7
発売日 2012/11/22
判型 B5変
色数 1色
ページ数 640
CD/DVD
対象読者 中級
シリーズ
表紙イメージ
購入 アマゾンで購入する
楽天で購入する

※リンク先によっては、販売ページが用意されていないことがあります。あらかじめご了承ください。

新しいウィンドウで開く 書籍購入のご案内

サポート

サポート情報は以下からご参照下さい。

サポート情報へのリンク

目次

第1章 Windowsストアアプリの特徴

1.1. Windows 8とWindowsストアアプリ

Windows 8で動作する2つのアプリケーション

Windowsストアアプリとは

1.2. アプリ実行環境

Windows 8のアプリ実行環境

WindowsストアアプリのJavaScriptエンジン

WinRTとは

Windowsストアアプリのインストール

1.3. アプリコンテナー

Windowsストアアプリの実行環境

アプリコンテナーとは

WinRT上で動作することのメリット

1.4. Windowsストアアプリのユーザーインタフェース

Windowsストアアプリ独自のユーザーインタフェースの呼び方

1.5. アプリ機能宣言

アプリ機能宣言とは

パッケージマニフェストとは

Windowsストアでの表示

1.6. コントラクト

コントラクトとは

コントラクトの種類

1.7. Windowsストア

Windowsストアアプリの配布の流れ

第2章 はじめてのWindowsストアアプリ開発

2.1. Visual Studio Express 2012 for Windows 8

Visual Studio Express 2012 for Windows 8とは

Visual Studio Express 2012 for Windows 8のインストール

2.2. 開発用ライセンスの取得

開発用ライセンスとは

開発用ライセンスの取得

開発用ライセンスの削除

2.3. 新規プロジェクトの作成

新しいプロジェクトの作成方法

基本的な構成ファイル

2.4. 開発中のWindowsストアアプリのデバッグ実行

開発中のWindowsストアアプリの実行方法の種類

Windows 8マシン上でWindowsストアアプリを実行する方法

シミュレーターでWindowsストアアプリを実行する方法

2.5. 時計アプリの準備

新規プロジェクトの作成

2.6. default.htmlの編集

デフォルトのHTMLコードの内容

マークアップの追加

2.7. default.cssの編集

Windowsストアアプリのデザイン原則

スタイルの追加

2.8. default.jsの編集

デフォルトのコードの意味

時計アプリのコード

2.9. アプリのロゴ画像の編集

ロゴ画像の設定方法

ロゴ画像の変更

2.10. スプラッシュスクリーンの編集

スプラッシュスクリーンの設定方法

スプラッシュスクリーンの変更

2.11. 覚えておくと便利なショートカットキー

Visual StudioとWindowsストアアプリのモード切り替えのキー操作

2.12. 実機での動作確認

リモートデバッガーとは

Remote Tools for Visual Studio 2012のインストールと実行

リモートデバッギングの準備

2.13. アプリのデバッグ

デバッグに必要なVisual Studioの機能の使い方

第3章 WindowsストアアプリのJavaScript作法

3.1. Internet Explorer 10との違い

ウェブアプリとWindowsストアアプリの主な違い

ウィンドウ操作

ハイパーリンク

フレーム

HTMLの動的挿入

文字エンコーディング

DOM API

3.2. サードパーティJSライブラリ

WindowsストアアプリでのサードパーティJSライブラリ使用方法

使用できないJavaScriptライブラリ

3.3. ナビゲーションモデル

マルチページナビゲーションと単一ページナビゲーション

単一ページナビゲーションのテンプレート

テンプレートのdefault.htmlの内容

テンプレートのitems.htmlの内容

テンプレートのitems.jsの内容

3.4. 非同期プログラミング

同期と非同期の違い

ウェブ標準APIによる非同期処理の問題点

promise構文

promise構文のthen()の構文

promise構文でのエラー処理

promise構文での進捗中処理

promise構文でのキャンセル処理

promise構文のdone()の構文

3.5. WinJS.Namespace.define関数

即時関数の問題点

イベントリスナーを使った一般的な解決法

イベントハンドラーを使ったWindowsストアアプリ独自の解決方法

3.6. アプリのライフサイクル

Windowsストアアプリの状態と遷移の種類

アプリ起動時の処理に利用できるイベント

アプリ起動の種類の判定

アプリ中断時の処理

アプリの状態の保存

ライフサイクル関連イベント

第4章 データバインドとテンプレート

4.1. アプリの起動時の処理

default.jsの起動時の処理

データバインドやテンプレートが利用できるタイミング

4.2. データバインド

データバインドとは

サンプルのHTML

サンプルのスクリプト

4.3. テンプレート

テンプレートとは

サンプルのHTML

サンプルのスクリプト

4.4. 単一ページナビゲーション

単一ページナビゲーションとは

ナビゲーションアプリケーションテンプレート

画面の追加

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

ページを戻る機能の実装

ページ間のデータの引き渡し

第5章 コントロール

5.1. メッセージダイアログ

メッセージダイアログを表示するサンプル

コマンドをまとめて処理する方法

コマンドを別々に処理する方法

5.2. コンテキストメニュー

カスタムのコンテキストメニューを表示するサンプル

サンプルコードの動作解説

5.3. WinJSコントロール

WinJSコントロールとは

WinJSコントロールの作り方

5.4. 日付ピッカー

日付ピッカーのマークアップ

ユーザーが選択した日付を判定するスクリプト

日付ピッカーへのスタイル適用

5.5. 時刻ピッカー

時刻ピッカーのマークアップ

ユーザーが選択した時刻を判定するスクリプト

時刻ピッカーへのスタイル適用

5.6. トグルスイッチ

トグルスイッチのマークアップ

トグルスイッチの状態を判定するスクリプト

トグルスイッチへのスタイル適用

5.7. レーティング

レーティングのマークアップ

レーティングの値を判定するスクリプト

レーティングへのスタイル適用

5.8. ツールチップ

ツールチップのマークアップ

5.9. リストビュー

リストビューとは

リストビューのマークアップ

リストビューへのデータの差し込み

リストビューのスタイリング

項目クリックの捕捉

項目選択の捕捉

リストビューの項目の追加と削除

5.10. フリップビュー

フリップビューとは

フリップビューのマークアップ

フリップビューへのデータの流し込み

フリップビューのスタイリング

5.11. アプリバー

アプリバーとは

アプリバーのマークアップ

アプリバーの挙動の設定

アプリバーのアイコン画像

リストビューの項目の追加と削除との連携

5.12. フライアウト

フライアウトのマークアップ

フライアウトの表示コントロール

フライアウトのスタイリング

第6章 通知

6.1. タイル通知

タイル通知とは

タイル通知の方法

ワイドタイルと正方形タイル

テンプレートの種類

通知の消去

6.2. 通知キュー

通知キューの使い方

6.3. 通知バッジ

数値バッジ

グリフバッジ

グリフの種類

通知バッジの消去

6.4. トースト通知

トースト通知の設定方法

トースト通知の送信方法

テンプレートの種類

トースト通知の表示時間

オーディオオプション

トースト通知からアプリへ情報を引き渡す方法

6.5. 通知のスケジューリング

通知の配信方法の種類

スケジュール通知によるタイルの更新

スケジュール通知によるトーストの更新

定期通知によるタイルの更新

定期通知によるバッジの更新

第7章 入力デバイスとユーザー操作

7.1. ユーザー操作の概要

ジェスチャとは

ジェスチャの種類

7.2. ポインター

ポインターとは

ポインターイベントの捕捉

イベントオブジェクト

PointerPointオブジェクト

PointerPointPropertiesオブジェクト

7.3. DOMジェスチャ

DOMジェスチャとは

MSGestureオブジェクト

DOMジェスチャイベント

イベントオブジェクト

操作ジェスチャのサンプル

7.4. 静的ジェスチャ

静的ジェスチャとは

GestureRecognizerオブジェクト

イベントオブジェクト

7.5. ポインターデバイスの識別

各ポインターデバイスの情報の取得方法

ポインターデバイスの全情報の取得

第8章 ファイルとフォルダー

8.1. ファイル選択ピッカー

ファイル選択ピッカーとは

ファイル選択のサンプル

ファイルピッカーの呼び出し可否の判定

ファイル選択ピッカーの生成

表示モード

表示フォルダーの指定

表示ファイルのフィルター

ボタン表記の定義

ファイル選択ピッカーの表示と選択ファイルの判定

複数のファイル選択

8.2. ファイル保存ピッカー

ファイル保存のサンプル

ファイル保存ピッカーの生成

保存先フォルダーの指定

保存ファイルの種類を制限

デフォルトのファイル名の指定

ボタン表記の定義

ファイル保存ピッカーの表示とファイルの保存

8.3. テキストファイルの読み書き

テキストファイルの読み込み

テキストファイルの書き込み

簡易テキストエディタのサンプル

8.4. メディアファイルの読み取り

メディアファイルの表示

簡易的なビデオプレーヤーのサンプル

8.5. ファイル一覧とファイル情報

直接的にフォルダーやファイルにアクセスするための準備

ファイル情報一覧のサンプル

フォルダーの指定

フォルダーの中身の取得

ファイルとフォルダーの区別

ファイルとフォルダーの詳細情報

ファイル属性

8.6. フォルダー操作

フォルダー操作のサンプル

フォルダー操作の概要

フォルダーの生成

フォルダーの削除

8.7. カスタムのファイルピッカー

独自ファイルピッカーのサンプル

プロジェクトの作成

メイン画面

ビデオ選択画面

第9章 アプリケーションデータ

9.1. アプリケーションデータの概要

アプリケーションデータとは

データストア、コンテナー、フォルダーとは

9.2. ローカルコンテナー

ローカルコンテナーのApplicationDataContainerオブジェクト

ローカルコンテナーを使用したサンプル

データの保存

データの取得

データの削除

コンテナーのクリア

9.3. ローミングコンテナー

ローミングとは

ローミングコンテナーのApplicationDataContainerオブジェクト

アプリ開発時のローミング確認方法

ローミングコンテナーの容量制限

9.4. ローカルフォルダー

ローカルフォルダーのStorageFolderオブジェクト

ローカルフォルダーを使用したサンプル

ファイルの内容の取得

ファイルの保存

ファイルの削除

ローカルフォルダーの場所

9.5. ローミングフォルダー

ファイルのローミングとは

ローミングフォルダーのStorageFolderオブジェクト

ローミングフォルダーの場所

9.6. 一時フォルダー

一時フォルダーとは

一時フォルダーのStorageFolderオブジェクト

一時フォルダーの場所

第10章 HTTP通信

10.1. XMLHttpRequest

XMLHttpRequest Level 2とは

XMLHttpRequest Level 2を使ったHTTP非同期通信のサンプル

XMLHttpRequestオブジェクト

受信データの形式

タイムアウト

リクエストヘッダー

イベント

10.2. WinJS.xhr

WinJS.xhrとは

WinJS.xhrを使用するサンプル

WinJS.xhr()メソッドのオプション

WinJS.xhr()メソッドの呼び出し

WinJS.xhrとXMLHttpRequestの違い

10.3. WinJS.xhrのタイムアウト

WinJS.promise.timeout()メソッドによるタイムアウト

10.4. ファイルのバックグラウンドダウンロードと保存

バックグラウンドダウンロードとは

バックグラウンドダウンロードのサンプル

バックグラウンドダウロードの存在の確認

ダウンロードフォルダー

バックグラウンドダウンロードの生成

ダウンロード処理

10.5. Webフィードへのアクセス

フィードとは

フィード取得のサンプル

フィード取得のリクエスト

フィード取得成功時の処理

フィード取得失敗時の処理

フィード取得進捗中の処理

第11章 ネットワーク

11.1. ネットワーク接続の有無の判定

ネットワーク接続の有無の判定の必要性

ネットワーク接続の有無を判定するサンプル

ConnectionProfileオブジェクトの取得

ネットワーク接続のイベント

11.2. ネットワーク接続コスト

接続コストに関連する情報を表示するサンプル

ConnectionCostオブジェクト

プロパティ

回線プランの意味

11.3. ネットワークアダプターの情報

ネットワークアダプター情報を取得するサンプル

NetworkAdapterオブジェクト

プロパティ

最大速度

11.4. ホスト名とIPアドレス

ホスト情報を取得するサンプル

ホスト情報のリスト

HostNameオブジェクト

ネットワーク接続に使われているIPv4アドレスを判定するサンプル

第12章 カメラとマイク

12.1. カメラUIによる写真撮影

カメラUIによる写真撮影のサンプル

カメラへのアクセス許可

CameraCaptureUIオブジェクトの生成とオプション設定

キャプチャー開始

撮影画像のファイル

ファイルのコピー

コピー画像の表示

12.2. カメラUIによるビデオ録画

カメラUIによるビデオ録画のサンプル

カメラとマイクへのアクセス許可

CameraCaptureUIオブジェクトの生成とオプション設定

キャプチャー開始

録画ファイル

ファイルのコピー

コピー動画の表示

12.3. MediaCaptureによる写真撮影

MediaCaptureによる写真撮影のサンプル

カメラへのアクセス許可

MediaCaptureの使い方の流れ

カメラデバイスを見つける

カメラを設定する

カメラを初期化する

カメラ映像をストリーム表示する

撮影ボタンを押したときの処理

12.4. MediaCaptureによるビデオ録画

MediaCaptureによるビデオ録画のサンプル

カメラとマイクへのアクセス許可

MediaCaptureの使い方の流れ

カメラを設定する

録画ボタンを押したときの処理

停止ボタンを押したときの処理

12.5. MediaCaptureによる録音

MediaCaptureによる録音のサンプル

マイクへのアクセス許可

MediaCaptureの使い方の流れ

マイクデバイスを見つける

マイクを設定する

録音ボタンを押したときの処理

停止ボタンを押したときの処理

12.6. 手ブレ補正

手ブレ補正のサンプル

手ブレ補正をONにする

手ブレ補正をOFFにする

第13章 アプリコントラクト

13.1. 設定コントラクト

設定チャームとは

設定メニューの追加

設定画面の作成

コントロールのマークアップ

設定の保存

13.2. 検索コントラクト

検索チャームとは

検索機能の追加

サジェスト

IMEで漢字変換する前にサジェストを出す

他のアプリから呼び出されたことを検知する

13.3. ファイルピッカーコントラクト

ファイルピッカーコントラクトとは

プロジェクトの作成

ビデオライブラリの機能追加

ファイルオープンピッカーの宣言

アプリ起動の処理

ビデオ選択画面

13.4. リモート再生コントラクト

リモート再生とは

チャームのデバイスからリモートマシンの選択を捕捉

リモート再生レシーバーにWindows Media Playerを使う方法

13.5. 共有コントラクト

共有コントラクトとは

データを他のアプリに送る

データを他のアプリから受け取る

第14章 センサー

14.1. 加速度センサー

加速度センサーを使用したサンプル

Accelerometerオブジェクト

加速度の検知間隔

readingchangedイベント

shakenイベント

14.2. ジャイロメーター

ジャイロメーターを使用したサンプル

Gyrometerオブジェクト

角速度の検知間隔

readingchangedイベント

14.3. コンパス(方位)

コンパスを使用したサンプル

Compassオブジェクト

方向の検知間隔

readingchangedイベント

14.4. 傾斜計

傾斜計を使用したサンプル

Inclinometerオブジェクト

傾きの検知間隔

readingchangedイベント

14.5. デバイスの向き

デバイスの向きを使用したサンプル

SimpleOrientationSensorオブジェクト

orientationchangedイベント

14.6. 光センサー

光センサーを使用したサンプル

LightSensorオブジェクト

照度の検知間隔

readingchangedイベント

14.7. 地理位置情報

位置情報を使用したサンプル

場所の機能追加

位置情報取得の準備

検出に成功したときの処理

検出に失敗したときの処理

検出結果の判定

移動の検出

巻末資料 リファレンス

R.1. Windowsストアアプリの情報

Windowsストアアプリの情報が公開されている主なページ

R.2. Internet Explorer 10の情報

Internet Explorer 10の情報が公開されている主なページ

PR

秀和システム