祝! IBM Connect 2017開催!!

いよいよ本日からアメリカ　サンフランシスコでIBM Connect 2017が開催されます。
もちろん現地時間ですが・・・。

日本からもIBMチャンピオンはじめ、たくさんの方が参加されており、既にフェイスブックやツイッターを通じて、情報が飛び交っております!!
ぜひ「いいね」や「コメント」等で盛り上げていきましょう!!

さて実際の内容についてですが、サイトを見るかぎり、かなり濃厚なスケジュールのようですが、なにせ英文なもので・・・。

ということで、詳しくは参加された皆様による、【日本語】による報告に期待しております!!

ちょうどノーツコンソーシアム FESTA 2017も2週間を切りましたので、その際には多少なりとも情報が頂けるものと思います。

ノーツコンソーシアム FESTA 2017もまだ参加できるのではないかと思いますので、ぜひお時間ございましたらご検討ください。
本会はオープンになりますので、コンソーシアム会員の方以外でもご参加可能です。

終了後に毎回大盛況の懇親会も予定されておりますので、こちらもあわせてご参加頂くことを強く推奨致します!!


ということで、本日はConnect及びFESTAのご紹介とさせて頂きます。

【第6回】タイムレコーダーアプリ作成～部署ページの作成 その3～

皆様、こんにちは!!
昨日はひさしぶりに神戸バレンタインラブランにて、たった3km走って筋肉痛と格闘中の筆者です。
少しずつ夜明けも早くなり、梅もほころびはじめ・・・。
春が待ち遠しい限りです～。

さて前回はカスタムコントロールを使用し、1部署のページを仕上げました。
今回は残りのカスタムコントロールを作り、XPageへの埋め込みを行います。

特に見ていただきたいのは、XPageの再利用によるカスタムコントロールの切り替え部分になります。

それでは早速ですが、前回作成したカスタムコントロール XcWork_1をコピーし、XcWork_2という名称に変更します。

XcWork_2をデザイナーで開き、まずはデータで関連付けられたフォームを変更します。

プロパティのデータタブを開いてください。

フォーム：　のプルダウンを【出社_営業1部　- Work01】から【出社_営業2部　- Work02】に変更します。

続いて、先頭のラベルを【営業1部】から【営業2部】に変更します。

以降、各個人ボタンの設定は前回と同様です。

左のボタン

ラベル：　長○　佑都

イベント1行目の値：　長○　佑都

イベント3行目の確認テキスト：　長○　佑都　様、おはようございます。

中央のボタン

3箇所の名前を内○　篤人に変更

右のボタン

3箇所の名前を遠○　保仁に変更

以上で完成です。

続いて退社のカスタムコントロールを作成します。

XcWork_1をコピーして、XcLeave_1と名称変更します。

そのままデザイナーで開いてください。

冒頭のラベルですが、現在は出社の色にあわせた青になっていますが、同じように退社にあわせた茶色にします(もちろん必須ではありません)。

続いて【戻る】ボタンのイベントが現在は出社ページに設定されていますので、退社ページに変更します。

開くページの名前：　m_XpLeave

先と同様、カスタムコントロール(選択されていなければ、画面の背景部分もしくは左のアウトラインで選択)のデータタブにて、

フォーム：　退社_営業1部 - Leave01

に変更します。

各ボタンのイベントですが、それぞれ1ヶ所だけ変更します。

3行目　アクションの確認：○○　様、お疲れさまでした。

以上で完成です。

同様にXcWork_2からXcLeave_2も作成してください。

以上で4つのカスタムコントロールが完成しました。

それでは本日のメインである、XPageの再利用について、説明致します。

m_XpWork_1をコピーし、新たにふたつのXPageを作成します。

それぞれ名称は

m_XpWork_2

m_XpLeave_1

とします。

まずはm_XpWork_2を開いてください。

中央のカスタムコントロール部分(もしくはアウトラインのXcWork_1)を選択し、ソースタブに移動します。

前回も見ていただきましたが、XPageのソースでは、カスタムコントロールの指定はたった1行、

<xc:XcWork_1></xc:XcWork_1>

で行われています。

