狠狠撸

Infragistics Propietary1
モバイル対応UI部品を利用した
レスポンシブWebアプリ開発
インフラジスティックス?ジャパン株式会社
ソリューションコンサルタント
山口慧
SYamaguchi@infragistics.com

Blog2012 年インフラジスティックス?ジャパン入社。
開発サポートエンジニア経て、現在は開発現場に
おける課題解決やモバイルソリューション提案を
行うソリューションコンサルタントとして活動中。
山口慧（さとる）
ソリューションコンサルタント
■自己紹介

2006 年設立、本社所在地: 東京都渋谷区
会社概要
社名 Infragistics Japan Co., Ltd.
設立 2006 年 8 月
代表取締役東賢
所在地東京都渋谷区神宮前 1-20-1 井門美竹ビル 2F
電話番号 03-6892-8034
米国本社 Infragistics, Inc.
1989 年創業、2000 年 ProtoView
Development Corporation、Sheridan
Software Systems, Inc. の合併により設立

事業内容

インフラジスティックス?ジャパンの担当地域
5
日本を含むアジア太平洋地域を担当

? 1996 年の販売開始から累計 5,000 社以上に開発ツール製品を導入
日本市場における製品導入実績
6
? プロジェクトにおける工数の削減
? 提案／設計時のラピッドプロトタイピングにも利用SI
? 自社製品の継続的アップグレードに伴う価値向上
? 弊社製品による他のプラットフォームへの迅速な対応ISV
? セルフ開発スキーム確立における標準パーツとしての利用
? 「作らない」ための弊社製品の利用IT

アジェンダ
?マルチデバイス時代のレスポンシブデザイン
?レスポンシブWebデザインについて
?Infragistics Controlsの紹介
?レスポンシブWebアプリ作成デモ
?Infragistics controls ツアー (時間の限り)
?まとめ

マルチデバイス時代の
アプリ開発

ワンソース?マルチデバイス対応

Web / ネイティブに限らず
ワンソース?マルチデバイス対応
の選択肢は豊富になった
それ以外にも???

1. Resize
2. Reflow
3. Reposition
4. Reveal
5. Re-architect
6. Replace
The 6 R’s
2-658 Design: UX Patterns and Responsive Techniques for Universal Windows Apps

1. Resize

2. Reflow

3. Reposition

4. Reveal

5. Re-architect

6. Replace

マルチデバイス対応の考慮点
? スクリーンサイズ
? 文字や画像などコンテンツの見た目
? ユーザビリティ
? インタフェース（タッチ対応）
? 通信パフォーマンス
? デバイス機能の利用
? SEO対策（公開サイトの場合）

Web における主な対応方法
? モバイル専用ページを設ける
ユーザエージェントで判断してモバイルページへリダイレクト
Tokyo: http://www.metro.tokyo.jp/
? レスポンシブWebデザイン
メディアクエリなどをクライアントサイドの技術を使い、スクリー
ンサイズにより表示を切り替える
New York: http://www1.nyc.gov/

レスポンシブWebデザインメリット/デメリット
? メリット
? ワンソース?マルチデバイス対応
? URLが一つ
? フレームワーク利用で実装が容易
? デメリット (注意点)
? デバイスサイズごとの細かいデザインができない
? ユーザビリティの低下
? レスポンスの低下
注意：“最適化”ではない

便利ツール
? Dom 解析: Developer Tools (IE, Chrome, FireFox)
? マルチデバイス動作確認: Chrome Device Mode
https://developer.chrome.com/devtools/docs/device-mode
? モバイル最適化解析: Google Page Speed Insights
https://developers.google.com/speed/pagespeed/insights

Twitter Bootstrap
? オープンソースのフロントエンドツール
? デザイナに頼らずとも容易に外観を整えられる
? グリッドシステム
? ボタン、テーブル、入力項目、などのデザイン
※対応ブラウザ注意

グリッドシステム
http://getbootstrap.com/css/#grid-options
? Class指定で容易にレイアウト

グリッドシステム(例)
<div class=“row”>
<div class="col-xs-12 col-sm-12 col-md-6">1</div>
<div>
1
1
3
1
2
3
4 4
2 432
~ 768px 768px ~ 991px 992px ~

Infragistics が提供する
HTML/jQuery UI部品

開発ツール: Infragistics Ultimate

Infragistics Ultimate が提供する高い生産性
? 圧倒的なUIの種類と機能の豊富さ
（1つの機能のUI表現のパターンも豊富）
? 高度なパフォーマンスチューニング
（チューニングだけでなく機能も！）
? 独立したビジュアルデザイン
（プリセットの提供多数！）

