1.
デバイス時代の
Web UI コンポーネント
活用
池原 大然 (@Neri78)
dikehara@infragistics.com
マーケティング & デベロッパー エバンジェリスト
インフラジスティックス・ジャパン株式会社
– ASP.NET, HTML から WinJS まで

2.
INFRAGISTICS 【名】
ɪnfrədʒɪˈstɪks ： インフラジスティックス
1. ニュージャージーに本社を置く UI コントロール
を中心としたソフトウェア製品を開発・販売する
グローバルカンパニー
2. Infrastructure（基礎構造）+ logistics（後方
支援）
3. バイク乗りが社長の東京・原宿の会社【日本】
4. インフラさん【俗称】

3.
自己紹介
池原 大然（いけはら だいぜん）
インフラジスティックス・ジャパン株式会社
マーケティング & デベロッパー エバンジェリスト
Microsoft MVP for Development Platforms
Client App Dev 2010/04 – 2014/03
Blog

4.
本日お話させていただくこと
現在の “デバイス” がもたらすもの
この先生きのこるためのツール活用
まとめ

5.
現在の
“デバイス”
が
もたらすもの

6.
PC だけの
時代は
終わった!

7.
つい先日のニュース…
2013年の世界パソコン出荷台数は前年比
9.7％減に、IDC、予測を再度下方修正
「世界のパソコン出荷台数は今後1年以上前年割れが続き、緩やかな回復が
見られるのは2015年以降という。ただし、ピークだった2011年の水準に戻
ることはないとしている」
IDCによると、先進国市場では2012年の出荷台数が前年比7.2％減だった。
これが2013年は9.4％減になる見通し。これに対し新興国市場では2012年
が同1.6％減。2013年は同9.8％減と同社は予測している。
「世界の全地域で広がっている利用形態の変化に今のパソコンは対応でき
ていな
い」「手頃な価格と性能がタブレット端末をより魅力的なものにしている」
http://itpro.nikkeibp.co.jp/article/NEWS/20130830/501165/

8.
安価なタブレットへの置き換え
• コンシューマーはこれらのハードウェア利用に流れる
• 最初から「クライアント環境は特定できない」ことが前提
• それぞれのブラウザの仕様の違いにも注意が必要
• BYOD の対象ともなってくる
新型Nexus7
27,800JPY
Surface RT
39,800~JPY
(実勢33,000程度)
iPad mini
32,800~JPY

9.
さらに
Confidential - NDA
ワールドワイドで
1億 4000 万台以上
日本でも
500 万台以上
もの が出荷iPad

10.
本格的なマルチデバイス時代への突入
利用シナリオ／スクリーンサイズ／インプットデバイス／OS／ブラウザなど
様々な要素の多様化に対応する必要が出てきている

11.
デバイスが普及したことにより
ユーザーは普段の生活の中で
高度なIT活用体験を当たり前に享受している
ユーザーがエンタープライズITにおいても
同様の体験を求める傾向が加速する

12.
ペースレイヤリング
差別化システム
記録システム
革新システム
もちろん、UIを含むアプリケーションは革新システム。
出典 - http://www.gartner.co.jp/press/html/pr20120222-01.html

13.
それぞれのレイヤの更新期間
差別化システム
記録システム
革新システム
出典 - http://www.gartner.co.jp/press/html/pr20120222-01.html
まれ
1-3 年
0-12 か月!

14.
Speed!!
変化への対応力!!
ユーザーは高い UX を提供し
素早く変化に対応するサービスに
慣れ始めている！

15.
デバイスの時代は．．．
AGEDEVICE

16.
DEVICE AGE
AGEDEVICE

17.
開発者にとって
職人的な作りこみが許されない
「氷河期」のような危機的状況にある

18.
開発組織としても、「恐竜」のような
体制では生き残れない。
俊敏に変化に適応できる必要がある

19.
さもないと…
使えない = 購入しない
= 市場からの退場

20.
この先生きのこる
ための
ツール活用

21.
２つのキーポイント：
開発スピードを加速させる
生産性と選択能力
UI でデリバリーされる
ユーザー体験のデザイン

22.
開発スピードを
加速させる
生産性と選択能力

23.
テクノロジーの固定?
外部環境の変化が非常に早く、
技術の絞り込みが非常に難しい状況
ユーザーインターフェイス開発において
どのテクノロジーを利用して
開発していくべきか？
現状でテクノロジーを長期スパンで
絞り込む事自体に大きなリスクがある

