【C1】Delphi/C++チュートリアルセッション

マルチデバイスの荒海にこぎ出す
新⼈エンジニアのためのソフトウェア開発の⼼得
MVVM ⼊⾨
株式会社シリアルゲームズ 取締役
エンバカデロ MVP
細川 淳
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

1
2

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

はじめにセッション概要• マルチデバイスに対応するアプリケーションは、どのように設計すべきか？
• OS の違いは？
• 画⾯サイズの違いは？
• そもそもアプリケーションの設計とは？
「設計書の書き⽅」とかではなく概念的な話になります
3

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

アジェンダ• アプリケーションの設計• Delphi で開発する事– 今までの問題点• 打開策– MVVM

4

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

2
5

アプリケーションの設計

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

アプリケーションの設計• 設計には⼤きく分けて4つあります（僕調べ）– 要件の定義• ユーザー要件定義書とか– システムの設計• システム構成– ハードウェア構成・ミドルウェア構成とか

6

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

アプリケーションの設計– コードの設計• 詳細設計とか– え、Excel仕様書とか……

– UI / UX の設計• 画⾯仕様設計– 開発者が考えることが多い（本当は良くない）

7

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

3
8

アプリケーションの設計
要件定義・システム設計

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

アプリケーションの設計-要件定義

9

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

最近バージョン10

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

アプリケーションの設計-要件定義

ここから

11

ここれを導き出す本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

アプリケーションの設計ー要件定義• ⼤きな組織の場合– 設計と実装が別の場合が多い– さらに、営業と提案も別– これによって前述の問題が起きる• スタートアップなど⼩さな組織の場合– 営業と提案と設計と実装が同じ• 顧客が求めていることさえ判れば、割と適切な実装ができる

12

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

アプリケーションの設計ー要件定義• 新⼈でも！！

– 顧客との折衝や提案の場に連れて⾏って貰う– その場にいるだけでもOK• 先輩や営業が、どのような話をしているのかを聞く– 疑問があれば、帰社してから話を聞いても良い！

» 新⼈では想像できない何かの問題をはらんでいて、それを回避するための何かかもしれない！！

13

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

アプリケーションの設計
システム設計• ハードウェアの構成– サーバ構成• ハードウェア選定• アーキテクチャ選定– DBの選定• Oracle, MySQL, MongoDB など、⽬的ごとに選定する• ミドルウェアの構成– tomcat, node.js などなど、⽬的ごとに選定する

14

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

アプリケーションの設計
システム設計• 割とダイレクトにお⾦が関わる部分– 本当はこういう構成にしたいけどお⾦出せない！って⾔われる可能性がある（⾔われた）– 運⽤でカバーしようとか⾔われることがある←こうなりがち。
なぜか？
運⽤に⼊った段階で開発者は次の開発に⼊るため

15

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

アプリケーションの設計
システム設計• ここに関しては、あまり関与できる部分は少ないかも– 物理的な⾦額は、あまり変動しない– 新⼈では調達費⽤など判らない• ただし、将来のために学ぶ必要は有り

16

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

417

アプリケーション設計
コード設計・UI設計

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

アプリケーションの設計• Delphi での開発は– コード設計– UI 設計
この２つが特に重要• Delphi の場合、この２つが密接に関連しすぎている

18

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

Delphi での開発
• 真の Visual 開発であることの問題
D&D によるビジュアル開発はとても簡単だが……
Button1
Drop

Double Click

Button1

19

TForm1.Button1Click(Sender: TObject);
begin
ShowMessage('皐月様');end;

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

Delphi での開発
コード変更するよ！
Button1この程度なら何とか

Drop

Double Click

Button1

20

TForm1.Button1Click(Sender: TObject);
begin
ShowMessage('流子ちゃん！！');
end;

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

Delphi での開発
IniFile から取ってきて！
Button1
Drop

Double Click

Button1

21

ま、まだこの程度なら何とか

TForm1.Button1Click(Sender: TObject);var
IniFile: TIniFile;
begin
IniFile := TIniFIle.Create(～);
try
ShowMessage(IniFile.ReadString(～));
finalyIniFile.DisposeOf;end;
end;

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

Delphi での開発
Button1
Drop

そもそも！
ボタンやめるわ！
Double ClickButton1

22

TForm1.Button1Click(Sender: TObject);var
IniFile: TIniFile;
begin
IniFile := TIniFIle.Create(～);
try
ShowMessage(IniFile.ReadString(～));
finalyIniFile.DisposeOf;end;
end;

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

Delphi での開発
Button1
Drop

マルチデバイス対応するよ！！
Double Click
Button1

23

TForm1.Button1Click(Sender: TObject);var
IniFile: TIniFile;
begin
IniFile := TIniFIle.Create(～);
try
ShowMessage(IniFile.ReadString(～));
finalyIniFile.DisposeOf;
end;
end;

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

Delphi での開発
Button1
Drop

会社
Double Click
辞めるわ！
Button1

TForm1.Button1Click(Sender: TObject);var
IniFile: TIniFile;
begin
IniFile := TIniFIle.Create(～);
try
ShowMessage(IniFile.ReadString(～));
finalyIniFile.DisposeOf;end;end;

こうなりがち！

24

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

Delphi での開発
• コードと UI が密接に関連している– UI の変更でコードが全て吹っ⾶ぶ可能性を秘めている– 当然 UI が異なるマルチデバイス対応では、完全に書き直しが発⽣する

25

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

526

マルチデバイス時代の設計⼿法

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

Delphi でのマルチデバイス開発• Windows / OSX– この２つの組み合わせだけなら、あまり考えなくて⼤丈夫• iOS / Android– iPhone / iPad

• この２つだけでも、解像度が違う– Android• 解像度地獄！！！

27

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

マルチデバイスの問題点• 解像度が違う• でも！処理内容は⼤体同じ– ただし、解像度やデバイスの能⼒によってできないことがある• Windows / OSX では GPS を提供していない場合が多い• iOS / Android では、移動体ゆえに通信環境が安定しない• 解像度に依存した処理など

28

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

Delphi でのマルチデバイス地獄• 何も考えずに開発していると……
– 各 OS ⽤にアプリを作っちゃう– 各 OS 毎にフォームを作り分ける• でも、ロジックをフォームに書きがち• どちらにせよ！

– 各 OS 毎に同じような処理を複数書いていたらムダ！ムダだけならまだ良い！
• 同じバグが何カ所にもおおおおお！となる可能性が。

29

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

マルチデバイスの問題点• そもそも、処理内容が⼤体同じだったら……

UI とロジック
分けてみよう！
MVVM の登場
30

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

マルチデバイス時代の設計⼿法• MVVM– Model– View– ViewModel– ⽐較的新しい設計⼿法• 元々は Microsoft の研究者が XAML との兼ね合いで考え出した– 最⾼にロック！
31

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

MVVM• Model– データを提供するデータプロバイダ– ビジネスロジック（アプリの基本ロジック）• View– データを可視化する UI 担当部分

• ViewModel– Model と View の橋渡し役– プレゼンテーションロジック（表⽰に関わるロジック）– Model / View の実装については「知らない」⽴場を取る

32

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

MVVM

こういうアクセスをしてはならない

Data
Storage
Form

ViewModel

ModelCloud

表示

表示用データの取り扱い
表示ロジック(プレゼンテーションロジック)

データの取得アプリの基本ロジック(ビジネスロジック)

Storage は OS で変わる可能性がある
33

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

MVVM

Form

ViewModel

ViewModel はそれぞれの実装を知らない！
そのため、View と Model を抽象化する作用がある！

34

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

Modelマルチデバイスの MVVM
WindowsDataStorage
OS X

Model

ViewModel

CloudiOS

Android35

ここは同じ！！
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

ViewModel まとめ• ViewModel は View に必要な情報を渡す– データ• Model で提供されているデータなど– 状態• ⾮永続化データの保持（Model に保存しないデータ）– ログインしているか？など– 通知（イベント）• GCM / APNS からの通知など– 表⽰に関するロジック• あるデータを表⽰するかどうか？など

36

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

マルチデバイスの MVVM
ユーザーデータの表示

WindowsOS X

表示部分が大きい
そのため、多くのデータを一気に表示する•ユーザー名•プロフィール画像
•住所
•電話番号

iOS
表示部分が狭い/1つのウィンドウしか表示されない
１画面には最小限の情報を表示する•ユーザー名•プロフィール画像のサムネイル
Android37マルチデバイスの MVVM

ユーザーデータの表示• Model の必要な要素– ユーザー名の提供– プロフィール画像の提供– 住所の提供– 電話番号の提供

38

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

マルチデバイスの MVVM

ユーザーデータの表示• ViewModel の必要な要素– Model が提供している要素– プロフィール画像サムネイルの提供• ViewModel がサムネイルを提供するなど Model の⾜りない部分を補うことも– ログイン・ログアウト機構とその状態• イベントの発⾏– データ提供の可否判定• 未ログインユーザーの場合、プロフィール、住所、電話番号は提供しない

39

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

マルチデバイスの MVVM

