狠狠撸

Riaアーキテクチャー研究会第3回セッション3

2nd FACTORY CO.,Ltd. CONFIDENTIAL 1

1


NUI + Microsoft


例えば


クラウド市场动向


何故いきなり成熟期を迎えるのか


余计な思考

赤は１、青は２、黄色は３を押してください。

1 2 3

赤
「何色の●が一番多い？」

UI 操作の為の思考ストレスを排除、
本来の目的に意識を集中。


ゲームが参考になる日も近い


ゲームが参考になる日も近い

? ? ?
? ? ?
? ? ?
? ? ?
? ?
? ?

? ? ?
? ? ?
? ? ?
? ?
? ?
? ?
?


?

?

?

?


2


東海

高尾東海

XA XD
東海
AA ID IA

AD VD
高尾


XD IA

XA VD

ID AD

AA


XA XD

AA ID IA

AD VD


?
?
–


エクスペリエンスデザインワークフロー


?
?
?

?

?

?
?
?


3 クラウドサービスApp特有のUX的解


?
–
–

?
–
–


?
–
?
?

?
–
?
–

?
–


?
–

… JSON、ATOM等
… モデルが同じ
… … … ?Data Access LayerとViewModelを分離しや …
クラウドすい（ファサードを設置しやすい） …
Azure／オンプレミス ?同期が簡単 … … …
…
…
…
… …

Accessor
…
…
…
インメモリ上のモデルと
今後、サーバー側にナ …
が全く同じモデルを永続化
レッジとなるインフォ …
メーションプールを構築メ
JSON、ATOM等 … … … モ
していくことになる。リ
このデータの組合せ（業 ViewModel と …
務モデル）こそがインス …
フォメーションであり、ト
クライアント側に業務モア … … …
を
デルを組立するステップ読
Android、iPhone等を持たないことがみ
kabu.comの売りとなる。分分離ストレージ、Shared Object、
け HTML 5 local storage等
る


KabucomData

KabucomData.StockTile.Base.FinancialPrice

プログラマーの方々が、KabucomData
からのドットシンタックスで、すべての
エレメントにアクセスできることを意識
した設計をしました。

KabucomData.Users[0].ApplicationSetting.SkinType


凡例音声文字画像
銘柄 News … News読上げ銘柄、為替市場チャート
為替読上げニュース為替チャート
分離ストレージ
… … 銘柄チャート

オンプレミス

分離ストレージサービスAPI
…
Azure
… …
… … … … …
Invoke
Webサービス StorageManager …
ComunicationUtil
Callback
（ストレージアクセス）Sync Map
（API呼び出し）
…

… …
ComunicationUtil CompleteEvent StorageManager

…
…
… …
Accessor … … …

Extend
自動更新 …
Extend
…

タイマー …
…
… … ViewModel …
…
… …
App.xaml …
Locator Locator
…
DataContext DataContext

ReLoad 画面画面
画面の表示順などデータサービスされないステート情報はViewModelで拡張される


public delegate void CommunicationUtilCompleteEventHandler(object sender, CommunicationUtilCompleteEventArgs e);
public event CommunicationUtilCompleteEventHandler CallVoiceAPICompleted;
Dispatcher dispatcher = App.Current.RootVisual.Dispatcher;
public class CommunicationUtilCompleteEventArgs : EventArgs
{
public object Result { get; set; }
public Type ResponceType { get; set; }
} KabucomData.NetworkState.FaultModel.KannaError
if (this.CallVoiceAPICompleted != null)
{
dispatcher.BeginInvoke(delegate() { this.RequestMakeUserCompleted(this, sendArgs); });
}
分離ストレージサービスAPI

StorageManager Callback ComunicationUtil
Invoke
（ストレージアクセス） … （API呼び出し） …
… …
… … … Accessor … … …

プログラマーの方々が、完了イベント引数の
ViewModel 状態による分岐制御を意識しないよう値と値
のタイプをモデルで返すよう設計しました。

画面画面
CallVoiceAPICompleted += new CommunicationUtil.CommunicationUtilCompleteEventHandler(callVoiceAPICompleted);
static void callVoiceAPICompleted (object sender, CommunicationUtilCompleteEventArgs e)
{
if (e.ResponceType == typeof(KannaError));//エラー処理
}

?
–

クラウド
Azure／オンプレミス

ID／Pass
認証済みトークン／エラー

認証済みトークン
認証済みトークン

