XPagesのRadio Button Groupから選択された値をクライアントJavascriptで取得する方法

Radio Button Groupを使うと簡単にXPagesでラジオボタンを実装することができます。
サーバーで選択された値を取得するためには、以下のようにデータバインド(Bind)してやることで実装が可能です。

SessionScopeの変数で値を受けるように設定した場合
SessionScopeの変数で値を受けるように設定した場合

 

XPages サンプル今回説明するのは、クライアントサイドJavascriptを使って、現在選択されている値を取得する方法を説明したいと思います。

右の画像が今回作るサンプルのXPagesのスクリーンショットになりますが、ラジオボタンを選択してボタンをクリックすると、クライアントJavascriptが現在選択されているラジオボタンの値(value)を返す、というものです。 言いかえると、サーバーを介さない本来のJavascriptでよく行うタイプの使い方を実装してみる、という試みです。

 

 まず、Radio Button GroupをXPagesに以下のように配置しました。

<xp:radioGroup id="radioGroupMember"
    value="#{sessionScope.SelectedName}">
    <xp:selectItem itemLabel="エレン" itemValue="エレン・イエーガー">
    </xp:selectItem>
    <xp:selectItem itemLabel="ミカサ" itemValue="ミカサ・アッカーマン">
    </xp:selectItem>
    <xp:selectItem itemLabel="アルミン" itemValue="アルミン・アルレルト">
    </xp:selectItem>
</xp:radioGroup>

 

次に、実際にクライアントJavascriptをトリガーするためのボタンを配置します。コードは以下のようになるとおもいます。

<xp:button value="" id="button1">
</xp:button>

 

配置がおわったら、ボタンを選択した状態で、「Events」タブの [onclick] にコードを記述していきます。
今回はクライアントJavascriptですので、[client]のタブが選択されているのに気をつけてください。

サンプルのJavascriptは以下のようになります。

var chkRadioMember = dojo.query("input[name$='#{id:radioGroupMember}']");
for(var i=0; i < chkRadioMember.length; i++){
    if(chkRadioMember[i].checked){
        alert(chkRadioMember[i].value +"であります!");
    }
}
return false;

 さて、お膳立てはできましたので、早速このコードの解説に移ります。

このコードの肝はなんといっても一行目です。

まず、dojo.query を使って効果的にラジオボタンのDOMオブジェクトの取得を試みています。

dojo.queryの引数に"input[name$='hogehoge']"   とすることで、INPUT要素でname 属性がhogehoge であるDOMオブジェクトを配列で返す、となっています。

なぜ、このような指定の仕方をしているのか?

実際にXPagesが生成するHTMLのソースコードを覗いてみると以下のようになっているのが確認できます。

Firebugを使ってXPagesが生成したHTMLを確認
Firebugを使ってXPagesが生成したHTMLを確認

この緑で囲んだ部分 「view:_id1:radioGroupMember」と全て同じ値となっています。

ですので、INPUT要素でname 属性が「view:_id1:radioGroupMember」となっている全てのDOMオブジェクトを返して欲しいために、このような記述としているのです。

 

これで、ラジオボタンのDOMオブジェクトを全て取得できましたので、あとはChecked属性が付いている要素を探せばOKです。

クライアントJavascriptでRadioボタンの値を取得する方法の説明は以上になります。

 

 

ん、ちょっとまてよ? と思われた方 (ギクッ)

 

そうなんです、 実は1行目のサンプルコードは

var chkRadioMember = dojo.query("input[name$='#{id:radioGroupMember}']");

であって

var chkRadioMember = dojo.query("input[name$='view:_id1:radioGroupMember']");

ではないのです。

 

この#{id:radioGroupMember} という値はどこから来たのか?

 

実はこの#{id:hogehoge}というフォーマットで記述されたコードはHTMLがブラウザに表示される前にサーバー側で 'view:_id1:radioGroupMember' といった値に動的に変換されることになっています。

 

