fc2ブログ

JQuery TableSorter

ホームページで行数が多いテーブルがあり、すっきりしたデザインにしたかった。
そこで、私の要望は
 ・ タイトル行が固定、明細をスクロール
 ・ ヘッダクリックでソート
 ・ 1行置きに色を付ける
 ・ 選択行が色などでわかる
 ・ JQueryプラグイン
となかなか細かい。

まず Flexgrid をダウンロードして試してみて、リッチなインターフェースがこんなにも簡単に作れてしまうのか驚かされました。データ形式はJSON、XML、固定Tableの3つ。JSONはDominoのOpenAgentをURLに指定して試すが、ソート機能が効かない。固定Tableも同様、どうやらローカルでソートするロジックではないようだ。運用者を考慮すると、固定テーブルもしくはXMLファイルが望ましかったがXMLはサンプルもなく、試してみるができませんでした。

その後も色々なプラグインを試し、最終的に TableSorter を選びました。
そのままでは「タイトル行が固定、明細をスクロール」の要件を満たしていませんが、スマートな作りなのでCSS を工夫して何とか形になりました。
作った サンプルはこちら で、サンプルの説明は下記の図の通り。

css

ちなみに 前回 のDominoのDOCTYPEがデフォルトのままだとIE6.0でtheadが上に上がりません。
スポンサーサイト



テーマ : プログラミング
ジャンル : コンピュータ

Doctype宣言

ホームページのリニューアルを行っていますが、テーブルレイアウトをやめて今風?の作りを取り入れようと試行錯誤しています。そこでTABLEタグのヘッダを固定にしてボディのみスクロールをコーディングしたところ、Firefox 3 と Opera 9では意図した具合に表示されるのですが、IE6ではヘッダがボディ内に入って表示されてしまいます。他にもちょこちょこ問題あり。

調べたところ、Doctype宣言にシステム識別がない(公開識別子だけ)ことが原因でした。Docttype宣言はDominoで吐き出されているためノーコーディングですが、Notes.iniファイルに"DominoCompleteDoctype"を宣言することで変更可能とのこと。パラメータは下記の3つ。

0 = <DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
1 = <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2 = <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

バージョンが 6.51 であったため、6.5.3以上にバージョンアップして"DominoCompleteDoctype=1"(Quirks Modeを選びました) を Notes.ini に追加したところ変更されました。Domino 7.0.2 以降になると$$HTMLFrontMatterフィールドによる選択肢も増えるとのことですが、ページで作成していた場合はどうすれば?XHTMLは?

公告配信を主とする企業ホームページのWebサーバーにDominoを選択する企業は果たしているのか?と疑問を持ちましたが、今はそれより Microsoft(=IE)に腹が立っています。IE8 は検証していませんが、どうなることか。

追記です。
takeoff氏より情報頂きました。XHTML にしたい場合は、URLに"&OutputFormat=xhtml10"を追加する必要があるとのこと。また、JSHeaderに記述したJavaScriptや_doClickがCDATAセクションに入れられてしまい、解決方法はJavaScriptを外部ファイルにする必要があるとのこと。いつの日か必要に迫られたときに実験してみます。
?ReadViewEntries&OutputFormat=JSON は知りませんでした。これは使えると思います。貴重な情報に感謝です。

テーマ : プログラミング
ジャンル : コンピュータ

ビューにチェックボックス

アイデアとしては面白いのですが、今のところ使う場面が無いインターフェースを載せてみます。
下記がそのインターフェース。ビュー上でクリックするとチェックボックスにレ点が入ります。

ビュー

プログラムは...

(1) イメージリソースに12×12pxでチェックボックスオンとオフの2つの画像 チェックオン チェックオフ (ファイル名はcheckon.gif と checkoff.gif)を登録する。

(2) フォームを用意して、データを入力する。

フォーム

(3) ビューを用意。1列目は列のプロパティより「値をアイコン表示」にして式を入れる。2列目は顧客名のみ。

ビュー

ビューの「Inviewedit」イベントに下記のプログラムを記述する。
Sub Inviewedit(Source As Notesuiview, Requesttype As Integer, Colprogname As Variant, Columnvalue As Variant, Continue As Variant)

Dim Session As New NotesSession
Dim UIWorkspace As New NotesUIWorkspace
Dim Document As NotesDocument

Set Document = Session.CurrentDatabase.GetDocumentByID(Source.CaretNoteID)
If Not document Is Nothing Then
If Len(Document.FLG(0)) = 0 Then
Document.FLG = "1"
Else
Document.FLG = ""
End If
If Not Document.Save(False, False) Then
Messagebox "他のユーザが編集中です。", 0 + 64, Session.CurrentDatabase.Title
End If
Call UIWorkspace.ViewRefresh()
End If
End Sub

