第1回 WindowsPhone アプリ開発のハンズオンセミナー ～Expression Blend4を使ってみよう～

株式会社 ブリリアントサービス スマートフォン同好会

アジェンダ

会社説明

開発ツール説明

Blendの簡単な使い方説明

プロジェクト作成

ビヘイビア概要説明

ページ背景が切り替わるアプリ実装

ビヘイビア詳細説明

ページ遷移するアプリ実装

アニメーションするアプリ実装

リストボックス説明

RSS Readerアプリの作り方

RSS Readerアプリ実装

状態遷移について

トリガーについて

午前

午後

余り時間

一応会社の事とかを…

株式会社 ブリリアントサービス スマートフォン同好会

⇒なんか色々やってる会社のスマホ的な事をやってる同好会の活動一環です。

メンバー

会長：かわかみひろき ⇐ いま話してるヤツ

会計：竹中 ⇐ メガネ掛けてる人

会員：八木 ⇐ メガネ掛けてる人

現在会員を募集中！会に入るために弊社へ入社しよう。

詳しくはWebで ⇒ http://www.brilliantservice.co.jp/

ハンズオンセミナーと言うことで...

どんなセミナー内容かを説明します。

基本的には私が話す内容に沿って、自分でも同じように操作して使い方を学んでください。

セミナー中、何回か時間を取ってアプリを作って貰う時間があります。 速く終わった人はアプリ改良しても良いし、ちょっと休憩してても良いですが。助けあい精神と言う事で周囲で困ってそうな人が居たらフォローして貰えるとその人も助かるし、私達も凄く助かります。

静かにもくもくと作業していても良いですが、周りの人らと話しながら作業していてもOKです。

ツールの話 実装するためのツールは大きく分けて2つ！

実装するためのツールは2種類

WinwosPhoneアプリ開発を行う上で、実装を行うためのツールが2種類あります。

Visual Studio 2010 Express for Windows Phone Windows Phoneアプリ構築するためのIDEです。 主に動作(ロジック)の実装を行うためのツール。

Expression Blend4 Winodws Phoneアプリデザインを行うためのツール。

Blendを知ろう

単なるデザインを行うためのツールではなく、

画面に動きを付ける役割

や

コントロールとデータを結びつける

のに便利なツールです。

Blendの簡単な使い方説明 ざっくりとした説明をします

まず起動してみましょう

[すべてのプログラム]

[Microsoft Expression]

[Expression Blend 4]をクリック

Blendのざっくりとした見た目の説明

これらのパネルを使っていきます

Blendの様々なパネル

今すぐ説明する利用頻度の高いパネル

アセット

デザイン

オブジェクトとタイムライン

プロパティ

あとで説明するたまに使用するパネル

データ

状態

今回説明しないパネル

プロジェクト ⇒ VSのソリューション エクスプローラーと一緒

リソース ⇒ ソリューション内のリソース一覧

パーツ ⇒ コントロール構成要素

結果 ⇒ 実行時のログ

Blendのパネル表示してみましょう

[メニュー] から [ウィンドウ] を選ぶと各ツールの表示/非表示を選べる

[アセット]パネル

プロジェクト内リソース、コントロール、スタイル、ビヘイビア等がまとまっているパネル

[デザイン]or[オブジェクトとタイムライン] パネルへドラッグ&ドロップする事で、対象を画面上へ追加する事が可能

[アセット]ビューと同じものがツールボックスとして画面左端にあるよ

[デザイン]パネル

画面上に見えるオブジェクトが表示されているパネル

コントロール追加が[アセット] パネルからのドラック&ドロップ操作で可能

コントロールの一部プロパティが変更が可能（コントロールの 階層構造や位置、テキスト等）

選択オブジェクトが分かりにくかったり、画面上に見えるオブジェクトしか操作出来ないので、その場合は[オブジェクトとタイムライン] パネルで操作する

[オブジェクトとタイムライン]パネル

画面上の全オブジェクトが表示されているパネル

コントロール追加が[アセット]パネルからのドラック&ドロップ操作で可能

コントロールの階層を移動させる事は可能だが、それ以外の変更は不可能