提供プラットフォーム
? デスクトップ
Windows Forms, WPF
? ウェブ
ASP.NET, jQuery/HTML5
, ASP.NET MVC, Silverlight
? モバイル
iOS, Android, Windows Store App
, Windows Phone, Xamarin.Forms
? UX ツール
Indigo Studio, ICON

33
Ignite UI
jQuery/HTML5 対応コントロール
Web & ハイブリッドソリューションの構築をサポート
Copyright 2015 Infragistics Japan Co., Ltd.
? データグリッド
? チャート & ゲージ
? エディター
? インタラクション
? レイアウト
? マップ
? モバイルコントロール
? テーマサポート
? ASP.NET MVC サポート

収録コントロール一覧
? レイアウト
– Layout Manager
– Tile Manager
– Splitter
? エディター
– Combo Box
– Editors
– Date Picker
– HTML Editor
– Split Button
? フレームワーク
– Infragistics Loader
– Data Source
– Templating Engine
– Client Excel Library
– Infragistics Excel*
– Infragistics Word*
– Infragistics
Document*
*ASP.NET 用サーバー側コ
ンポーネント
? モバイル
– List View
– Rating
– Button
– Check Box
– Check Box Group
– Collapsible
– Collapsible Set
– RadioButton Group
– SelectMenu
– 狠狠撸r
– Toggle Switch
– TextBox
– Page
– PageContent
– PageFooter
– PageHeader
– Popup
– Link
– NavBar
? 操作
– Tree
– Popover
– Dialog Window
– Rating
– File Upload
– Video Player
– Radial Menu
? データグリッド
– Grid
– Hierarchical Grid
– Tree Grid
? OLAP ピボット
– Pivot Data Selector
– Pivot View
– Pivot Grid
? データビジュアリゼーショ
ン
– Data Chart
– Bullet Graph
– Pie Chart
– Linear Gauge
– Doughnut Chart
– Map
– Funnel Chart
– Barcode
– Radial Gauge
– Zoombar
– Sparkline

35
Ignite UI コンポーネント
jQuery
jQuery UI
jQuery
Mobile
jQuery
Mobile
ベース
コントロール
jQuery
ベース
データ
コンポーネント
jQuery
UI
ベース
コントロール

スキルセットに合わせた UI 記述方法
? スタンダードJavaScript ? ASP.NET MVC Razor 構文
@*ダイアログの生成*@
@(Html.Infragistics()
.Dialog("dialog")
.State(DialogState.Opened)
.Height("460")
.Width("440")
.Render()
)
// ダイアログの生成
$("#dialog").igDialog({
state: "opened",
height: 460,
width: 440
});
Javascript フレーワークのサポート

ページデザイナーの利用
? ドラッグ & ドロップでUI構築
? GUI 操作で簡単プロパティ設定
? Javascript 記述時にインテリセンス対応
? Twitter bootstrap 対応
? 公開ページ
http://designer.igniteui.com/index-release-jp.html

レスポンシブWebアプリ
作成デモ

デモアプリのゴール
? 案件情報（売上見込み）の情報を一覧表示
? 製品毎の売上の割合を円グラフ表示
? 地図上に顧客情報をプロット
? 担当者ごと、確度ごとに積層グラフ表示
→ をタブレットやスマホからも見れるように。

完成予想
Desktop size

完成予想
Tablet size Phone size

Ignite UI Quick Tour
http://jp.igniteui.com/

レスポンシブWebデザイン
? 適材適所で使おう
?ネイティブという選択肢はないか？
?専用ページ（アプリ）という選択肢はないか？
? モバイル最適化ではない
? 非デザイナが手早くやるには Bootstrap を使おう

Infragistics Ignite UI で
? タッチ対応
? 高機能なUI部品を利用したスピーディーなWeb開発
? 様々なUI表現で表現力豊かなアプリケーション

Infragistics Controls: リソース
? Ignite UI サンプルブラウザ
http://jp.igniteui.com/
? Ignite UI サンプルアプリケーション
http://jp.igniteui.com/application-samples
? ページデザイナー
http://designer.igniteui.com/index-release-jp.html
? Infragistics 開発ツール Trial ダウンロード
http://jp.infragistics.com/products/ultimate/download

ありがとうございました！

狠狠撸

モバイル対応鲍颈部品を利用したレスポンシブ飞别产アプリ开発

More Related Content

モバイル対応鲍颈部品を利用したレスポンシブ飞别产アプリ开発