すでに"ピン!"と来た方もいらっしゃると思いますが、このタグを

<xc:XcWork_2></xc:XcWork_2>

に変更し、設計タブに戻ってください。

カスタムコントロール部分が営業2部のXcWork_2に変更されていることがわかります。

(アウトライン部分も変更になっています)

以上で完了です。

続いて　m_XpLeave_1です。

こちらは先頭の表内が「出社」となっており、背景も青になっていますので、「退社」・背景：茶色に変更します。

同じようにソースタブで<xc:XcWork_1></xc:XcWork_1>を

<xc:XcLeave_1></xc:XcLeave_1>

に変更します。

同様にm_XpLeave_1をコピーし、m_XpLeave_2を作成してください。

以上で各部署のカスタムコントロールとXPageが完成しました。

いかがですか?

簡単でしょ !

それでは最後に出社・退社のページからそれぞれの部署ページにリンクを作成します。

まずm_XpWorkを開いてください。

既に営業1部のボタンにはイベントが作成済ですので、営業2部のボタンにイベントを追加します。

カテゴリ：　基本

アクション：　ページを開く

開くページの名前：　m_XpWork_2

続いてm_XpLeaveです。

営業1部ボタン

カテゴリ：　基本

アクション：　ページを開く
開くページの名前：　m_XpLeave_1

営業2部ボタン
カテゴリ：　基本
アクション：　ページを開く
開くページの名前：　m_XpLeave_2

それではすべて保存して閉じてください。

次に起動時の設定を行います。

左側のツリーから【アプリケーション構成】内、【アプリケーションのプロパティ】を開いてください。

2番目の起動タブに移動します。

右側にWeb　ブラウザの起動という項目がありますので、

起動：　指定いたXPageを開く
XPage：　m_XpIndex

とし、保存して閉じます。

これによりブラウザでnsfを直接指定した場合、m_XpIndexが開くようになりました。

それでは設計からプリビューせずに、ブラウザのアドレスを直接指定してみましょう。

作成された環境によってアドレスが異なりますが、私の環境ではDominoディレクトリ内のtestフォルダ内にtime-recorder.nsfという名称で作成しましたので、下記がURLになります。

http://ノーツサーバー名/test/time-recorder.nsf

こちらでトップページが開きます。

以降の動きは、下記をご覧ください。
最終にノーツビューへの表示確認まで行っております。

以上で大まかな部分が完成しました。

XPagesを使用すれば、意図的に少し直接タグを利用しましたが、プログラムレスでここまで表現できるんです。

次回はもう少し手を加えて完成させる予定です。

【第5回】タイムレコーダーアプリ作成～部署ページの作成 その2～

皆様、こんにちは !!
インフルエンザが猛威を振るっておりますが、感染されていませんか?
まだしばらくはピークが続きそうですので、ぜひご注意ください。

2月ということで、いよいよ1ヶ月を切りましたね。
・ノーツコンソーシアム FESTA 2017
・2017 年第 1 回情報交換会

個人的には3月2日に東京の取引先様との打ち合わせを予定していたのですが、すっかり宿泊予約を忘れていました。
予定より少し高くなりましたが、いいホテルは確保できましたが・・・。

あとは移動の予約のみです。



さて前回は部署ページということで、出社・退社それぞれについて、ボタンのみを設置したページを作成しました。
今回はさらにそのページの部署ボタンからリンクされる部署の詳細ページを作成します。
元となるフォームは4つ。
　・出社_営業1部
　・出社_営業2部
　・退社_営業1部
　・退社_営業2部

前回まではカスタムコントロールは利用せず、直接XPageとして作成しましたが、今回は再利用するパーツが多くなりますので、カスタムコントロールを利用して、工数を減らすような設計手順を掲載するつもりです。

それでは出社側から作成していきましょう。
デザインに統一感を出すため、前回作成したm_XpWorkを再利用することにします。

名前：　m_XpWork_1

コピーしたXPageの名前を変更したら、デザイナーで開きます。
先頭の「出社」とかかれた表部分と戻るボタンのみを再利用しますので、表と2個のボタンを削除してください。

下記のようになるはずです。