今、「はぁ~?」 と思われた方、実際に言っちゃった方、・・・いや、お気持ちはよく分かります。 (ちょっといきなりのブログで難易度高いの選んでしまったとここで後悔)

 

 この部分、次回のブログで詳しく説明していきたいと思います。

 

今回の例では、上記で作ったRadio Button GroupのコントロールIDを使って#{id:radioGroupMember} と指定している、となっています。

<xp:radioGroup id="radioGroupMember" ← このID

 

ちょっと腑に落ちない終わり方になってしまいましたが、是非次回をお楽しみに(苦笑)

<<こちらに追加の記事を書きました>>

 

最後に今回使用したXPagesのソースコードを全て貼り付けておきます。

[toggle title="XPagesの全てのソースコードを表示するにはここをクリック"]

<?xml version="1.0" encoding="UTF-8"?>

<xp:view xmlns:xp="http://www.ibm.com/xsp/core">

<xp:radioGroup id="radioGroupMember"
value="#{sessionScope.SelectedName}">
<xp:selectItem itemLabel="エレン" itemValue="エレン・イエーガー">
</xp:selectItem>
<xp:selectItem itemLabel="ミカサ" itemValue="ミカサ・アッカーマン">
</xp:selectItem>
<xp:selectItem itemLabel="アルミン" itemValue="アルミン・アルレルト">
</xp:selectItem>
</xp:radioGroup>

<xp:button value="誰だ、貴様は?!" id="button1">
<xp:eventHandler event="onclick" submit="false">
<xp:this.script><![CDATA[var chkRadioMember = dojo.query("input[name$='#{id:radioGroupMember}']");
for(var i=0; i < chkRadioMember.length; i++){
if(chkRadioMember[i].checked){
alert(chkRadioMember[i].value +"であります!");
}
}
return false;
]]></xp:this.script>
</xp:eventHandler>
</xp:button>
</xp:view>

[/toggle]

 


ロータスノーツ xpages

今年こそXPagesを習得したい方へ、日本でXPagesを始めるための情報サイト

XPagesを始めるためにまず情報を収集しよう

「XPagesって知ってるけど、業務が忙しくて中々勉強する時間が持てない」

「XPagesを勉強しようにも日本語の情報がまだまだ少ないんじゃないの?」

「XPagesを始めるための環境設定が面倒くさいんでしょ?」

 

そんなことを思いつつも「今年こそXPagesを使ってみるぞ」とやる気が湧いてこのページに辿り着いた人のために今回はブログを書いてみました。

IBM XPagesを習得するためのハードルはそんなに高くありません。
DominoとDomino Designerをインストールするだけで簡単にXPages開発を始めることが可能です。
XPagesが世に出てすでに5年目、沢山のサイトから情報を収集できるようになりました。自分自身も日本のXPagesコミュニティを知るようになって、実際に本当に沢山の日本語でのXPages情報が上がっていることに驚いています。今回はそんな日本人に役に立つXPagesの情報発信しているサイト、コミュニティを紹介してみます。

 

カテゴリー

[list_ordered]

[/list_ordered]

 

スペシャルイベント

[list_marked]

  • XPagesDay 2013

    XPagesDay 2013 http://xpagesday.com/

    [box_info] まもなく始まるXPagesDay。11月 6日、7日、 8日の 3 日間行われるXPagesのためイベントです。
    前半2日はWEBセッションとなっているため、全国から参加出来るイベントとなっているのが嬉しいですね。
    今年もXPagesの技術をはじめ、DojoやOpen Socialの技術なども含まれた見逃せないセッションが沢山あります。
    ケートリックからも「XPagesによる提案事例」として3日目にセッションを行ないますので興味ある方は是非ご参加下さい。  [/box_info]

[/list_marked]

 

コミュニティ

