XPagesのラジオボタンをカッコいいデザインに変える方法
通常、ラジオボタンをCSSだけでデザインする場合によく使われる方法
通常、ラジオボタン、チェックボックスをデフォルトのブラウザの持つデザインではなくカスタマイズしようとした場合、HTMLソースコードを以下のように用意します。
ここでまず、ラジオボタンのINPUTタグとLabelタグを兄弟関係で持たせるということが重要になります。その後、CSSによって以下のように指定します。
これにより、丸ポチを100％透過してしまい見えないようにしてやります。
次にLabelタグを使い、好きなようにボタンのデザインを作成してやります。
こうすることでこのようなラジオボタンにカスタマイズすることができます。
このCSSで重要なのは ”input[type="radio"]+label:before” としている点です。
つまり、+label とすることでinputタグの兄弟関係にある labelタグのデザインをカスタマイズしています。
なお、なぜこのような遠回りなことをしなければいけないかというと、input タグには「:before」が使えず、またinputタグ自体は非表示しなければならないため、labelを使ってこのような対応になってしまうわけです。
と、ここまではXPagesに全く関係のないHTMLとCSSのお話なので、ラジオボタンをカスタマイズしたい場合はググってみると色々なデザインを発見できると思います。
前置きがかなり長くなりましたが、XPagesで同等のことをしたい場合の説明をします。
XPagesのラジオボタン（ラジオボタングループ）はHTML構造が違う！？
同様のことをXPagesのラジオボタンで行いたい場合、まずXPagesが出力するHTMLソースコードをチェックします。ここではラジオボタングループを利用します。
すると出力されるコードは以下の通りです。（Domino 9.0.1)
見て頂いて分かるようにinputタグを子にもつようにlabelタグで括られています。これがXPagesでラジオボタンのデザインをカスタマイズすることを難しくしています。
ラジオボタンがチェックされたか、親のタグのLabelから分からない
上記CSSで、"input[type="radio"]:checked+label:before"というセレクターがありますが、「ラジオボタンがチェックされたとき、その兄弟のラベルのデザインを変更する」という箇所になります。CSSでは「XXXという子要素を持つ親の要素」という逆順のセレクターを指定することが出来ないため、XPagesの「INPUTタグ（ラジオボタン）を選択された時の親のLabelのデザインを変更する」ということが技術的に不可能になります。
（jQuery等を使いJavascriptで処理する場合は可能であったりします。。。）
それでもCSSだけを使って頑張って実装する！
上記CSSによるラジオボタンのデザイン変更が出来ないため、別の方法による実装をする必要があります。
「box-shadow」を駆使して実装する！
XPagesのラジオボタン用のCSSは以下のようになります。
こちらのCSSでは"label:before"でラジオボタンの外枠を描画、"label:after"で選択時の丸ポチを描画しています。キーはクリック時の丸ポチの表示・非表示を"box-shadow "でマスクすることで実装しています。
多少複雑ですが、こうすることでXPagesの出力するHTMLにCSSを被せるだけでデザインをカスタマイズすることができるようになりました。
なお、このCSSですが、IE8以前のブラウザでは残念ながら正しく動作しません。"box-shadow"がIE8ではまだサポートされていないためです。
おまけ
上記CSSの応用みたいなものですが、ラジオボタンに画像を使うなどアイデア次第でより大幅にデザインを変更することができるようになります。
以下のソースコードでは"box-shadow"を使い選択された値の画像を濃淡により表現しています。
こちらのコードを実行した場合のイメージがこちらです。アイコン画像をクリックすると選択状態を表すように色が濃くなります。
2015年4月22日14時から「IBM Dominoアプリケーション on Bluemix」のセッションを行います
本日、2015年4 月 22 日(水) 14時からチームスタジオジャパン株式会社様が毎月ノーツ・ドミノユーザー向けにホットな話題を提供するWEBセミナー「月刊 Notes/Domino Webセミナー 」の4月号に、弊社代表の田付 和慶がセッションでお話させて頂きます。
内容は2月のテクテクLotusでも触れさせて頂いた、「IBM Dominoアプリケーション on Bluemix」に関してご紹介させて頂きます。
Session② 14:40-15:10
XPages開発者の挑戦は続く、「IBM Dominoアプリケーション on Bluemix」最新情報
当日のメインのセッションは14時から始まる日本IBMの平塚様の以下セッションになります！是非お見逃しなく！
Session① 14:00-14:40
「 IBM Notes/Domino 優良企業における活用事例・失敗しない製品選定術・活用TIPs 」
- あなたの会社をイキイキさせる！組織活性化に貢献できる「取り組み」や「画面設計」とは？ -
講師>日本アイ・ビー・エム株式会社
コラボレーション・コンサルタント 平塚 博章氏
日時：
2015年4 月 22 日(水) 14時から
場所：
オンラインのセッション
主催：
チームスタジオジャパン株式会社
参加費：
無料 / 事前登録制
詳細、申込みはこちらから » http://jp.teamstudio.com/webinar_20150422
IBM Domino Application on Bluemix について、ConnectED 2015にて
今回、もっとも興味があるセッションであった「IBM Domino Application on bluemix」セッションに参加してきました。
通常、Bluemixで開発を行う場合、EclipseにCloudFoundryのプラグインをインストールしたり、DevOps サービスなどの開発管理システムと連携する形で行うため、開発環境の設定段階で以外と敷居が高くなってしまいます。
この点、IBM Domino Application on bluemixではどのように提供されるのかが自分の持つ関心の一つでした。
予想として、おそらくDesigner内のJavaパースペクティブ等を使ってデプロイをすることになるのかと考えていたのですが、今回のセッションで、その予想はいい意味で裏切ってくれました。
IBM Domino Designer上で専用のBluemixへのデプロイツールを使い直接デプロイを行えるようになります。
また、IBM Domino Designerの設定画面にBluemixのアカウントID、Passwordを入力する項目が用意されるため、デプロイ時に毎回ログイン情報を提供する必要がなくなります。
もう一つの関心として、オンプレミスのDominoとどのように連携できるのか、ということです。
Server IDが提供されたり、サーバー間の相互認証などを行ったり出来るのか？
この点に関して、セッションを行っていた開発者に"Meet the developer"にて直接質問をしてみたところ以下のような回答を聞くことが出来ました。
- Bluemix上のDominoは特別に仕立て上げられたサーバーのためServer IDを開発者ごとに提供するという予定はない。
- サーバー間の相互認証を行いオンプレミスのDominoとの連携を行えるようにすることはプランとしてある。
どちらも出来ないのかもしれないと想像していたため、相互認証等でオンプレミスDominoとの連携が行える可能性について聞き出せたのは大きな収穫でした。
ただ、"IBM Domino Application on bluemix"自体がまだ始まったばかりのため、今の時点ではあくまでプランとして挙がっているということみたいです。
IBM ConnectedED で得た情報まとめ
その他、"IBM Domino Application on bluemix"に関して得た情報として纏めると以下のような感じです。
- XPages Bluemixランタイム（ビルドパック）が用意される。lightweight Domino Web Containerが用意されていてXPagesが実行されるイメージ。
- ローカルレプリカはない。 サーバーへ同期をとるのではなく、専用のBluemixへのデプロイツール（Addonのようなもので提供？）から直接デプロイを行う。
- Designerの設定画面にBluemixのアカウントID、Passwordを入力する項目が用意される。それによりデプロイ時に毎回ログイン情報を提供する必要がなくなる。
- BluemixでXPagesのインスタンスを作成することで、NSFファイルをダウンロードすることができ、そのNSFを使い開発を進める。
- BluemixでXPagesのインスタンスを作成することで、開発用のUser IDも同時に作成される
- 複数の開発者で開発も可能
- オンプレミスのサーバーとの相互認証をさせる等で連携をプランしている。
- IBM Sametimes on bluemixはまだ開発に至っていないが、IBM内でサービスとして提供したいという話はある。
- IBM Connections Cloud との連携として IBM Connections Cloud FileがBluemixで提供されるため、その連携は可能になる（予定）。
「IBM Domino Application on bluemix AD201」 デモ
「IBM Domino Application on bluemix AD201」セッションでは以下のようなデモが行われました。
- XPagesとRDBMSサービスを使いNotesデータベース以外のデータソースと連携。
- XPagesで作ったWebアプリケーションからWatsonと連携。
- Bluemix上のインスタンスを２つにしたロードバランスにも対応出来ていることをデモ。（例）片方のインスタンスを落として、もう一つのインスタンスでで文書を更新、その後にインスタンスを立ち上げると、更新された文章が同期されていることが確認できる。
ロードマップ
最後に、「IBM Domino Application on bluemix」の今後のロードマップが発表されました。
2015年の下半期でようやくベータになることから、まだまだ開発が始まったばかりのサービスであることが伺えます。
ConnectED 2015 セッション アジェンダ
以下のようなセッションアジェンダを組んでみました。
やはり目玉はIBM Verseですね。Deep Diveと謳ったIBM Verseのセッションがありますから、今まで発信されなかったより深い情報が発表されるのだとおもいます。 また個人的に興味があるキーワードとして、Connectins API, Domino API, Bluemix などインテグレーションのための情報です。外せないセッションとしては
- IBM Verse: Deep Dive and Futures (R1) - ID114
- IBM Domino Applications in Bluemix - AD201
- Be Open - Use WebServices And REST In XPages Applications - BP108
- There's an API for That! Why and How To Build on the IBM Connections Platform - BP205
ここらへんです。
ConnectED開催中もホットな情報があればこちらのブログで発信していきたいと思います。（セッション疲れがなく、酒で酔いつぶれていなければですが、笑）
2015.01.25(Sun)
IBM Domino Applications on Cloud - MAS104
03:45 午後 - 04:45 午後 - Walt Disney World Swan, Swan 7-10
Pete Janzen (IBM), Christian Guedemann (WebGate Consulting AG)
2015.01.26(Mon)
IBM ConnectED - A New Way to Engage - OGS101
08:00 午前 - 09:30 午前 - Walt Disney World Swan, Swan 1-10
IBM Verse: Deep Dive and Futures (R1) - ID114
10:45 午前 - 11:45 午前 - Walt Disney World Swan, Swan 5-6
Andrew Davis (IBM)
IBM Domino - 2015 and Beyond (R1) - ID107
01:00 午後 - 02:00 午後 - Walt Disney World Swan, Swan 5-6
Scott Vrusho (IBM)
IBM Domino Applications in Bluemix - AD201
02:15 午後 - 03:15 午後 - Walt Disney World Dolphin, S. Hem 2
Martin Donnelly (IBM)
The Future of Web Development - Write Once, Run Everywhere with AngularJS and Domino - BTE102
03:45 午後 - 04:45 午後 - Walt Disney World Swan, Toucan 1-2
Mark Roden (PSC Group LLC)
IBM Verse AppDev and Extensibility - AD104
05:00 午後 - 06:00 午後 - Walt Disney World Swan, Swan 7-10
Andrew Davis (IBM)
2015.01.27(Tue)
ConnectED 2015 IBM Business Partner Kickoff Session - BPO101
08:00 午前 - 10:15 午前 - Walt Disney World Swan, Swan 5-6
Lou Sassano (IBM)
IBM Domino App Dev Futures - AD101
08:00 午前 - 09:00 午前 - Walt Disney World Swan, Swan 7-10
Eamon Muldoon (IBM)
There's an API for That! Why and How To Build on the IBM Connections Platform - BP205
09:15 午前 - 10:15 午前 - Walt Disney World Dolphin, S. Hem 2
Mikkel Flindt Heisterberg (OnTime by Intravision)
Take to the Cloud! Extend Your Applications with IBM Sametime APIs from IBM Connections Cloud - AD204
11:15 午前 - 12:15 午後 - Walt Disney World Swan, Swan 1-2
Brendan Arthurs (IBM)
IBM Notes Applications to the Web: IBM Notes Browser Plug-in - ID106
01:00 午後 - 02:00 午後 - Walt Disney World Dolphin, S. Hem 1
Rajesh Patil (IBM)
Adding Two Factor Authentication to IBM Connections Cloud - BTE202
02:30 午後 - 03:30 午後 - Walt Disney World Swan, Swan 7-10
Stephen McDonagh (AVX Limited)
Practical IBM Notes and Domino Internet Security - BP102
03:45 午後 - 04:45 午後 - Walt Disney World Swan, Swan 1-2
Daniel Nashed (Nash!Com)
Be Open - Use WebServices And REST In XPages Applications - BP108
05:00 午後 - 06:00 午後 - Walt Disney World Swan, Toucan 1-2
Bernd Hort (assono GmbH)
OpenNTF Domino API: The Community API - CHALK102
06:15 午後 - 07:00 午後 - Walt Disney World Swan, Swan 1-2
Paul Withers (Intec Systems Ltd)
2015.01.28(Wed)
XPages and Java: Share your Experience - CHALK405
07:15 午前 - 08:15 午前 - Walt Disney World Dolphin, S. Hem 2
Bernd Hort (assono GmbH)
From XPages Hero To OSGi Guru: Taking The Scary Out Of Building Extension Libraries - BP106
08:30 午前 - 09:30 午前 - Walt Disney World Swan, Swan 3-4
Paul Withers (Intec Systems Ltd), Christian Guedemann (Webgate)
Responsive Application Development for XPages - AD302
11:45 午前 - 12:45 午後 - Walt Disney World Swan, Mockingbird 1-2
Brian Gleeson
Build Your Own Apps in Minutes Leveraging IBM Bluemix and IBM Connections - AD202
01:30 午後 - 02:30 午後 - Walt Disney World Dolphin, S. Hem 2
Miguel Estrada (IBM)
ConnectED Closing Session: A New Way to Engage - CGS102
03:15 午後 - 04:00 午後 - Walt Disney World Swan, Swan 1-10
2014年7月からノーツコンソーシアムに入会致しました
2014年7月から個人会員としてノーツコンソーシアムに入会させて頂きます。
色々な懇親会、研究会、テクニカルセミナーに参加することで沢山の情報交流とコミュニティーの活性化に繋がるよう努力してまいります。
7月、8月だけで以下のような沢山のイベントが予定されているんですね。
やはり弊社の一番の興味がある分野はXPagesですね。色んな技術者の方とお会いできるのが楽しみです。
2014/07/03 研究会 2014 IBM Notes/Domino DPP研究会 (7月3日）
2014/07/04 研究会 2014 大阪地区研究会 (7月4日)
2014/07/08 研究会 2014 XPages研究会 【機械実習あり】(7月8日)
2014/07/10 研究会 2014 ソーシャル研究会 【機械実習あり】(7月10日)
2014/07/18 研究会 2014 バージョンアップ研究会 (7月18日)
2014/07/31 研究会 2014 IBM Notes/Domino DPP研究会 (8月7日⇒7月31日に変更）
2014/08/07 研究会 2014 ソーシャル研究会 【機械実習あり】(8月7日)
2014/08/08 研究会 2014 バージョンアップ研究会 (8月8日)
2014/08/12 研究会 2014 XPages研究会 【日程変更】(8月12日⇒8月19日)
2014/08/22 研究会 【追加開催】2014 九州地区研究会 (8月22日)
Lotus Notes 8.5.1のためLotus Expeditor ToolkitをEclipseに設定する時の注意点
Lotus Notes 8.5.1の埋め込みブラウザをSSO（Single-Sign-On）対応させるために、Lotus Expeditor Toolkitを使ったEclipseの設定をしようとしたのですが、Lotus Notes 8.5.1のVMが見当たらないので、ググッてみると以下のように構造に変更があったみたいです。
There's no longer a JRE stored in the plugin directory way down in the directory structure. Now you simply use the JVM in /jvm - simple right?!
This is nice but it means that your Eclipse configuration needs to be a little different JVM wise. I have therefore updated my Eclipse configuration guidelines to work with Notes 8.5.1.
引用元: Configure Eclipse 3.4 for Notes 8.5.1 - lekkimworld.com.
以前は、
<Notes install dir>/framework/rcp/eclipse/plugins/com.ibm.rcp.j2se.win32.x86_1.5.0.SR4-200707311521/jre
などとなっていたのですが、Lotus Notes 8.5.1では引用元の紹介にもあるように、
<Notes install dir>/jvm
に変更になっていました。
詳しくは Eclipse configuration guidelines to work with Notes 8.5.1に書いてあります。
これは、自分の設定した場合、
なお、Lotus Expeditor Toolkitの設定自体は以下のリンク等にかいてあるのが参考になるとおもいます。
http://www.ibm.com/developerworks/lotus/library/expeditor-notes-sametime/
http://www.ibm.com/developerworks/lotus/library/expeditor-browser/
Notes ClientでxPageをオープンするための?OpenXPages
前回の投稿に続き、Lotus Notes 8.5.1からxPagesをComposite ApplicationにComponentsとして追加できる機能がついたので、早速試してみたのですが、Dblookupで他のデータベースからドキュメント情報を取得することは出来るけど、いざ、そのドキュメントをオープンさせようとしたときに、上手いこといかない、という問題に躓いたので記しておきます。
実際、なにが上手いこと行かなかったかというと、
- http:// のプロトコルでリンクを手前で生成しているような場合に、Lotus NotesはWebブラウザで開けようとするが、認証をもう一度求められてしまう。
- リンクを参照パスにしても、Proxyエラーや、４０４エラーとなってしまって開くことが出来ない。
で、どうするのかな～と思い調べてみると、答えはxPagesのブログに有りました。
?OpenXPage has been added as a supported parameters for the notes:// protocol to launch an XPage in the Notes client.
引用元: What's New For XPages in 8.5.1 - XPages Blog - The XPages Blog.
Lotus Notes 8.5.1 のxPagesの新しい機能紹介の投稿なんですが、
Notes ClientでxPageをランチするために notes:// プロトコルの?OpenXPages というパラメータをサポートしました。
ということらしいので、自分の探していたのはこれかも？！と思い試してみたら見事に動きました。
自分の例では、
Link Core ControlのOptionsで「Link type」を「URL」にして、以下のようなComputed Valueで上手くいきました。
return "Notes:///88257656006337D3/content.xsp?OpenXPage"
余談ですがxPagesをComposite ApplicationのComponentとして使いたい場合は、極力xPagesで用意されたCore Controls等を使って作っていくのが近道っぽいです。もちろんThemeなども。
自分はxPagesのSourceタブからhtmlコードやCSSファイルをガツガツ埋め込んでいっていたので、Componentにしたとき、ほとんど動かず、結局かなり作り直すはめになっちゃいました・・・（涙）
追記：１２月１６日２００９年
Domino Designere URLs for xPgages というエントリーがDomino Designer Wikiに追加されてます。
http://www-10.lotus.com/ldd/ddwiki.nsf/dx/Domino_Designer_URLs_for_XPages
xPages Component(Notes 8.5.1)でDblookup()使用時の注意点
xPages Componentを使ってLotus Notes Client 8.5.1上でxPagesを表示させる新しい機能を試したときに、自分のxPagesを以下のようにチューニングしないと上手く動かなかったので、注意が必要になります。
症状
xPagesをブラウザで見るとうまく表示されるのに、Notes Clientで見るとDblookup()でエラーが発生する。
状況
サーバのComposite Applicationを直接開いたときにエラーが発生するが、ローカルレプリカを開いたときは発生しない。
原因
＠Dblookup()の1st パラメータの dbName が正しく設定されていなかった。
詳細
以下のコードではDblookup（）が正常に値を返しません。
<![CDATA[#{javascript:var db = ["" ,"folder/cms.nsf"];
var viewName = "(vwTestLookup)";
var key ="Keyword";
var value = "";
var value = @DbLookup( db , viewName , key , 6 );
var retValue = "";
if(!@IsError(value)){
for( var i=0; i< value.length && i < maxEntry; i++){
retValue += "<li>"+value[i]+"</li>";
}
}
else{
retValue = "Error happened in DbLookup(). ";
}
return "<ul>"+retValue+"</ul>";}]]>
原因は一行目の
var db = ["" ,"folder/cms.nsf"];
にありました。 Webブラウザから見る場合はサーバ自身のfolder/cms.nsf データベースを参照してくれるので、問題なく期待した動作をするのですが、Notes Clientで開くと、ローカルPCのfolder/cms.nsfを参照しにいってしまうため、レプリケーションがない環境ではエラーが発生してしまいます。
対処法
Dblookup() のdbName Arrayの 1st elementにサーバネームを渡すようにする。
var db = [database.getServer() ,"folder/cms.nsf"];
としてやれば、どちらも動くようになります。
ちなみに、xPages Componentと同じDBを参照する場合は、
var db = @DbName();
としてやるだけでOKです。
複雑な処理をしている既存のxPagesをComponentで動かす言った場合、このようなケースではただエラーが発生するので、丁寧なコードを書いていないとデバッグ作業は思いのほか時間がかかってしまいます。
どのフォルダにドキュメントが格納されているかを知る @WhichFolders
自分の使っているLotus Notes 8.5.1のメールで「All Documents」にフォルダ情報が表示されているのが不思議で、Designerで($All) view を開いてみたら「Folder」columnに@WhichFolders ってのが記載されていました。
@WhichFoldersなんて便利なコマンドあったっけ？と思ってググってみました。
Knowing which folder a document is in - @WhichFolders
Steve Castledine 8 September 2008 09:28:53
Sometimes people don't see the release notes (I'm not saying this is definitely in them), or new formula etc can be forgotten, but a nice new formula in 8.5 was @WhichFolders which can be used to determine, surprisingly, which folder the current document is in.
To see it in action, it was added to the mail template, all documents view.
Funny, I'm not even sure this made it into the designer help db, I will have to check.
Lotus Notes 8.5から出来たFormula だったんですね。
しかもドキュメントにはなっていないみたい。 隠しコマンド？
ちなみに、@WhichFolders を調べているときに発見した別のブログ「Interesting undocumented formulas」( http://lotus-blogs.blogspot.com/2009/01/interesting-and-undocumented-formulas.html )
にもいろいろと紹介されています。
さて、こんな便利なコマンドが＠Formulaには用意されたみたいなんですが、自分への命題は「Lotus Notes C API」を使って同等の機能を実装できるか？
これが、簡単なようで上手くいかない。 IMAPコマンドをメールDBに対して掛けてやると$FolderRefが埋め込まれるのでこれによってフォルダ階層を割り出すことが可能になるのだが、もうちょっとスマートな方法を模索中・・・
と、またまた、ためにならない投げっぱなしな投稿でおわり。
Notes 8.5.1クライアントで動くxPagesコンポーネント
Here are two videos that demonstrate how you can used XPages components in the Lotus Notes 8.5.1 client.
デモの通りだと、とても簡単に実装できそうです♪
Lotus Notes ８．５．１の正式リリースが10月12日らしいので、いまから待ち遠しい。
ちなみに、Lotusphere 2009でBob Balfのセッションで言っていたWebフォームとComposite Applicationのワイヤリングが簡単に出来る機能。セッションでの彼の発言によると8.5.1で実装されるはずなんだけど、あまり聞かないなぁ～。 実装見送りになったのかな？
ワイヤリングする対象をHTMLのDOMをインタラクティブに調べることで簡単に行ってた。 まるでFirebugのElementsを調べる機能みたいでみててかなり感動だったんだけどな・・・