選択の誤操作は無いが、視覚的に分かり難いため[デザイン]パネルを見ながらの作業になる

[プロパティ]パネル

[デザイン]or[オブジェクトとタイムライン] パネルで選択中のプロパティ表示するパネル

オブジェクトのレイアウト変更が行えるが、階層変更はできない

選択オブジェクトに応じてプロパティ内容が異なる。また、VisualStudioの[プロパティ] パネルでは設定出来ないものがある

プロパティ変更するならVSじゃなくBlendを使おう！

BlendのTipsあれこれ

TabかF4を押せばパネルの表示/非表示が切り替わる

BlendからVSを起動できるし、VSからBlendを起動する事もできる

Blendで作業した後、VSを表示するとマージが行える。逆もまたしかり。

BlendとVSの両方で編集作業した後でマージすると、変更が反映されなかったりビルド出来ない謎現象になる。

[オブジェクトとタイムライン]パネル上で、複数コントロールを選択して [右クリック] > [グループ化設定] でパネルに入れ込める。解除も可能。

[オブジェクトとタイムライン]パネル上で、パネル選択して[右クリック] > [レイアウトの種類の変更] でパネル種類が変更できる。

Hello World プロジェクトを作成 あえてBlendで一から作成してみよう

プロジェクト作成

言語は C# バージョンは 7.1

[メニュー]から[ファイル] > [新しいプロジェクト]

タイトルを変更してみる

ビヘイビア概要説明 ざっくりとビヘイビアについて説明するよ

ビヘイビアとは？

ビジネスロジックを書くこと無く、単純なイベントを追加可能なコードブロックです。

ページ背景色が切り替わるアプリ実装 はじめてのビヘイビア

「ページ背景色が切り替わるアプリ」仕様

Blendだけを使用して、何かしらをトリガーにしてページ背景を別の色に変更する

開発期間：13:00(お昼休みが終わる)まで

例えばボタンクリックで変更

イベントに応じてコントロールのプロパティを変化させる

プロパティ変更をイベントとを結ぶビヘイビア... ChangePropertyAction を使おう！

トリガーの下に配置して、プロパティを弄れば出来るはず！

トライ&エラーで使い方を学習して欲しい所ですが、どうしても分からなくてお手上げな場合は以下のページを参照ください

http://d.hatena.ne.jp/bs-wp7/20111018/1318939514

ビヘイビア詳細説明 様々なビヘイビアがあります

いろんな種類のビヘイビア

ビヘイビア名 機能名

CallMethodAction メソッドを呼び出す

ChangePropertyAction プロパティ変更を行う

DataStateBehavior 2種類の状態にスイッチを行う

GoToStateAction 状態を切り替える

InvokeCommandAction Commandを呼び出す

PlaySoundAction 音を再生する

RemoveElementAction 対象オブジェクトを削除する

ControlStoryboardAction ストーリーボードをコントロールする

FluidMoveBehavior オブジェクトの移動アニメーション

FluidMoveSetTagBehavior FluidMoveBehaviorの移動開始位置を指定する

MouseDragElementBehavior ドラッグ&ドロップを行う

NavigateToPageAction 指定ページへ遷移を行う

ビヘイビアに関するあれこれ

13種類のビヘイビアを継承して、内部ロジックが独自のビヘイビアを作って使用することも可能

ビヘイビアの中にはイベント実行条件を付けたり、実行時のアニメーションを付ける事も可能

割りとよく使うのは以下のビヘイビア

ChangePropertyAction

DataStateBehavior

ControlStoryboardAction

NavigateToPageAction

ページ遷移するアプリ実装 他のビヘイビアも使ってみよう

「ページ遷移するアプリ」仕様

Blendだけを使用して、何かしらをトリガーにしてページ遷移を行う

開発期間：今から15分後くらい

例えばボタンクリックで遷移

ビヘイビア一覧を見れば何すればいいか分かるはず！

アニメーション ストーリーボードの作成方法

アニメーションさせる方法について

Blend上でコントロールの変化を時間刻みで変化させたアニメーション情報を作成します。 これをストーリーボードと呼びます。

アニメーション作成方法

ストーリーボードを作成

再生するトリガー追加

