Enviar búsqueda
Cargar
Responsive Web Design で XPages アプリケーションを作ろう
•
0 recomendaciones
•
2,957 vistas
Yoshifumi Tamura
Seguir
Empresariales
Denunciar
Compartir
Denunciar
Compartir
1 de 14
Descargar ahora
Descargar para leer sin conexión
Recomendados
IBM Dominoとモダンアーキテクチャ
IBM Dominoとモダンアーキテクチャ
賢次 海老原
XPagesでRESTを使ってみたら、こんなんだった
XPagesでRESTを使ってみたら、こんなんだった
Masahiko Miyo
XPagesDay 2015 RESTの総復習
XPagesDay 2015 RESTの総復習
Masahiko Miyo
XPagesでRESTを使ってみよう
XPagesでRESTを使ってみよう
Masahiko Miyo
2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot
Marius Sescu
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPT
Expeed Software
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
Pixeldarts
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
ThinkNow
Recomendados
IBM Dominoとモダンアーキテクチャ
IBM Dominoとモダンアーキテクチャ
賢次 海老原
XPagesでRESTを使ってみたら、こんなんだった
XPagesでRESTを使ってみたら、こんなんだった
Masahiko Miyo
XPagesDay 2015 RESTの総復習
XPagesDay 2015 RESTの総復習
Masahiko Miyo
XPagesでRESTを使ってみよう
XPagesでRESTを使ってみよう
Masahiko Miyo
2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot
Marius Sescu
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPT
Expeed Software
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
Pixeldarts
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
ThinkNow
エンジニア採用のミスマッチを防ぐコーディング試験サービス『HireRoo(ハイヤールー)』
エンジニア採用のミスマッチを防ぐコーディング試験サービス『HireRoo(ハイヤールー)』
Kousuke Kuzuoka
第15回販促コンペ 審査員個人賞(林 知幸 氏) アルカナ? アディダスジャパン
第15回販促コンペ 審査員個人賞(林 知幸 氏) アルカナ? アディダスジャパン
Yusuke Katsuma
chouhou_obuse_reiwa6nenn_4_2404slide.pdf
chouhou_obuse_reiwa6nenn_4_2404slide.pdf
ssuser31dbd1
株式会社ベクトル総研会社概要 Vector Research Institute (VRI) Corporate Profile
株式会社ベクトル総研会社概要 Vector Research Institute (VRI) Corporate Profile
vrihomepage
HRMOS(ハーモス)タレントマネジメント_ご紹介資料_Saleshub掲載用
HRMOS(ハーモス)タレントマネジメント_ご紹介資料_Saleshub掲載用
wataruhonda3
株式会社AllAdsと申します。サービス紹介資料で御座いますので、是非ご覧くださいませ。
株式会社AllAdsと申します。サービス紹介資料で御座いますので、是非ご覧くださいませ。
takuyamatsumoto29
JAPAN WEB3.0 AWARD 2023 ブロックチェーン(NFT)技術を活用したアイディア 優秀賞作品 遺3.0相続
JAPAN WEB3.0 AWARD 2023 ブロックチェーン(NFT)技術を活用したアイディア 優秀賞作品 遺3.0相続
Yusuke Katsuma
hakuten_company profile for saleshub_202404
hakuten_company profile for saleshub_202404
keiibayashi
HCCソフト株式会社 2025年新卒採用向け 会社紹介・採用情報資料------
HCCソフト株式会社 2025年新卒採用向け 会社紹介・採用情報資料------
ssusercbaf23
ROMS_recruting_deck_for_website_20240322.pdf
ROMS_recruting_deck_for_website_20240322.pdf
hirokisawa3
コダワリ抜いた経営指南書(概要版) - コダワリ・ビジネス・コンサルティング株式会社
コダワリ抜いた経営指南書(概要版) - コダワリ・ビジネス・コンサルティング株式会社
hmoriyama
Japan IT Week 2024 Brochure by 47Billion
Japan IT Week 2024 Brochure by 47Billion
Data Analytics Company - 47Billion Inc.
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
marketingartwork
Skeleton Culture Code
Skeleton Culture Code
Skeleton Technologies
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
Neil Kimberley
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
contently
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
Albert Qian
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
Kurio // The Social Media Age(ncy)
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
Search Engine Journal
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
SpeakerHub
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
Clark Boyd
Getting into the tech field. what next
Getting into the tech field. what next
Tessa Mero
Más contenido relacionado
Último
エンジニア採用のミスマッチを防ぐコーディング試験サービス『HireRoo(ハイヤールー)』
エンジニア採用のミスマッチを防ぐコーディング試験サービス『HireRoo(ハイヤールー)』
Kousuke Kuzuoka
第15回販促コンペ 審査員個人賞(林 知幸 氏) アルカナ? アディダスジャパン
第15回販促コンペ 審査員個人賞(林 知幸 氏) アルカナ? アディダスジャパン
Yusuke Katsuma
chouhou_obuse_reiwa6nenn_4_2404slide.pdf
chouhou_obuse_reiwa6nenn_4_2404slide.pdf
ssuser31dbd1
株式会社ベクトル総研会社概要 Vector Research Institute (VRI) Corporate Profile
株式会社ベクトル総研会社概要 Vector Research Institute (VRI) Corporate Profile
vrihomepage
HRMOS(ハーモス)タレントマネジメント_ご紹介資料_Saleshub掲載用
HRMOS(ハーモス)タレントマネジメント_ご紹介資料_Saleshub掲載用
wataruhonda3
株式会社AllAdsと申します。サービス紹介資料で御座いますので、是非ご覧くださいませ。
株式会社AllAdsと申します。サービス紹介資料で御座いますので、是非ご覧くださいませ。
takuyamatsumoto29
JAPAN WEB3.0 AWARD 2023 ブロックチェーン(NFT)技術を活用したアイディア 優秀賞作品 遺3.0相続
JAPAN WEB3.0 AWARD 2023 ブロックチェーン(NFT)技術を活用したアイディア 優秀賞作品 遺3.0相続
Yusuke Katsuma
hakuten_company profile for saleshub_202404
hakuten_company profile for saleshub_202404
keiibayashi
HCCソフト株式会社 2025年新卒採用向け 会社紹介・採用情報資料------
HCCソフト株式会社 2025年新卒採用向け 会社紹介・採用情報資料------
ssusercbaf23
ROMS_recruting_deck_for_website_20240322.pdf
ROMS_recruting_deck_for_website_20240322.pdf
hirokisawa3
コダワリ抜いた経営指南書(概要版) - コダワリ・ビジネス・コンサルティング株式会社
コダワリ抜いた経営指南書(概要版) - コダワリ・ビジネス・コンサルティング株式会社
hmoriyama
Japan IT Week 2024 Brochure by 47Billion
Japan IT Week 2024 Brochure by 47Billion
Data Analytics Company - 47Billion Inc.
Último
(12)
エンジニア採用のミスマッチを防ぐコーディング試験サービス『HireRoo(ハイヤールー)』
エンジニア採用のミスマッチを防ぐコーディング試験サービス『HireRoo(ハイヤールー)』
第15回販促コンペ 審査員個人賞(林 知幸 氏) アルカナ? アディダスジャパン
第15回販促コンペ 審査員個人賞(林 知幸 氏) アルカナ? アディダスジャパン
chouhou_obuse_reiwa6nenn_4_2404slide.pdf
chouhou_obuse_reiwa6nenn_4_2404slide.pdf
株式会社ベクトル総研会社概要 Vector Research Institute (VRI) Corporate Profile
株式会社ベクトル総研会社概要 Vector Research Institute (VRI) Corporate Profile
HRMOS(ハーモス)タレントマネジメント_ご紹介資料_Saleshub掲載用
HRMOS(ハーモス)タレントマネジメント_ご紹介資料_Saleshub掲載用
株式会社AllAdsと申します。サービス紹介資料で御座いますので、是非ご覧くださいませ。
株式会社AllAdsと申します。サービス紹介資料で御座いますので、是非ご覧くださいませ。
JAPAN WEB3.0 AWARD 2023 ブロックチェーン(NFT)技術を活用したアイディア 優秀賞作品 遺3.0相続
JAPAN WEB3.0 AWARD 2023 ブロックチェーン(NFT)技術を活用したアイディア 優秀賞作品 遺3.0相続
hakuten_company profile for saleshub_202404
hakuten_company profile for saleshub_202404
HCCソフト株式会社 2025年新卒採用向け 会社紹介・採用情報資料------
HCCソフト株式会社 2025年新卒採用向け 会社紹介・採用情報資料------
ROMS_recruting_deck_for_website_20240322.pdf
ROMS_recruting_deck_for_website_20240322.pdf
コダワリ抜いた経営指南書(概要版) - コダワリ・ビジネス・コンサルティング株式会社
コダワリ抜いた経営指南書(概要版) - コダワリ・ビジネス・コンサルティング株式会社
Japan IT Week 2024 Brochure by 47Billion
Japan IT Week 2024 Brochure by 47Billion
Destacado
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
marketingartwork
Skeleton Culture Code
Skeleton Culture Code
Skeleton Technologies
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
Neil Kimberley
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
contently
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
Albert Qian
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
Kurio // The Social Media Age(ncy)
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
Search Engine Journal
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
SpeakerHub
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
Clark Boyd
Getting into the tech field. what next
Getting into the tech field. what next
Tessa Mero
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Lily Ray
How to have difficult conversations
How to have difficult conversations
Rajiv Jayarajah, MAppComm, ACC
Introduction to Data Science
Introduction to Data Science
Christy Abraham Joy
Time Management & Productivity - Best Practices
Time Management & Productivity - Best Practices
Vit Horky
The six step guide to practical project management
The six step guide to practical project management
MindGenius
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
RachelPearson36
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Applitools
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work
GetSmarter
ChatGPT webinar slides
ChatGPT webinar slides
Alireza Esmikhani
More than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike Routes
Project for Public Spaces & National Center for Biking and Walking
Destacado
(20)
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
Skeleton Culture Code
Skeleton Culture Code
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
Getting into the tech field. what next
Getting into the tech field. what next
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
How to have difficult conversations
How to have difficult conversations
Introduction to Data Science
Introduction to Data Science
Time Management & Productivity - Best Practices
Time Management & Productivity - Best Practices
The six step guide to practical project management
The six step guide to practical project management
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work
ChatGPT webinar slides
ChatGPT webinar slides
More than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike Routes
Responsive Web Design で XPages アプリケーションを作ろう
1.
1 Responsive Web Design
で XPages アプリケーションを作ろう 株式会社 NSP 田村 嘉史
2.
2 Responsive Web Design(RWD) •
スクリーンサイズに応じて柔軟にレイアウトを変える手法 • 1つのHTMLソース • スクリーンサイズに合わせたスタイルをCSSで振り分け PCディスプレイ スマートフォン タブレット
3.
3 RWD適用例① • XPagesDay(セッション申し込みページ) • 4つのブロックのレイアウトが変わる •
最上段(黄)のメニューは集約され、タップすると展開するようになる
4.
4 RWD適用例② • Collaboration Today
じゃぱ~~ん! • 5つのブロックのレイアウトが変わる • 最上段(黄)、下段左(青)のメニューは集約され、 下段右(紫)は最終的には消えてしまう
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を採用するメリット • デバイスごとに複数のデザインを制作する必要がない! • アプリケーション開発の工数を大幅に削減できる •
アプリケーションの修正の際も1度で済む □□□□□□□□ • どんなデバイスの利用者向けにも1つの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 ありがとうございました
Descargar ahora