IBM Connect 2016 Japanで「Aveedo」の講演、展示を行います 2016/07/27(Wed)
IBM Connect 2016 Japanで「Aveedo」を初お披露目
今月に弊社とドイツ We4IT社において日本総代理移転契約を結んだ製品「Aveedo」をIBM Connect Japan 2016にて大々的にご紹介いたします。
「Aveedo」は様々な業務アプリNSFをWEBで直感的に素早く作成できるWEB開発プラットフォームです。
イベント当日はセッション、展示ブースにてドミノ既存アプリをウィザード操作でカンタンWEB化するデモをお見せいたします。
またスマホ対応はもちろん、新規アプリの作成やワークフローアプリの作成、グラフ表示、オフィス連携も全てWEBから作成が可能なとても完成度の高い製品になっております。
Aveedoで実際に作られたCRM、プロジェクト管理などの高度なアプリの数々に触れて頂くことで新しいNotes/Dominoの世界を感じて頂ければと思っています。
今日時点では、セッションはまだ空きがあるようです。 ご興味があるかたは是非イベント会場まで足をお運びください。
皆さんのご来場おまちしております。
弊社セッション
Track-A 会場
ドミノアプリをカンタンWEB化!業務アプリ作成ツール Aveedoのご紹介
7/27 13:00 - 13:45
様々な業務アプリをWEBで直感的に素早く作成できるドイツ生まれのソリューション、Aveedoのご紹介です。
当日はドミノ既存アプリをウィザード操作でカンタンWEB化するデモをお見せいたします。
スマホ対応はもちろん、新規アプリやワークフローアプリの作成、グラフ表示、オフィス連携も全てWEBから作成が可能。またAveedoで実際に作られたCRMなどの高度なアプリの数々もご紹介致します。
ケートリック株式会社
代表取締役
田付 和慶 氏
弊社展示ブース
Aveedo ~ドミノアプリを簡単WEB化、業務アプリ作成ツール~
欧州で話題の製品がついに日本上陸! Aveedoは様々な業務アプリを素早く作成できるドミノで動くソリューションです。
既存アプリをウィザード操作でカンタンWEB化、モバイルにも自動対応します。新規アプリやワークフローアプリの作成、グラフ表示、オフィス連携も導入10分で作成が可能。展示ブースではAveedoで作られたCRMやプロジェクト管理アプリなどのデモもお見せ致します。
【 開催概要について 】
日時:2016年7月27日(水曜日)13:00 – 13:45
場所:ソラシティカンファレンスセンター2階 東京都千代田区神田駿河台4-6 :会場へのアクセス
セッション情報:Track A会場 - [A-1]ドミノアプリをカンタンWEB化!業務アプリ作成ツール 「Aveedo」のご紹介
【詳細・お申込みについて】
IBM Connect Japan 2016イベントページ: http://ibmevent.jp/event/connect2016/
ドイツ、We4IT社との日本総代理店契約締結のお知らせ
このたび、ケートリック株式会社は、ドイツのWe4IT社(We4IT GmbH)と、日本における総代理店契約を締結し、平成28年6月15日より、同社の製品を販売する運びとなりました。 毎年数名のIBMチャンピオンを輩出しNotes/Dominoに対する高い開発力を誇るWe4IT製品を日本にお届けすることで、Notes/Dominoを基盤とした皆様のビジネスがより一層価値あるものになるよう努めてまいります。WE4ITの製品「Aveedo」ならびに弊社製品を引き続きご愛顧いただきますようよろしくお願いいたします。
カスタマーサポートに関するご案内
【We4IT 製品のサポートについて】
製品に関するお問い合わせにつきましては、弊社カスタマーサポートにて承ります。
2016年6月15日(水)より、
製品に関するお問い合わせは、下記の窓口にお願いいたします。
【お問い合わせ窓口】
ケートリック株式会社 カスタマーサポート
住所:〒141-0021 東京都品川区上大崎2-15-19 MG目黒駅前 512
TEL:(050)3553-7673
受付時間:土曜・日曜・祝日を除く平日午前9時から午後5時まで
IBM Watson Summit 2016 Day2にて講演を行います[F2-1]
IBM Notes/Domino で IoT - XPages on Bluemix の応用例 -
今年もIBMの全ソフトウェアブランドがカバーされたイベントが開催されます。去年まではIBM XCITEという名前のイベントでしたが今年はIBM Watson Summitという名前に替わり開催されます。
Watson Summitという名前からNotes/Dominoを含めるESS(旧ICS)製品の関連性があまり想像されませんが、そんなことはありません。
セッションを見ているとNotes/Dominoが深くかかわっているIBM Verseのセッションなども用意されています。
そして、弊社代表 田付 和慶もIBM 佐藤 淳氏、ソルクシーズ株式会社 吉田 武司氏、株式会社エフ 御代 政彦氏と「IBM Notes/Domino で IoT - XPages on Bluemix の応用例 -」と題したセッションを行います。
Notes/Dominoを使った新たな試みとしてBluemix上のXPAGES、IBM IoT Foundationを使い実際のビジネスアプリケーションとしてあると便利な機能をデモを交えてご紹介いたします。
皆さんのご参加をお待ちしております。
【 開催概要について 】
日時:2016年5月26日(水曜日)13:15 - 14:00
セッション情報:第11会場 [F2-1]IBM Notes/Domino で IoT - XPages on Bluemix の応用例 -
場所:東京都港区高輪3-13-1 グランドプリンスホテル新高輪 国際館パミール :会場へのアクセス
【詳細について】
IBM Watson Summit 2016イベントページ: http://ibmevent.jp/watsonsummit2016/
IBM Connect 2016 XPAGES 最新動向 Part 3 - XPAGESトラブルシューティング
前回2回に渡りIBM Championがスピーカーを務めるセッションにフォーカスを当てたレポートブログを紹介してきました。
今回はPaul Withers氏の「"Marty, You're Just Not Thinking Fourth Dimensionally": Troubleshooting XPages」のセッションに参加した内容を振り返りたいと思います。
このセッションではStackoverflowで寄せられた質問などをもとにXPAGESでの間違ったアプローチの紹介やトラブルシューティングの方法などノウハウ情報を満載の内容となっていました。
また、このセッションではXPAGESの基礎知識を持っていることが前提になっており「XPAGESを既に使っている人は挙手してください」と質問すると会場のほぼすべての人が手を挙げていたのも印象的でした。 そして前列に座ったIBM Champion達が突っ込みを入れながらさらに話がディープに進んで行くのもIBM Connectのセッションならではの光景です。
documentidプロパティでは常に式言語(EL)を使うこと
このセッション内の数あるトピックの中でも全てのXPAGES開発者が知っておくべきノウハウであり、知らずにやってしまいがちな落とし穴であると思ったのがこの「documentidプロパティなどでは常に式言語(EL)を使う」ということでしたので、私自身でテストしたサンプルコードを交えてこのトピックを掘り下げて紹介したいと思います。
※ちなみに式言語(EL)とは${...}もしくは#{...}で始まるコードの事で#{javascript:...}ではないことと区別しています。
Stackoverflowのこちらのリンク「Why does this code write out TWO documents?」でPaul氏が自ら回答している内容にも絡んでいるのですが、Paul氏が指摘するには、式言語(EL)を使わなければページロード時にdocumentidのプロパティ計算ロジックが4回も呼ばれてしまうと指摘しています。
まずはこちらに用意したサンプルコードを見てください。
Domino文書データソースを定義する箇所でdocumentIdプロパティに対して値の計算をしています。
UNIDを引っ張ってきたいのでViewを取得して文書を取得してそのUNIDを返すというロジックになります。
如何でしょうか? 皆さんもこれに似たロジックを書いた経験はないでしょうか?
このサンプルには1つの致命的な問題と2つの推奨されないコードが含まれています。
1つ目の致命的な問題とはbeforePageLoadにてviewScopeの変数をセットしデータソース内でそのviewScope変数を利用しているという箇所です。
これはデータソースのほうが先にプロセスが走りその後にbeforePageLoadのプロセスが走るため5行目のviewScope.selectedPageが意図したとおりに設定されずサーバーエラーを起こしてしまいます。
そこでひとまず問題を解決するために以下のようにコードを書き換えます。
beforePageLoadでのviewScopeの利用をやめ、8行目にビューの値をハードコードで渡してやりました。これでとりあえずサーバーエラーは回避され、見かけ上は意図したとおりにブラウザでこのコードを表示されるでしょう。
推奨されないコード その1
しかし、このコードにはまだ推奨されないコードが含まれており、試しにブラウザでこのコードを表示してみるとAdministratorのコンソールに以下のような出力があることが確認できます。
HTTP JVM: doc found HTTP JVM: doc found HTTP JVM: doc found HTTP JVM: doc found
このように、documentIdの値の計算の処理が4回も呼び出されています。これこそが今回Paul氏が指摘する問題の箇所になります。
Paul氏によると4回も呼び出される理由は以下のようになります。
式言語(EL) 【${...}もしくは#{...}】を使わなかった場合、documentIdのようなプロパティを
- Panel内に追加した場合、beforePageLoadの後に2回呼び出される
- XPage内に追加した場合、beforePageLoadの前に2回呼び出される。(このときbeforePageLoadで追加したscope変数は使えない)
- 常にrender response時に2回呼び出される
ということで、上記サンプルの場合4回呼び出されるということになります。
そこで回避策として式言語(EL)を利用することでこの問題は回避されます。
以下に1回のみ呼び出される式言語(EL)を利用したサンプルコードを追加します。
このコードをadministratorコンソールで確認すると
HTTP JVM: doc found
のように1回しか呼び出されていないことが確認できます。
また、式言語(EL)で「動的に計算」を利用しているため、beforePageLoadで設定されたscope変数が利用できていることにも注目してください。
documentId="#{viewScope.docId}"
の箇所が
documentId="#{javascript:viewScope.docId}"
では意図した動作になりません。
推奨されないコード その2
Domino文書のデータソースを定義する際にignoreRequestParams="true"を明示的に定義してやらないとURLパラメータのdocumentIdで指定された値が常に優先されるため、このようなロジックを書くときはignoreRequestParams="true"を明示的に定義してやるべきです。
こんな事例が沢山
今回はこのブログを書くにあたってPaul氏の指摘を深堀して実証実験を行ってみましたが、実際にPaul氏のセッションではこれに似た内容がいくつもスライドとデモで紹介され、どれもがものすごいスピードで紹介されるためはっきり言ってついていくのがやっとな状態のかなりレベルの高い内容となっていました。
1年を通してStackoverflowでいくつもの質問に対して回答をしているPaul氏ならではのノウハウの詰まったセッションであっただけに、今回のセッションに参加できただけでもIBM Connectに来た甲斐があったと思える、そんなセッションでした。
なお、こちらのセッションのスライドは既に公開されており、こちらより確認できます。
http://www.idonotes.com/IdoNotes/IdoConnect2013.nsf/dx/1279a-marty-youre-just-not-thinking-fourth-dimensionally-troubleshooting-xpages-2016.htm
Chris Millerさんのサイトでその他のセッションを含めLotusphere 2013からのセッションがタイトル別にまとめられています。既に2016年のセッションもいくつか登録されているようなので確認してみてください。
IBM Connect 2016 XPAGES 最新動向 Part 2 - 外部連携
前回のIBM Connect 2016レポートブログでIBM Championがスピーカーを務めるセッションが熱いと題し、Single Page ApplicationをXPAGESで作るセッションやモダンなXPAGESアプリケーションを作るためのライブラリ群などの紹介をしました。
XPages,Javaを使って外部システムと連携
今回はIBM ChampionであるJulian Robichaux氏とKathy Brown氏による「AD-1387 Outside The Box: Integrating with Non-Domino Apps using XPages and Java」のセッションに参加した内容を振り返ってみたいと思います。
XPAGESとJavaを使ったDomino以外のアプリケーション連携ということでCSV、XML、JSONのデータを様々な手法で連携する方法を紹介していました。また後半ではIBM Social SDKやOAuthやQUICKBASEを使った連携、RDB連携にも触れまさに外部連携を網羅する内容になっていました。
CSV操作 - OpenCSV
手始めにCSVの扱い方から説明が始まりました。今更CSVの話なんて聞きたところでなにも面白くないだろうと思い、このセッションに参加したことを少し不安に思っていたところ、そこはやっぱりIBM Champion達。XPAGESでCSVに限らずメタデータを扱うときはJava Bean(Modelクラス of MVC)を作りましょう、とCSVは単なる滑り出しのためのトピックであり、実際はどんどんとディープな内容で進んで行きました。
Java Beanのサンプルは以下のようになります。
そして、CSVの読み込み自体はOpenCSVというライブラリを使うという内容でした。ここで注意点は最新版のVersion 3.6はJava 7+となっており、依存関係の問題からJava 6を使っているDomino 9.0.2 FP4ではVersion 2.3を使うことになります。
こちらにOpenCSVを使ったサンプルコードを載せておきます。
XMLをパースするためのJAXB
こちらのソリューションは既にJava 6+に含まれているためインストールの必要はありません。利用の仕方はJava Beanの記述にアノテーションを利用しどのフィールドがXMLのどのエレメントにマッピングされるかを明示してやります。
サンプルコードは以下のようになります。
JSONのパース
JSONのパースにはXPAGESライブラリにあるcom.ibm.commons.util.io.json.JsonParserを使うことが出来ます。この時点でJavaカスタムオブジェクト(=上記で紹介したようなJava Bean)ではなくJava Maps、ListにJSONデータがパースされるためJava Beanを生成するには別途アンマーシャル(JSONからJava Beanを生成するプロセス)が必要ですが、ここではGSONやFlexJSONなどに触れつつDominoで利用する場合にセキュリティの問題が起こることになるため独自でアンマーシャルを記述する方法を紹介していました。
アンマーシャルのロジック自体はありませんが、JSONをパースする呼び出し部分は以下のようになります。
JAXBを使ったJSONのアンマーシャルもネットではいくつもサンプルコードが公開されていますので、それと合わせてXPAGES用の独自アンマーシャルコードを作ってみるのがいいと思います。
XAGENT, REST, SocialSDKと内容がてんこ盛り
CSV、XML、JSONのパースとJava Beanによるデータ格納を説明し終えた後は、実際のデータ取得方法としてXAGENTでInputStreamを使い外部システムへのアクセスの説明があり、取得後のObjectをXPAGESへ出力する説明があり、次にRESTでのアクセス方法からSocialSDKを使った連携ではOAuthに触れ、最後にQuickbaseと呼ばれるサービスを使った連携方法まで、まさにこれさえ聞けばXPAGESのシステム連携は基礎はしっかりと抑えられる内容になっていました。
このセッションの内容を全てブログに書き起こすとものすごいボリュームになってしまうため後半の説明は割愛しますが、もし興味があれば「AD-1387 Outside The Box: Integrating with Non-Domino Apps using XPages and Java」のセッション資料がいずれ公開されると思いますので時間をおいて確認してみてください。
IBM Connect 2016 XPages最新動向
IBM Championのセッションがとにかく熱い!
日本からIBM Connect 2016に参加してい我々やIBM Championのチームスタジオ 加藤さんなどからIBM Connect 2016の最新情報などが少しずつ発表されていますが、Notes/Dominoに関するホットな最新情報は残念ながらほとんどありません。
そのため例年では当たり前のようにある、新しい機能を説明するセッションやDeep Diveと題して新しい機能を掘り下げて説明するセッションなどがさほど見当たらず、その代わりにIBM Championがスピーカーを務めるテクニカルセッションが多く用意されているように感じています。
XPAGESは進化を続ける!
Notes/Dominoの新機能がさほどないとしても、それはXPAGESの停滞を意味するものではない、ということをIBM Championのセッションを受けるとヒシヒシと感じることが出来ます。
すでにXPAGESはWEB技術と共に進化を続けることができ、XPages Extension Libraryに代表されるように、その進化は既にIBM Champion達を始めとしたコミュニティの力に委ねられていると言っても言い過ぎではないはずです。
IBM Championがスピーカーを務めるセッションでデモされるXPAGESアプリはDomino標準のXPAGES機能では実現することが出来ないようなモダンな作りになっており、どのセッションも観客の食いつき度合いが全く違います。
今回は、XPAGESのセッションに参加して得ることが出来た最新動向をザックリとですかお伝えしたいと思います。
The XPages of Things: Integrate Bluemix with Your XPages Applications for a World of Possibilities - 1075A
1月31日BP Summitのセッションです。 IBM ChampionのJohn Jardinさんによるセッションでした。
このセッションではBluemix、Node-RED、XPages、Websocketの技術を使いTwitterのつぶやきをつぶさに取得しXPAGESで作られたページに表示するというデモが行われました。
実はこのアプリの中にもモダンなWEB技術が多数盛り込まれていましたが、その技術の説明を次にあるセッションで詳しく解説してくれました。
Optimus XPages: An Explosion of Techniques and Best Practices - 1074A
2月1日のセッションで、このセッションもまたIBM ChampionのJohn Jardinさんによるセッションでした。
このセッションでは「Single Page Application」をXPagesで作成するという開発手法を説明していました。
「Single Page Application」というものはブラウザでページを一度読み込んだあとは、全て部分更新(AJAX)によりビュー表示、文書参照画面、編集画面、そしてその画面遷移をさせてしまう手法で彼のデモアプリにXPAGESは1つしかなく、全てインタラクティブに機能が構成されていました。
その技術を支える主な機能として、OpenNTF Domino API の利用を紹介していました。
OpenNTF Domino APIには以下の特徴があります。
- Domino Object Classesの拡張
- クイックインストールと設定
- JavaでDomino Objectのリサイクルが不要
- マルチスレッドプロセス
- XOTS (これについては別の機会に説明したいと思います)
そして、「Single Page Application」を実装するためにJavaによるMVCモデルを採用しており、全てのドキュメントをModel Java Classで機能させるところから始まります。
個人的な意見としては、このアプローチは決して簡単な開発手法ではなく、フォームという考えようによってはそれ自体がModelと位置付けることが出来るものをわざわざJavaで格納しなおすためにModel Classを用意しています。
これにはなによりSingle Page Applicationの実現に必要であることと、MVCモデルによる開発は慣れるとModel Class1つ作るぐらいはささっと出来てしまえるので、その点でデメリットよりメリットが大きく上回るという判断であると思います。
ViewはXPagesを使いControllerをJavaとSSJSで実装していくというイメージです。
ただ、これだけではモダンなSingle Page Applicationを作ることは出来ないはずで、その肉付けとしてUX部分に様々なWEB技術を取り入れていましたので、以下にその機能の一覧を羅列します。
- Twitter Bootstrap : いまやレスポンシブ対応の定番中の定番になってきていますね。
- Animate.css : モダンなアプリにあるさりげなく表示されたりするアニメーションの実装に一役かっています。
- Toastr : アラートダイアログのようにユーザーの処理をブロックすることのない通知機能
- Font Awesome : Vectorアイコンの集合体で利用がとても簡単ですね。
- Sweet Alert : アニメーションのある綺麗なアラートを実装することが出来ます。
ほかにもホットなセッションが目白押し・・・
BPセッションを含め3日間で5つ以上のIBM Championのセッションを受けましたが、John Jardinさん1人のセッションを紹介した段階で結構なボリュームになってしまいましたので、ほかのIBM Championの濃いセッションはまた別のブログ投稿でお伝えしたいと思います。
明日はクロージングセッションを含むIBM Connnectイベント最後の日です。
最終日はUserBRASTやGURUpalooza、Ask the Developerのようなお祭りのようなセッションが多数用意されているので最終日を楽しみたいと思います。
IBM Champion 2016に任命されました
2015年11月24日にIBMよりメールが届き、自分がIBM Champion 2016に任命されたことを知りました。
今年でIBM Championとなるのは2年目となり、前年初めてIBM Championになった時の感動が思い起こされました。と同時にこれからもっとコミュニティの発展に寄与していけるようにと、改めて気が引き締まる思いです。
なお、日本から選出されたIBM Championは以下の4名です。
海老原 賢次 様 (リコーITソリューションズ株式会社)
加藤 満 様 (チームスタジオジャパン株式会社)
田付 和慶 (ケートリック株式会社)
御代 政彦 様 (株式会社エフ)
おめでとうございます! すでに皆さんがブログ等で言っていますが日本から選出された方が今年は6人から4人へ減ってしまいました。 IBM Championの選出基準がよりグローバルな視点へとシフトしたと聞いていますのでその影響は大きくあったのだと感じています。
自分は2015年、IBM Championとして初めての年を過ごしましたが、XPAGESDAYをはじめ、より積極的にスピーカーとしてセッションをさせて頂く機会がありました。
- IBM XCITE 2015 Spring (05/20/2015 Day2 OGS)
- XPagaesDay 2014 (11/18/2014 web session)
- Tek Tek Lotus, Feb 2015 (02/25/2015 IBM ConnectEd 2015 feedback session)
- Teamstudio Notes/Domino Web Seminar, April 2015 (04/22/2015 web session)
- Notes Shikoku Festa 2015 (10/23/2015 XPages and IBM Verse session)
振り返ると5回のセッションを行いましたが、やはり一番大きく緊張したのはIBM XCITE 2015 Springの基調講演の数十分間でした。ただおかげ様で何か一回り大きくなる機会を頂いたのだと感じています。
2年目のIBM Championとしての抱負・・・
例年通り、IBM側でIBM Champion を選出するにあたり以下の様なことを基準にしているとあります。
- IBM Collaboration Solutionsを広める
- 知識と専門技術の共有
- コニュニティへの貢献と成長の支援
- IBM ポートフォリオ全体に範囲を拡大
- ネガティブ、ポジティブ両方のフィードバックを建設的かつ専門的な方法で提供する
1年前、IBM Championとして日本発の情報を世界に発信することで、「日本のエンジニアもまだまだ世界に負けてませんよ!」という印象を世界に持ってもらいたい、ということを抱負として書かせていただきました。そこで行ったのが PlanetLotus.org へブログを登録し英語で情報発信を少しずつ行うということでした。 こちらの分はまだまだ不十分だったと反省点も残りますが、近いうちに英語でNotes/Dominoの技術を説明した動画配信なんてのも行いたいと考えています。
最近ではXPages on bluemixでドローンを操作するというセッションをXPagesDay2015で行ったので、それちらを英語で配信してもいいかもしれません。
2年目、引き続き”てくてくLotus”や”ノーツコンソーシアム”などをはじめコミュニティーへ貢献していきたいと考えております。 またNotes/Dominoを取り巻く環境もBluemixやXPagesの進化で様々なテクノロジーとの連携が強まり、より複雑さを増している気がします。沢山のエンジニアがNotes/Dominoを使い新しいものを生み出していけるよう、自分は新旧どちらのNotesエンジニアの視点にも立ち、少しずつ情報を発信し続けたいと思っています。
以上、2年目もどうぞよろしくお願い致します!
2015.11.18 XPagesDay 2015セッション 「XPagesとIoTでドローンを飛ばそう」
XPagesDayが今年も開催されます
2015年、今年のXPagesDayは11月17,18日にオンラインセッションが行われ、18日には、IBM箱崎で行われるNotesコンソーシアム「パートナーソリューションセミナー」に参戦する形で、昼から会場でのセッションが2つ用意されています。
Xpage on bluemixとIoT Foundationでドローンを制御!
弊社ケートリック 田付のセッションでは(株)ソルクシーズ吉田さんと共同で、Bluemix, XPages, IoTと旬のキーワードてんこ盛りにWebからジャイロ・モーションセンサー、WebGLを使いドローンを制御してみせます。
セッションで触れるテクノロジーの数々は以下の通りです。
- XPages on Bluemix
- IoT Foundations on Bluemix
- JavascriptでのMQTT通信
- Node.js
- Node RED
- WebGL
- スマートフォン、タブレットのジャイロ、モーションセンサー
現在も開発中のプロジェクトですが、一部公開するとこんな感じです!
お申込みは以下のリンクより「H1-3」をお選びください。
http://partner.cons20.info/portal.nsf/pages/pub
XPAGESDAY 2015 開催概要について
日時:2015年11月17日(火曜日)、2015年11月18日(水曜日)
場所:2015年11月17日オンライン、2015年11月18日はオンラインと 日本アイ・ビー・エム箱崎
スケジュール:
11 月 17 日 (火)
10:30~11:30 【初心者】Notes 技術者のためのはじめての XPages 講座
13:30~14:30 【中上級】REST の総復習
15:00~16:00 【初心者】誰も教えてくれなかったXPages のデバッグ方法。どうやるの?
11 月18 日 (水)
10:30~11:30 【初心者】Bootstrapと@式で作る簡単&CoolなXPagesアプリ
13:30~14:30 【中上級】実践!XPages on Bluemix
【オフ会】
15:05~未定 第1部 XPages on Bluemix で IoT を実感!XPages でドローンを制御、モニタリング
15:05~未定 第2部 今年も!? どこよりも早い XPages 最新情報
XPagesDay 公式サイト: http://xpagesday.com/xpagesday.nsf/home.xsp
■XPagesでドローンを飛ばす私のセッションは会場セッションになるため、こちらの申し込みフォームより「H1-3」を選択ください。
http://partner.cons20.info/portal.nsf/pages/pub
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