[list_marked]

  • テクてく Lotus 技術者夜会

    テクてく Lotus 技術者夜会

    http://www.ibm.com/developerworks/jp/offers/events/techtech01/

    [box_info] Domino系の技術者の中でもやはり最近の感心事といえば「XPages」。そんな技術者の方が夜な夜な集まりいろんな情報交換をしている場です。会自体は、前半、後半2つにわかれたセッションがあり、IBMの方やビジネスパートナーの方々が講師をするような形で進行します。合わせて2時間のセッションの後はわいわいと居酒屋で懇親会。 この懇親会を目当てに参加されている方々も多数いるとかいないとか。 私自身も毎月参加させて頂いています。 [/box_info]

  • XPages 技術者 コミュニティー

    XPages 技術者コミュニティー

    https://www.ibm.com/developerworks/mydeveloperworks/groups/service/html/communityview?communityUuid=f7384262-0ce6-4adf-b0fa-7f5e54c6c72a

    [box_info] こちらのコミュニティーサイトでXPages技術者がXPagesに関する情報共有やディスカッションを行っています。なにか分からないことがあればここに質問してみたら答えてもらえるかも [/box_info]

[/list_marked]

 

ソーシャル

[list_marked]

  • XPages Extension Library Japan Facebookページ

    XPages Extension Library Japan Facebookページ

    https://www.facebook.com/extlibj

    [box_info] こちらはXPagesをもっと便利に使いやすくするライブラリである「XPages Extension Library」の日本版を広めるためのフェースブックページです。
    XPages Extension Library Japanに携わっている開発者の方々をはじめXPagesに興味がある方がフォローしています。XPagesを使う上で便利なこのライブラリを使わない手はないので、是非フォローしてホットな情報をキャッチアップして下さい。 [/box_info]

  • IBM XPages Japan Facebookページ

    IBM XPages Japan Facebook Page

    https://www.facebook.com/xpagesjapan

    [box_info] こちらのフェースブック ページではXPagesの情報やIBMのソーシャルビジネスに関する情報が発信されています。 ソーシャルビジネス エバンジェリストのイケヤマ君が肩の力の抜けたいい感じの投稿をしてくれています。[/box_info]

  • XPageDays Facebookページ

    XPagesDay Facebookページ

    https://www.facebook.com/xpagesday

    [box_info] 最初に紹介したXPagesDayイベントのフェースブック ファンページです。 XPagesDayの公式サイトでは触れられていない講師陣の紹介や新しい情報を投稿しています。 XPagesDay開催の最中はこちらでも様々な情報が投稿されるはずですのでフォローしておいて損はなし。[/box_info]

[/list_marked]

 

ポータルサイト、Wiki、チュートリアル・記事

[list_marked]

[/list_marked]

 

いかがでしたでしょうか?

自分も日本のXPagesコミュニティーのことを1年前までほとんど知らなかったので、まだまだ便利なサイトは沢山あるとおもいます。 もしオススメのサイトがあれば是非コメントにて紹介して下さい。

他にもIBMチャンピオンの方のブログなど様々な有益なサイトが存在しますが、あまり多くなりすぎても良くないのでブログ、Twitter編は次回に回したいと思います。

実際にブログとTwitter、FacebookでいろんなXPagesの方と会社の垣根を超えて繋がっていけるとXPagesの開発のハードルももっと簡単になっていくとおもいます。 ソーシャルネットワークという便利なツールがある今の世の中ですから是非活用していきたいですね。


VPS上のNginxサーバーにGeoTrustのQuickSSL Premiumを設定する方法

blog-img

概要

VPS上で動くNginxサーバーにGeoTrustのQuickSSL Premiumを設定する。
試験環境ではVPSにCentOSを利用。
GeoTrustのQuickSSL Premiumは日本ではなくアメリカのサイトから購入。(1年149ドル)

SSL導入の流れ

  1. [VPSサーバー] サーバーで秘密鍵を生成する
  2. [VPSサーバー] 秘密鍵を使って、Geotrustに申請するためのCSRファイルを作成する
  3. [WEB] GeoTrustにQuickSSL Premiumを申請
  4. [WEB] 申請完了後、中間証明書とサーバ証明書を取得
  5. [VPSサーバー] GeoTrust中間証明書とサーバ証明書をつなぎあわせて1つのファイルにする
  6. [VPSサーバー] 秘密鍵とつなぎあわせた証明書をnginx.confに読み込ませる
  7. [VPSサーバー] Nginxサーバーをリスタート (iptablesを使っている場合は443ポートをAccept)
  8. [WEB] httpsでアクセスしてエラーが出ていないかチェック

