【第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

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

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




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


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

【第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部署追加する手順を紹介させて頂きます。

【第11回】ノーツアプリ作成～ACLの設定とサーバーでの公開～

みなさま、こんにちは!! 

今年も残すは3週間となりました。 弊社は商社ですので、お客様へのデリバリー等、要注意な時期になります。

 ちなみに今週末には全社忘年会。 29日はAM大掃除で、午後には近くでフットサルという恒例行事が待っております!!

 すいません、話しがそれていきました。


 さて前回まででアプリケーションの大枠が完成したと記載しましたが、今回は完成したアプリケーションに対して、ACL(アクセス制御リスト)と呼ばれる権限権限設定を少し行い、サーバーへアップロードし、社内で利用可能な環境にしたいと思います。

 まずはACLの設定です。

ノーツのアクセス制御は非常に優れており、アプリケーションごとに、ユーザーやグループごとの権限設定ができるだけでなく、フォーム内の要素ごとにも設定が可能です。
またロールと呼ばれるいわゆる「役割り」機能もあり、かなり細かく設定することが可能です。

今回は初歩レベルとして、一般的な設定のみ説明致します。

ACLの開き方ですが、デザイナーの場合、該当するアプリケーション(今回は名刺管理)が開かれた状態で、[ファイル]-[アプリケーション]-[アクセス制御]をクリックします。

ノーツクライアントからも設定可能で、こちらの場合は対象となるアプリケーションを右クリックし、[アプリケーション]-[アクセス制御]をクリックします。

すると下記のようなダイアログが表示されます。

今回はこの基本タブ内に、全ユーザーに文書の作成権限を与え、管理職メンバーに編集権限を与えることにします。
※管理職メンバーについては、公開アドレス帳にグループ登録されていることが前提となっておりますので、ご了承ください。

まずは全ユーザーを作成者とします。
この画面を見ていただくと、ユーザー、サーバー、グループ欄で【-Default-】が選択されています。こちらはアクセスできる全ユーザーのことを表しますので、この状態で右側の属性から【作成者】を選択します。

続いて管理職グループです。

ユーザー、サーバー、グループ欄の下にある【追加】ボタンをクリックます。

下記のようなダイアログが開きますので、テキストボックス右側の人アイコンの書かれたボタンをクリックします。

ユーザー名の選択ダイアログが表示されますので、【管理職】を選択して【追加】、【OK】をクリックします。

一覧に管理職が表示されますので、属性で

　種類：ユーザーグループ

　アクセス権：編集者

を設定します。

以上でACLの設定はできました。

それではサーバーへアップロードしてみましょう。

デザイナー画面で、[ファイル]-[複製]-[レプリカの作成]をクリックします。

下記のようなダイアログが表示されますので、サーバー：部分を社内サーバーに変更します。

※必要に応じて、ファイルパスにてサブディレクトリ等を選択してください。

弊社の環境では

