ページビューの合計

2017年3月27日月曜日

既存アプリの最短Xpages化

みなさま、こんにちは!!
いよいよ年度末ですね。金曜は棚卸や決算関係のお仕事が待ち受けています(汗
まあ、もうひとふんばりというところでしょうか。

さて今回は「アプリをWEB化したい」とか、「Xpagesを使ってみたいが・・・」という方が結構いらっしゃると伺っておりますので、まずは既存アプリをできるだけ簡単にWEB化するという点にターゲットを絞って、掲載致します。
どうしても既存のNotesで動いているそのままをXpagesを使って再現するとなるとハードルが上がってしまいます。特にアクションをどう実現するかなど・・・。
弊社ではまずはブラウザで見ることができるようにするというポイントでWEB化を進めております。(今後予定されるポータル導入時に、表示できるようにしたいため)

さて元となるアプリですが、先日公開させて頂きました簡易日報を使用致します。
こちらに日付順のビューと実際のフォームのふたつについて、Xpagesを使用しWEB化致します。
もちろん皆様の環境でご使用のアプリに追加頂いても構いませんが、各内容については読み替えて設定してください。
※既に本番環境で稼動開始しておりますので、画面上では「日報(report.ntf)」というアプリを使用致します。
※なお、xpagesを作成する際の[アプリケーション構成] - [Xspプロパティ]については、
【第3回】タイムレコーダーアプリ作成~XPages作成の準備とトップページの作成~
をご参照ください。


それではまずはビューのページを作成します。
[新規XPage]のボタンをクリックし、ページを作成します。

名前: m_byDate
データソースをページに追加にチェック
データソース:Domino ビュー
ビュー:1.一覧\1.日付順 - byDate


とし、[OK]をクリックします。

すると、右側にデータタブが追加された状態で、新規ページが開きます。


続いて[コントロールの選択]ダイアログボックス(使用可能)の状態で、データソース内の全てを選択し、新規ページにドラッグ&ドロップします。


データバインドコントロールの選択が表示されますので、「Gj」「激」「Li」のチェックを外し、[OK]をクリックします。


すると、下記のようにビューが埋め込まれます。

それでは一度、ブラウザでプリビューしてみましょう。
※テストで1レコードだけ登録しております。
下記のように表示されました。



次にフォームのページを作成します。
[新規Xpage]をクリックし、下記のように設定します。

名前: m_mainForm
データソースをページに追加にチェック
データソース:Domino 文書
フォーム:メインフォーム - main
フォーム検証の実行: 文書ロード時


開いたページに[コアコントロール]からボタンをひとつドラッグ&ドロップします。
プロパティでは

ラベル: 戻る

とし、イベントで onclick 時のアクションを追加します。

カテゴリ: 基本
アクション: ページを開く
開くページの名前: m_byDate


続いてフォームに表示するコントロールをデータタブから追加します。
ビューと同じように一旦全てのコントロールを選択し、ページ上にドラッグ&ドロップします。

Good comment以下のコントロールのチェックを外し、[OK]します。


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


それではこちらもプリビューしてみましょう。


無事、表示されました。

それではもう一度 m_byDate を開きます。
ビューの列「日付」をクリックし、選択してください。

プロパティの[表示]タブにある[列の値をリンクとして表示する]にチェックします。


続いてイベントで[アクションの追加]をクリックします。
設定は、

カテゴリ: 基本
アクション: ページを開く
開くページの名前: m_mainForm
ターゲット文書: 文書を開く


以上で一旦Xpageを保存して閉じます。

次にブラウザからデータベース起動時にm_byDateが開くように設定します。

[アプリケーション構成]の[アプリケーションのプロパティ]を開き、[起動]タブに移動します。
Web ブラウザの起動で

起動: 指定した XPage を開く
XPage: m_byDate

とし、[アプリケーションのプロパティ]を保存して閉じます。

それではせっかくですので、ブラウザにアドレスを入れて開いてみましょう。

弊社の環境では、サーバーのDataフォルダ内の[DB]フォルダ内に[report_2017.nsf]というファイルを使用してありますので、下記URLでアクセスします。

http://サーバー名/DB/report_2017.nsf

※ACLの設定により、ユーザー名とパスワードが要求されますので、ノーツクライアントにログイン可能なユーザー名とパスワードでアクセスしてください。
注)インターネットパスワードが設定されている必要があります。
アクセスすると、下記のように表示されます。