続いて、【戻る】ボタンのリンクを変更します。

現在はトップページに戻るようになっておりまので、m_XpWorkに戻るように変更します。

戻るボタンをクリックし、下部で「イベント」タブに切り替えます。

現在の設定　ページを開く　　ページ名：/m_XpIndex.xsp

と書かれた部分を選択し、【編集】ボタンを押してください。

シンプルアクションの編集ダイアログが開きますので、

開くページの名前：　m_XpWork

とし、OKします。

以上で m_XpWork_1を保存して閉じておきます。

つづいてこのm_XpWork_1に埋め込むカスタムコントロールを作成します。

左メニューでカスタムコントロールをダブルクリックし、【新規カスタムコントロール】を押してください。

名前：　XcWork_1

とし、OKするとカスタムコントロールの新規作成画面が表示されます。

次にカスタムコントロールにデータソースを関連付けます。

プロパティのデータタブをクリックします。

【追加】ボタンから、【Domino文書】をクリックします。

フォーム：　出社_営業1部 - Work01
データソース名：　document1
デフォルトアクション：　文書の作成
フォーム検証の実行：　両方

と設定します。

続いて先頭にラベルコントールを配置します。

ラベル：　営業1部

フォントサイズ：　36(こちらは自由です)

フォントカラー：　青(こちらも自由です)

ラベルコントロールの後ろから改行を5個ほど入れ、続いてボタンコントロールを配置します。

ボタンの設定は「出社_営業1部」の内容に準じます。

ラベル：　楢○　正剛(貴社情報に書き換えてください)

高さ：　100ピクセル(自由)

幅：　300ピクセル(自由)

フォントサイズ：　36(自由)

文字揃え：　中央

次に、ボタンコントロールにイベントを追加します。

イベントタブに切り替え、アクションを追加します。

カテゴリ：　文書

アクション：　フィールドの変更

フィールド名：　creator

値：　楢○　正剛

データソース名：　document1

このアクションでは、最初に関連づけた「出社_営業1部」のフォームを使用し、creator というフィールドに【楢○　正剛】という値を設定するというものです。

ちなみに他のフィールドについては、

busho：　デフォルト値にて「営業1部」

time：　作成時の計算結果として「@Created」により作成時の日時

stamp：　デフォルト値にて「出社|1」

が設定されます。

続いてイベントを追加します。

カテゴリ：　文書

アクション：　文書の保存

データソース名：　document1

さらにイベントを追加します。

カテゴリ：　基本

アクション：　アクションの確認

確認テキスト：　楢○　正剛　様、おはようございます。

このイベントにより、ボタンが押された際に確認ダイアログが表示されます。

最後にもうひとつイベントを追加します。

カテゴリ：　基本

アクション：　ページを開く

開くページの名前：　m_XpIndex

これにより、先の確認をOKすると、トップページに移動します。

イベントが下記の順に並んでいることを確認してください。

以上でボタンの設定がひとつ完了しました。

それではこのボタンをコピーして、後ろにふたつ貼り付けます。

それでは中央のボタンの内容を変更します。

ラベル：　阿○　勇樹

イベント1行目のフィールドの変更の値：　阿○　勇樹

イベント3行目のアクションの確認テキスト：　阿○　勇樹　様、おはようございます。

以上です。

同様に右側のボタンも3箇所の「楢○　正剛」を「駒○　友一」に変更します。

続いてにフォームで扱われるフィールドすべてをカスタムコントロール内に追加します。

右側のコントロールタブをデータタブに切り替えます。

左上の赤枠欄が[コントロールの選択]ダイアログボックス(使用可能)であることを確認し(使用不可になっていましたら、クリックで切り替えてください)、すべてのフィールドを選択し、カスタムコントロール最下部へドラッグアンドドロップします。

データバインドコントロールの選択画面が表示されますので、【Time:】のコントロールを「日付ピッカー」から「計算結果フィールド」に変更し、OKしてください。

これらコントロールは、実際の画面に表示する必要はありませんので、表全体を選択した状態で、【可視】のチェックを外します。

これでカスタムコントロール　XcWork_1ができましたので、保存して閉じます。

