【第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ブラウザでもソースをみてみましょう。

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

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

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

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

【第2回】タイムレコーダーアプリ作成～フォームの追加～

皆様、こんにちは!!

週末、寒かったですね。私は神戸の南部に住んでおりますので、滅多に雪が積もるようなことはないのですが、うっすらとベランダに積もっており、子供が震えながら雪だるま(らしきもの)を作ってました。
ちなみに次女は舞鶴にいるのですが、40cmの積雪とか。
どういう訳か、楽しそうな雪かき作業の写真が送られてきました(汗

インフルエンザも流行っているようですので、皆様ご注意ください。


さて、前回は出社・退社のフォームを各ひとつずつ作成し、ビューもひとつ作成しました。

最後に少し書きましたが、社員数が多い場合、1ページに収まらず、自分の名前を探すという無駄が生じてしまいますので、今回はフォームを追加して、拡張性を持たせます。
申し訳ありませんが、今回まではXPagesの設計要素は触りませんので、ご了承ください。

さてそれでは早速はじめましょう。


まずは営業2部の出社フォームを作成します。

フォーム一覧より、【出社_営業1部】をコピーします。

続いてフォーム名を変更します。今回は
　名前：出社_営業2部
　別名：Work02

としました。

それでは【出社_営業2部】を変更しますので、デザイナーで開いてください。

前回の帰社フォームと同様、ボタンのラベルと式内の名前をそれぞれ変更してください。
例では、【長○佑都】【内○篤人】【遠○保仁】としております。

続いてbushoフィールドを変更します。

フィールド【busho】をクリックし、デフォルト値を「営業2部」に変更します。

以上で【出社_営業2部】が完成です。


同じく【退社_営業2部】です。
こちらもフォームをコピーして作成するのですが、【退社_営業1部】と【出社_営業2部】、いずれからコピーするほうが早いでしょうか。


前回、【出社_営業1部】から【退社_営業1部】を作成した際の手順はこちら。


【退社_営業1部】からコピーした場合は、3ボタンの修正とbushoフィールドの修正が必要です。
【出社_営業2部】の場合、stampフィールドのデフォルト値を変更するだけになります。

どちらが早いかは一目瞭然ですね。

それではフォーム【出社_営業2部】をコピーし、
　名前：退社_営業2部
　別名：Leave02

を作成。
stampフィールドのデフォルト値を"2"に変更してください。

以上でフォームの準備は完了しました。

もしこれ以上にたくさんの部署が必要でしたら、同じようにどんどんコピーして作っていってください。
別名の数値を03・04を増やして頂くことで、後に作成しますXPagesの設計も簡単に反映することが可能です。


少し短いですが、今回は特にフォームのコピーという点に着目して書かせて頂きました。

先日も記載しましたが、ノーツの設計要素のコピーは便利ですので、いろいろとお試しください。

いよいよ次回はXPagesの設計要素を追加します !!

【第1回】タイムレコーダーアプリ作成～アプリケーションの準備～

新年、あけましておめでとうございます!!
旧年中はたいへんお世話になり、本当にありがとうござました。

本年も私は相変わらずかと思いますが、マイペースながら一歩ずつ進んで参りますので、よろしくお願い致します。


まずはひとつ、宣伝です。
リコー様主催にて、【Notes Festa 2017 in 大阪】が今月20日(金曜)に開催されます。
私はもちろん参加させて頂きます!
お近くの方、ぜひご参加ください!!


さて年末に少し書きましたが、年も変わったことですので、新たなテーマ【タイムレコーダーアプリ】の作成ということで継続させて頂きます。

背景についてはお手数ですが、前回記事をご覧ください。

なお本テーマではどうも順序を追った説明に少し自身がありません。
数回目に「あーーーっ」と修正するような事が発生するかもしれませんので、予めご了承ください。


さて今回はアプリケーションの作成を行います。

デザイナーで【新規アプリケーション】作成を行います。
手順不明な方は、昨年の【第1回】ノーツアプリ作成～アプリケーションの作成～をご覧ください。

今回はXPagesでの構築になりますので、直接サーバーに作成することとします。

ダイアログの設定ですが、
　サーバー名：貴社サーバーを選択してください。
　タイトル：タイムレコーダー(特に指定ではありません。自由です。)
　ファイル名：test\time-recorder.nsf(こちらも自由です。私のほうではtestフォルダ内に作成しました。)
　テンフーレート：未入力

以上で【OK】します。


続いてフォームを作成します。
今回は出社・退社のみを記録するタイムレコーダーを作成しますので、それぞれについてフォームを作成します。

まずは出社フォームです。
　名前：出社_営業1部(部署名は貴社に合わせてください)
　別名：Work01

今回は別名が重要になりますので、今後の設定内容についても記載通りに作成されることを推奨致します。


さてフォームの内容です。
XPagesをフロント画面として使用することを前提としておりますので、本来は見栄えなど必要ないのですが、先々ノーツクライアントから利用するかもという事も踏まえ、少しだけ体裁を整えております。


まず登録する社員のボタンを作成します。
【作成】-【ホットスポット】-【ボタン】をクリックします。
プロパティは
　ラベル：社員名(画面では【楢○　正剛】)
　幅：6cm(適当で構いません。勝手に6.001cmになりました。)
　フォントサイズ：28(こちらも適当、もちろんデフォルトでも構いません。)

式には
　@SetField("creator";"楢○　正剛");
　@Command([FileSave]);
　@Command([FileCloseWindow]);
　@Command([FileCloseWindow])
※もちろん氏名のところには、社員名を設定してください。

続いてこのボタンをコピーして、下にふたつ貼り付けます。

それぞれのプロパティについて、
　ラベル及び式の社員名を変更してください。(画面では【阿○　勇樹】【駒○　友一】)

※もちろんこちらは必要な社員数分作成してください。

次にもうひとつボタンを配置します。
　ラベル：戻る
　幅：6cm(適当で構いません。勝手に6.001cmになりました。)
　フォントサイズ：28(こちらも適当、もちろんデフォルトでも構いません。)

式には
　@Command([FileCloseWindow])

色も適当で構いません。もちろん変更する必要もありません。


続いてフィールドを4個作成します。

creatorフィールド
　種類：テキスト、編集可能

bushoフィールド
　種類：テキスト、編集可能
　デフォルト値："部署名"(画面では【"営業1部"】としています。)

timeフィールド(この時間を打刻時間として記録します)
　種類：日付/時刻、作成時の計算結果
　式：@Created

stampフィールド
　種類：ラジオボタン、編集可能
　選択：選択肢を入力⇒　出社|1
　　　　　　　　　　　　　　　退社|2
　　　※選択項目の後ろの番号(別名)を使用しますので、必ず設定しておいてください。
　デフォルト値："1"(こちらで出社時の打刻と記録します)


以上でひとつ、フォームが完成です。

次に退社フォームです。

こちらもフォームを新規作成してもいいのですが、せっかくあるフォームをコピーすることで、かなりの労力が削減されます。
せっかくですので、【出社_営業1部】のフォームをコピーして作りましょう。

フォームの一覧で【出社_営業1部】を選択し、コピー。
そのままペーストしてください。
コピペの手段はメニューからでも右クリックでも、Ctrl+Cでも構いません。

すると【コピー出社_営業1部】というフォームが表示されます。

それではまずはフォーム名から変更します。

【コピー出社_営業1部】が選択された状態で【F2】キーを押してください。

名前の変更ダイアログが開きますので、
　名前：退社_営業1部
　別名：Leave01

に変更します。

続いて【退社_営業1部】の中身を修正します。

既に必要なボタンとフィールドは作成された状態にありますので、プロパティのみの変更になります。

しかも修正が必要なのはたった1ヶ所。

stampフィールドのデフォルト値を【"1"】⇒【"2"】にするだけ。

このフィールドが出社と退社の切り替えを行っていますので、選択肢である「退社」の別名である「2」を設定するだけで完了です。


いかがですか?
ノーツデザイナーの高速開発!!

このようにノーツではさまざまな要素をコピーして再利用することが可能です。
今回の開発には、コピーを多用致しますので、お楽しみに!!



ビューはひとつだけ作成します。(運用上必要な場合は、別途作成ください。)
　ビュー名：日付順|date

ビューに列は4つ
　日時
　　幅：14
　　ソート：降順(必要に応じて、【列のヘッダーをクリック時にソート】を設定、画面では両方を設定。)
　　列の値：time
　　スタイル：日付/時間(日付と時刻り両方の表示にチェック)

　部署
　　幅：12
　　列の値：busho

　社員名
　　幅：10
　　列の値：creator

　項目
　　幅：7
　　列の値：@If(stamp="1";"出社";"退社")

以上で一旦完了です。



タイムレコーダーをタッチパネルのデバイスで利用することを前提にしているため、できるだけ1画面に収まるように作成したいと考えます。

数名の会社様でしたら、今回の2枚のフォームで完結できるのですが、人数が増えてくるとどうしても画面を探すことになります。
そのため次回はもう2部署追加する手順を紹介させて頂きます。

謹賀新年!!

旧年中はたいへんお世話になりました。
本年も変わらず、何とぞよろしくお願い申し上げます。


さて皆様、いいお正月でしたか?
私は本当の"寝正月"になってしまいました。

12/28の午後から少し体調がおかしく、現在に至っております。
結局、初買いもバーゲンも行けずじまい。
・・・先ほど会社近くの内科に出向いたのですが、なんと!! 今日まで休診って・・・

今日は午後診もないため、行きつけの内科にも行けそうにありません。
明日の朝、休んで行くことになりそうです。


ということで来週から次のスタートを切れるよう準備しておりましたが、間に合うかどうか・・・(汗


3連休で完治できるよう努力します!!


取り急ぎたいへん失礼ながら、本年第一回目の記事にてご挨拶申し上げます。