基本機能に絞った掲示板について～その4

みなさま、こんにちは!
週末は子供の運動会でした。結構多かったのではないでしょうか。
神戸はお天気に恵まれ、真っ黒に日焼けしてしまいました(汗

さて先週、フェイスブックで少し落ち込んだ記事が本日の記事です。
まったく消えてしまったので、今から再度作り直しなのですが、既にできあがったデータベースを使っての記事作成ですので、画像が思うように取れるのか?
至らぬ点はご容赦ください。

前回は日付順ビューをXPagesでWEB化しましたので、今回はメインフォームをWEB化して完成させたいと思います。

早速ですが、新規XPageで"m_mainForm"を作成します。
データとして、"メイン-main"フォームをバインドしておきます(デフォルトアクションは「文書を開く」)。

続いて全てのプロパティを開き、[データ]-[data]-[dominoDocument[0]]内の下記プロパティを変更します。

computeWithForm：both

このプロパティが従来のNotes開発者には非常に重要な項目かと思います。

要はフォームのフィールドに設定された式をXPageでも実行させるというものです。

onload、onsave及びその両方で実行させることが可能です。

本件、9月にフェイスブックで少し触れたのですが、できればXPagesワークショップのような初心者向けの講義や資料にはぜひ組み込んで頂きたいと感じます。

さて、それでは本題に戻ります。

フォームのデータがバインドされましたので、フィールドをドラッグ&ドロップして配置します。

※作成日・作成者・編集日・編集者の4項目は2回ずつ表示されておりますので、上側のみ配置します。

データバインドコントロールの選択ダイアログが表示されますので、以下のように設定してOKします。

Created/Createdby/Modified/Modifiedby : 計算結果フィールド Title : 編集ボックス Category1/Category2 : コンボボックス Body : リッチテキスト

それではブラウザでプリビューしてみましょう。

計算結果の4項目は既にセットされた状態で開くことができたかと思います。

それでは標題の変更とフィールドの設定(余白等)を適宜変更してください。

私の環境では以下のようになりました。

次にカテゴリー項目の選択肢を設定します。

category1を選択してください。

コンボボックスの値を設定します。左から2番目のボタン「式項目の追加」をクリックしてください。

言語：JavaScript(サーバーサイド)を確認し、「動的に計算」として下記設定を行います。

@DbColumn(@DbName(), "byCategory1", 1)

同様にcategory2については、以下の式を設定します。

@DbColumn(@DbName(), "byCategory2", 1)

いずれもそれぞれのビューの1列目の値を選択肢として表示するというものになります。

プリビューすると、それぞれ設定ができていることが分かります。

次にアクション用のボタンを配置します。

まずは先頭にコンテナコントロールからパネルを配置します。

そのパネル内に3個のボタンを配置し、左からラベルを「戻る」「編集」「保存」とします。

「編集」ボタンの「可視」プロパティの右の◇をクリックし「値の計算」を選択します。

左のペインで「参照」を選択し、[currentDocument]から[isEditable():boodean]をダブルクリックします。

条件に設定値が入りますので、先頭に"!"を入力し、否定形とします(編集モードでない場合に表示させる)。

続いて「保存」ボタンの「可視」プロパティです。

先と同様[currentDocument]から[isEditable():boolean]をダブルクリックしますが、今回は否定しませんので、"!"は不要です(文書が編集時のみ表示させる)。

続いてそれぞれのイベントですが、下記のように設定します。

「戻る」ボタン

シンプルアクション 　基本/ページを開く/m_byDate

「編集」ボタン

シンプルアクション 　文書/文書モードの変更/編集モード

「保存」ボタン

シンプルアクション 　文書/文書の保存/document1 　基本/ページを開く/m_byDate

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

次に前回作成しましたXPage「m_byDate」から開く設定を行います。

m_byDateを開き、ビューの列「title」を選択します。

表示プロパティ内「列の値をリンクとして表示する」にチェックし、文書を開くモードは「読み取り専用」とします。

続いて新規作成ボタンです。

先ほどのフォームと同様、先頭にパネルコントロールを配置し、ボタンをひとつ追加し「新規作成」とします。

イベントとして、以下を設定します。

シンプルアクション 　基本/ページを開く/m_mainForm/新規文書

以上で完成です。

m_byDateをブラウザでプリビューし、さまざまな動作を確認してください。

なお現時点で、Notesクライアントとの大きな違いがひとつございます。

カテゴリについて、Notesクライアントでは複数選択や新規項目の追加が可能ですが、現状のXPageではそこまで踏み込んでおりませんので、ご了承ください。

なおここまでの内容について、こちらよりダウンロード可能ですので、ご自由にお使いください。

・・・申し訳ありません、アラがあるのは確認済ですので、お許しを(汗

基本機能に絞った掲示板について～その3

みなさま、こんにちは!
9月も今週で終わりですね。朝夕かなり涼しくなって参りましたので、皆様体調管理にはご留意ください。

先週は東京で【IBM Notes Domino Day 2017】が開催されましたが、かなり盛況との事でした。
私も参加したかったのですが、どうしても本業の兼ね合いがあり、願いは届かず・・・。
今は11月に開催されますノーツコンソーシアムオープンセミナーに参加できるよう調整中です!!

皆様とお会いできる日を楽しみに、日々働いております。

さて先日まででNotesクライアントから利用できる掲示板を作成しましたが、標準テンプレートにはWEB機能も含まれております。
ということで、今回からはWEB画面を作成してみましょう。

XPages作成の初期設定については、お手数ですが過去記事をご参照ください。

それでは新規XPage「m_byDate」を作成します。

ひらいたXPageに、「日付順」ビューをバインドします。

[コントロールの選択]ダイアログボックスが使用可能になっていることを確認し、データパレットのすべての項目を選択し、設計内にドラッグ&ドロップします。

データバインドコントロールの選択ダイアログが開きますので、そのままOKします。

「表示」コントロールを選択し、以下幅を100%に設定します。

フォントのスタイル等は自由に設定してください。

続いてピュー列「title」を選択し、プロパティの「表示」タブ内「列の値をリンクとして表示する」にチェックし、開くモードを「読み取り専用」を選択します。

以上で保存し、ブラウザでプリビューしてみましょう。

見づらいですね。
少し体裁を整えてみましょう。

まずは列タイトルです。

Created　⇒　作成日 Title　⇒　タイトル

に変更します。

続いて全てのビューの列を選択し、左余白(内側)を設定します。
私は3ピクセルとしました。

次に全てのビュー列のヘッダーを選択し、背景を設定します。

私は薄い青としました。

最後に列の幅を設定します。

作成日：10% 作成者：10% カテゴリ1：15% カテゴリ2：15% タイトル：50%

以上で再度ブラウザでプリビューしてみましょう。

かなり見やすくなりましたね。
※私はページャーも変更してみました。ページャを選択すると、サンプル1～7がありますので、お好きなものを選んでください。

以上で日付順ビューのページが整って参りました。

次回はフォームのXPageを作成し、日付順ページから開くように設定します。

基本機能に絞った掲示板について～その2

みなさま、こんにちは!
先週のテクてくカフェ、盛り上がりましたね。
Notesアプリに限定した機能に関するディスカッションでしたので、次々出てくるというものではありませんでしたが、ひとつ出ると派生的に次に繋がるのがおもしろかったです。
大阪PVは音声がうまく双方向に繋がらず、その点は少し残念ですが、今後の対策に期待してます!

さて、先日は単機能の掲示板のフォームとビューを作成しました。
今回はフォームのカテゴリフィールドをダイアログリストに変更し、過去履歴から選択できるように修正してみます。
過去履歴を参照するには、Excelでいうvlookup関数のような関数@DbColumnを利用します。

まずはヘルプ文書を見てみましょう。

文面だけ読むと複雑なことが書かれているのですが、構文は以下の通りです。

@DbColumn(class:cache;server:database;view;columnNumber)

今回のデータベースにあてはめた場合、

class : "Notes" または ""
cache : "NoCache"・・・検索するたびに最新情報を取得するためのオプション
server:database : "" ・・・同一データベース内に対象のビューがある場合は省略可
veiw : byCategody1 及び byCategory2
columnNumber : 1 ・・・1列目のデータを参照する

となります。

それでは「メイン」フォームを開いてください。
まずはカテゴリ1からです。

フィールド「category1」を選択し、種類をテキストからダイアログリストに変更します。
制御タブに移動し、選択で「式で選択肢を設定」に変更し、以下式を設定します。

@DbColumn("":"NoCache";"";"byCategory1";1)

それではNotesでプリビューしてみましょう。

フィールドの右側に▼ボタンが表示され、クリックすると「キーワードの選択」ダイアログが表示され、過去に登録のあるカテゴリ1の内容が表示されます。
選択して「OK」すると、カテゴリ1に選択した値がセットされます。

このままでは新たなキーワードが設定できませんので、先ほどの式の下にある「リストにない値も可」にチェックします。

それでは再度Notesでプリビューしてみましょう。
先の「キーワードの選択」ダイアログに、「新しいキーワード」という項目が追加されました。

こちらに値を入力し、OKすることで新規のカテゴリを追加することができます。

なお複数のカテゴリを選択できるようにするには、フィールド情報タブにある「複数値も可」にチェックします。

以下のように、キーワードの前にチェックボックスが表示され、複数の値(新しいキーワードと同時にセットも可)が設定可能となります。

同様にcategory2についても、プロパティを変更し、以下の式をセットします。

@DbColumn("":"NoCache";"";"byCategory2";1)

同じように、キーワードが選択できるようになりました。

このように@DbColumnを用いることで、選択肢を提供し、入力の簡素化を図るだけでなく、文字のゆらぎ(前半角の違いも含む)により、別カテゴリに集まってしまうという人為的なミスを減らすことも可能となります。
もっとも常に新しいキーワードに手入力されてしまうと活きてこないのですが。

それでは最後にフレームセットやナビゲーターを準備し、アプリケーションを仕上げます。
もちろん必須ではありませんので、お好みで設定してください。

まずはナビゲータです。
新規ナビゲータで「 メニュー|menu 」を作成します。

開いたナビゲータに4個の四角形を追加し、それぞれに「日付順」「作成者別」「カテゴリ1別」「カテゴリ2別」と表題を設定。
シンプルアクションでそれぞれのビューを開くよう設定します。

次にフレームセットです。
新規フレームセット作成で、「 メイン|main 」を作成します。

左のフレームには

名前：menu 種類：名前付き設計要素/ナビゲータ 値：メニュー フレーム内のリンクのデフォルト対象：body

と設定します。

右のフレームには、

名前：body 種類：名前付き設計要素/ビュー 値：日付順

と設定し、保存します。

次に「アプリケーション構成」の「アプリケーションのプロパティ」の「起動」タブを選択し、IBM Notes クライアントの起動で「指定したフレームセットを開く/メイン」と設定し保存します。

最後にリソースのアイコンで、適当な画像(32x32ピクセル)に置換し、完成です。

さて、今回は機能を絞った掲示版にフォーカスし、作成してみました。
標準テンプレートと比較すると、設計の簡単さは理解頂けるかと思います。
それゆえ、カスタマイズも簡単になっているはずです。

こちらをベースに、さまざまなアプリケーションに発展させることも可能ですので、ぜひ一度お試しください。

なお私のほうで作成したアプリはこちらよりダウンロード可能ですので、ご自由に使ってください。

基本機能に絞った掲示板について～その1

みなさん、こんにちは!
先週金曜は、IBMチャンピオンである小野様を招待し、大阪研究会はたいへん盛り上がりました。会員の皆様へは、近日議事録が発表されるかと思いますので、お待ちください。
さて今週もイベントは続きます。
金曜にはテクてくLotus技術者夜会が開催されます。
今回はテクてくカフェの開催だそうです。
私自身、初参加ですので、今から楽しみです～。

最近、つくづくブログでの情報発信の難しさ、自分の文才のなさに躓いております。
ただ何もせずにいても成長しませんので、「継続は力なり」ということで引き続きよろしくお願い致します。


さて今回からは新シリーズをスタート致します。
恐らく掲示板はディスカッションテンプレートを使用されているユーザー様が多いのかと推測します。
弊社も過去に記載したように、ディスカッションテンプレートを少しカスタマイズして利用しているアプリケーションが多数存在します。

もちろんディスカッションテンプレートは非常に優秀なテンプレートではありますが、ノーツ初心者が少し手を加えたい等の場合、設計要素が多く、場合によっては影響範囲も考慮する必要があるため、少しハードルが高いのも事実かと思います。

そこで今回は単純な掲示板を作成し、先々、発展したアプリケーションに改築しやすいものを作ってみたいと思います。

それでは新規でアプリケーションを作成します。
テンプレートは使用しません。
参考までに私の設定内容は下記としました。

続いて新規フォームを作成します。
私は「メイン|main」としました。

続いてフィールドを追加します。
掲示板で必要な内容として、今回は以下を設定します。

タイトル：title(テキスト/編集可能) 　　　　　入力必須設定として、以下の式を「入力の確認」に設定 　　　　　　@If(title="";@Failure("［タイトル］の指定は必須です。");@Success) カテゴリ1：category1(テキスト/編集可能) カテゴリ2：category2(テキスト/編集可能) 内容：body(リッチテキスト/編集可能)

※カテゴリは後にダイアログリストに変更しますが、まずはテキストとして作成します。

デザインや体裁はお好みで修正してください。
私の例は下記のようになりました。

次にフォームのウィンドウタイトルに以下の式を設定します。

@If(@IsNewDoc;"新規掲示作成中";title)

以上で一度Notesでプリビューしてみましょう。

私の例では以下のようになりました。
※ウィンドウタイトルが正しく表示されるか、確認ください。

続いてサブフォームをひとつ作成します。
フィールドは以下4つになります。

登録日：created(日付/時刻、作成時の計算結果)       式：@Created 登録者：createdby(作成者、作成時の計算結果、日付のみ表示) 　　式：@Name([CN];@UserName(1))・・・※ 編集日：modified(日付/時刻、計算結果、日付のみ表示) 　　式：@Modified 編集者：modifiedby(名前、計算結果) 　　式：@Name([CN];@UserName(1))・・・※

※別名(当社では日本語名)を使用するため、@UserName関数に(1)を設定しています。
以上でプリビューしてみます。

問題なく表示できましたら、テスト用に2～3文書作成し、閉じてください。
続いてビューを作成します。
作成するビューは4種類
●日付順
●作成者別
●カテゴリ1別
●カテゴリ2別

まずは日付順(日付順/byDate)です。

列の設定は、

作成日(created)/降順/日付のみ表示 作成者(createdby) カテゴリ1(category1) カテゴリ2(category2) タイトル(title)/詳細タブにて「利用可能なウィンドウ幅まで拡張して使用する」にチェック

プリビューすると下記のように表示されるはずです。

このビューをコピーし、以下3つのビューを作成します。
●作成者別|byCreatedby
●カテゴリ1別|byCategory1
●カテゴリ2別|byCategory2

デザイナー上では下記のように表示されるはずです。

次に作成者別ビューを開きます。

2列目の作成者を先頭へドラッグアンドドロップし、1列目にくるように移動させます。
続いて作成者列を選択し、以下設定を行います。

幅：1 展開できる行に参画アイコンを表示する：チェック ソート：昇順 種類：カテゴリ別

プリビューすると以下のように表示されます。

同様にカテゴリ1別では「カテゴリ1」の行、カテゴリ2別では「カテゴリ2」の列を先頭に移動し、作成者別と同じプロパティを設定します。

今回の最後に、アクションを追加します。
共有アクションとして、以下を作成します。

新規作成　式：@Command([Compose];"main") 終了　式：@Command([FileCloseWindow]) 編集　式：@Command([EditDocument]) 削除　シンプルアクション：データベースから削除 印刷　式：@Command([EditDocument]) 戻る　式：@Command([FileCloseWindow]) 保存　式：@Command([FileSave]); 　　　　　@Command([FileCloseWindow])

※編集：プリビュー(編集モード)、編集モード時は非表示
※戻る：プリビュー(読み込み)、読み込みモード時は非表示

各ビューに「終了」「新規作成」「印刷」「編集」「削除」を。
フォームに「戻る」「編集」「印刷」「保存」「削除」を追加します。

アクションバーのプロパティ等、デザインはお好みで修正ください。

以上で見た目は以下のようになりました。

次回はカテゴリをダイアログリスト化し、過去の履歴から選択できるようにし、ナビゲーター等でアプリケーションを整えたいと思います。