1. サーバー用秘密鍵・証明書の作成

# cd /etc/pki/tls/certs/
# sed -i 's/365/3650/g' Makefile
# make mydomain.com.crt
umask 77 ; \
        /usr/bin/openssl genrsa -aes128 2048 > mydomain.com.key
Generating RSA private key, 2048 bit long modulus
...........................................+++
................................................+++
e is 65537 (0x10001)
Enter pass phrase: ⇐ 任意のパスワード
Verifying - Enter pass phrase: ⇐ 任意のパスワードを再度入力
umask 77 ; \
        /usr/bin/openssl req -utf8 -new -key mydomain.com.key -x509 -days 3650 -out mydomain.com.crt -set_serial 0
Enter pass phrase for mydomain.com.key: ⇐ 任意のパスワードを再度入力
You are about to be asked to enter information that will be incorporated
into your certificate request.
What you are about to enter is what is called a Distinguished Name or a DN.
There are quite a few fields but you can leave some blank
For some fields there will be a default value,
If you enter '.', the field will be left blank.
-----
Country Name (2 letter code) [XX]:JP ⇐ 国名
State or Province Name (full name) []:Nagano ⇐ 件名
Locality Name (eg, city) [Default City]:Nagano ⇐ 市区町村
Organization Name (eg, company) [Default Company Ltd]:mydomain.com ⇐ 会社名(なんでも可)
Organizational Unit Name (eg, section) []: ⇐ 空
Common Name (eg, your name or your server's hostname) []:www.mydomain.com ⇐ SSL対応させるドメイン
Email Address []:webmaster.mydomain.com ⇐ 管理者メールアドレス

 2. 秘密鍵を使って、Geotrustに申請するためのCSRファイルを作成する

上記の操作でmydomain.com.keyというファイルが同階層に出来たので以下のコマンドを使ってサーバー用秘密鍵からパスワードを除去

# openssl rsa -in server.key -out server.key

次に、以下のコマンドを使ってCSRファイルを作成

># openssl req -new -key mydomain.com.key -out mydomain.com.csr

 3. GeoTrustにQuickSSL Premiumを申請

今回は、日本のGeoTrustではなく米国のGeoTrustから購入 → http://www.geotrust.com/ssl/ssl-certificates-premium/

幸い、申請サイトは日本語にも対応しています。

Step1) SSLの有効期限を指定

 QuickSSL Premium01

 

Step2) 管理者、技術者の情報を入力

QuickSSL Premium02

 

Step3) CSRデータを貼り付け

QuickSSL Premium03

 

Step4) ドメイン名が合っているか確認

QuickSSL Premium04

 

Step5) CSR情報が合っているか確認

QuickSSL Premium05

 

Step6) 証明書の情報を受信できる生きているEmailアドレスを選択する必要があります

QuickSSL Premium06

 

Step7) 支払情報を入力

QuickSSL Premium07

 

Step 8) 認証のために電話番号を登録して、自動ガイダンスの電話が掛かってくるのを待ちます。

自動ガイダンスが流れたら、画面下に表示されている番号を入力して#を押します。

認証に成功すると自動で画面が次に遷移します。

Step9) 申請完了です。

4.申請完了後、中間証明書とサーバ証明書を取得

送られてくるメールから、以下のページにたどり着くことができます。

QuickSSL Premium08

 

このUser Portal という画面の左メニューから「View Certificate Information」を選択します。

そして、以下の画面からGetTrust中間証明書とサーバ証明書を取得します。

・上のDownloadボタン(もしくはShow Certificateリンク)からサーバー証明書情報を取得します。
※フォーマットはX.509 Certificateで問題ありません
※ファイル名を mydomain.com.crt とします。