サーバー：SVR-****/***

ファイルパス：test\meisi.nsf

となります。

入力されましたら、【OK】をクリックしてください。

ノーツクライアント側で、「複製と同期」というタブが表示され、サーバーへの複製が開始されます。

今回程度の内容ですと、一瞬で完了します。

「複製と同期」タブを閉じると、名刺管理のアイコンに少し変化が現れます。

右上に▼が表示され、どのアプリケーションを利用するか選択できるようになりました。

▼をクリックすると、【Local】と【SVR-****】を切り替えることが可能となります。

ユーザーはサーバー側のアプリケーションを利用いただくことになります。

以上、自分で書きながら、うまく説明が書けないなと感じておりますが、一旦公開させて頂きます。

何卒ご了承ください。

さて次回はせっかくサーバーにアップロードしたのですから、アイコンを変更してみたいと思います。

【第10回】ノーツアプリ作成～メニューとフレームセットの作成～

皆様、こんにちは!!

気付けば12月。
さらに言うと、しばらく本題から外れてしまっており、危うく1ヶ月放置するところでした。

が・・・

まずは宣伝させてください。

12月21日(水)午後に、【Notes/Domino on IBM Cloud　テクニカルセミナー】が開催されます。

我が大阪地区でもIBM様大阪事業所にてパブリックビューイングが予定されておます。
加えて終了後は、【ask the ノーツコンソーシアム】と銘打った、何でもお悩み相談会も行われます。
このイベントはコンソーシアム会員以外でも参加可能ですので、ぜひご検討ください。


さて本題ですが、前回まででおおよそのフォームとビューが使えるようになりましたので、これらをつなぐ要素としてフレームセットを作成し、左側にはビューを行き来できるようメニューを作成します。


まずはメニュー部分から作成します。
早速ですが、「名刺管理」をデザイナーで開き、「共有要素」内の「アウトライン」をダブリクックします。
上部の【新規アウトライン】ボタンをクリックし、アウトラインを作成します。

　名前: メニュー
　別名: menu

とします。

続いて【新規エントリ】ボタンをクリックし、下記のように設定します。

　ラベル: 氏名カナ順
　種類:名前付き設計要素、ビュー
　値: 氏名カナ順
　フレーム: body(こちらの後のフレームのプロパティにも設定しますので、必須ではありません)

同様に「カテゴリ別」も作成してください。
下記のように表示されるはずです。

以上でアウトラインができましたので、保存して閉じます。

続いて先のアウトラインを埋めたページを作成します。

ページをダブルクリックし、【新規ページ】ボタンをクリックします。

　名前: メニュー

　別名: menu

とし、OKします。

新規のページが開きますので、【作成】-【埋め込み設計要素】-【アウトライン】をクリックします。

埋め込みアウトラインの挿入ダイアログが表示されますので、「メニュー」を選択し、OKします。

以上でページにアウトラインが埋め込まれます。

ページを保存して閉じます。

以上でアプリケーションを組み上げる要素が揃いましたので、フレームセットを作成し、配置していきます。

フレームセットをダブルクリックし、【新規フレームセット】ボタンをクリックします。

名前は自由ですが、今回は

　名前: メイン

　別名: main

　フレーム数:2(左メニュー)

としてOKします。

フレームセットが作成されましたので、それぞれのフレームのプロパティを設定します。

まずは左側(メニュー側)のフレームを右クリックし、【フレームのプロパティ】を開き、下記内容を設定します。

名前: menu

種類: 名前付き設計要素、ページ

値: メニュー

フレーム内のリンクのデフォルト対象; body

続いて右側のフレームのプロパティを下記のように設定します。

　名前: body

　種類: 名前付き設計要素、ビュー

　値: 氏名カナ順

以上で設定完了しましたので、ノーツでプリビューしてみます。

左側のメニューでビューが切り替えられることを確認してください。

さて以上でフレームセットは完成ですが、これだけではユーザーはすぐに利用できません。

アプリケーション起動時に、このフレームセットを開くように設定する必要があります。

【アプリケーション構成】内の【アプリケーションのプロパティ】を開きます。

左から2番目の【起動】タブを選択し、IBM Notesクライアントの起動について、

起動: 指定したフレームセットを開く

フレームセット: メイン

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

以上で、ユーザーがアプリケーションを開いた際に、メインフレームセットが開くようになります。

基礎アプリケーションの作成としては以上でひとまず完成しましたが、ちょっとちょっと使いにくい部分があるかと思いますので、次回以降で少し紹介させて頂きます。

標準ディスカッションテンプレートをカスタマイズしてみる。

皆様、こんにちは!!

今回はメニューやフレームをと記載しましたが、ちょうど社内で使用しているアプリケーションのカスタマイズ案件が入りましたので、こちらを先に掲載させて頂きます。

今回の案件としては、R9の標準ディスカッションテンプレート「StdR9Discussion/ja」に進捗という項目を追加し、進捗別のビューも加えるというものです。

まず対象となるアプリケーションをデザイナーで開きます。
そのまま要素を開こうとすると、下記のようなダイアログが表示され、設計がテンプレートから継承されていることがわかります。
まずこの継承を外す必要があります。

アプリケーションのプロパティを開き([ファイル]-[アプリケーション]-[プロパティ]もしくはナビゲータ内、[アプリケーション構成]-[アプリケーションのプロパティ])、設計タブを開きます。

「設計のプロパティ」の「継承」にある
「テンプレートから設計を引き継ぐ」のチェックを外しプロパティ画面を変更を保存して終了します。

以上でこのアプリケーションはテンプレートを継承しなくなり、自由に設計を変更することができるようになります。

それではまずはフォームを修正します。
フォーム「メイントピック」を開きます。
今回は「カテゴリ」の下に「進捗」という項目を追加します。

カテゴリ行にカーソルがある状態で、[表]-[行の追加]をクリックします。
続いて左の列にタイトルである「進捗:」と入力し、右の列に「status」というダイアログフィールドを作成します。

続いてフィールドの選択肢ですが、今回は進捗ということで、以下を設定しました。
　1. 発案
　2. 検討中
　3. 実施
　4. 完了
　9. 却下

またデフォルト値に"1. 発案"を設定します。

一旦以上でフォームを保存して閉じ、現在の文書を編集し、「進捗」を記入しておきます。

つづいて「進捗別|status」という新規ビューを作成します。
今回はカテゴリ別のビューのさらに上位に進捗を追加しますので、「コピー元」に「カテゴリ別」を選択します。

一番左に列を追加し、
　フィールド:status
　列幅:1
　展開できる行に三角アイコンを表示する:チェック
　ソート:昇順、カテゴリ別

を設定し、保存します。

次にこのビューを選択できるように表示するための設定を行います。

設計を見ると、IBM Notes クライアントで開いた際には、「MainFrameset」というフレームセットが開くようになっています。

それではMainFramesetを見てみると、この左側のメニュー部分に「進捗別」が追加される必要があります。
フレームのプロパティを確認すると、「Outline Page」というページが表示されています。

ということで、Outline Pageを見ると、「DiscOutline」というアウトラインが埋め込まれていることがわかります。

それではこの「DiscOutline」に「進捗別」を追加してみましょう。

ユーザー名の別名別の下に「新規エントリ」を追加し、
　ラベル: 進捗別
　種類: 名前付き設計要素/ビュー
　値: 進捗別

を設定し、保存して閉じます。

以上で、IBM Notesでアプリケーションを開くと、メニューには「進捗別」が追加され

そちらをクリックすると、「進捗別ビュー」が表示できるようになりました。

本来であれば、WEB用の修正なども行うべきではありますが、当アプリケーションについてはNotesクライアントからのみの利用を想定しておりますので、こちらで完了とさせて頂きます。

内容不十分な点や、玄人の方から見ると、まだまだな点もあるかと思いますが、まずは"超"初歩レベルのカスタマイズということで、ご了承ください。

もし今後も1カテゴリを追加したアプリケーションを作成することがあるようでしたら、こちらを「テンプレート化」しておくと、次回から簡単に新規アプリケーションが立ち上げられます。
「テンプレート化」については、改めて掲載させていただきます。

なお過去の記事でまだ触れていない「フレーム」や「フレームセット」、「アウトライン」という表現がございますが、「名刺管理」では次回以降に要素を追加致しますので、ご了承ください。

先般のオープンセミナーでも少し述べましたが、この作業(約30分)を行うだけで、アプリケーションの利用価値は大きく変化します。
ぜひお試しください。


ということで、今回飛ばしました名刺管理の続きは、次回実施予定です。