タイムレコーダーアプリ、改築

This time, I am remodeling the time recorder app that I created before.

みなさま、こんにちは!!
しばらくあいてしまいましたが、決してサボってるのではないですよ(汗

社内のインフラリプレイスや、取引先との各種EDI関連の作業におわれてまして、実はV11のベータ版の準備もできてない状態です(大汗


ということでまずはご案内から・・・。
気が付けば、もうスタートの東京開催(9/18)まで2週間を切りました。

そう、Notes/Domino Solution 2019 です。

HCL社様からもさまざまな情報が出てきつつあり、Notes/Dominoに関わる方は参加必須のイベントです!

私は東京以外の4か所へ参加予定ですので、皆様とお会いできる日を楽しみにしております!



さてそんな中、以前掲載しました弊社のタイムレコーダーアプリを見直す必要が発生しましたので、簡単に紹介させて頂きます。

以前のアプリはこちら・・・

https://www.tanuchi.com/2017/01/1.html


今回の発端としては主にふたつ。

1. 　現在のアプリでは「出社」「退社」の打ち間違いが多い。また押したか不安になり、二重打刻もみられる
2. 従来打刻していなかった管理職についても、実務把握のため打刻することになった

です。

1については、何かしら仕組みで回避できないか(時間によるボタンの非表示など)考えたのですが、完全に制御してしまうと問題がありました。また出社してないのに退社するなどの制御も考えたのですが、実務上そのようなパターンもあり得るため、これも不可。

ということで2を付け加えるにあたり、従来の入り口を大きく見直すことにしてみました。

ちなみに従来の入り口はこちら

いずれかをタップすると、部署一覧が表示され、自分の部署をタップし、さらに自分の名前をタップすることで打刻されます。

そこで今回の入り口は以下のように変更しました。

個人名の50音を選択するようにしました。

私の場合は「は」をタップし、

自分の名前をタップすると、

このように[出社]と[退社]が選べるようになっていますので、いずれかをタップすることになります。

ちなみにタップしますと、

このようにメッセージを表示します。

大きくしますと、

こんな感じです。

これで正しく自分の打刻ができたこと、また出社・退社のミスは減るのではないかと・・・期待してます・・・

さてこの構築なのですが、今回急を要したため・・・

このように大量のXPageを作成し、リンクさせることで動いています。

要は各行ごとのページと一人1ページという構成です。

もちろんコピペで多少手間はかかりますが、安定した作成はできたました。が!!、やはり納得できない。

おそらく一般的なプログラマーでしたら、スコープ変数を用いて、個人のランディングページはひとつにするというのがスマートな方法ではないかと考えています。

ということで・・・時間が取れましたら勉強します(汗

#XPages のソースについて

This time, I describe a little about XPages source.

みなさま、こんにちは！！
まずは先般の西日本豪雨で被災されました皆様に、心よりお見舞い申し上げます。
神戸もかなりの雨量で、未だ市内でも道路が封鎖されている場所が残っております。
氾濫すらしませんでしたが、自宅前の川が1週間を経過したにもかかわらず、普段の3倍ほどの水量が続いており、油断できない状況です。

さてそんな中ではありますが、以前より少し気になっていたXPagesのソースについて、自分の学習用に調べてみたいことがありましたので、せっかくならと記事にさせて頂きます。
ぜひ今さらと言わず、お付き合い頂けましたら幸いです。

さて過去にいくつか記事にしましたが、XPagesはGUIにてコントロールを配置し、プロパティを設定して組み上げていくことで、できるだけ簡単にプログラミングされたWEBページを生成することが目的であるNotesの設計要素であることは周知かと思います。

[設計]タブから[ソース]タブに切り替えてみますと、空白のページであっても、以下のようなソースが記述されたXMLであることがわかります。

まずはデータソースをバインドした場合の変化を見てみます。

今回は同じアプリケーション内の"planning"というDomino文書をバインドしてみました。

このように<xp:this.data>のタグ内にデータソースの定義が組み込まれることを宣言し、<xp:dominoDocument>タグでDomino文書である"planning"フォームを呼び出しています。

参考までにビューをバインドした場合、

<xp:dominoView var="view1" viewName="test"></xp:dominoView>

となります。

なおこのとき、アウトラインには以下のように表示されます。

先の文書をバインドした状態で、[編集ボックス]を追加してみましょう。

すると以下の1行追加されたことがわかります。

<xp:inputText id="inputText1"></xp:inputText>

続いて、"date"というフィールドをバインドしてみます。

以下のようにinputTextにvalueが追加されることがわかります。

次にボタンを追加してみますと、以下の一行が追加されました。

<xp:button value="ラベル" id="button1"></xp:button>

それではそのボタンに「文書の保存」を設定してみます。

以下のように"onclick"のイベントが追加され、"action"として<xp:saveDocument>が追加されました。

ここまでで[設計]画面は以下のようになっています。

それではボタン部分のソース(以下の部分)をコピーして、ソースの続きに貼り付けてみます。

すると、以下のようにボタンが追加されることが確認できます。

なおソースを確認すると、以下のように自動で"id"がユニークな番号に変化していることがわかります。

このようにコントロールを複製するような場合、もちろん[設計]画面で対象コントロールをコピーすることも可能ですが、ソース側でも同じことが可能であることがわかるかと思います。

次にカスタムコントロールを見てみます。

まずは初期作成時のソースです。

このようにカスタムコントロールのソースもXPagesのソースとまったく同一になります。

それでは編集ボックスとボタンを追加したソースもみてみましょう。

今回、値のバインドやボタンアクションの設定は省きましたが、XPagesと同一のソースであることがわかるはずです。

つまりXPageで作成したものをカスタムコントロール作り変えたり、その逆についてもいちいちコントロールの配置から行う必要はなく、ソースをコピーして貼り付けることで、同一内容でありながら、別の設計要素を作成することが可能になります。

最後にカスタムコントロールをXPagesに埋め込んでみますと、

<xc:xctest></xc:xctest>

この一行のみでカスタムコントロール"test"を呼び出すことができます。

以上、表面的なことばかりではありますが、ソースを知ることで、作業の簡素化ができる場合があるということはご理解いただけましたでしょうか。

XPages開発者はGUIを使用せず、ソースだけを直接編集して、ページを実現されている方もいらっしゃると聞きます。

個々のコントロールの記述や、値設定などを確認されても面白いかと思います。

#テクてく ( #tektek )大阪へ参加させて頂きました。

This time was held last week for the "Tech Teku Lotus engineers evening", let me a little touched.

みなさま、こんにちは!!
本日の神戸は本当にいいお天気です。
かなり暑くなるそうですが、梅雨前の貴重なお天気を快適にすごしましょう・・・といいつつ、終日オフィスから出ることがないので、往復のすがすがしい気温を楽しむくらいしかできませんが。

さて今回もまずは告知からです。
6月11日(月曜日)に品川のグランドプリンスホテル新高輪にて【Think Japan - Developer Day】が開催されます。

いくつか参加したいセッションがあるのですが、さすがに毎月のように東京出張は許可が得られません。
それでなくても6月には【新任担当者向けワークショップ】へ参加させて頂くことになっておりますので・・・。
ぜひこちらの技術を関西へ持ち帰り、大阪開催を実現したいと思います。

さて本題です。
とは言いましても、今回は先週金曜に開催されました年1回のイベント　テクてく Lotus 技術者夜会　ザ・大阪編　に参加させて頂きました感想等を報告させて頂きます。

今回は私の先頭の1コマを頂き、短時間ですがお話させて頂きました。
内容としては、ICS(IBM Collaboration Solutions)関連ブログの弊社での情報収集方法について、現状までの流れと今後の構想についてお話しさせて頂きました。

資料をスライドシェアにと思ったのですが、どうもうまくアップロードできず・・・。

2018/05/29 無事アップロードできましたので、こちらよりご参照ください。

2022/04/28 ドクセルに引っ越しました。

20180518_ICSブログ活用してますか by @tanuchi

ほかにもたくさんの方の貴重な発表がありました。
ここで個別の発表内容を述べるのは適切ではございませんので、発表内容については後日公開されます資料をご覧ください。


中でも個人的に書き留めたキーワードだけを列挙してみます。

• Restful Web API
• Smart NSF
• XRest API Routes
• Grooby
• Swagger
• Zoomフリープラン
• Activity Logging
• Watson Workspaceへのアプリ追加
• Dominoの歴史=平成の歴史
• XPagesを記述する前にHTMLで準備してみる

いろいろ手を動かしたくなるようなキーワードが並びました。

言い訳にはなりますが、来年にかけて本業がピークを迎えるため、どこまで手がけられるかは不明ですが、また弊社のような中小企業のNotesユーザーでこれらを試してみた状況、特にメリット・デメリットなどを報告する機会が持てればと考えております。

ぜひ気長にお待ち頂けましたら幸いです。

ランドプリンスホテル新高輪

#XPages の #URL について

This time I will describe the setting of the URL for importing XPage into another application.

みなさま、こんにちは!
ついにGWも終ってしまいましたね。
今年はいつになく脱力感が・・・と感じていたのですが、どうやら子どもの野球三昧に加え、昨年のGWは全日出勤であったことが原因のようです。

本題に入る前に、まずは告知です。
来週・・・もう来週なんですね(汗・・・5月18日(金曜)にテクてくLotus技術者夜会が開催されます。
今回は昨年に引き続き、テクてく大阪としてIBM様大阪事業所にて開催となります。
内容については現在精査中ですので、正式発表をお待ちください。ちなみに私も少しだけ時間を頂く予定です。
ぜひ関西近隣の方は、ご参加をご検討ください。
また東京ではパブリックビューが行われますので、関東近隣の方はPVへご参加よろしくお願いします。
もちろんリモートも準備頂ける予定ですので、どうしても両拠点への参加が難しい方については、リモート参加も大歓迎です!

詳しくは近日こちらのページにて案内があるかと思いますので、少しお待ちください。


さて前置きが長くなりましたが、今回の本題です。

実は最近、Notesの作業よりも優先する作業が発生しており、当ブログのネタが続かないという状態に陥っております。

そんな中、今回の案件は、社内の販売管理システムのマスタにNotes内の情報を掲載できないかというものになります。

具体的には販売管理システムの得意先マスタ画面に、Notesの情報(今回は日報)を表示したいというものになります。

先にも触れましたが優先する作業というものがこの販売管理システムのWEB化というものになります。

販売管理システムの得意先マスタ画面をWEB化し、その画面内にタブを組み込み、そのタブ内にiFrameのようにNotesの日報データを表示させることを検討しました。
画面としては、以下のようなものとしました。

そこで必要となるのが、XPagesをブラウザで表示する場合のURLになります。

既に日報についてはXPagesで閲覧できるようにしてありますので、そのページにアクセスしてみます。

まずはブラウザでアクセスしてみます。
今回はreport_2018.nsfというアプリケーションに、Webブラウザの起動設定で「m_byDate_wForm」というXPageを開く設定を行っておりますので、設定されたXPageが「http://hogehoge/report_2018.nsf/」というアドレスで表示されます。

こちらを先のタブ内に埋め込んだところ、タブ内には以下のようなNotesの認証画面が表示されました。もちろんanonymousに権限を与えていないため、正しい挙動になります。

それではこの画面でログインしてみましょう。

レイアウトはともかく、XPageを読み込むことができました。

XPagesのURLで利用できるパラメータについては、以下に詳しく掲載されていますので、参考になさってください。

XPages データソース解説 - URL パラメータ

こちらによりますと、XPageを呼び出すパラメーターは

http://サーバー名/NSFファイル名.nsf/XPage名.xsp

となります。

少し今回の内容からそれますが、文書は・・・
こちらも先のページに紹介されておりますが、

http://サーバー名/NSFファイル名.nsf/XPage名.xsp?documentId=文書ID&action=openDocument

となります。
ブラウザで開いてみますと、

先ほどはビューを含んでおりましたので、フォームをバインドしたXPageを呼び出し、パラメーターとして文書IDを指定してあります。

今回の目的はタブ内にビューを埋め込むことですので、先のタブを指定したビューに変更してみます。

少しわかりにくいのですが、先のタブ内にありました右側のフォーム部分がないビューのみをバインドしたXPageが埋め込まれました。

これで目的達成・・・ではありません。
せっかくWEB側でコードが表示されていますので、できればそのコードに紐付いた日報のみが表示されることで、さらに利便性が上がるのです。

先のパラメーターの紹介サイトを読み進めていくと、【search】というパラメーターがあるではないですか!!
こちらを利用することで、特定顧客のみの日報を抽出できるはず。

ということで早速URLをたたいてみます。
今回の得意先コードが0113-001というコードになりますので、.xspの後ろに「?search=0113-001」を追加してみます。

結果は・・・

想定通りです。
うまく指定されたコードの日報だけを取得することができました。

あとはこの設定を先のタブに施すだけになります。
結果は・・・

みごとにタブ内にXPageのビューを表示することができました。
ちなみにリンクをクリックすると、同じくタブ内にフォームをバインドしたXPageを表示することができました。

今回のやり方が正しいのかは現時点では不明ですので、さらに踏み込んだ検討は行ってみたいと考えております。

今回の目的は、XPageのURLとバラメーター(search)を紹介するまでとさせて頂きます。

また今回のWEB化ツールと合わせて、うまく纏めることができれば、ノーツコンソーシアム大阪研究会で紹介させて頂ければと考えております。

ちなみにXPage側で設定している並び順や、階層のレベルなどもバラメーター側で設定することができるようです。

時間ができれば、どちらが優先されるかなどをレポートできればと考えております。

チョー #初心者 向け、 #XPages 開発手順～仕上げ

みなさま、こんにちは！
先週金曜はノーツコンソーシアムFesta2018に参加させて頂きました。
各研究会の発表は非常に興味深く、今年も期待されるものばかりでした。
上記リンクで内容と一部資料ダウンロードも可能ですので、参加された方のみならず、当日参加できなかった皆様もぜひご覧頂き、今年の研究会への参加の検討資料にしてください。

個人的には昨年同様、大阪研究会とザ・ノーツ研究会に登録を予定しています。
また名古屋・九州の地方研については機会あればお邪魔させて頂ければとも考えております。

くわえてこちらは会員限定になりますが、ユーザー情報交換会も予定されております。
特に10月については、M社様にて開催との事で、今から楽しみでなりません。


それでは本題に戻ります。
先日より続けております本シリーズですが、一旦今回で完結致します。
最後までよろしくお願い致します。

さて早速ですが、前回まででふたつのXPageを作成し、ビューページから対象の文書のフォームページを開くことができるようになりました。
今回はxp_mainFormへ3つのボタン(戻る・編集・保存)とxp_byDateへ1つのボタン(新規作成)を組み込みたいと思います。

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

早速ですが、前回作成した表の上にある改行部分にコアコントロールから[ボタン]を3つ配置します。

それぞれラベルを左から、「戻る」「編集」「保存」とします。

次にイベントを設定します。

まずは「戻る」ボタンです。

イベントタブに移動し、onclickが選択されていることを確認し、[アクションの追加]をクリックします。
以下のように、xp_byDateを開くように設定し[OK]します。

続いて「編集」ボタンです。
こちらも単純に「文書モードの変更」で「編集モード」とするだけになります。

最後に「保存」ボタンです。
こちらのみイベントはふたつ登録します。
まずは「文書の保存」です。

保存した後に、xp_byDateに移動させます。

アクショングループとして、以下のようになっていればOKです。

続いて選択項目であるClassとTagsを設定します。
いずれも値の[式項目の追加]にて@DbColumnを使用し、ビュー内の値を取得します。

まずはClassです。

@DbColumn("","byClass",1);

と入力し、[OK]します。
値は以下のように表示されます。

同様にTagsです。

@DbColumn("","byTags",1);

と入力し、OKします。

なおTagsは複数選択可能としますので、リストボックスのオプションをチェックしておきます。

次にxp_byDateに新規作成ボタンを追加します。
カスタムコントロール titleBarの下の改行へコアコントロールより[ボタン]をひとつ追加し、ラベルには「新規作成」としてください。

イベントタブに移動し、onclickのイベントとして以下を設定します。

こちらも単純にxp_mainFormを新規作成モードで開くというものです。

それではxp_mainFormをブラウザでプリビューし、各ボタンの動作を確認してください。

xp_byDate

[新規作成]

[分類]

[日付]

[タグ](複数選択)

以下デモデータで[保存]すると・・・

ビューに表示されました。

再度開いて、

[戻る]ボタンでxp_byDateに戻ることを確認してください。
続いて[編集]ボタンを押すと

当たり前ですが、編集画面になります。
「分類2」に変更して[保存]すると、

長くなりますが、最後にボタンの表示制御のみ続けさせてください。

今のままですと、フォームが編集モード時にも[編集]ボタンが、読み込みモード時にも[保存]ボタンが表示されてしまいますので、それぞれについて非表示の設定を行います。

まず[編集]ボタンを選択し、[可視]の右にある◇をクリックし、[値の計算...]をクリックします。

スクリプトエディタが表示されますので、左側の[参照]タブ内 currentDocument 以下の 

idEditable() をダブルクリックしてください。

式が登録されますので、先頭に式を否定する"!"を入力し、[OK]します。

逆に[保存]ボタンは否定せずに保存します。

ブラウザでプリビューしますと、

[読み込みモード時]

[編集モード時]

と、不必要なボタンの表示をなくすことができました。

いかがでしたか?

少し式は書きましたが、全くハードルは低いものではなかったでしょうか。
もちろん入力制御やその他機能を盛り込むべき部分もありますが、初心者でもXPagesを使い、WEBアプリケーションが作ることができる点をご理解頂けましたら、今回のシリーズとしては成功かと思います。

ぜひ一度、お試しください。

なお今回作成しましたアプリケーションはこちらよりダウンロード可能ですので、ご希望の方はご自由にお使いください。

※2018/03/14　ダウンロード先変更