2014年11月25日に開催した「デスクトップアプリ最新化セミナー」の資料です。 「デスクトップアプリを『一歩前へ』進める方法」 として講演した内容です。 Visual Studio、.NET Frameworkやグレープシティ製品「SPREAD」など開発ツールの歴史を振り返りながら、現在のデスクトップアプリケーションが最新環境で動作させた場合の問題点を洗い出し、最新版の開発ツールを利用して業務アプリケーションを改良する方法を解説します。

1. デスクトップアプリを
『一歩前へ』進める方法
グレープシティ株式会社
森谷勝

3. グレープシティは
ソフトウエア開発に必要なツールを提供しています。
日本の業務、日本のアプリケーション、日本の開発者を支え続けること。
製品へのこだわり、強い信念は決して揺らぐことはありません。
だからこそ、開発のプロフェッショナルに
グレープシティの製品が選ばれる。
それが、グレープシティの誇りです。
3
グレープシティ

4.  グレープシティの主力製品である
「SPREAD」の進歩と新環境への対応を知る
 デバイスの変化へツールとしての対応を知る
 多様化する業務UIに対する提案
4
セッションの目的とゴール

5. Microsoftテクノロジーとともに
1990年1995年2000年2005年2010年2014年
Windows
3.1 95
98
Me Vista
NT 4.0
2000
XP
Server
2003
Server
2008
7 8 8.1
Server
2008 R2
Server
2012
Visual Basic 4.0 5.0 6.0
.NET Framework 1.0 1.1 2.0 3.0 3.5 4 4.5
Visual Studio(.NET) 2002 2003
2005 2008 2010 2012 2013
.NET Framework
対応スタート
Visual Basic 2.0 VBX
Visual Basic 5.0／6.0
ActiveX
MS-BASICライブラリVisual Basic 4.0 OCX

6. 6
業務アプリ開発をサポート

7. 業務アプリケーションの中心機能グリッド
•データの入力
•データの閲覧、加工
•データの印刷
→ データ操作と密接に結びつく
7
業務アプリの中心機能グリッド

8. SPREADは1994年にVisual Basic 2.0向けコンポーネントとして日
本で発売を開始して以来、データグリッドコンポーネントである一
方、スプレッドシートの要素を兼ね備えてきました。
「セル」を最小単位としたレイアウトの自由度、セル参照による多
様な計算処理など、製品のスプレッドシートとしての側面が、表形
式一覧に求められる高度な業務要件を実現する上で一定の役割を果
たし、SPREADという製品の大きな特徴であり続けてきました。
8
定番グリッドSPREAD

9. 9
SPREAD プラットフォーム対応
1994
VBX
1996
OCX
ActiveX
2004
Windows
Forms
2003
ASP.NET
2012
WPF
2014
WPF
2014
Windows
Forms
2014
ASP.NET
2014
JavaScript

10. ああ
10
.NET 以前のSPREAD

11. 11

12. SPREAD for Windows Formsは、Excelの機能を多く取
り入れた表計算コンポーネントです。ユーザーにとって
親しみのあるExcelのユーザーインタフェースと操作性
を業務アプリケーションに実装できます。
12
for Windows Forms

13. 13
SPREADの進化

14. デバイスの進化
マルチデバイス高精細ディスプレイマルチタッチ
デバイスが多様化、進化
14

15. タブレットのシェアが拡大中
15
マルチデバイス
Windowsタブレットのシェアの拡大
2014年第1四半期国内タブレット端末市場規模を発表（IDG Japan株式会社）
http://www.idcjapan.co.jp/Press/Current/20140710Apr.html

16. ディスプレイ解像度の多様化
グレープシティのWebサイト訪問者のディスプレイ解像度の分布
の比較です。
16
ディスプレイディスプレイの高精細化

17. 17
ディスプレイの高精細化
2014年10月
ディスプレイ

18. 18
ディスプレイディスプレイの高精細化
ピクセル密度
Windows PCディスプレイのピクセル密度は、96PPI前後がほとんどでし
た。17インチの1280×1024のスクエアなディスプレイや、23インチの
1920×1080のワイドディスプレイの場合がほぼ96PPIとなります。
スマートフォンなどはピクセル密度が高く、iPhone のRetinaディスプレ
イは326PPIです。スマートフォンはPCに比べて目との距離が短いことか
ら高精細なディスプレイが求められていると考えられますが、MacBook
ProのRetinaディスプレイモデルなどのように、PCの世界でも200PPIを
超える高精細なディスプレイが登場してきています。
ppi（ピーピーアイ）とは、
pixel per inchの略で、ディス
プレイやビットマップ画像にお
ける解像度を示す単位である。
別名画素密度（pixel density）
とも呼ばれる。
解像度とは、すなわち、画像を
表現する格子の細かさであり、
一般に1インチあたりのピクセ
ルの数を表す（1平方インチあ
たりではない）。ppiで表した
ピクセル密度のことを単にppi
と呼ぶことがある。

19. 19
ディスプレイディスプレイの高精細化
クライアントアプリケーションのサイズ
クライアントアプリケーションのサイズはピクセル単位で指定していま
した。

20. 20
ディスプレイディスプレイの高精細化
高精細なディスプレイにおけるWindowsの表示
高精細なディスプレイでWindowsを使用した場合、アプリケー
ションの表示はどうなってしまうのでしょうか。ディスプレイの
物理的な大きさが同じでピクセル密度がちょうど倍の数字の場合、
アプリケーションの表示サイズは縦横ともに2分の1となり、面積
で言えば4分の1となるはずです。
約96PPI 23インチ（1,920×1,080） 約192PPI 23インチ（3,840×2,160）
「Windows 8がデスクトップアプリ開発に与える影響とその対応」より
http://download2.grapecity.com/PDF/article/windows81_appdev.pdf

