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

Infragistics Propietary1

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

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

ソリューションコンサルタント

山口慧

[email protected]


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/

http://www.metro.tokyo.jp/

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 class="col-xs-12 col-sm-12 col-md-4">2</div><div class="col-xs-12 col-sm-6 col-md-2">3</div><div class="col-xs-12 col-sm-6 col-md-2">4</div>

<div>

11

3

12

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 UIjQuery/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


Ignite UI コンポーネント

jQuery

jQuery UIjQuery Mobile

jQueryMobile ベース

コントロール

jQueryベースデータ

コンポーネント

jQueryUI

ベースコントロール


スキルセットに合わせた 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 Tourhttp://jp.igniteui.com/

http://jp.igniteui.com/

まとめ


レスポンシブWebデザイン

適材適所で使おう

ネイティブという選択肢はないか？

専用ページ（アプリ）という選択肢はないか？

モバイル最適化ではない

非デザイナが手早くやるには Bootstrap を使おう


Infragistics Ignite UI で

タッチ対応

高機能なUI部品を利用したスピーディーなWeb開発

様々なUI表現で表現力豊かなアプリケーション


Infragistics Controls: リソース

Ignite UI サンプルブラウザ


Ignite UI サンプルアプリケーション

http://jp.igniteui.com/application-samples

ページデザイナー


Infragistics 開発ツール Trial ダウンロード

http://jp.infragistics.com/products/ultimate/download


http://jp.igniteui.com/application-samples


http://jp.infragistics.com/products/ultimate/download


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

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

Technology

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