Soumettre la recherche
Mettre en ligne
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
•
7 j'aime
•
2,532 vues
Tetsuji Hayashi
Suivre
XPagesDay2014 A-4セッション資料 XPagesでjQueryMobileを使う場合のポイント
Lire moins
Lire la suite
Mobile
Signaler
Partager
Signaler
Partager
1 sur 60
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
【Xpages day2016】標準コントールを使わないxpage開発
【Xpages day2016】標準コントールを使わないxpage開発
西 雄樹
XPagesDay2013 【B-4】 Dojo 徹底解剖! ~ XPages で Dojo を有効活用するには ~
XPagesDay2013 【B-4】 Dojo 徹底解剖! ~ XPages で Dojo を有効活用するには ~
Atsushi Ono
XPagesジャンプスタート
XPagesジャンプスタート
Mitsuru Katoh
XPages 開発 Tips 百連発
XPages 開発 Tips 百連発
Mitsuru Katoh
XpagesDay 2014 [A-2] スタンダードクライアントで xpages を使ってみよう
XpagesDay 2014 [A-2] スタンダードクライアントで xpages を使ってみよう
Takeshi Yoshida
XPages Day 2013 [B-3] XPages開発を始める Notes技術者のためのWeb技術概論
XPages Day 2013 [B-3] XPages開発を始める Notes技術者のためのWeb技術概論
賢次 海老原
Notes 技術者のためのはじめての XPages 講座 (XPagesDay 2015)
Notes 技術者のためのはじめての XPages 講座 (XPagesDay 2015)
Takeshi Yoshida
20150829 Java女子部勉強会 Java EEハンズオン
20150829 Java女子部勉強会 Java EEハンズオン
Misaki Kajiura
Recommandé
【Xpages day2016】標準コントールを使わないxpage開発
【Xpages day2016】標準コントールを使わないxpage開発
西 雄樹
XPagesDay2013 【B-4】 Dojo 徹底解剖! ~ XPages で Dojo を有効活用するには ~
XPagesDay2013 【B-4】 Dojo 徹底解剖! ~ XPages で Dojo を有効活用するには ~
Atsushi Ono
XPagesジャンプスタート
XPagesジャンプスタート
Mitsuru Katoh
XPages 開発 Tips 百連発
XPages 開発 Tips 百連発
Mitsuru Katoh
XpagesDay 2014 [A-2] スタンダードクライアントで xpages を使ってみよう
XpagesDay 2014 [A-2] スタンダードクライアントで xpages を使ってみよう
Takeshi Yoshida
XPages Day 2013 [B-3] XPages開発を始める Notes技術者のためのWeb技術概論
XPages Day 2013 [B-3] XPages開発を始める Notes技術者のためのWeb技術概論
賢次 海老原
Notes 技術者のためのはじめての XPages 講座 (XPagesDay 2015)
Notes 技術者のためのはじめての XPages 講座 (XPagesDay 2015)
Takeshi Yoshida
20150829 Java女子部勉強会 Java EEハンズオン
20150829 Java女子部勉強会 Java EEハンズオン
Misaki Kajiura
【XPagesDy】A-2_コムチュア_20131106_公開用
【XPagesDy】A-2_コムチュア_20131106_公開用
comtakahashi
Java女子部 Java EEハンズオン(応用編)
Java女子部 Java EEハンズオン(応用編)
Misaki Kajiura
【B 5】x pages extension library じゃぱ〜〜ん!コミュニティ動向2014ば〜〜ん!
【B 5】x pages extension library じゃぱ〜〜ん!コミュニティ動向2014ば〜〜ん!
Masahiko Sato
XPages の最新機能を、XPages Extension Library Japan の日本語サンプルで試そう!
XPages の最新機能を、XPages Extension Library Japan の日本語サンプルで試そう!
Hiroaki Komine
Internet Explorer 9 の新機能「固定サイト」 (Pinned sites)
Internet Explorer 9 の新機能「固定サイト」 (Pinned sites)
shigeya
Domino & REST
Domino & REST
賢次 海老原
【C-3】ジャンボフェリー 予約システムの事例からみるXPagesを使った提案・開発の概要
【C-3】ジャンボフェリー 予約システムの事例からみるXPagesを使った提案・開発の概要
Kazunori Tatsuki
XPagesDay 2014 - What's new in XPages NOW!
XPagesDay 2014 - What's new in XPages NOW!
Atsushi Sato
JAZUG女子部 第2回勉強会 ハンズオン
JAZUG女子部 第2回勉強会 ハンズオン
Kana SUZUKI
Windows azureって何
Windows azureって何
Kana SUZUKI
for Developer、Microsoft Edge とInternet Explorer で新しくサポートされるAPI
for Developer、Microsoft Edge とInternet Explorer で新しくサポートされるAPI
Osamu Monoe
EC-CUBEプラグイン講義
EC-CUBEプラグイン講義
ria1201
X pages day発表_20141118 final
X pages day発表_20141118 final
Fumiko Yamamoto
XPagesDay 2013 Closing Session
XPagesDay 2013 Closing Session
Atsushi Sato
What's new of XPages in 2015 and beyond
What's new of XPages in 2015 and beyond
Atsushi Sato
XPagesDay 2016 - XPages Future Roadmap
XPagesDay 2016 - XPages Future Roadmap
Atsushi Sato
PowerShell の基本操作とリモーティング&v3のご紹介 junichia
PowerShell の基本操作とリモーティング&v3のご紹介 junichia
junichi anno
Windows PowerShell によるWindows Server 管理の自動化 v4.0 2014.03.13 更新版
Windows PowerShell によるWindows Server 管理の自動化 v4.0 2014.03.13 更新版
junichi anno
JSF2.2で簡単webアプリケーション開発
JSF2.2で簡単webアプリケーション開発
Masuji Katoda
はじめての Azure 開発
はじめての Azure 開発
Yoshitaka Seo
複製トラブル3連発 こんな「消滅」「合体」「増殖」 ありました
複製トラブル3連発 こんな「消滅」「合体」「増殖」 ありました
Satoru Abe
XPagesDay 2016 「私がハマった失敗例」
XPagesDay 2016 「私がハマった失敗例」
tshost
Contenu connexe
Tendances
【XPagesDy】A-2_コムチュア_20131106_公開用
【XPagesDy】A-2_コムチュア_20131106_公開用
comtakahashi
Java女子部 Java EEハンズオン(応用編)
Java女子部 Java EEハンズオン(応用編)
Misaki Kajiura
【B 5】x pages extension library じゃぱ〜〜ん!コミュニティ動向2014ば〜〜ん!
【B 5】x pages extension library じゃぱ〜〜ん!コミュニティ動向2014ば〜〜ん!
Masahiko Sato
XPages の最新機能を、XPages Extension Library Japan の日本語サンプルで試そう!
XPages の最新機能を、XPages Extension Library Japan の日本語サンプルで試そう!
Hiroaki Komine
Internet Explorer 9 の新機能「固定サイト」 (Pinned sites)
Internet Explorer 9 の新機能「固定サイト」 (Pinned sites)
shigeya
Domino & REST
Domino & REST
賢次 海老原
【C-3】ジャンボフェリー 予約システムの事例からみるXPagesを使った提案・開発の概要
【C-3】ジャンボフェリー 予約システムの事例からみるXPagesを使った提案・開発の概要
Kazunori Tatsuki
XPagesDay 2014 - What's new in XPages NOW!
XPagesDay 2014 - What's new in XPages NOW!
Atsushi Sato
JAZUG女子部 第2回勉強会 ハンズオン
JAZUG女子部 第2回勉強会 ハンズオン
Kana SUZUKI
Windows azureって何
Windows azureって何
Kana SUZUKI
for Developer、Microsoft Edge とInternet Explorer で新しくサポートされるAPI
for Developer、Microsoft Edge とInternet Explorer で新しくサポートされるAPI
Osamu Monoe
EC-CUBEプラグイン講義
EC-CUBEプラグイン講義
ria1201
X pages day発表_20141118 final
X pages day発表_20141118 final
Fumiko Yamamoto
XPagesDay 2013 Closing Session
XPagesDay 2013 Closing Session
Atsushi Sato
What's new of XPages in 2015 and beyond
What's new of XPages in 2015 and beyond
Atsushi Sato
XPagesDay 2016 - XPages Future Roadmap
XPagesDay 2016 - XPages Future Roadmap
Atsushi Sato
PowerShell の基本操作とリモーティング&v3のご紹介 junichia
PowerShell の基本操作とリモーティング&v3のご紹介 junichia
junichi anno
Windows PowerShell によるWindows Server 管理の自動化 v4.0 2014.03.13 更新版
Windows PowerShell によるWindows Server 管理の自動化 v4.0 2014.03.13 更新版
junichi anno
JSF2.2で簡単webアプリケーション開発
JSF2.2で簡単webアプリケーション開発
Masuji Katoda
はじめての Azure 開発
はじめての Azure 開発
Yoshitaka Seo
Tendances
(20)
【XPagesDy】A-2_コムチュア_20131106_公開用
【XPagesDy】A-2_コムチュア_20131106_公開用
Java女子部 Java EEハンズオン(応用編)
Java女子部 Java EEハンズオン(応用編)
【B 5】x pages extension library じゃぱ〜〜ん!コミュニティ動向2014ば〜〜ん!
【B 5】x pages extension library じゃぱ〜〜ん!コミュニティ動向2014ば〜〜ん!
XPages の最新機能を、XPages Extension Library Japan の日本語サンプルで試そう!
XPages の最新機能を、XPages Extension Library Japan の日本語サンプルで試そう!
Internet Explorer 9 の新機能「固定サイト」 (Pinned sites)
Internet Explorer 9 の新機能「固定サイト」 (Pinned sites)
Domino & REST
Domino & REST
【C-3】ジャンボフェリー 予約システムの事例からみるXPagesを使った提案・開発の概要
【C-3】ジャンボフェリー 予約システムの事例からみるXPagesを使った提案・開発の概要
XPagesDay 2014 - What's new in XPages NOW!
XPagesDay 2014 - What's new in XPages NOW!
JAZUG女子部 第2回勉強会 ハンズオン
JAZUG女子部 第2回勉強会 ハンズオン
Windows azureって何
Windows azureって何
for Developer、Microsoft Edge とInternet Explorer で新しくサポートされるAPI
for Developer、Microsoft Edge とInternet Explorer で新しくサポートされるAPI
EC-CUBEプラグイン講義
EC-CUBEプラグイン講義
X pages day発表_20141118 final
X pages day発表_20141118 final
XPagesDay 2013 Closing Session
XPagesDay 2013 Closing Session
What's new of XPages in 2015 and beyond
What's new of XPages in 2015 and beyond
XPagesDay 2016 - XPages Future Roadmap
XPagesDay 2016 - XPages Future Roadmap
PowerShell の基本操作とリモーティング&v3のご紹介 junichia
PowerShell の基本操作とリモーティング&v3のご紹介 junichia
Windows PowerShell によるWindows Server 管理の自動化 v4.0 2014.03.13 更新版
Windows PowerShell によるWindows Server 管理の自動化 v4.0 2014.03.13 更新版
JSF2.2で簡単webアプリケーション開発
JSF2.2で簡単webアプリケーション開発
はじめての Azure 開発
はじめての Azure 開発
En vedette
複製トラブル3連発 こんな「消滅」「合体」「増殖」 ありました
複製トラブル3連発 こんな「消滅」「合体」「増殖」 ありました
Satoru Abe
XPagesDay 2016 「私がハマった失敗例」
XPagesDay 2016 「私がハマった失敗例」
tshost
XPagesDay 2016 「開発事例 - XPages で作る動画閲覧サイト」
XPagesDay 2016 「開発事例 - XPages で作る動画閲覧サイト」
tshost
Notesとconnections cloudを連携
Notesとconnections cloudを連携
Haruyuki Nakano
Notes を様々なサービスと連携させてみよう!
Notes を様々なサービスと連携させてみよう!
Takeshi Yoshida
IBM Connections Cloud Application Development Strategy
IBM Connections Cloud Application Development Strategy
Luis Benitez
今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)
今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)
Takeshi Yoshida
ノーツアプリケーション開発 Hint & tips 101連発
ノーツアプリケーション開発 Hint & tips 101連発
Takeshi Yoshida
XPagesDay 2016 「xpagesでjava開発するぞ!」
XPagesDay 2016 「xpagesでjava開発するぞ!」
Kazunori Tatsuki
XPagesで検索してみよう
XPagesで検索してみよう
Masahiko Miyo
En vedette
(10)
複製トラブル3連発 こんな「消滅」「合体」「増殖」 ありました
複製トラブル3連発 こんな「消滅」「合体」「増殖」 ありました
XPagesDay 2016 「私がハマった失敗例」
XPagesDay 2016 「私がハマった失敗例」
XPagesDay 2016 「開発事例 - XPages で作る動画閲覧サイト」
XPagesDay 2016 「開発事例 - XPages で作る動画閲覧サイト」
Notesとconnections cloudを連携
Notesとconnections cloudを連携
Notes を様々なサービスと連携させてみよう!
Notes を様々なサービスと連携させてみよう!
IBM Connections Cloud Application Development Strategy
IBM Connections Cloud Application Development Strategy
今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)
今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)
ノーツアプリケーション開発 Hint & tips 101連発
ノーツアプリケーション開発 Hint & tips 101連発
XPagesDay 2016 「xpagesでjava開発するぞ!」
XPagesDay 2016 「xpagesでjava開発するぞ!」
XPagesで検索してみよう
XPagesで検索してみよう
Similaire à XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
jQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & Tips
yoshikawa_t
Magento meet up Tokyo#1 for Design
Magento meet up Tokyo#1 for Design
Miho Nakano
jQuery Mobileの基礎
jQuery Mobileの基礎
Takashi Okamoto
Jqm20120210
Jqm20120210
cmtomoda
もっと良くなるHTMLアプリケーション設計と実装
もっと良くなるHTMLアプリケーション設計と実装
Mitsue-Links
Webに今求められているレベル: HTML5 コントロールを利用した開発
Webに今求められているレベル: HTML5 コントロールを利用した開発
インフラジスティックス・ジャパン株式会社
jQuery Mobile(開発編)勉強会資料
jQuery Mobile(開発編)勉強会資料
Nobumasa Ura
2012年8月10日 勉強会
2012年8月10日 勉強会
Rin Yano
jsライブラリで実装する効率的なWeb制作
jsライブラリで実装する効率的なWeb制作
西畑 一馬
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
Yasuhito Yabe
Native x Webでいいとこどり開発 ~ピグトーク~
Native x Webでいいとこどり開発 ~ピグトーク~
Kazunari Hara
スマホにおけるWebGL入門
スマホにおけるWebGL入門
Yohta Kanke
Rails初心者レッスン lesson3 3edition
Rails初心者レッスン lesson3 3edition
Satomi Tsujita
Jqm20120804 publish
Jqm20120804 publish
Takashi Okamoto
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
Takashi Okamoto
GDG Women DevfestW
GDG Women DevfestW
Tomoko Sato
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Shumpei Shiraishi
WordPressとjQuery
WordPressとjQuery
Seto Takahiro
Webteko 20090925
Webteko 20090925
だいすけ ふるかわ
Djangoによるスマホアプリバックエンドの実装
Djangoによるスマホアプリバックエンドの実装
Nakazawa Yuichi
Similaire à XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
(20)
jQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & Tips
Magento meet up Tokyo#1 for Design
Magento meet up Tokyo#1 for Design
jQuery Mobileの基礎
jQuery Mobileの基礎
Jqm20120210
Jqm20120210
もっと良くなるHTMLアプリケーション設計と実装
もっと良くなるHTMLアプリケーション設計と実装
Webに今求められているレベル: HTML5 コントロールを利用した開発
Webに今求められているレベル: HTML5 コントロールを利用した開発
jQuery Mobile(開発編)勉強会資料
jQuery Mobile(開発編)勉強会資料
2012年8月10日 勉強会
2012年8月10日 勉強会
jsライブラリで実装する効率的なWeb制作
jsライブラリで実装する効率的なWeb制作
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
Native x Webでいいとこどり開発 ~ピグトーク~
Native x Webでいいとこどり開発 ~ピグトーク~
スマホにおけるWebGL入門
スマホにおけるWebGL入門
Rails初心者レッスン lesson3 3edition
Rails初心者レッスン lesson3 3edition
Jqm20120804 publish
Jqm20120804 publish
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
GDG Women DevfestW
GDG Women DevfestW
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
WordPressとjQuery
WordPressとjQuery
Webteko 20090925
Webteko 20090925
Djangoによるスマホアプリバックエンドの実装
Djangoによるスマホアプリバックエンドの実装
Plus de Tetsuji Hayashi
20170217 coolで使いやすいnotesアプリデザイン講座(公開用)
20170217 coolで使いやすいnotesアプリデザイン講座(公開用)
Tetsuji Hayashi
20151106ノーツコンソ大阪notesアプリのデザインをcoolに(公開用)
20151106ノーツコンソ大阪notesアプリのデザインをcoolに(公開用)
Tetsuji Hayashi
X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)
X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)
Tetsuji Hayashi
テクてく大阪20150522 XPagesBLAST 発表用資料
テクてく大阪20150522 XPagesBLAST 発表用資料
Tetsuji Hayashi
XPagesDay2012 3-A Titanium mobileによるモバイルアプリケーションとXPages連携
XPagesDay2012 3-A Titanium mobileによるモバイルアプリケーションとXPages連携
Tetsuji Hayashi
あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発
あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発
Tetsuji Hayashi
Plus de Tetsuji Hayashi
(6)
20170217 coolで使いやすいnotesアプリデザイン講座(公開用)
20170217 coolで使いやすいnotesアプリデザイン講座(公開用)
20151106ノーツコンソ大阪notesアプリのデザインをcoolに(公開用)
20151106ノーツコンソ大阪notesアプリのデザインをcoolに(公開用)
X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)
X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)
テクてく大阪20150522 XPagesBLAST 発表用資料
テクてく大阪20150522 XPagesBLAST 発表用資料
XPagesDay2012 3-A Titanium mobileによるモバイルアプリケーションとXPages連携
XPagesDay2012 3-A Titanium mobileによるモバイルアプリケーションとXPages連携
あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発
あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
1.
XPages with jQueryMobile
プラクティスガイド 所属:ジョンソンコントロールズ(株) 林 哲司 2014 A4 2014/11/18 16:00-17:00 モバイルアプリケーション開発のコツ
2.
本日のアジェンダ 序 :XPages開発能力を上げるには?
破 :XPagesでjQueryMobileを使うには Q :jQueryMobile設計BADプラクティス :|| :絶対にやってはいけない設計 :まとめ 2
3.
本日のMission 個人的 3
4.
XPages開発に対するイメージを変え Notes開発者を元気にする 現在
未来 本日のMission 4
5.
序 XPages開発能力を上げるには? 5
6.
質問1:料理が上達するには? 1.高級料理店 に行く
2.レシピ本を 読む 3.シェフと 話してみる 4.料理を 作ってみる 6
7.
質問2:プログラミングが上達するには? 1.アプリを使う 2.プログラミン
グの本を読む 3.開発者と 話してみる 4.アプリを 開発してみる 7
8.
なぜ、実践すると上達する? これしかないんです!でも・・・・ 実践
(体験) 食べたいのに、痩せたいんです 練習したくないのに、勝ちたいんです 楽したいのに、儲けたいんです 上達 失敗 そんなことできると思いますか? できる人がいたら、こっそり教えて下さい 8
9.
最も重要!! 失敗後のプロセス 実践
(体験) 気づく 考える 上達 失敗 大切なのは・・・ Google先生に聞くこと? ではなく 自分で考えて、気づくこと そのためのツールとして、基礎技術をしっかり学ぶこと これをやらずして上達はあり得ないし、XPagesも楽しくなりません! 9
10.
なぜ プラクティスなのか? 赤ちゃんが、ハイハイを始めて、失敗したら
「私はなんてダメなんだろう?私の人生は終わりだわ」 なんて思うでしょうか? 「思わない」って大人は知ってますね でも、自分のことだと大人は「失敗だ!」と決めつけるんです 大人がBADだ! 失敗だ!と決めつけているのは 気づきのタネ なんです 10
11.
今でしょ! XPagesは「難しい!」「情報がない!」 と言ってる暇があったら
まずはやってみましょう! 基礎をしっかり学びましょう! 11
12.
破 XPagesでjQueryMobileを使うには XPagesDay2013の
おさらい 12 参考リンク:XPagesDay2013 あなたにも出来る! XPages & jQueryMobileで作るスマートフォン、タブレットUX開発 http://www.slideshare.net/tetsujihayashi16/x-pages-day2013-27989624
13.
動作環境 開発環境 •Notes/Domino
8.5.3 FP5 •jQuery 2.1.1 •jQueryMobile 1.4.5 稼働テスト環境 •Notes/Domino 9.0.1 13
14.
あきらめないといけないこと XPagesの設計タブ(GUIによるデザイン) XPages
with jQueryMobileの開発では、設計タブは使いません。 新しいフレームワーク、開発手法がどんどん出てくる時代になりました。 最新技術を取り入れて行くには、GUIツールの登場を待っている時間がありません。 ※例えばjQuery互換でモバイルに最適化されたZepto.jsとか・・・ 14
15.
知っておいた方がいい知識 前提として ・Chromeの開発ツール(F12)の使い方
ドットインストール:Chrome Developer Tools入門 http://dotinstall.com/lessons/basic_chrome_dev_v2 ※FirebugもIEの開発ツールも同じ感じ ・jQueryについて Kindle書籍:jQuery入門道場 ※なんと350円!!この情報量、わかりやすさでこの価格は絶対安い!! ・jQueryとjQueryMobile、CSSについて ドットインストール:jQuery入門 ドットインストール:jQuery Mobile入門 ドットインストール:CSS入門 知っていると開発効率 が3倍違います 15
16.
あった方が良いツール ・恋するエディタ SublimeText
デザイン(HTML,CSS)は先にこれで作って、XPage上でコントロー ルを貼り付けていくのがオススメ マルチカーソルが超便利 使い方はドットインストールで ドットインストール:Sublime Text 2入門 ・j5 create Android Mirror USBアダプター JUC600 USBで接続し、Android端末の画面をPCに複製できるツール PCのキーボードが使える PCをプロジェクタに繋いで、ユーザーに説明する時にも便利!! ・フルHDのモニタ フルHDじゃないとDominoDesignerのプロパティ画面が見えない 16
17.
SublimeTextマルチカーソル 17
18.
DominoDesignerの設定 1.エディタの行番号を表示 Designer
のプリファレンスの [一般]-[エディター]-[テキスト・エディター] 内にある「行番号の表示」 にチェックを付ける 2.エラーを表示 DB内の[アプリケーションプロパティ]-[XPages実行時エラーページを表示]にチェックを付ける 3.「自動的にビルド」にチェック ファイルメニューからプロジェクト(P)>自動的にビルドにチェックを付ける 18
19.
dojoデザインを読み込まない設定 1.xsp.propertiesにxsp.theme=<empty>を追加 アプリケーションをパッケージエクスプローラで開き、WebContent>WEB-INF>
xsp.propertiesを開き、 ソースタブに xsp.theme=<empty> という1行を追加 ① ③ ② 設定あり 設定なし jQueryMobileのCSSを正しく設定すれば問題ないと思いますが、 標準のCSSを適用させないようにして、はまるポイントを減らしましょう おわかりいただけ ただろうか? 19
20.
jQuery、jQueryMobileのダウンロード 1.jquery.com/downloadからjQuery2.1.1圧縮版(jquery- 2.1.1.min.js)をダウンロード
2.jQueryMobile.com/downloadから jQueryMobile1.4.5(jquery.mobile-1.4.5.zip)をダウンロード 20
21.
1.ファイルリソースにダウンロードしたjQuery(jquery-2.1.1.min.js) をインポートする 2.ファイルリソースにダウンロードしたjQueryMobile(jquery.mobile-
1.4.5.zip)を解凍し、jquery-mobile-1.4.5.min.jsをインポートする 3.スタイルシートにjQueryMobile(jquery.mobile-1.4.5.zip)から解凍 したjquery.mobile.1.4.5.min.cssとjquery.mobile.icons- 1.4.5.min.cssをインポートする jQuery、jQueryMobileのインポート① アプリ単独でjQuery、jQueryMobileの環境を閉じたいのであれば上記の方法 サーバー全体で共有したいのであればサーバーに組み込んで下さい 21
22.
jQuery、jQueryMobileのインポート② 1.イメージリソースにjQueryMobile(jquery.mobile-1.4.5.zip)から解 凍したimages/ajax-loader.gifとimages/icon-svg/フォルダのsvg
ファイルをすべてインポートする 2.インポートした画像にはフォルダ名が入らないので、それぞれフォル ダ名を付けていく ex) images/ajax-loader.gif images/icon-svg/action-black.svg 22
23.
jQueryMobile基本構文 「data-XXXX」という拡張タグがjQueryMobile の正体!!
それぞれの拡張タグに値をセットすると勝手にデザインしてく れる <ul data-role="listview" data-inset="true"> <li><a href="#">Acura</a></li> <li><a href="#">Audi</a></li> <li><a href="#">BMW</a></li> <li><a href="#">Cadillac</a></li> <li><a href="#">Ferrari</a></li> </ul> ListView HTMLソース jQueryMobile1.4.xでは、高速化のため一部の拡張タグがclass に変更されました ex) 小さいボタン 1.3.x系 data-role=“button” data-mini=“true” 1.4.x系 class=“ui-btn ui-mini” 23
24.
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"> <xp:this.resources> <xp:styleSheet href="/jquery.mobile-1.4.5.min.css"></xp:styleSheet> <xp:styleSheet href="/jquery.mobile.icons-1.4.5.min.css"></xp:styleSheet> <xp:script src="/jquery-2.1.1.min.js" clientSide="true"></xp:script> <xp:script src=“/jquery.mobile-1.4.5.min.js” clientSide="true"></xp:script> </xp:this.resources> XPagesへの組み込み Domino 8.5.3 1.XPagesを新規作成し、ソースタブを開く 2.<xp:view>と</xp:view>タグの間に、下記のコードを書き込む 24
25.
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"> <xp:this.resources> <xp:styleSheet href="/jquery.mobile-1.4.5.min.css"></xp:styleSheet> <xp:styleSheet href="/jquery.mobile.icons-1.4.5.min.css"></xp:styleSheet> <xp:headTag tagName="script"> <xp:this.attributes> <xp:parameter name="type" value="text/javascript" /> <xp:parameter name="src" value="jquery-2.1.1.min.js" /> </xp:this.attributes> </xp:headTag> <xp:headTag tagName="script"> <xp:this.attributes> <xp:parameter name="type" value="text/javascript" /> <xp:parameter name="src" value="jquery.mobile-1.4.5.min.js" /> </xp:this.attributes> </xp:headTag> </xp:this.resources> XPagesへの読み込み 1.XPagesを新規作成し、ソースタブを開く 2.<xp:view>と</xp:view>タグの間に、下記のコードを書き込む Domino9 with jQueryMobileの読込問題についての詳細はこちら(英語) XPages: Dojo 1.8.1 & jQuery Mobile 1.3.1 http://hasselba.ch/blog/?p=1216 Domino 9.0 25
26.
XPagesへの読み込み 1.DB内のアプリケーション構成>Xspプロパティ>永続性タブの「実行 時最適化JavaScriptおよびCSSリソースの使用」のチェックを外す
2.AMDを停止させるJavaScriptと起動させるJavaScriptをファイル (amd_stop.js、amd_start.js)を作成する 【amd_stop.js】 【amd_start.js】 Domino 9.0 if(define && tempAmd){ // restore define.amd object define.amd = tempAmd; delete tempAmd; } if(define && define.amd){ // undefine define.amd while loading jquery modules so as not to use amd loader var tempAmd = define.amd; define.amd = undefined; } 26
27.
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"> <xp:this.resources> <xp:styleSheet href="/jquery.mobile-1.4.5.min.css"></xp:styleSheet> <xp:styleSheet href="/jquery.mobile.icons-1.4.5.min.css"></xp:styleSheet> <xp:script src="/amd_stop.js" clientSide="true"></xp:script> <xp:script src="/jquery-2.1.1.min.js" clientSide="true"></xp:script> <xp:script src=“/jquery.mobile-1.4.5.min.js” clientSide="true"></xp:script> <xp:script src="/amd_start.js" clientSide="true"></xp:script> </xp:this.resources> XPagesへの読み込み 3.1で作成した2つのJavaScriptファイルをファイルリソースとしてイ ンポートする 4.XPagesを新規作成し、ソースタブを開く 5.<xp:view>と</xp:view>タグの間に、下記のコードを書き込む Dojo道場 ~ 第11回「Dojo 最新動向 - Asynchronous Module Definition」 http://codezine.jp/article/detail/6482 Domino 9.0 27
28.
</xp:this.resources> <!-- サイズをデバイスの幅に設定、倍率を固定-->
<meta name="viewport" content="width=device-width, initial-scale=1" /> <!-- ページ --> <div data-role="page"> <!-- ヘッダー --> <header data-role="header"> <h3>ヘッダー</h3> </header> <!-- コンテンツ --> <article data-role="content"> </article> <!-- フッター --> <footer data-role="footer"> <h3>フッター</h3> </footer> </div> </xp:view> XPages with jQueryMobileのひな形 <header> <article> <footer>の部分は すべて<div>でもかまいませんが、 HTML5では文書構造を定義できるよう になったため、この書き方がオススメ! <article>タグの間にビューやフォーム となる部品を配置していきます 28
29.
こうなる <div data-role="page">
<!-- ヘッダー --> <header data-role="header"> <h3>ヘッダー</h3> </header> <!-- コンテンツ --> <article data-role="content"> </article> <!-- フッター --> <footer data-role="footer"> <h3>フッター</h3> </footer> 29
30.
作り方の基本① デザイン 1.入力タグ以外は<article>タグの間にタグを直接記入します
2.入力タグはコアコントロールをドラッグ&ドロップし、プロパティを 設定していくのが基本の流れになります DominoDesigner 完成形 30
31.
作り方の基本② 拡張タグの設定 jQueryMobileのキモである<data-xxxx>という拡張タグをコアコント
ロールに設定するには 1.コントロールを選択し、属性リスト(すべてのプロパ ティ-基本-attrs)に+ボタンで下記の属性を追加 name data-mini value true 完成形 出力されるHTML <div class=“ui-select ui-mini”> XPages攻略のポイント! 31
32.
作り方の基本③ コアコントロールと出力されるHTML コアコントロール
出力されるHTMLタグ 備考 編集ボックス <input type="text“> リッチテキスト <textarea rows="1" cols="1"> CKEditorを使用 複数行編集ボックス <textarea> ボタン <button type="button"> リストボックス <select size="3"> コンボボックス <select size="1"> チェックボックス <input type="checkbox"> 選択肢は一つだけ ラジオボタン <input type="radio"> 〃 チェックボックス グループ <fieldset> <input type="checkbox"> 複数の選択肢を設定できる 前後に<table><td>タグが 付く ラジオボタングループ <fieldset><input type="radio“> 〃 リンク <a> ラベル <span> <table>タグが入るので、jQueryMobile のデザインは適用できない気がします 32
33.
はまるポイント① jQueryMobileのサンプルが動かない XPagesはHTMLではないので、<input>などの閉じたタグのないものは
終端タグ/を入れましょう。 まずは「HTMLのサンプルをそのまま動作させてみたい」ということがあ ると思います やりたいこと HTMLソース XPageソース(そのまま貼り付け) エラーが出る 33
34.
はまるポイント① jQueryMobileのサンプルが動かない XPageソース(修正版)
動いた!! XPagesはHTMLではなく、XMLなので終端タグが必要です <input>など終端タグの無いものは終端タグ/を付けましょう 34
35.
はまるポイント② jQueryMobileのCSSが適用されない すべてのプロパティ>スタイル>styleClassにCSSを設定する
※outerStyeleClassは上位に<div>タグが生成され、その<div>タグにclassがされる 設定例 出力されるHTML 35
36.
はまるポイント③ XPageが生成するIDがわからない IDを指定して、jQueryからコントロールを制御したい場合、はまります
XPages 出力されるHTML 普通は名前がIDになる このidをそのままjQueryのIDタグとして使えれば良いんだけど、動かない 例) $(“#Subject").css("color","pink"); じゃぁ、HTMLに出力されるidを使えば良いんじゃない?と思うんだけど、動かない 例) $("#view:_id1:Subject").css("color","pink"); 36
37.
はまるポイント③ XPageが生成するIDがわからない ここでポイントとなるのはid名”view:_id1:Subject”の中に入っているコ
ロン”:”です。このコロンがCSSの疑似クラスで使われている区切り記号と 判断され、正常に要素を選択することができなくなってしまっています。 【CSSの疑似クラス例】 要素名:hover マウスカーソルが乗っている要素 要素名:first-child 要素名に一致する最初の子要素 回避するにはコロンの前にバックスラッシュ(¥マーク)を二つ重ねてエスケープ でもこの方法は先頭部分(view:_id1:Subject)の生成法則が不明確なので、 XPagesの標準で書かれている下記の形式にチャレンジします これなら動く XPagesの標準的なID指定方法 document.getElementById("#{id:Subject}").value; 37
38.
はまるポイント③ XPageが生成するIDがわからない XPages上のID指定
HTML出力されるID #{id:Subject} view:_id1:Subject 必要なID Domino 変換 view¥¥:_id1¥¥:Subject Browser 変換 function x$(idTag){ //正規表現を使って:を¥¥:に変換 idTag = idTag.replace(/:/g,"¥¥:"); //変換結果の先頭に#を付けid指定とし、$()で囲むことでjQueryオブジェクトを返す return($("#"+idTag)); }; 関数を使ったXPages上の指定例 コロンをバックスラッシュ×2+ コロンに変換する関数 コロン→バックスラッシュ×2 +コロンに変換すれば良い 38 参考:ブログ書いてます XPages with JQuery なぜID指定でJQuery!が動かないのか? PART1 http://enjoyxpages.sakura.ne.jp/wp1/xpages-with-jquery-why-jquery-part1/ XPages with JQuery なぜID指定でJQuery!が動かないのか? PART2 http://enjoyxpages.sakura.ne.jp/wp1/xpages-with-jquery-why-jquery-part2/
39.
はまるポイント④ 単独ページでは問題なかったが、ページを繋 げると動かない
次のページを呼び出す<a>アンカータグに拡張タグdata-ajax=“false“を追加 フォーム→保存→ビュー 新規ボタンに<a>タグ追加 <a>タグにdata-ajax=“false“ 39
40.
はまるポイント④ 単独ページでは問題なかったが、ページを繋 げると動かない
<!-- ヘッダー --> <header data-role="header"> <a href="frm2.xsp" class="ui-btn ui-btn-icon-left ui-icon-plus" data-ajax="false">新規</a> <h3>ヘッダー</h3> </header> jQueryMobileの標準動作 (data-ajax=“true”) ビュー用XPage フォーム用XPage 論理的なページA 論理的なページB 論理的なページX ②非同期通信 論理的なページX jQuery Mobileでは、同一ドメインに対するリンクは、 自動的にAjax式リンクとなります。Ajax式リンクでは、 リンク先のページをいったん非同期通信で現在の文 書ツリーに取り込んだ上で、表示を切り替えます ①タップ ③ツリーに読込 ④ページの非表示 を切替 40 falseにすると 非同期通信しない
41.
はまるポイント④ 単独ページでは問題なかったが、ページを繋 げると動かない
ただし・・・・ エフェクト 画面遷移にエフェクトをかけている場合、動かなくなるので 何でもかんでもこの方法にすれば良い訳ではありません 個人的には エフェクトは最初の1回だけは 「ほぉ~」って思うけど、毎日 使うツールではうっとうしくな るので適材適所だと思います。 41
42.
はまるポイント⑤ 正しく設定、変更したはずなのに 変更が反映されない
ちょっと変更→動作確認、ちょっと変更→動作確認を繰り返すと、ソース は正しいのに変更が実行結果に反映されない場合があります。そんな時は 下記の方法を試して下さい。 1.アプリケーションをすべて閉じて(Designer上の設計タブ、Notesク ライアント上のビューなどすべてのタブ)、アプリケーションを開き直 して下さい 2.Designerでプロジェクト>クリーンを選択 42
43.
Q jQueryMobile設計 プラクティス
43
44.
ここから先は設計の話 なぜ設計が大切かというと 設計の段階で
•完成後のユーザー体験や満足 •パフォーマンス •開発効率 などなど、ほとんどの要素が決まってしまうからです 44
45.
シーン1: 確認か?通知か? 保存1
保存2 モーダルメッセージ モードレスメッセージ 45
46.
シーン1: 確認か?通知か? 確認を必要とする場面と
通知だけで良い場面は違う よく検討し、 ユーザーの操作を阻害しない ことを心がけろ! 46
47.
シーン2: 汎用的すぎる① 「選択肢はユーザー側で自由に設
定できます」 テスト環境) •11のセクション •セクションごとに11個のチェックボックス •CPU iCore5-2520M 自由に設定、選択できる さて、表示に何秒かかるでしょう? PC版Chrome(サーバー上) 5min iPod touch(第3世代) 31min SH-06E(Android4.2) 31min 自由に設定した結果、選択肢が多くなりすぎるとjQueryMobileでは DOMを操作してコントロールを描画するため、表示に時間がかかります。 ※DOM - Document Object Model 47
48.
シーン2: 汎用的すぎる① 「選択肢は自由に設定して下さい」
は逃げてるだけじゃないのか? 設定値の最大件数はユーザーに 確認するんだ!! 48
49.
シーン3: 汎用的すぎる② ビューにすべてのデータが表示される
テスト環境) •5000件のユーザー情報 •表示は3項目 •CPU iCore5-2520M すべてのデータ さて、表示に何秒かかるでしょう? PC版Chrome(サーバー上) 11min PC版Chrome(クライアント) 10min iPod touch(第3世代) 58min SH-06E(Android4.2) 52min Chromeの開発ツールで見るとXPageの読込自体は2秒弱で終わっています あとはjQueryMobileがDOMを捕まえてレンダリングする処理です 49
50.
シーン3: 汎用的すぎる② すべてのデータを表示する必要があ
るのか? 一覧画面の後、ユーザーがどんな 操作をしたいのか聞くんだ!! 50
51.
シーン4: マルチデバイス対応(解像度問題) Nexus5
iPhone5 iPhone6 ボタンの折返しだけでなく、横向きで使用した場合、タブレットで使用した場合 など、サポートする環境、端末を明確にし、事前に確認しましょう 51
52.
シーン4: マルチデバイス対応(解像度問題) Chrome開発モード
実機 Chromeの開発者モードでは綺麗に表 示されるのに実機ではレイアウトが 崩れることがあります (ChromeとWebkitの違い) Chromeの開発者モードはあくまで解像度のエミュレーションであり、エンジンは Chromeです。jQueryMobileにカスタムCSSを適用する場合や、CSS自体を独自 に定義した場合は必ず実機でテストしておきましょう。 52
53.
シーン4: マルチデバイス対応(解像度問題) テストの段階で解像度問題が発覚
すると手戻りが発生する 設計の段階で実機を使ってレイア ウトを確認しておくんだ 53
54.
:|| 絶対にやってはいけない設計 54
55.
絶対にやってはいけない設計 Notesクライアントアプリの機能、入力項目を そのままモバイル化しない!!
55
56.
具体的には? Notes君の良いところ クライアントサーバーなのでセキュリティなんかは考えなく
て良い デザインは一定の形が決まっているので、それに準拠すれば そんなにデザインに悩まなくて良い バージョンが決まっている PC&マウス操作なので画面が広くて、文字もたくさん出せる etc・・・ モバイルちゃんの良いところ タッチインターフェースで簡単入力 カメラなどの各種センサー、固有の機能が使える どこにでも持ち運べてすぐ使える デザインの自由度が高い etc・・・ もっと見つけてあげて下さい 兄弟でもそれぞれ良いところが違うように、それぞれ良いところは違います。 お父さん、お母さん(開発者)はそれぞれの 良いところを見つけて、生かしてあげる設計をしましょう!! 56
57.
そのために必要なことは? ユーザーさんと、きちんと対話しましょう 思い込みで設計していませんか?
本当は何がしたいのか?を話し合いましたか? ユーザーの発言=要望だと思っていませんか? ユーザーさんが見えていないリスクについても話し合いましたか? 57
58.
まとめ 58
59.
ご覧になって下さった方々へ 私の知り得る情報はキーワードとしてちりばめておきました この資料だけで何でも作れるようになれるわけではありません
このキーワードをきっかけに、まずは基礎を勉強し、深く知っていって下さ い また、Google先生を使って、誰かの知見を受け取るだけではなく、「こん な時にはこんな風に解決しましたよ」と発信していって下さい あなたがBADプラクティスから得た気づきは 必ず誰かの助けになります 59
60.
Let’s Enjoy XPages
Télécharger maintenant