デバイス時代の web ui コンポーネント活用

デバイス時代のWeb UI コンポーネント活用

池原 大然 (@Neri78)dikehara@infragistics.com

マーケティング & デベロッパー エバンジェリスト

インフラジスティックス・ジャパン株式会社

– ASP.NET, HTML から WinJS まで

INFRAGISTICS 【名】

ɪnfrədʒɪˈstɪks ： インフラジスティックス

1. ニュージャージーに本社を置く UI コントロールを中心としたソフトウェア製品を開発・販売するグローバルカンパニー

2. Infrastructure（基礎構造）+ logistics（後方支援）

3. バイク乗りが社長の東京・原宿の会社【日本】

4. インフラさん【俗称】

自己紹介

池原 大然（いけはら だいぜん）インフラジスティックス・ジャパン株式会社

マーケティング & デベロッパー エバンジェリストMicrosoft MVP for Development PlatformsClient App Dev 2010/04 – 2014/03

Blog

本日お話させていただくこと

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

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

まとめ

現在の“デバイス”

がもたらすもの

PC だけの時代は

終わった!

つい先日のニュース…

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/

安価なタブレットへの置き換え

• コンシューマーはこれらのハードウェア利用に流れる• 最初から「クライアント環境は特定できない」ことが前提• それぞれのブラウザの仕様の違いにも注意が必要• BYOD の対象ともなってくる

新型Nexus727,800JPY

Surface RT39,800~JPY

(実勢33,000程度)

iPad mini32,800~JPY

さらに

Confidential - NDA

ワールドワイドで

1億 4000 万台以上日本でも

500 万台以上もの が出荷iPad

本格的なマルチデバイス時代への突入

利用シナリオ／スクリーンサイズ／インプットデバイス／OS／ブラウザなど様々な要素の多様化に対応する必要が出てきている

デバイスが普及したことによりユーザーは普段の生活の中で

高度なIT活用体験を当たり前に享受している

ユーザーがエンタープライズITにおいても同様の体験を求める傾向が加速する

ペースレイヤリング

差別化システム

記録システム

革新システム

もちろん、UIを含むアプリケーションは革新システム。

出典 - http://www.gartner.co.jp/press/html/pr20120222-01.html

それぞれのレイヤの更新期間

差別化システム

記録システム

革新システム

出典 - http://www.gartner.co.jp/press/html/pr20120222-01.html

まれ

1-3 年

0-12 か月!

Speed!!

変化への対応力!!

ユーザーは高い UX を提供し素早く変化に対応するサービスに

慣れ始めている！

デバイスの時代は．．．

AGEDEVICE

DEVICE AGE

AGEDEVICE

開発者にとって職人的な作りこみが許されない

「氷河期」のような危機的状況にある

開発組織としても、「恐竜」のような体制では生き残れない。

俊敏に変化に適応できる必要がある

さもないと…

使えない = 購入しない= 市場からの退場

この先生きのこるための

ツール活用

２つのキーポイント：

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

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

開発スピードを加速させる

生産性と選択能力

テクノロジーの固定?

外部環境の変化が非常に早く、技術の絞り込みが非常に難しい状況

ユーザーインターフェイス開発においてどのテクノロジーを利用して

開発していくべきか？

現状でテクノロジーを長期スパンで絞り込む事自体に大きなリスクがある

テクノロジ選択のガイド

• .NET テクノロジ ガイド

–先日、日本語版が公開• http://www.microsoft.com/ja-jp/net/

• シナリオ、目的別にテクノロジの選択を行うためのガイド

どのような状況になっても部品をそのまま利用することによって、できるだけ 「作らない」ことを検討する

そのために、標準コントロールだけでなく、多くのUIコントロールをカードとして持っておく

既に顧客の頭の中にあるUIのイメージは標準コントロールの範囲を大幅に超えている

NETADVANTAGE

ANDROID HTML5 iOS

モバイル、タブレット フォーカス

製品紹介をかねつつ

MS 系 Web テクノロジを

ASP.NET

• 信頼と実績

• 生産性のたかさ（ポトペタ）

• PC ブラウザーがメイン

Ignite UI (ASP.NET MVC – HTML/JavaScript)

• 出力結果のより詳細な制御

• 最新テクノロジ、デバイスへの対応のしやすさ

– Razor

– ASP.NET Single Page Application

• ピュアな HTML/JavaScript であればサーバーサイドには依存しない

• 生産性は犠牲に

Silverlight

• 過去ぉ…?

• 生産性は高い（ポトペタ）

• まだいける!

– PC をメインターゲットとした

– 短期的 (2-3 年) なソリューションとして

なぜ、コンポーネントの利用します（しません）か？

– する場合

• 必要な機能がそろっている

• パーツそのものの開発を行う余裕がない

• 開発期間が短くなるだろう

– しない場合

• 必要としている機能が提供されていない

• なんだかわからないもの（責任がとれないもの）に手を出したくない

• 他社の製品ライフサイクルに依存したくない

• お客さんに見せたら期待値あがるじゃん。今までのシステムどうすんの？

• 開発期間が短くなるとお金とれないじゃん!

UIコントロールを活用した開発のポイント

重要なポイント設計にコンポーネントを合わせるのではなく、コンポーネントを設計時点の選択肢として検討することで最大の効率化が実現

フェーズ 標準コントロール使用 UIコントロールを使用

設計 • 標準のコントロールでカバーできない仕様は、追加開発の為の設計が必要

• 多機能なコンポーネントを前提とすることで、多くの仕様を吸収することが可能

• 早期に多くの機能を備えたプロトタイプの実装が可能

実装（拡張） • 標準コントロールの拡張• 単体テスト

• コンポーネントの機能の範囲で仕様が決定している場合、拡張は不要

本実装 • コーディング等負荷大• 機能が増えればその分テス

トの負荷大

• プロパティベースの効率的な開発

• 製品でテスト済みなので単体テストの負荷小

結合テスト • Bugfixの負荷大• パフォーマンスチューニン

グの負荷大

• Bugfixの負荷小• パフォーマンスチューニング

の負荷小

プラットフォーム間での機能共有

Core Data

Visualization

API

Silverlight

WPF

HTML5Windows

Phone

iOS

WinRT

WinJS

Cross Platform Shared Code Strategy

WinJS

UIでデリバリーされる

ユーザー体験のデザイン

• シナリオをしっかり検討し、それに基づいて各画面間の遷移や、UI構成を決めなければならない。

• ユーザインタラクションについてユーザとの間で早期に合意形成を行う事が必要。

素早く合意を形成するためのツール

ー スマホ・タブレットの普及がこれらを助長

成功の秘訣（失敗しないためには）

まとめ

まとめ

• “安泰” なプラットフォーム、テクノロジは UI に限っていうとないのではないか

• その時々で必要とされるスキル、考え方を

• 共通利用できる “手札” 大事よ

プラットフォーム間での機能共有

Core Data

Visualization

API

Silverlight

WPF

HTML5Windows

Phone

iOS

WinRT

WinJS

Cross Platform Shared Code Strategy

ビジネスロジック

bit.ly/IgniteUIGrid

製品版Ignite UIから、タブレットアプリに利用できるグリッドを

商用利用な形で無償提供しています！

bit.ly/IndigoStudio

誰でも簡単に使えるプロトタイプツール、Indigo Studio を無償提供しています！

V1 提供終了間近! ダウンロード

するのは「今」でしょ!