以上ですが、皆さんはビュー上から 「Inviewedit」イベントを使って直接入力を構築しているのでしょうか?Sandboxに表計算ソフトのような動きのサンプルがありましたが、ロジックが複雑でした。実用時は項目チェックも入れなければならなく、メンテナンス性やユーザビリティの良いインターフェースになるか考えて不採用としました。

IBMとMicrosoftではサイトを見て思いますが、開発者支援に対する差が歴然としており、Dominoを導入した会社は費用対効果が出せているのでしょうか?IBMより実場面に合ったコーディングやTipsなどの提供があっても良いと思うのですが。

テーマ : プログラミング
ジャンル : コンピュータ

Dominoの表

表の種類で「1行のみ表示」の中に「行の切り替えをプログラムで行う」というものがあります。これを使うとウィザード形式の入力画面ができます。

(1) 4行の表を用意して、表のプロパティで「行の切り替えをプログラムで行う」を選択する。

表のプロパティ

(2) 表のプロパティで「表のHTMLタグ」の「名前」に"TBL"と入れる。次に1行目を選択して「行のタグ」に"1"を入力、2行目を選択して"2"を入力と4行目まで入力する。

(3) 表の外に"$TBL"という名前のテキストフィールドを用意する。デフォルト値は "1"。
※ 表の「名前」の先頭に"$"を付けたフィールド名でなければならない。

(4) それぞれの行に入力項目を用意する。それとは別に"前へ""次へ"の文字にホットスポットを作成して関数式をセットする。ホットスポットの式だが、$TBLフィールドに表示したい「行のタグ」を入力して画面リフレッシュまで入れる。

例えば2行目に進みたいときの式は下記の通り。
@SetField("$TBL"; "2");
@Command([RefreshHideFormulas])

表

結果は下記の通り。
1行目にラジオボタンを用意して、海外旅行に行ったか?の返答で画面を分岐させています。ラジオボタンのフィールド名を"Q1"とした場合、下記の式が"次へ"のホットスポット式に入っています。

@SetField("$TBL"; @If(Q1 = "はい"; "2";Q1 = "いいえ"; "3"; "1"));
@Command([RefreshHideFormulas])

画面イメージ


他アイデアとして、下記のような横並びの表でヘッダ固定などができます。ただし、完全な横スクロールではないので、上期と下期の間(9月~2月)が見れません。ここでもデータグリッドやリストビューなどのコンポーネントが何故用意されていないか思ってしまいます。今ではWebベースの方が進んだUIが構築でき、Notesクライアントの価値が感じられなくなってきています。

売上

テーマ : プログラミング
ジャンル : コンピュータ

Dominoの表

会社のホームページもDominoで作られていて、現在リニューアルに向け頑張っています。会社ではシステムもホームページもコンピュータで括られてしまうため、当然の如く私の仕事です。今もデザインやグラフィックは苦痛ですが、ホームページの画面設計・工程やユーザビリティは非常に勉強になり、システムと比較してシビアに感じます。

オフコンの専用端末からGUIになり自由度は増しましたが、プログラマのデザインに対する意識は以前のままのように感じます。数年前、基幹システム(WAS + Oracle)を大手ベンダーに依頼しましたが、陳腐なユーザーインターフェースでした。色を使いすぎたり、ルールを無視してアンカーリンクをダブルクリックすると選択・・・?!

Dominoのアプリケーションですがほとんど自前なため、市販アプリケーションを見たことが少ないです。実際、「TrendMicro InterScan for Notes」、「LEI」、付属テンプレートぐらい。画面規約を設け、ルールに従いマージンを整えるだけでLEIや付属テンプレートなど見た目が全然違うと思うのですが。手作り感というか何というか...製品として許せないものがあります。

ただそれだけでは如何ともし難い、NotesクライアントのUIコンポーネントの弱さ、少なさを痛感します。
少しでも補うべく試行錯誤していますが、表についての奮闘ぶりについて記述してみます。

表の種類として
1) すべての行を表示
2) 1行のみ表示
  2-1) タブボタンで行を選択
  2-2) 表題で行を選択
  2-3) 表示行を切り替え
  2-4) 行の切り替えをプログラムで行う
の 5種類があります。

まず、一番使用頻度がある「すべての行を表示」。
フォームに明細行が必要な場合、まともに作れば項目数が膨れ上がり重くなってしまいます。そこで項目のプロパティから"複数値も可"(=配列)として、分類値の表示を"改行"にする手法をよく使います。
そこで1行おきに背景色を付けたい場合。