リンクとなっている[日付]をクリックすると、対象文書がm_mainFormで開きます。


[戻る]ボタンで m_byDate が開くことをご確認ください。


実運用をするには、デザイン・見た目をもっと変更する必要がありますが、今回の目的はいかに簡単に既存アプリをWEB化するかを目的としておりますので、以上とさせて頂きます。

ここまでの内容でしたら、少しNotesを触ったことがある方でしたら、何のストレスもなくWEB化できるはずです。

ぜひ、いきなり最終形を目指すのではなく、まずはWEB画面で表示できるまでからスタートしてみてください。

2017年3月21日火曜日

簡易日報(設計非公開)版の配布

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

先日も書きましたが、年度末にいろいろと予算がつき、まさに右往左往の状態です。
昨日は本社内のアクセスポイントの総入れ替えを実施しました。
せっかくですので、お客様用のSSIDも準備致しましたので、弊社に来られる際はお問い合わせください。

ちなみに明日は販売管理システムの手直しとBIツールの定義納品・確認が待ってます。

木曜は支店のアクセスポイント切り替え。
終了後はノーツコンソーシアム 大阪研究会の「悪巧みの会」と称された前準備の打ち合わせで京都に向かいます。

ということで・・・
ネタ切れです(大汗

いくつか社内で実施したいテーマはあるのですが、手を付けることすらできず、もちろん当記事にもなりません。

ということで・・・
前々回に林様のテクてく講義を適用したデータベースをご紹介しましたが、本日は設計非公開になりますが、ダウンロードを準備致しましたのでご案内させて頂きます。

こちらよりダウンロードしてください。

もちろんこのままでは得意先のダイアログ設定ができませんので、まったく使い物にはなりません。

ご希望の方へは、設計公開版のテンプレートもお譲りさせて頂くことは可能です。
再配布以外、ご自由に使って頂いて結構です。

また揚げ足を取っていただいて、「こうすれば」などご指導頂けましたら、それ以上にありがたいことはございません。

あくまで初歩レベルのデーベース(あえてアプリケーションとは言いません)とご判断ください。

なお社内で設計が組み替えられないような企業様については、可能な範囲でお手伝いさせて頂きます。
お代は必要ありませんが、内容に限界があることと、日程に猶予を頂けることのみご了解ください。

もちろん専門の方に、修正を依頼頂いても構いません。


以上、自分のレベルの低さを露呈するような内容となってしまいますが、素人の作品程度ということでご容赦ください。

2017年3月13日月曜日

【第8回】タイムレコーダーアプリ作成~テンプレート化~

みなさま、こんにちは!!
年度末が近づいて参りましたね。
弊社では今年、少し予算が頂けましたので、念願のアレの更新と、ソレの新規導入の真っ最中です。
・・・すいません、いい加減な書き方ですね(汗
ゴールデンウィークに什器の入れ替えを予定しているのですが、物品のみ年度内予算で購入することになり、まさに今日から会社の倉庫に搬入が開始されました。
予定より早く本日分が完了したため、なんとか当記事を公開することができました。

さて前々回まででアプリケーションとしては(見た目をのぞいて)仕上がりました。
このまま利用してもいいのですが、弊社では年度ごとにデータベースを作ろうということになりましたので、テンプレート化しております。
また前回にも書きましたが、現状ですと推測しやすいデータベース名であり、加えてanonymousに作成者権限を与えているため、ほんの少しリスクを減らす効果も考慮しております。

それではデザイナー左メニューにあるタイムレコーダーを右クリックし、【アプリケーション】→【コピー】をクリックしてください。


アプリケーションのコピーダイアログが開きますので、

サーバー:貴社サーバー
ファイル名:time-recorder.ntf
アプリケーションの設計のみを選択

以上でOKします。


続いてデータベースのプロパティを開き、左から4番目の設計タブに移動します。

中央少し下の
マスターテンプレートのデータベースにチェックし、テンプレート名を記述します。
今回は「タイムレコーダー」としました。
※日本語も可能ですが、他のテンプレートとの重複に注意ください。


以上でテンプレートができました。

試しに新規アプリケーションの作成を行うと、以下のようにサーバー内のテンプレートとして選択可能になります。


あとはファイル名を乱数にするなどすれば、外部からのアクセスは非常に困難になるというものです。


本アプリケーションは本来のノーツIDを利用せずに運用しておりますので、最善の方法とは言えないと思いますが、XPagesでひとつ作り上げるということに主眼を置いて公開させていただきました。
もっともIDを使用すれば、xpagesの画面には時間表示と「出社」「退社」のボタンだけの表示で済むのですが、退社時はともかく、出社時にパソコン起動するまで打刻できないということがいいのか悪いのか・・・ということで。

ぜひ皆様もいきなり難しいことからスタートするのではなく、XPagesで動くものが作れるという感覚を経験頂ければ幸いです。

さて次回はどうしたものか・・・。

2017年3月6日月曜日

実践!! Cool で使いやすい Notes アプリデザイン講座

みなさま、こんにちは!!
先週金曜は、AMにユーザー情報交換会、PMには総会からNotes Festa + 懇親会といつもながら非常に濃いイベントに参加させて頂きました。

ユーザー情報交換会では、昨年に続き、【ノーツ お困りごと相談】ということでの報告を頂き、特に関心の高かった【検索】に関する講義も行って頂き、得るものが多いイベントとなりました。
Festaでは、先日の IBM Connect 2017 のフィードバック(1週間でここまでまとめていただき、ありがとうございました!!)があり、今年も熱い1年になりそうと感じた次第です。
最後には感謝状まで頂く次第。本来は弊社であり、また私自身がコンソに対して感謝すべきなのですが・・・。
本当にありがとうございました。
これら資料等については、一部については、会員限定サイトでの公開になるかもしれませんが、可能なものはオープンで閲覧できるようになるかもしれませんので、しばらくお待ちください。

次回は7月にユーザー情報交換会を秋田のT様で行う予定との事。
早速ダメもとで今朝ほど上層に相談しました。

私:また7月にユーザー情報交換会があるのですが、参加していいですか?ちょっと遠いんですけど。
上司:もちろん行ってきてください。
私:秋田なんですけど。
上司:とおっ。まあ、いいや。

という具合です。
今から楽しみです~。

さて本来ですと、今回はタイムレコーダーのテンプレート化を予定していたのですが、先に報告したい事項が発生しましたので、テンプレート化は次回とさせてください。

2月17日に東京にて開催されました【テクてく Lotus 技術者夜会】にて、林様より

もう Notes だからとは言わせない!!
Cool で使いやすい Notes アプリデザイン講座

をリモートで受講させて頂きました。
リモートとかいいつつ、林様が大阪で借りていただいたコワーキングスペースに押しかけ、実際にはこのセッションは現場で聞かせて頂くという幸せものです。

さてセッションの内容ですが、IBM Notes のデザインをいかにCoolに見せるかという非常に興味深いものでした。

そこで・・・
弊社で4月より運用開始する日報のデザインを、思い切ってセッション内容に準じたものにしてみました。

セッション資料は林様より Slideshare Docswell(2022/04/28更新)に公開頂いておりますので、こちらをご覧ください。


さて、まずはフォームのデザインです。
私のほうで作成したものは、できるだけノーツということを意識したデザインになっています。

旧デザイン


現在使用している日報デザインを踏襲し、色合いも合わせて作ってあります。

これが講義内容を適用すると・・・


とっても Cool です !!

全く内容は削っておりませんが、見た目がスマートになり、利用者の視線・視点の負担が減らせることになるのではないでしょうか。

続いてビューです。

従来のビュー(弊社のビューはほぼこの形)はフレームセットの左にメニューとしてアウトラインを埋め込んでいました。


ノーツを使い慣れている方でしたら、おなじみですね。

さてこれに講義内容を適用すると・・・


まるで別物!!

もちろんまったく自分の力量ではないのですが、イメージが変わります。
ユーザーにも見てもらい、比較してもらいましたが、感想は・・・

今風になったのでは?

と好評でした。

特にメニュー部分をナビゲータにすることで、従来よりも使いやすくなったようです。

今後のアプリの使い方にノウハウを活かして、少しでも自分の力量に加えられるよう努力致します。


なお本講義に参加できなかった方も多数いらっしゃるかと思います。

まだ予定ですが、ノーツコンソーシアムの2017年 第1回大阪研究会で同じ内容をご講義頂ける予定ですので、ご興味ある方はぜひご参加ください。

会員外の方でも、事務局にご連絡いただけましたら、見学が可能です。
遠慮なくメールしてみてください。


2017年2月27日月曜日

【第7回】タイムレコーダーアプリ作成~仕上げ~

皆様、こんにちは!!

いよいよ今週ですね。ノーツコンソーシアム FESTA 2017
ちなみに会員である弊社は、当日午前に開催されますユーザー情報交換会にも参加させて頂きます。
皆様とお会いできることが、今から楽しみでなりません!!

さて本題に戻ります。前々回で凡そのアプリケーションの形は仕上がりました。
今回は少し手を加えて、完成させたいと思います。


まずはトップページ【m_XpIndex】です。
タイムカードアプリということですが、現時点ではカレンダーや時計表示がありません。
正しくは右下に小さくクライアントの時計表示はありますが、実際にこちらを見て、打刻することはどうかと思います。

そこで、時計表示を埋め込みたいと思います。

個人的にはJSTを利用できればと思ったのですが、「大型文字表示」はiframeに対応しておらず、結局Javascriptのサンプル例を埋め込みました。

恐れ入りますが、Javascriptのサンプルについてはご自身でお好みのものをお探しください。

それでは設置手順です。
まずはm_XpIndexの先頭のラベルと出社・退社ボタンの中央あたりに、パネルコントロールを配置します。
※特パネルは必要ありませんが、手を加える際にわかりやすいよう設置しました。



続いてパネルを選択した状態で、ソースタブに切り替えます。

<xp:panel></xp:panel>というタグがハイライトされますので、その間にJavascriptのサンプルを貼り付けます。
※一部サンプルには、<head>タグ内にもスクリプトが必要なものがございます。今回は<body>タグ内にのみ記述するものとして記載しております。詳しくはサンプルの設置方法に従ってください。

設計タブに戻り、パネルを選択し、フォントサイズや色等のプロパティを設定します。

随時、m_XpIndexをプリビューしながら確認してください。

少しバランスが悪いですが、私の設定では、下記のように表示ができました。



次にアプリケーションのアイコンを変更してみましょう。

今回は下記のような画像を準備してみました。
もちろんお好きな画像をご準備いただければ構いませんが、32x32ピクセルのJPEGもしくはPNG、GIF、BMPファイルが利用可能です。


左メニューの【リソース】内の【アイコン】をダブルクリックしてください。



このような画面が開きます。
上半分は、準備した画像ファイルを読み込む方法。
下半分は、直接アイコンファイルを32x32のマスを利用し、下記のように編集するものになります。


それでは上半分を利用し、アイコンを変更します。

【参照...】ボタンをクリックし、準備した画像ファイルを呼び出してください。


以上でアイコンが切り替わりました。

もちろんノーツクライアントのアイコンも変更されています。


レイアウトやデザインはさておき、以上でアプリケーションとしては完成です。

次回はこのアプリケーションをテンプレート化する手順を紹介させて頂きます。

そのまま使っても構わないのですが、anonymousが使用できる権限を取得しているため、ファイル名を安易に推測できないものにすることで、少しでもリスクを減らそうというという意図もあります。


・・・そろそろ次のネタを探さなければ(汗

2017年2月20日月曜日

祝! IBM Connect 2017開催!!

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

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

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

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

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

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

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


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


2017年2月13日月曜日

【第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を使用すれば、意図的に少し直接タグを利用しましたが、プログラムレスでここまで表現できるんです。

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