・下のDownloadボタン(もしくはShow Certificateリンク)からGetTrust中間証明書情報を取得します。
※フォーマットはApache Bundleで問題ありません
※ファイル名を geotrust.crt とします。

QuickSSL Premium09

 

5. GeoTrust中間証明書とサーバ証明書をつなぎあわせて1つのファイルにする

自分の場合は、上記の2ファイルを /etc/ssl/certs/ に置きました。
次に、catコマンドで2つのファイルを1つにします。

#cat mydomain.com.crt geotrust.crt > mydomain.com.chained.crt

 6. 秘密鍵とつなぎあわせた証明書をnginx.confに読み込ませる

/etc/nginx/nginx.conf を編集します。

server {
 listen 80;
 listen 443 ssl;
 # 秘密鍵 (cert. key)
 ssl_certificate_key /etc/pki/tls/certs/mydomain.com.key;
 # 合体証明書
 ssl_certificate /etc/ssl/certs/mydomain.com.chained.crt;
 //以下略

7. Nginxサーバーをリスタート (iptablesを使っている場合は443ポートをAccept)

# /etc/rc.d/init.d/nginx restart

 8. httpsでアクセスしてエラーが出ていないかチェック

ブラウザでサイトチェックして、鍵のマークが正常に表示されていたら成功です。

鍵が外れているようなアイコンが出る場合はHTTP通信を行っている可能性が高いので、ソースコードを見直します。


XPagesDay 講師として参加します

XPagesDay 2013

XPagesのためのコミュニティイベント「XPagesDay」が今年も開催されます。

去年は1日だけだったのが、今年はウェブセッションを含めて3日間に大幅拡大!

開催は2013年11月6,7,8日の3日間

日本のIBMチャンピオンの方々、XPagesをよく知るコミュニティの方々が講師陣を務めて、今年もXPagesを使った様々なセッションが催されます。

専用HPからセッションのお申込みが行えます。こちら→http://xpagesday.com/xpagesday.nsf/home.xsp

 

そんなXPagesのお祭りイベントに、なんと私も講師として参戦させていただくことになりました!!

自分のセッションは11月8日 14:00から行われる

「【C-3】ジャンボフェリー 予約システムの事例からみるXPagesを使った提案・開発の概要」

こちらのセッション、クロージングセッションにも使われるコムチュア株式会社様の会議室をお借りした会場でのセッションです。

(想像すると、今から既に緊張しています)

なお、こちらが自分のセッションの概要、

[blockquote]Notes/Dominoは社内向けのグループウェアであるという常識を打ち壊します!
実際に一般利用者向けに稼働しているジャンボフェリー 株式会社様の予約システムの導入事例を元に、提案、開発の手法を開発者自らご紹介します。

全くNotes/Dominoを知らないお客様に、どのようにXPagesを使ったWEBアプリケーションを提案していったのか。
一般向けのWEBアプリケーションでよく見る「アカウントの自動登録」や「ポップアップ式のログインフォーム」、「ショッピングカートのようなページをまたいだ予約」、「リアルタイムな予約状況の確認」などをXPagesでどのように実装していったのかを易しく解説していきます。

 田付 和慶 (KTrick合同会社)[/blockquote]

その他のセッションなど詳細情報はこちらのページまで → http://xpagesday.com/xpagesday.nsf/sessions.xsp

自分のセッションでは、XPagesを使えばこんな新しいシステムが出来てしまう、ということを少しでもお伝え出来たらと思っています。

世間では様々なRAD 【 Rapid Application Development 】 な環境が整ってきていて、個人的に好きなCakePHPもそうですが、そんな流行りのフレームワークにも負けないXPagesの優位性や拡張性を解説していく予定です。

このセッションの後に少しでも多くの方が、XPagesを使ってなにかアプリケーションを作ってみたいと思ってもらえるように頑張ります。

またシステム開発の打合せの場面で、XPagesを使った提案が少しでも増えるようになるといいですね。