(1) 上段13pxが白で下段13pxがグレーのgifファイル 背景 を用意する(ファイル名は zebra.gif)。

(2) zebra.gif をイメージリソースに登録する。

(3) 表のプロパティ画面でイメージソースに zebra.gif を指定する。

プロパティ

結果は下記の通り。
当然ですが、フォントサイズや行間隔によってバックグランドの画像は調整しなければなりません。

フォーム

これだけではお粗末なので、もう一つしょぼいネタです。
htmlで言うfieldset、legendタグ(VBならframe)を使いたい場面がありました。今更ですが、環境はDomino6.5。

(1) フレーム上部の画像作成する。

フレーム

(2) フォームに画像を貼り付け、直下に表を作成する。その際、表の上段はラインなしにして列幅を画像に合わせる。

表

フレームもどきの結果は下記の通り。

フレーム

テーマ : プログラミング
ジャンル : コンピュータ

Webでグラフを作る

例えば、ロケーションのインターネットブラウザを"IE"にしてページの検索と閲覧を"Notes Client"からとしてしまうと、ユーザーにとっては何がNotesでIEかわからない、とういうかそんなこと関係ないようです。そこで「Webでグラフ」の案が出たが、採用には至りませんでしたが、折角なので載せておきます。

(1) イメージリソースに20×13pxの画像 棒 (ファイル名はbar.gif)を登録する。

(2) フォームを用意して、データを入力する。

フォーム

(3) ビューを用意。ビュー名は"Sale"、列式は下記の通り。

ビュー

"<tr>" +
"<td>" + YYYYMM + "</td>" +
"<td>" + @Text(URIAGE; ",") + "</td>" +
"<td><img src=\"bar.gif\" style=\"width:" + @Text(URIAGE/10000) + "px; height:13px;\"></td>" +
"</tr>"


(4) Web表示用フォームを用意。フォーム名は"$$ViewTemplate for Sale"。

フォーム

表示用の計算結果テキストフィールドを用意、値は下記の通り。
"[<table border=1>" +
"<thead><th>年月</th><th>売上</th><th>グラフ</th></thead>" +
"<tbody>" + @Implode(@DbColumn(""; ""; "Sale"; 1); "") + "</tbody>" +
"</table>]"


ブラウザから見た結果は下記の通り。

ブラウザ

ここまでは昔の話で、今はhtml要素にcanvasがあり、更にJQueryを使えば簡単に美しいグラフを作ることができます。そこで引き続きJQuery Flotを試してみました。

(1) まずはJQuery Flotを こちら からダウンロードする。今回必要なファイルは jquery.js、 jquery.flot.js、 excanvas.jsの3つ。

(2) その3ファイルをファイルリソースに登録する。

ファイルリソース

(3) フォームを用意して、データを入力する。

フォーム

(4) ビューを用意。ビュー名は"Sale"、列式は下記の通り。

ビュー

"[" + @ReplaceSubstring(YYYYMM; "/"; "") + "," + @Text(URIAGE) + "]"


(5) Web表示用フォームを用意。フォーム名は"$$ViewTemplate for Sale"、フォームにdivタグ(id=saleにグラフを吐き出す)を書く。

フォーム

HTML Head Content に下記の式を入れる。
"<script type=\"text/javascript\" src=\"jquery.js\"></script>" +
"<script type=\"text/javascript\" src=\"jquery.flot.js\"></script>" +
"<!--[if IE]><script type=\"text/javascript\" language=\"javascript\" src=\"excanvas.js\"></script><![endif]-->" +
"<script type=\"text/javascript\" language=\"javascript\">" +
"$(function () {" +
"$.plot($(\"#sale\"), [{" +
"label: \"売上\"," +
"data: [" + @Implode(@DbColumn(""; ""; "Sale"; 1); ",") + "]" +
"}]);" +
"});"+
"</script>"

ブラウザから見た結果は下記の通り。

ブラウザ

余談ですが、オープンソースにはJavaScriptライブラリが使えません。100歩譲ってソース展開して貼り付けても良いですが、圧縮されたコードの長いJavaScriptを貼り付けるとデザイナが落ちてしまいます。同様にpngファイルもイメージリソースに登録できません(登録できるのはgif、jpeg、bmp)。
何でも共有リソースファイルへ登録してしまえば良いのですが...何か納得いきません。

テーマ : プログラミング
ジャンル : コンピュータ

プロフィール

ピヨパパ

Author:ピヨパパ
静岡市のエンドユーザーSE。
最近はDominoの開発ばかりでうんざり。
是非気軽にコメントして下さい。

FC2カウンター
最新記事
最新コメント
最新トラックバック
月別アーカイブ
カテゴリ
検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる