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

2,467 views

Published on

Published in: Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,467
On SlideShare
0
From Embeds
0
Number of Embeds
1,339
Actions
Shares
0
Downloads
31
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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 ありがとうございました

×