21. 21
SPREADの高解像度への対応
SPREADではDPIスケーリングによる拡大について、125%の
Windows XP形式のスケーリングをサポートします。

22. 22
タッチパネル搭載デバイス
タブレットやタッチ対応のノートPCが普
及、業務アプリ開発の問題点は？
タッチによって画面が隠れてしまう
テキストボックス上の文字列をタッチでなぞることによって選択状態に
できました。しかし、タップ中は文字列が指で隠れるため、どこまで選
択できたのかをタッチ操作中に視認するのが困難でした。
UIが小さすぎてタッチ操作できない
物理的に指よりも小さい画面はタッチ操作が難しいです。たとえばスピ
ンボタン（アップダウンボタン）や、小さなスクロールボタン、スライ
ダーが該当します。
その他
視覚フィードバックなど
マルチタッチ

23. タッチデバイスの普及に伴い、タッチに適した機能やUIを提供します。
タッチツールバーは独自にカスタマイズすることができます。
23
SPREADのタッチ対応

24. 移行前
Visual Studio 2008
SPREAD for .NET 3.0J
Windows Forms Edition
24
Demo
移行後
Visual Studio 2013
SPREAD for Windows Forms 7.0J

25. グレープシティ社内でアンケートをとりました。
Q: Visual Studio 2012／2013の気に入って
いるところを教えてください。
それ以前のバージョン(2005／2008／2010あ
たり)と比較して、開発ツールとして進化した部
分、便利になった部分などです。
25
Visual Studioアンケート

26.  Code Map、Code Lens
VS2013、ソースコードのマップモードが便
利だと思います。
（同意見：社内海外）
CodeMap – Visual debugging
Code Lens, There will be indicators
sitting atop of every method in the code
editor. Clicking them will show
information about the code section as
shown below:
26
アンケート回答

27.  「定義をここに表示」
理由：地味ですが、「定義へ移動」だともとの場所
がわからなくなることが多いので、便利だと思いま
す。たしか、MSのセッション（近藤さん）で知った
と思います。
（同意見：社内海外）
Peek definition (Alt+F12), Using Peek Definition
saves you time when understanding a code
base because it allows you to view definitions
without losing sight of the code that you are
already in.
27
アンケート回答

28.  プロジェクトを開く
VS2010で作ったプロジェクトをVS2012で
開いてそのまま修正できたのは便利でした。
当たり前に見えるかもしれませんが、以前だ
と必ずVS2012形式に変換してから修正、
だったのでその後はVS2010では開けなかっ
たのです。
28
アンケート回答

29.  Enhanced Scrollbar
 JavaScript identifier highlight and support
Go To Definition
 .NET Framework memory analysis
29
アンケート回答

30. 30

31. SPREAD WPFは大量のデータ表示、解像度の異なる
ディスプレイ表示などに優れます。
1レコード複数行
グループ化（表形式/ グループ集計）
見出しや集計行の挿入を支援する開発者向け機能
InputMan セル（テキスト/ 日付時刻/ 数値/ マスク/ コンボ）
31
SPREAD for WPF 1.0Jの機能

32. 32

33. SPREAD for ASP.NETの機能
マルチシート
１つまたは複数のシートを
扱うことが出来ます。
33
表計算関数
328種類の組み込み関数を提供。

34. SPREAD for ASP.NETの機能
SPREADはExcelファイル用の独自入出力エンジンを搭載
しています。そのため、サーバーサイドにExcelをインス
トールすることなく、ExcelファイルをSPREADに読み込
んだり、SPREAD上のデータをExcelファイルにエクス
ポートしたりすることができます。
34

35.  MultiRow
 CalendarGrid
 SpreadJS
 Forguncy
35
基盤技術として成長するSPREAD

36. 36

37. MultiRowとは
１レコード複数行表示に特化したグリッド。
凝った画面レイアウトならMultiRowが最適。
行×列形式グリッドの問題
項目数の多いデータを一度に閲覧
できない
データ閲覧の横スクロールが不便
データが多いと間違った値を見て
しまうことも
MultiRowが解決

38. MultiRowとは
データ視認性の最大化、入力効率向上
38
MultiRowで
見やすいグリッドに。
MultiRowデザイナは、Visual Studio上で
起動、フォームを設計する感覚で表画面
を設計できます。

39. 39

40. グリッドでカレンダーは大変
40
カレンダーの表現

41. 1日のレイアウトを
繰り返し表示
41
日付表示に特化したグリッドコンポーネント

42. 42
SpreadJS

43. ブラウザ上で動くJavaScriptライブラリ、
マルチブラウザ対応、サーバのテクノロジを自由に選択
43
SpreadJSの動作環境
サーバー
ASP.NET
Java
PHP
クライアント
HTML5
JavaScript
CSS3
DB
OData
REST
JSON

44. 44
SPREADの継承
サーバーとクライアント間の
通信なしでソートやフィルタ
リングなどの機能を実現
マルチシート、セルの結合、表計算関数

45. 45

46. 「メールや社内サーバーで共有していた各種申請書などのExcelファイ
ルをシステム化したい」
「Excelに蓄積していた膨大なデータをデータベース化したい」
Forguncyはこのような既存のExcel資産の有効活用に最適なツールです。
46
Excel感覚でWebアプリ開発
Forguncyはノンプログラミングの
アプリケーション構築ツール。
Excel Forguncy

47. これまでの方法にプラスしていくことで
長期間に渡る対応ができる
 MultiTouch
47
デスクトップアプリを『一歩前へ』

48. 48

49. 49
Demo

50. デスクトップアプリを『一歩前へ』
50
まとめ
開発ツールは進歩している
進歩した部分を使い最新化
一歩進めて既存アプリを延命