24.
テクノロジ選択のガイド
• .NET テクノロジ ガイド
–先日、日本語版が公開
• http://www.microsoft.com/ja-jp/net/
• シナリオ、目的別にテクノロジ
の選択を行うためのガイド

25.
どのような状況になっても
部品をそのまま利用することによって、
できるだけ 「作らない」ことを検討する
そのために、標準コントロールだけでなく、
多くのUIコントロールをカードとして持っておく
既に顧客の頭の中にあるUIのイメージは
標準コントロールの範囲を大幅に超えている

26.
NETADVANTAGE

27.
ANDROID HTML5 iOS
モバイル、タブレット フォーカス

28.
製品紹介をかねつつ
MS 系 Web テクノロジを

29.
ASP.NET
• 信頼と実績
• 生産性のたかさ（ポトペタ）
• PC ブラウザーがメイン

30.
Ignite UI (ASP.NET MVC – HTML/JavaScript)
• 出力結果のより詳細な制御
• 最新テクノロジ、デバイスへの対応のしやすさ
– Razor
– ASP.NET Single Page Application
• ピュアな HTML/JavaScript であればサーバーサイド
には依存しない
• 生産性は犠牲に

31.
Silverlight
• 過去ぉ…?
• 生産性は高い（ポトペタ）
• まだいける!
– PC をメインターゲットとした
– 短期的 (2-3 年) なソリューションとして

32.
なぜ、コンポーネントの利用します
（しません）か？
– する場合
• 必要な機能がそろっている
• パーツそのものの開発を行う余裕がない
• 開発期間が短くなるだろう
– しない場合
• 必要としている機能が提供されていない
• なんだかわからないもの（責任がとれないもの）に
手を出したくない
• 他社の製品ライフサイクルに依存したくない
• お客さんに見せたら期待値あがるじゃん。
今までのシステムどうすんの？
• 開発期間が短くなるとお金とれないじゃん!

33.
UIコントロールを活用した開発のポイント
重要なポイント
設計にコンポーネントを合わせるのではなく、
コンポーネントを設計時点の選択肢として検討することで最大の効率化が実現
フェーズ 標準コントロール使用 UIコントロールを使用
設計 • 標準のコントロールでカ
バーできない仕様は、
追加開発の為の設計が必要
• 多機能なコンポーネントを
前提とすることで、多くの
仕様を吸収することが可能
• 早期に多くの機能を備えた
プロトタイプの実装が可能
実装（拡張） • 標準コントロールの拡張
• 単体テスト
• コンポーネントの機能の範囲
で仕様が決定している場合、
拡張は不要
本実装 • コーディング等負荷大
• 機能が増えればその分テス
トの負荷大
• プロパティベースの効率的な
開発
• 製品でテスト済みなので単体
テストの負荷小
結合テスト • Bugfixの負荷大
• パフォーマンスチューニン
グの負荷大
• Bugfixの負荷小
• パフォーマンスチューニング
の負荷小

34.
プラットフォーム間での機能共有
Core Data
Visualization
API
Silverlight
WPF
HTML5
Windows
Phone
iOS
WinRT
WinJS
Cross Platform Shared Code Strategy

35.
WinJS

36.
UIでデリバリー
される
ユーザー体験の
デザイン

37.
• シナリオをしっかり検討し、それに基づ
いて各画面間の遷移や、UI構成を決めな
ければならない。
• ユーザインタラクションについてユーザ
との間で早期に合意形成を行う事が必要。
素早く合意を形成するための
ツール
ー スマホ・タブレットの普及がこれらを助長
成功の秘訣（失敗しないためには）

38.
まとめ

39.
まとめ
• “安泰” なプラットフォーム、
テクノロジは UI に限っていう
とないのではないか
• その時々で必要とされるスキル、
考え方を
• 共通利用できる “手札” 大事よ

40.
プラットフォーム間での機能共有
Core Data
Visualization
API
Silverlight
WPF
HTML5
Windows
Phone
iOS
WinRT
WinJS
Cross Platform Shared Code Strategy
ビジネス
ロジック

41.
bit.ly/IgniteUIGrid
製品版Ignite UIから、タブレットアプリに
利用できるグリッドを
商用利用な形で無償提供しています！

42.
bit.ly/IndigoStudio
誰でも簡単に使えるプロトタイプツール、
Indigo Studio を無償提供しています！
V1 提供終了間近!
ダウンロード
するのは
「今」
でしょ!