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

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

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

Similar to Riaアーキテクチャー研究会第3回セッション3 (20)

Recently uploaded

Recently uploaded (7)