※カスタムコントロールは、ページとしての構成が行われていないため、単体でプリビューすることができません。

それでは最初に作成したm_XpWork_1に埋め込んでみましょう。

m_XpWork_1をデザイナーで開きます。

コントロールの最下部に「カスタムコントロール」が追加され、作成されたXcWork_1が使用できるようになっています。

それではXcWork_1を出社と戻るボタンの間にドラッグアンドドロップします。

下記のように、カスタムコントロールが配置されました。

せっかくですので、ソースを見てみましょう。

ソース内では、カスタムコントロールは<xc:></xc:>タグでくくられた1行で表現されます。

続いてm_XpWorkからm_XpWork_1へのリンクを作成します。

m_XpWorkをデザイナーで開きます。

「営業1部」のボタンを選択し、イベントを追加します。

カテゴリ：　基本

アクション：　ページを開く

開くページの名前：　m_XpWork_1

それではm_XpIndexをブラウザでプリビューし、「出社」⇒「営業1部」のボタンを押してみましょう。

下記のように表示されるはずです。

合わせてボタンの動きも確認してみましょう。

「楢○　正剛」のボタンをクリックしてください。

下記のようなメッセージが表示されますので、OKしてください。

タイムレコーダーのトップ画面に戻ります。

同様に、他の2名についてもテストしてください。

最後に保存されたデータの確認です。

タイムレコーダーをノーツクライアントで開きます。

ビューは「日付順」しかありませんので、今回押された3レコードが表示されているはずです。

無事、打刻日時と部署、社員名、項目が保存されました。

今回は以上とさせて頂きます。

次回は今回のカスタムコントロールをベースに、営業2部の出社及び両部署の退社までを作成予定です。

【第4回】タイムレコーダーアプリ作成～部署ページの作成～

