株式会社 NSP

田村 嘉史

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

1

PCディスプレイ

Responsive Web Design（RWD）

• スクリーンサイズに応じて柔軟にレイアウトを変える手法 • １つのHTMLソース

• スクリーンサイズに合わせたスタイルをCSSで振り分け

タブレット

スマートフォン

2

RWD適用例①

• XPagesDay（セッション申し込みページ） • ４つのブロックのレイアウトが変わる

• 最上段（黄）のメニューは集約され、タップすると展開するようになる

3

RWD適用例②

• Collaboration Today じゃぱ～～ん！ • ５つのブロックのレイアウトが変わる

• 最上段（黄）、下段左（青）のメニューは集約され、 下段右（紫）は最終的には消えてしまう

4

RWDを構成する主な技術

5

• メディアクエリ（Media Queries）

• フルードイメージ（Fluid Image）

• フルードグリッド（Fluid Grid）

メディアクエリ（Media Queries）

6

• CSSで画面サイズに応じてスタイルを振り分ける

例）

スマートフォン用スタイル

@media screen and (min-width: 768px) {

タブレット用スタイル

}

@media screen and (min-width: 1024px) {

PCディスプレイ用スタイル

}

フルードイメージ（Fluid Image）

7

• 画像サイズがスクリーンサイズに応じて変わる（％指定）

例）

img {

max-width: 100%

}

フルードグリッド（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% }

8

□ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □

□ □ □ □ □

RWDを採用するメリット

• デバイスごとに複数のデザインを制作する必要がない！ • アプリケーション開発の工数を大幅に削減できる

• アプリケーションの修正の際も１度で済む

• どんなデバイスの利用者向けにも１つのURLで済む！ • デバイスの利用者もアプリ管理者もURLの使い分けを意識しなくて済む

• アクセス数などの分析も容易

• BYOD（個人のデバイス利用）環境でも容易に対応可能！ • 利用されるデバイスをアプリ管理者が把握する必要がない

9

XPagesアプリにRWDを適用するには？

• Twitter Bootstrap って、手があります！ • オープンソースで公開されており、誰でも無償で利用可能

• 今風デザインのページを簡単に作成できる （Webデザインが苦手でも心配ご無用）

• RWDに対応

• XPagesアプリに適用も可能

10

モバイルファースト

• 小さなスクリーンサイズ

• モバイル通信用の細いネットワーク帯域

• 大量データ処理には不向き

• モバイルデバイスの機能 （通話、カメラ、マイク、スピーカー、GPS、コンパス…）

• モバイルデバイスの利用シーン

11

XPagesアプリケーションを作る…

• これまでのNotesアプリケーションはこんな感じ • ナビゲータ、ビューの左右分割、入力画面

• ボタンは上部に表示され、スクロールしても動かない

⇒ どんな画面構成にするのが最適か？

• これまでNotesではあまり使わなかったパーツがたくさん • ページネーション、パンくずリスト、カラフルなバッヂやラベル、

スタイリッシュなテーブルレイアウト、More…

⇒ どんなパーツを使ってユーザーにアクションを起こさせるか？

12

• RWDが採用されているページ（スライド内でも紹介） • XPagesDay

http://www.xpagesday.com/

• Collaboration Today じゃぱ～～ん！ http://ja.collaborationtoday.info/

• Twitter Bootstrap のページ • http://getbootstrap.com

参考情報

13

ありがとうございました

14