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

2. 2
Responsive Web Design（RWD）
• スクリーンサイズに応じて柔軟にレイアウトを変える手法
• １つのHTMLソース
• スクリーンサイズに合わせたスタイルをCSSで振り分け
PCディスプレイ
スマートフォン
タブレット

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

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

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

6. 6
メディアクエリ（Media Queries）
• CSSで画面サイズに応じてスタイルを振り分ける
例）
スマートフォン用スタイル
@media screen and (min-width: 768px) {
タブレット用スタイル
}
@media screen and (min-width: 1024px) {
PCディスプレイ用スタイル
}

7. 7
フルードイメージ（Fluid Image）
• 画像サイズがスクリーンサイズに応じて変わる（％指定）
例）
img {
max-width: 100%
}

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
RWDを採用するメリット
• デバイスごとに複数のデザインを制作する必要がない！
• アプリケーション開発の工数を大幅に削減できる
• アプリケーションの修正の際も１度で済む
□□□□□□□□
• どんなデバイスの利用者向けにも１つのURLで済む！
□□□□□□□□
□□□□□□□□
□□□□□
• デバイスの利用者もアプリ管理者もURLの使い分けを意識しなくて済む
• アクセス数などの分析も容易
• BYOD（個人のデバイス利用）環境でも容易に対応可能！
• 利用されるデバイスをアプリ管理者が把握する必要がない

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

11. 11
モバイルファースト
• 小さなスクリーンサイズ
• モバイル通信用の細いネットワーク帯域
• 大量データ処理には不向き
• モバイルデバイスの機能
（通話、カメラ、マイク、スピーカー、GPS、コンパス…）
• モバイルデバイスの利用シーン

12. 12
XPagesアプリケーションを作る…
• これまでのNotesアプリケーションはこんな感じ
• ナビゲータ、ビューの左右分割、入力画面
• ボタンは上部に表示され、スクロールしても動かない
⇒ どんな画面構成にするのが最適か？
• これまでNotesではあまり使わなかったパーツがたくさん
• ページネーション、パンくずリスト、カラフルなバッヂやラベル、
スタイリッシュなテーブルレイアウト、More…
⇒ どんなパーツを使ってユーザーにアクションを起こさせるか？

13. 13
参考情報
• RWDが採用されているページ（スライド内でも紹介）
• XPagesDay
http://www.xpagesday.com/
• Collaboration Today じゃぱ～～ん！
http://ja.collaborationtoday.info/
• Twitter Bootstrap のページ
• http://getbootstrap.com

14. 14
ありがとうございました