皆様、こんにちは!!
フェイスブックで繋がっている方はご存知かと思いますが、週末に新舞子(姫路のもっと西)にある先輩のやっている旅館で、1泊2日の新年会に参加し、たらふく牡蠣等を頂き、栄養満点で週を明けました !!
今週から2月ということで、いろいろと仕事が積みあがりつつあるのですが、なんとか今日は記事公開に漕ぎ着けました(汗。

それでは続けさせて頂きます。

前回は単純なボタン配置のみのトップページを作成しました。
引き続き今回も実はボタン配置のみのページになります・・・。
単純なページですので、カスタムコントロールは使用せず、XPageのみで作成して参ります。


まず【新規XPage】ボタンをクリックます。

名前：　m_XpWork

以上でOKします。

新規のXPageが開きますので、先頭にコンテナコントロールから【表】を配置します。

表のサイズ

　行数：　1

　列数：　1

表の幅

　幅に合わせる

できあがった表を選択し、

幅：　99.0　パーセント

背景：　自由に設定してください。前回のトップページの出社ボタンに合わせると、統一感が出ます。

とします。

表が選択されたか、表の行やセルが選択されたかわかりにくい場合は、左に表示されているアウトラインにて対象をクリックすると分かり易いかもしれません。

続いて表のセル内にコアコントロールより【ラベル】を配置します。

ラベル：　出　　　社(間のスペースは自由です)

フォントサイズ：　28(こちらも自由)

色：　白(こちらも自由)

続いて部署のボタンを作成します。

以前に作成しました2部署分のボタンになります。

先の表に続いて、いくつか改行しておきます。

その下に【表】を配置します。

今回は2部署のみの作成ですので、

行数：　1

列数：　2

幅に合わせる

で作成します。

もちろん部署数に合わせて配分してください。

一般的な画面では、4列くらいまでが見やすいかと思います。

続いて作成された表の左側のセルにコアコントロールから【ボタン】を配置します。

ラベル：　営業1部

フォントサイズ：　24(自由)

文字揃え：　中央

同じく右側のセルにも【ボタン】を配置し、

ラベル：　営業2部
フォントサイズ：　24(自由)

文字揃え：　中央

とします。

続いてさらに表の下にいくつか改行し、

【ボタン】を配置します。

ラベル：　戻　　る

フォントサイズ：　24(自由)
文字揃え：　中央
背景：　自由(私はグレーにしました)

このままでもいいのですが、戻るボタンを右寄せしてみます。
表の中に配置した場合、表のセルのオプションで【セルの横位置】が選択できるのですが、今回は表に入れていません。
直接ソースに書き加えてみましょう。

【戻る】ボタンを選択した状態で、【ソース】タブに切り替えてください。

選択した【戻る】ボタン部分のソースがハイライトされて、ソースが表示されます。

このハイライトされた1行の上に
<div align="right">

下に
</div>



と直接書き込みます。
※注意
ハイライトされた行の最終に</xp:view>というタグがありますので、このタグの手前にで<div>タグを閉じてください。

設計タブに戻って頂くと、

【戻る】ボタンが右寄せされました。

レイアウト等に関する部分ですので、お気に召さない場合は、表内に配置するなど、試してみてください。

それではブラウザでプリビューしてみましょう。

かなり間延びしたページになってしまいましたが、見た目は自由に変更ください。

今回はこのまま進めます。

このページはトップページの【出社】ボタンを押した際に表示されます。

つまり【戻る】ボタンが押された際には、トップページに戻る必要がありますので、ボタンにリンクを設定します。

【戻る】ボタンを選択し、下部より【イベント】タブを選択してください。

【アクションの追加】ボタンをクリックし、

　カテゴリ：　基本

　アクション：　ページを開く

　開くページの名前：　m_XpIndex

とし、OKします。

アクションが追加されました。

それでは一旦、m_XpWorkを保存して閉じます。

続いてこのm_XpWorkをコピーして、退社用のm_XpLeaveを作成します。

m_XpLeaveを開き、先頭の表を選択します。

背景をトップページの【退社】ボタンに合わせ、ラベルの文字列を「出社」から「退社」に変更します。

以上で退社用のページは準備できました。

最後にトップページから両ページへのリンクを作成します。

m_XpIndexを開いてください。

先ほどと同様にふたつのボタンにイベントを追加します。

出社ボタン

　カテゴリ：　基本

　アクション：　ページを開く

　開くページの名前：　m_XpWork

退社ボタン
　カテゴリ：　基本
　アクション：　ページを開く
　開くページの名前：　m_XpLeave

最後にブラウザで動きを確認しましょう。
ブラウザでプリビューしてください。

現時点のイメージは下記となります。




今回は出社・退社ページを作成し、それぞれトップページからのリンクまでを組んでみました。
意図的にソースそのものにも直接手を加えてみましたので、ご興味ある方はいろいろとお試しください。


次回は各部署のページを作成します。
ようやくカスタムコントロールを使用することになります !!

【第3回】タイムレコーダーアプリ作成～XPages作成の準備とトップページの作成～

皆様、こんにちは!!

ここ数日の寒さ、こたえますね。
幸い神戸も六甲山以南はそれほど雪も降らず、なんとか平常通りの生活ができています。
・・・個人的には今週末に、姫路の西、新舞子で行われる1泊2日の新年会が楽しみで、ちょっとハイになってます !


さて前回までで、いわゆるレガシーノーツ部分の準備が完了しました。
いよいよXPagesの要素を加えていきますが、その前に少し準備が必要です。

ちなみに私の環境ですが、ドミノデザイナーは【リリース 9.0.1FP7 】
サーバーは【9.0.1FP2 】を利用しております。


まずはモバイル用のテーマを設定します。
【アプリケーション構成】内の【Xspプロパティ】をダブルクリックで開いてください。


【一般】タブにある【XPages用モバイルテーマの使用】について、
　プレフィックス：m_
　モバイルのテーマ：モバイルのデフォルト
　※すいません、後から気付きました。画像では OneUIが選択されていますが、「モバイルのデフォルト」で進めます。

とします。

続いてその下にあるエラー処理について
【XPage実行時エラーページを表示】にチェックしておきます。

これにより、何かしらエラーが発生した場合のヒントが表示されます。

続いて【ページの生成】タブの右にある
【XPage ライブラリ】にて、
　ライブラリID:com.ibm.xsp.extlib.library　にチェックします。

以上でXspプロパティを保存して閉じます。


続いて【プロジェクト】メニューから【自動的にビルド】をチェックします。
既にチェックされているようでしたら、そのままで構いません。

これにより、デザイナーで要素を保存した際に、各ページが生成あるいは更新され、即座にWEB画面が表示可能になります。


次に今回はブラウザでからノーツIDを使用せずにアクセスさせます(入り口に置いたタブレットを想定)ので、アクセス制御に【anonymous】を追加します。

アクセス制御リストを開き、【追加】ボタンをクリックします。
　ユーザー、サーバー、グループ(P)にanonymousと入力し、【OK】します。
　属性のアクセス権：作成者
　パブリック文書[作成者]と文書を複製またはコピーのチェックは外しておきます。

　


それではXPages設計要素を作成していきましょう。


Xpagesに関する主な要素はふたつ。
【Xpage】と【カスタムコントロール】があります。


Xpageは実際にWebブラウザに表示されるページになります。
カスタムコントロールはXpageのコントロール類が扱える、いわゆるサブフォームのようなものになります。

もちろんXpageのみで開発することも可能ですが、要素の再利用などに有効なため、主な要素はカスタムコントロールに作成し、Xpageで取りまとめるという手法で作成して参ります。

まずはトップページです。
こちらは単純に出社と退社のボタン表示を行うだけですので、直接Xpageに作成します。

それでは新規XPageボタンをクリックし、新規XPageダイアログを開きます。

　名前：m_XpIndex

以上で【OK】します。

命名ですが、"m_"が先ほど設定しましたテーマを使用するための接頭文字になります。
以降は本来自由なのですが、カスタムコントロールと区別できるよう、"Xp"を付けました。

それでは中身を加えています。
まずはタイトルです。

右側の【コアコントロール】から【ラベル】をドラッグアンドドロッブします。

続いて設置したラベルのプロパティを変更します。
プロパティは画面下のプロパティタブで設定します。

その中のスタイルタブで
　ラベル：タイムレコーダー(特に指定はありません)

フォントタブで
　サイズ：24(こちらも自由です)
　色やスタイルも自由に変更してください。
画面上、設計タブで確認しながら変更が可能です。

ラベルからいくつか改行を入れてください。


次に、【コンテナコントロール】から【表】をドラッグアンドドロッブします。

　行数：1
　列数：2
　表の幅：自動サイズ

下記のように表が追加されました。

それでは表の中に、ボタンを配置しましょう。

【コアコントロール】から【ボタン】をまずは表の左側のセルにドラッグアンドドロッブします。

プロパティでは、
　ラベル：出　社
　高さ：100ピクセル(特に指定ではありません)
　幅：250ピクセル(こちらも自由です)

その他、フォントや背景などは自由に設定してください。

同じように右側のセルに退社ボタンを作成します。
先の出社ボタンをコピーして、右側のセルに貼り付けます。
プロパティを
　　ラベル：退　社

フォントや背景は、出社と区別しやすいものにしてください。

以上でまずはトップページが仮で完成しました。

せっかくですので、ブラウザでプリビューしてみましょう。

【設計】-【Webブラウザでプリビュー】-【Internet Explorer】をクリックしてください。

Internet Explorerが起動し、下記のようなページが表示されるはずです。

それではせっかくなので、ソースを見てみましょう。

デザイナーの【設計】タブから【ソース】タブに切り替えてみてください。

端末より多少異なりますが、下記のような表示がされるはずです。

"xp"と書かれたタグがたくさんありますが、これがXPagesで書かれた内容になります。

4行目がタイトルの設定内容。

xp:table以下が設置した表とボタンコントロール2個の設定となります。


合わせてWEBブラウザでもソースをみてみましょう。

ちなみにブラウザ側のソースは書きのようになります。

今回は以上とさせて頂きます。まったくプログラミングらしき作業はありませんでしたね。

年度末ということで、本業の案件がかなり立て込んできました。
スローペースになるかと思いますが、続けて参りますので、今後もよろしくお願いします。

次回は部署別のページ作成から続けさせて頂きますが、こちらでは本日のページからのリンク程度の作成の予定です。