Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
1

Responsive Web Design で
XPages アプリケーションを作ろう
株式会社 NSP
田村 嘉史
2

Responsive Web Design(RWD)
• スクリーンサイズに応じて柔軟にレイアウトを変える手法
• 1つのHTMLソース
• スクリーンサイズに合わせたスタイルをCSSで振り分け

PCディスプレイ
スマートフォン
タブレ...
3

RWD適用例①
• XPagesDay(セッション申し込みページ)
• 4つのブロックのレイアウトが変わる
• 最上段(黄)のメニューは集約され、タップすると展開するようになる
4

RWD適用例②
• Collaboration Today じゃぱ~~ん!
• 5つのブロックのレイアウトが変わる
• 最上段(黄)、下段左(青)のメニューは集約され、
下段右(紫)は最終的には消えてしまう
5

RWDを構成する主な技術
• メディアクエリ(Media Queries)
• フルードイメージ(Fluid Image)
• フルードグリッド(Fluid Grid)
6

メディアクエリ(Media Queries)
• CSSで画面サイズに応じてスタイルを振り分ける

例)
スマートフォン用スタイル
@media screen and (min-width: 768px) {
タブレット用スタイル
}
@...
7

フルードイメージ(Fluid Image)
• 画像サイズがスクリーンサイズに応じて変わる(%指定)

例)
img {
max-width: 100%
}
8

フルードグリッド(Fluid Grid)
• グリッドデザイン(要素をグリッドに沿って配置)
• リキッドレイアウト(%指定で可変に)
例)
header { width : 93.75% }
例)
rightnav { width: 1...
9

RWDを採用するメリット
• デバイスごとに複数のデザインを制作する必要がない!
• アプリケーション開発の工数を大幅に削減できる
• アプリケーションの修正の際も1度で済む
□□□□□□□□
• どんなデバイスの利用者向けにも1つのUR...
10

XPagesアプリにRWDを適用するには?
• Twitter Bootstrap って、手があります!
• オープンソースで公開されており、誰でも無償で利用可能
• 今風デザインのページを簡単に作成できる
(Webデザインが苦手でも心...
11

モバイルファースト
• 小さなスクリーンサイズ
• モバイル通信用の細いネットワーク帯域
• 大量データ処理には不向き
• モバイルデバイスの機能

(通話、カメラ、マイク、スピーカー、GPS、コンパス…)

• モバイルデバイスの利用...
12

XPagesアプリケーションを作る…
• これまでのNotesアプリケーションはこんな感じ
• ナビゲータ、ビューの左右分割、入力画面
• ボタンは上部に表示され、スクロールしても動かない
⇒ どんな画面構成にするのが最適か?

• こ...
13

参考情報
• RWDが採用されているページ(スライド内でも紹介)
• XPagesDay
http://www.xpagesday.com/
• Collaboration Today じゃぱ~~ん!
http://ja.collabo...
14

ありがとうございました
Upcoming SlideShare
Loading in …5
×

Responsive Web Design で XPages アプリケーションを作ろう

2,736 views

Published on

Published in: Business
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

Responsive Web Design で XPages アプリケーションを作ろう

  1. 1. 1 Responsive Web Design で XPages アプリケーションを作ろう 株式会社 NSP 田村 嘉史
  2. 2. 2 Responsive Web Design(RWD) • スクリーンサイズに応じて柔軟にレイアウトを変える手法 • 1つのHTMLソース • スクリーンサイズに合わせたスタイルをCSSで振り分け PCディスプレイ スマートフォン タブレット
  3. 3. 3 RWD適用例① • XPagesDay(セッション申し込みページ) • 4つのブロックのレイアウトが変わる • 最上段(黄)のメニューは集約され、タップすると展開するようになる
  4. 4. 4 RWD適用例② • Collaboration Today じゃぱ~~ん! • 5つのブロックのレイアウトが変わる • 最上段(黄)、下段左(青)のメニューは集約され、 下段右(紫)は最終的には消えてしまう
  5. 5. 5 RWDを構成する主な技術 • メディアクエリ(Media Queries) • フルードイメージ(Fluid Image) • フルードグリッド(Fluid Grid)
  6. 6. 6 メディアクエリ(Media Queries) • CSSで画面サイズに応じてスタイルを振り分ける 例) スマートフォン用スタイル @media screen and (min-width: 768px) { タブレット用スタイル } @media screen and (min-width: 1024px) { PCディスプレイ用スタイル }
  7. 7. 7 フルードイメージ(Fluid Image) • 画像サイズがスクリーンサイズに応じて変わる(%指定) 例) img { max-width: 100% }
  8. 8. 8 フルードグリッド(Fluid Grid) • グリッドデザイン(要素をグリッドに沿って配置) • リキッドレイアウト(%指定で可変に) 例) header { width : 93.75% } 例) rightnav { width: 14.58333333% } main { width: 64.58333333% } leftnav { width: 14.58333333% } 例) footerright { width: 31.25% } footerleft { width: 64.58333333% }
  9. 9. 9 RWDを採用するメリット • デバイスごとに複数のデザインを制作する必要がない! • アプリケーション開発の工数を大幅に削減できる • アプリケーションの修正の際も1度で済む □□□□□□□□ • どんなデバイスの利用者向けにも1つのURLで済む! □□□□□□□□ □□□□□□□□ □□□□□ • デバイスの利用者もアプリ管理者もURLの使い分けを意識しなくて済む • アクセス数などの分析も容易 • BYOD(個人のデバイス利用)環境でも容易に対応可能! • 利用されるデバイスをアプリ管理者が把握する必要がない
  10. 10. 10 XPagesアプリにRWDを適用するには? • Twitter Bootstrap って、手があります! • オープンソースで公開されており、誰でも無償で利用可能 • 今風デザインのページを簡単に作成できる (Webデザインが苦手でも心配ご無用) • RWDに対応 • XPagesアプリに適用も可能
  11. 11. 11 モバイルファースト • 小さなスクリーンサイズ • モバイル通信用の細いネットワーク帯域 • 大量データ処理には不向き • モバイルデバイスの機能 (通話、カメラ、マイク、スピーカー、GPS、コンパス…) • モバイルデバイスの利用シーン
  12. 12. 12 XPagesアプリケーションを作る… • これまでのNotesアプリケーションはこんな感じ • ナビゲータ、ビューの左右分割、入力画面 • ボタンは上部に表示され、スクロールしても動かない ⇒ どんな画面構成にするのが最適か? • これまでNotesではあまり使わなかったパーツがたくさん • ページネーション、パンくずリスト、カラフルなバッヂやラベル、 スタイリッシュなテーブルレイアウト、More… ⇒ どんなパーツを使ってユーザーにアクションを起こさせるか?
  13. 13. 13 参考情報 • RWDが採用されているページ(スライド内でも紹介) • XPagesDay http://www.xpagesday.com/ • Collaboration Today じゃぱ~~ん! http://ja.collaborationtoday.info/ • Twitter Bootstrap のページ • http://getbootstrap.com
  14. 14. 14 ありがとうございました

×