認証済みトークン分離ストレージ
認証が必要なデータ


?
–
データアクセスレ
ファサード（今回
App.xaml XAML コードビハインド ViewModel イヤー（通信とサービス
はAccessor）
ローカル）

データテンプレート、ローカルデータアク
タイマー制御ページ初期化コマンド実装オンライン判定認証サービス
データコンテキストセス

トランシジョン、アニ
イベント、イベントハインジケーターの制サーバーAPI呼び出
メーションコンポーデータアクセスデータサービス
ンドラ御し
ネント設置

各種設定（ロケー
ター、リソース、コマ
システムトレイコールバックチャート画像
ンド、コンバーター、
ビヘイビア）

アプリケーション
完了イベント音声サービス
バー

デストラクタ

ナビゲーション制御


? HttpWebRequest.Headers[“Authorization”]
? HttpWebRequest.Headers[“X-SessionID”]

? HttpWebRequest.Method
? ex “GET“,“PUT“,“POST“,”DELETE“

? HttpWebRequest.ContentType
? ex "application/x-www-form-urlencoded"

? HttpWebRequest.Accept
? ex "application/json“,”application/atom+xml”

public HttpWebRequest GetCurrentUserRequest(string serviceName, WebRequestType webRequestType, out string postBody)
{
string serverAddress = “http://サーバーアドレス/”;
HttpWebRequest webReq = (HttpWebRequest)HttpWebRequest.Create(new Uri(serverAddress + serviceName));
webReq.Accept = "application/json";
switch (webRequestType)
{
case WebRequestType.ChartImage://WebRequestTypeは自作した列挙値
webReq.Method = "GET";
webReq.Headers[“Authorization”] = “Basic ” + KabuComDataAccessor.KabuComData.Users[0].Base64String;//キー
webReq.Headers[“X-SessionID”] = KabuComDataAccessor.NetworkState.SessionID;//トークン
break; //postBodyを必要とするリクエストの場合はこちらで作成してやる。そうでない場合は「postBody = "";」
}
return webReq;
}


JSONクライアントの作成

System.Json DataContractJsonSerializer
（Silverlight SDK）（System.Runtime.Serialization.Json）
参照設定System.Json 参照設定System.ServiceModel.Web
? ストリームからオブジェクトへ ? シリアライザーを生成
? JsonObject jsonObject = ? DataContractJsonSerializer jsonSerializer = new
(JsonObject)JsonObject.Load(responseStream); DataContractJsonSerializer(StockData);
? 配列の場合キーをパース ? ストリームからオブジェクトへ
? foreach (string key in jsonObject.Keys) {if (key == ? StockData data =
“Name”) stockData.Name = jsonObject[key];} jsonSerializer.ReadObject(responseStream);

サーバーのモデルとクライアントのモデルが合致していない場合はSystem.Jsonを使って
クライアントのモデルにキーをマップ。
合致している場合は、DataContractJsonSerializerを使ってデシリアライズすることで1行で
マップが終了する。


設計の段階からWindows 8への展開を想定していた本案件の場合、Metro UIの採用に
よってタッチインタラクションの実装が楽になりました。
プログラムより先にユーザーの操作についてデザインされていたことがポイントです。

操作からのアプローチプログラムからのアプローチ
? ユーザーは片手で操作し、親指での ? Manipulationクラスを使えるからタッ
操作が中心プ、フリック、ピンチというユーザーの
? →タップやフリックで操作する画面ジェスチャーに対する正確なイベント
が必要を拾える
? →タッチ操作を想定したUIを採 ? →タップやフリックで操作する画面
用する（Manipulationクラスが用を作る
意されていることは画面の設計 ? →Whyが置き去りになる（なぜそ
には関係ない）の画面や機能が必要なのか？）


UX的解
クラウドサービスアプリケーション開発とは分業に尽きると感じました。分業というのは大規
模案件では当たり前のことなのですが、クラウドサービスアプリケーション開発においては、
案件規模に関わらず、UXの専門家、サービス配信の専門家、UIの専門家がチームを組んで
案件を進めることがユーザーにとって最も有用な体験を与えると考えています。

Model

Service Information Function User
UI

Architecture Product UX


狠狠撸

Riaアーキテクチャー研究会 第3回 セッション3

More Related Content

Riaアーキテクチャー研究会 第3回 セッション3

Riaアーキテクチャー研究会第3回セッション3

Riaアーキテクチャー研究会第3回セッション3