ユーザーデータの表示• View– 必要な情報を ViewModel に問い合わせる– 取得できた情報を表⽰する• 表⽰⽅法は各デバイスに適した形にする– 取得できなかった情報の表⽰• 未ログインユーザーの場合に、メッセージを出すなど– イベントハンドラの実装• ログインイベントなどを受け取って表⽰する

40

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

Delphi での MVVM の具体例// いままでは直接データ（Model）や状態（ViewModel）を扱っていた// しかし！ IniFile は Windows にしか存在しないし、マルチデバイスになったら困る……
// （TIniFile は Platform フリーで使えるけど、OS 固有の形式になっていないのでかっこ悪い）
procedure TForm1.Login;
begin
// 処理
end;
procedure TForm1.Logout;
begin
// 処理
end;
procedure TForm1.Button1Click(Sender: TObject);var
IniFile: TIniFile;
begin
if (FIsLoggedIn) then begin
IniFile := TIniFile.Create('〜');
Label1.Text := IniFile.ReadString('UserName');IniFile.DisposeOf;
end
else
Label1.Text := '表⽰できません';
41

end;

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

Delphi での MVVM の具体例// MVVM では View には最低限のコードしか書かない！
procedure TForm1.Button1Click(Sender: TObject);
begin
Label1.Text := ViewModel.UserName;end;// ViewModel に View に渡すデータを定義する// そのデータは Model から取得する// また状態に関する動作も ViewModel に任せる
type
TViewModel = classprivateFModel: TModel;
FIsLoggedIn: Boolean;
FOnLogIn: TNotifyEvent;
FOnLogOut: TNotifyEvent;function GetUserName; // データを提供して良いか判断し FModel.GetUserName を呼ぶ
publicprocedure Login;procedure Logout;property UserName: String read GetUserName;property IsLoggedIn: Boolean read FIsLoggedIn;
property OnLogIn: TNotifyEvent read FOnLogIn write FOnLogIn;
property OnLogOut: TNotifyEvent read FOnLogOut write FOnLogOut;
end;

42

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

Delphi での MVVM の具体例// プラットフォームごとに TModel を作り OS 依存コードを分ける// どれを使うかは ViewModel に判断させるか、Model ⾃⾝に判断させる// FireMonkey では⽐較的 Model ⾃⾝に判断させる⼿法が取られている（ViewModel に判断させると抽象化度が下がる）
typeTModel = classprotected
function GetUserName; virtual; abstract;publicclass function CreateByOS: TModel; // こんな⾵にすると ViewModel は完全に Model の実装から分離される
publicproperty UserName: String read GetUserName;end;// Windows では IniFile からデータを取得する
TModelWIndows = class(TModel)
protected
function GetUserName; override;end;// OSX では plist からデータを取得する
TModelOSX = class(TModel)
protected
function GetUserName; override;
end;

43

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

644

MVVMでの設計

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

MVVMによるアプリケーション設計• 何をどこに持たせるかの⼤まかな指針– Model• アプリケーションの根幹に関わるロジック• 永続化データの提供と保存– ViewModel• 表⽰に関わるロジック• Model データの受け渡し– この際にチェックを⼊れたりする• ⾮永続化データの提供– View• 完全に表⽰だけ• それ以外の部分全て ViewModel / Model に任せる

45

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

MVVMによるアプリケーション設計• 実装が分かれると– チーム分けが可能• コード設計– Model チーム– ViewModel チーム• UI / UX 設計– View チーム– 可能な限り、UI / UX の専⾨家をチームに⼊れる

46

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

MVVMによるアプリケーション設計• 新⼈の段階では– View を任されると良いかも知れない• ロジックを考える必要が無い• 受け取ったデータを表⽰するだけで済む–作業領域が少ない• 上司より iOS / Android などに詳しい！

– 積極的に上司に MVVM を薦めて、Viewから⼊って⾒て下さい！
47

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

テストについて• MVVM によるメリットの1つとしてテストのしやすさがあります– GUI アプリケーションの問題は UI が関わるためテストがしづらい！
– MVVM を使うと、ロジック部の⾃動テストが可能に！
• Model テスト可能！
• ViewModel テスト可能！
• View はちょっと難しい！

– しかし⾮常に単純化されれば、そもそもバグが混⼊しづらい！

48

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

7
49

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。

まとめマルチデバイス時代の設計• UI が異なる
– 解像度
– ⽂化

• 「OK」「キャンセル」の位置とか• MVVM の利⽤– 解像度とロジックの分離• 設計がしやすい– View は最⼤限に簡素にする– テストのしやすさ
50

本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。