ページビューの合計

2017年1月24日火曜日

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

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



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

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

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

2017年1月16日月曜日

【第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の設計要素を追加します !!




2017年1月10日火曜日

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

2017年1月5日木曜日

謹賀新年!!


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


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

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

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


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


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


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

2016年12月26日月曜日

年末のご挨拶

皆様、こんにちは!!

今年もいよいよ、残すところ1週間を切りました。
お正月の準備は進んでますか?

私はこの3連休で散髪と洗車まではなんとか終えました。


髪を思い切って切りすぎたのが原因か、なかなか風邪気味が抜け切れず、予定していたお風呂掃除は持ち越してしまいました。

それ以外では餅つきと網戸掃除、フローリングのワックス掛けくらいでしょうか。

また随時FBは投稿致します。


さて7月からスタートした当ブログもなんとか半年。
内容的にどうかなぁと思いつつ、何か残っていれば、いつかは誰かのお役に立てればいいなぁと・・・。

前回までネタとしていました名刺管理もノーツのフォームやビュー+αを知る手段としては一旦休息を頂こうかと考えております。

来年からは、FBで少し触れておりましたが、当社で利用を開始したタイムレコーダーアプリについて、少しずつ書いてみようかと考えております。


そもそも当社ではWindows XP + Office2007(正しくはAccess2007)でフリーソフトをタイムレコーダーとして使っていたのですが、ついにXP機が破損してしまいました。
そのままフリーソフトを使い続けるつもりだったのですが、どういう訳かWindows7+Office2016では動いてくれず、フリーソフトを使っていることにも納得できていなかったことから、ノーツで作れないかということが発端となった事案になります。

本来のノーツの使い方(ユーザーIDを使い、運用管理する)とは異なるため、世間的にはどうかとは思いますが、私自身が2年ほど学んできたxpagesに関して、こちらも取り組みやすい設計例として見ていただくことができるのではと感じています。
・・・実際にはもっと高度なプログラムを組み込むことで、ステップアップできそうなのですが、あえて私のようなxpages初心者レベルが一から作ったという点に着目して、記載していきたいと考えております。


ノーツコンソーシアム正式会員としての初年度が終えようとしていますが、皆様のおかげで本当にたくさんの経験ができ、たくさんの知識も頂くことができました。

引き続き、中小企業という観点・及びプログラマー不在での開発について、情報発信ができればと考えております。

来年も何卒よろしくお願い致します。



2016年12月19日月曜日

【第12回】ノーツアプリ作成~作成者フィールドの作成~

皆様、こんにちは!!

年末、ツキすぎてる萩原です!
フェイスブックには少し投稿しましたが、先日の野球部首位打者+MVPに加え、金曜に開催されました忘年会ビンゴにてなんと!!
当ててはいけない1等賞を引いてしまいました。

この勢いで宝くじを・・・なんて考えましたが、今のところ買ってません。
別のよからぬものにぶち当たったりしないか、心配です~。


さて本題に入る前にまたまた宣伝です。

今週21日(水曜日)に【Notes/Domino on IBM Cloud】が開催されます。
私は大阪のパブリックビューに参加致します。
今回はコンソーシアム会員の方でなくても参加可能です。
また大阪では終了後に【Ask the NotesConsortium】も開催されます。普段聞けないことなど、どしどし質問して、登壇者をいじめてやりましょう!!
今からでも参加可能ですので、すぐにお申込を!!


それでは本題です。前回はACLの設定とサーバーへのアップロードを行いました。

もちろんこれで全社員の方が使用できるようにはなったのですが、ひとつ問題があります。

管理職グループに含まれる方々は【編集者】になりますので、特に支障がないのですが、一般社員の方々は【作成者】になります。
つまりこのままでは編集権限を持たないユーザーになる訳です。

例えば新規で作成し、保存した後に誤字に気付いたとします。
しかしながら現状の設定では自分では修正することができず、管理職の方に編集を依頼しなければなりません。

たったそれだけの事で、わざわざ管理職の方々の手を煩わせるのでは生産性が上がりません。

ノーツではそのような場合も考慮された仕組みが提供されています。

それでは早速実装してみましょう。


デザイナーで【メインフォーム】を開きます。

フォームの末尾に2行2列の表を作成します。(レイアウトの設定は自由ですが、私は【マージンに合わせる】で作成しました。


作成された表の左上に【作成者:】
左下に【作成日:】
右上に【編集者:】
右下に【編集日:】
と入力します。
※せっかくですので、最終編集者の情報も表示できるように変更しておきます。


続いてフィールドを追加します。

まずは作成者ですが、以下のような設定を行います。

名前:createdby(特に指定ではありません)
種類:作成者(作成時の計算結果)
値: @UserName


文書の初回作成時に、@UserNameという関数を用いて、作成したユーザーを特定し、文書内に保存します。

今後作成された文書には、【createdby】フィールドに作成したユーザーの情報が保存され、そのユーザーについては、【作成者】権限でありながら、自身で作成した文書については、【編集者】権限を持つことができるようになり、先のような問題を回避することが可能になります。

それでは残りのフィールドを作成しましょう。

作成日フィールド

名前:created(こちらも指定ではありません)
種類:日付/時刻(作成時の計算結果)
値:@Created


なお時間も表示したい場合は、制御タブで【時刻の表示】にチェックしてください。
※作成日・修正日という性格上、筆者はチェックをお奨めします。


次に編集者です。

名前:modifiedby(こちらも自由です)
種類:名前(計算結果)
値:@UserName

作成者と類似しているのですが、種類が【名前】であり、【計算結果】になっています。
作成時以外にも、編集時に再計算する必要がありますので、このような設定となります。


最後に編集日です。

名前:modified(こちらも自由です)
種類:日付/時刻(計算結果)
値:@Midified

こちらも編集者と同様に、計算結果とすることで、再計算を行うフィールドとなります。
作成日同様、時刻にチェックを推奨致します。

以上でフィールドの追加が終りましたので、ノーツでプリビューしてみましょう。


プリビューでは新規作成画面となりますので、このように作成者側と編集者側の情報が同一となりますが、実際に編集が発生しましたら、編集者と編集日が上書きされるようになります。


なおこの4フィールドはよく使うフィールドですので、【サブフォーム】に登録し、他のアプリケーションなどにコピーして利用するほうが便利ですが、現時点でサブフォームについては記述は省かせて頂きます。


さて次回ですが、せっかくサーバーにアップロードしたのですから、アイコンをオリジナルのものに変更し、ワークスペース上でも分かりやすくしてみましょう。

気に入ったアイコンに変更できると、愛着が増すかも?


引き続き、よろしくお願い致します。

2016年12月12日月曜日

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

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

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

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

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


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

 まずはACLの設定です。

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

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

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

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

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


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

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


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

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

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


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



一覧に管理職が表示されますので、属性で
 種類:ユーザーグループ
 アクセス権:編集者

を設定します。

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


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


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

下記のようなダイアログが表示されますので、サーバー:部分を社内サーバーに変更します。
※必要に応じて、ファイルパスにてサブディレクトリ等を選択してください。



弊社の環境では
サーバー:SVR-****/***
ファイルパス:test\meisi.nsf

となります。

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

ノーツクライアント側で、「複製と同期」というタブが表示され、サーバーへの複製が開始されます。
今回程度の内容ですと、一瞬で完了します。

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


右上に▼が表示され、どのアプリケーションを利用するか選択できるようになりました。
▼をクリックすると、【Local】と【SVR-****】を切り替えることが可能となります。

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


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


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