ストーリーボードを作成

時間軸でどう変化するかを定義していく

再生するトリガー追加

前に紹介したビヘイビア

一覧を見ると分かるはず！

アニメーションするアプリ実装 実際にアニメーションするアプリを作ってみよう

「アニメーションするアプリ」仕様

ボタン押下で、標準アプリが遷移時に行なっているページが扉みたいに開くアニメーションするアプリ ※ページの左端を回転軸にしてくださいね。 時間が余った人は開けたページを閉じるアニメーションもやってみよう

開発期間：今から30分後くらい(終わった人から休憩)

Blend上ではこんな感じでアニメーションしているのが見える

アニメーションさせるヒント

オブジェクトの状態変更はプロパティで変更可能

デフォルトの回転軸ってどこだろうね

リストボックス説明 初心者の壁「リストボックス(ListBox)」もBlendを使えば楽々実装

データ内容をベースにリストボックス作成

サンプルデータを元に作成

XMLを元に作成

Classを元に作成

ライブラリを元に作成

サンプルデータを元にモックアプリ作成

1. ListBoxを作成し、適当なサイズに調整

2. [データ]パネルから[新しいサンプルデータ...]を選択

3. Collectionを[デザイン]パネルのListBoxへドラッグ&ドロップ

4. [オブジェクトとタイムライン]パネルでLsitBoxを選択中に、[デザイン]パネルの左上にある[ListBox]をクリック -> [追加テンプレートの編集] -> [生成されたアイテムの編集] -> [現在のテンプレートの編集]

これでListBoxのカラムレイアウトが自由に変更できる

RSS Reader アプリ説明 簡単なRSS Readerの作成方法の説明

XMLデータをListBoxに流しこむ

Yahoo!ニュースのRSS情報をListBoxに流しこむには、サイト上からRSSのURLを取得

Blendの[データ]パネルからXMLインポート

[データ]パネルに展開されたCollectionをListBoxへバインド

こんな感じに作れてたらOK

ニュースのタイトル

詳細ページのURL

リストをタッチしたら詳細表示させてみよう

ニュースのタイトル

ニュースのURL ニュースの詳細

リストから明細を表示する方法

[データ]パネルの左上にある[詳細モード]をクリックする事で、Detailとしてデータをバインド可能となります。

Detailとして扱えるデータ群のアイコンが変わります！

これでリストで選択した値が、Detailに表示されるようになります！

ドラッグ&ドロップする時は、表示させたい項目だけ選択

RSS Readerアプリ実装 実際に作ってみよう

「RSS Readerアプリ」仕様

Yahoo!ニュースのRSSをリスト表示

リストを選択したら詳細を表示

開発期間：今から30分後くらい

開発ヒント

さっき説明したデータを[リスト]から[明細]表示する方法を使うと開発が楽できる

困ったときはビヘイビア一覧を見てみよう。コードを書かずに出来るはず！

時間が余ったらUIやアニメーションを凝ってみよう

状態遷移について 状態が変化していくアニメーションなら[状態]を使うと楽です。

コレは時間が余った時の時間稼ぎネタ

画面上の状態が変化する時が様々なシーンであります。

ページ遷移

コントロールの表示/非表示

・・・他、様々なシーンで使えるような気がします

[状態]パネル

切り替わる時のアニメーション間隔 状態を設定

状態を使ってRSS Readerをよりカッコよく！

リストから詳細に表示が切り替わる時に使えるはず

ビヘイビアのトリガーについて 画面上のオブジェクト操作だけがトリガーじゃない！

プロパティのトリガーにある TriggerType を変更

新規作成ボタンを押すと、 [オブジェクトの選択]が表示

トリガー候補が色々選択出来る

いろんな種類のトリガー

トリガー名 発火条件

DataStoreChangedTrigger データストアの変更に応じて発火

DataTrigger データバインドされたプロパティ値に応じて発火

EventTrigger ページ読み込み等のイベントに応じて発火

KeyTrigger キー入力に応じて発火

PropertyChangedTrigger プロパティの変更に応じて発火

StoryboardCompletedTrigger ストーリーボード完了後に発火

TimerTrigger 経過時間に応じて発火

おわり