モバイル対応Ui部品を利用したレスポンシブwebアプリ開発

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
– Slider
– 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

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

モバイル対応Ui部品を利用したレスポンシブwebアプリ開発

More Related Content

モバイル対応Ui部品を利用したレスポンシブwebアプリ開発