行・列の固定表示
・はじめに
Webブラウザの特性上、縦軸・横軸ともに画面全体がスクロールするため大きな画面では項目名等が隠れてしまい見づらい画面になって
しまうことがあります。
そのような場合、Excelでは「ウインドウ枠の固定」機能でとても手軽に項目名などの固定を実現することが出来ますが、Webブラウザ(HTML)の
基本機能には行や列を固定する仕組みが存在しないため、Javaスクリプトやスタイル、レイヤー等の機能をうまく組み合わせて実現することになります。
当サンプルではXcuteとJavaスクリプトやスタイル等の仕組みを組み合わせ擬似的に行列の固定を実現する仕組みを解説します。
・免責
当サンプルはXcuteの本質とは異なる、Javaスクリプトやスタイル等の多用しております、それらの詳細につきましては解説の対象外といたします。
ブラウザの種類やクライアント側の設定、書き出すデータの内容などにより表示にずれが発生する可能性があります。
・サンプルの操作方法
Fix.plsをXcuteで開き、ブラウザから下記URLを呼び出して下さい。
行と列を固定: マイクロラボWebサイトで動作中のサンプルを表示
行のみを固定: マイクロラボWebサイトで動作中のサンプルを表示
列のみを固定: マイクロラボWebサイトで動作中のサンプルを表示
表示された画面のスクロールバーを操作し、行や列が固定表示されていることをご確認下さい。
・概要
下図は当サンプルの概要図です、ベースとなるMasterレイヤーに対してFixList、FixHead、FixMaskの3レイヤーを重ねる事で擬似的な行・列の固定を
実現しています。 
Masterレイヤー (Master/MasterGyou/MasterRetuシート)
検索のインターフェイス等を含め、画面全体を表示するベースとなる画面です。
こちらにJavaスクリプトを記述し、Iframeタグで呼び出したFixList、FixHead、FixMaskのレイヤーを
重ねて表示しています。
FixListレイヤー (FixListシート)
横軸にスクロールする際に列を固定表示するためのレイヤーです。
当サンプルでは顧客名・顧客メイ・会社名の3列を固定する例になっています。
Masterレイヤーと表示されるレコードの内容や順番が一致していないと表示にずれが発生して
しまうため、FilterやSortの条件をMasterレイヤーと完全に合わせる必要があります。
FixHeadレイヤー (FixHeadシート)
縦軸にスクロールする際に行を固定表示するためのレイヤーです。
当サンプルでは顧客名・会社名などの表題部分1行を固定する例になっています。
FixMaskレイヤー (FixMaskシート)
縦軸・横軸両方スクロールした際に、行と列を固定するレイヤーです。
当サンプルでは列固定3列かつ行固定1行の範囲を固定する例になっています。
・Masterシートの設定
基本となる画面とJavaスクリプト、重ねる各レイヤーを呼び出すためのIframeタグなど、行列固定するためのほとんどの設定が
Masterシートで行われています。
※以下、行と列を固定するMasterシートをベースに解説しています。
行のみ、列のみ固定の場合も基本は同じになりますので、MasterGyouシート、MasterRetuシートに置き換えてご覧下さい。
Javaスクリプト
MasterシートのR5C9:R5C14セルに各レイヤーを重ねて表示するためのJavaスクリプトを記述しています。
レイヤーを重ねた際の位置を調整出来るように、R7C9:R7C16のセル位置を数式で参照しているため、セルを分けて記述
しています。 (Excelの仕様上、長い数式はシートコピー時に切り捨てられてしまうためです。)
このJavaスクリプトはR2C9セルのINCコマンドでExcelが生成したHTMLに差し込まれます。
各固定レイヤーの呼び出し
javaスクリプトで使用される固定画面はMasterシートのタグ差込エリアで行っています。
差し込む位置はひな型に設定した印刷範囲よりも下側が適当です。
当サンプルではR18C22:R20C22の位置に<Div>タグでそれぞれのレイヤーをブロック化し、<IFRAME>タグで各画面を呼び出しています
また、R7C13:R7C16の値を数式で参照し、各レイヤーの画面サイズを設定しています。
前述のJavaスクリプトを呼び出す記述はR21C22に記述してあります。
タグ差込でIframeタグを用いて各レイヤーを呼び出すURLは次の様になっています。
・FixListレポート(R18C22) procgi.exe?P=Fix&writereport=FixList&set_R6C1=MyCookieの引値&set_R5C2=書き始め件数
Masterレイヤーと同じ配列の固定画面を作るため「WriteReport」でFixListレポートを呼び出します。
検索条件なども一致させる必要があるため、MyCookieコマンドの引値とレコードの書き始め件数を
Setコマンドで受け渡しています。(検索条件はMyCookieに格納している 後述)
・FixHeadシート(R19C22) procgi.exe?P=Fix&writeSheet=FixHead
項目名部分のみ固定するためデータ書き出しの必要は無く「WriteSheet」で呼び出します。
・FixMaskシート(R20C22) procgi.exe?P=Fix&writeSheet=FixMask
項目名部分のみ固定するためデータ書き出しの必要は無く「WriteSheet」で呼び出します。
MyCookie(検索値)と書き始め件数引き継ぎの設定
当サンプルでは顧客名・顧客メイ・会社名の3項目を固定してスクロールに追従するようにしてありますが、MastrレポートとFixListを2回に分けて
書き出しているため、レコードの並びに差異が起きないようにMaster、FixLsitレポート共に完全に同じ条件でFilterやソートを掛ける必要があります。
その際、検索値を引き渡す仕組みを組み込むことになりますが、検索項目が多い場合にSetコマンドで検索値を受け渡しますとSetコマンドを
数多く記述しなければいけなくなってしまいます。
これを省力化するため、MyCookieコマンドを用いて検索値の引き継ぎを行うようにしています。
また、「Next→」や「←Back」といった表示件数の制御を行う際にも表示結果が一致するように書き始め件数を引き継ぐ必要があります。
・MyCookie R3C7セルにR9C4:R10C4の範囲を保持するMyCookie1コマンドを記述しています。
MyCookieの引値は画面描画毎に重複しないよう「S(固定文字)+R1C1の固有番号」を使用しています。
引値のFixListレポートへの受け渡しはR18C22セルのタグ差込の中でSetコマンドを用いてR6C1セルにSetしています。
・書き始め件数 R2C10セルのNEXTコマンドがR5C2セルを参照している事からFixListシートのR5C2セルに対してMasterシートのR5C2セルの
値をSetします。
これによりMasterシートとFixListシートの書き始め件数が同じになり、Masterレポート、FixListレポートを出力した結果も同じに
なります。
FixListレポートへの値の受け渡しはR18C22セルのタグ差込の中でSetコマンドを用いてR5C2セルにSetしています。
画面の基準位置を決めるための設定
通常Xcuteは印刷範囲をセンタリングしてブラウザに表示しますが、レイヤーを重ねて表示するにあたり各レイヤー共に表示の基準位置を
同じにする必要があり、次の設定を行っています。
R2C1セル  LEFT 印刷範囲を左寄せにする設定です
R2C2セル  NOTIE6LINEBUGFIX=1
ブラウザの表示崩れを防ぐための設定です。
R2C8セル  INC=A,<body, marginheight=0 marginwidth=0 topmargin=0 leftmargin=0
各マージンを0にするタグを差し込むINCコマンドです。
・FixListシートの設定
横方向にスクロールした際、列を固定するためのレイヤーがFilxListシートに設定されています。
MasterシートからWriteReportコマンドでFixLisのレイヤーが呼び出されますが、MasterレイヤーとFixListレイヤーは書き出したレコードの内容や
順番を含めて一致している必要があるため、検索値と書き始め件数を引き継ぐように設定されています。
R1C7セル  MyCookie
MasterシートからR6C1セルにSetコマンドで受け渡した「引き値」でR9C4:R10C4にMyCookieを書き出します。
R2C9〜R2C11セル  Next・Filterコマンド
Masterシートと同一のNextとFilterコマンドを設定してあります。 
R5C2セル   書き始め件数
MasterシートよりSetコマンドで書き始め件数がSetされます。
R6C1セル   MyCookieの引き値
MasterシートよりSetコマンドでMyCookieの引き値がSetされます。
印刷範囲
固定表示する範囲のみ印刷範囲に設定します。
当サンプルでは顧客名〜貴社名の範囲かつ、行コピーするレポートであることからR13C3:R15C5を印刷範囲に設定しています。
画面の基準位置を決めるための設定
通常Xcuteは印刷範囲をセンタリングしてブラウザに表示しますが、レイヤーを重ねて表示するにあたり各レイヤー共に表示の基準位置を
同じにする必要があり、次の設定を行っています。
R2C1セル  LEFT 印刷範囲を左寄せにする設定です
R2C2セル  NOTIE6LINEBUGFIX=1
ブラウザの表示崩れを防ぐための設定です。
R2C8セル  INC=A,<body, marginheight=0 marginwidth=0 topmargin=0 leftmargin=0
各マージンを0にするタグを差し込むINCコマンドです。
・FixHeadシートの設定
縦方向にスクロールした際、行を固定するためのレイヤーがFixHeadシートに設定されています。
データベースからの書き出しは無く、固定的な画面であるためWriteSheetで固定する部分のみ表示する設定になっています。
印刷範囲
固定表示する範囲のみ印刷範囲に設定します。
当サンプルでは顧客名〜UpDateTimeの範囲、R13C3:R13C17を印刷範囲に設定しています。
画面の基準位置を決めるための設定
レイヤーを重ねて表示するにあたり各レイヤーの基準位置を同じにする必要があるため、次の設定を行っています。
R2C1セル  LEFT 印刷範囲を左寄せにする設定です
R2C2セル  NOTIE6LINEBUGFIX=1
ブラウザの表示崩れを防ぐための設定です。
R2C8セル  INC=A,<body, marginheight=0 marginwidth=0 topmargin=0 leftmargin=0
各マージンを0にするタグを差し込むINCコマンドです。
・FixMaskシートの設定
縦方向、横方向にスクロールした際、列と行の重なる範囲の表題を固定するためのレイヤーがFixMaskシートに設定されています。
データベースからの書き出しは無く、固定的な画面であるためWriteSheetで固定すべき部分のみ表示する設定になっています。
印刷範囲
固定表示する範囲のみ印刷範囲に設定します。
当サンプルでは顧客名〜会社名の範囲、R13C3:R13C5を印刷範囲に設定しています。
画面の基準位置を決めるための設定
レイヤーを重ねて表示するにあたり各レイヤーの基準位置を同じにする必要があるため、次の設定を行っています。
R2C1セル  LEFT 印刷範囲を左寄せにする設定です
R2C2セル  NOTIE6LINEBUGFIX=1
ブラウザの表示崩れを防ぐための設定です。
R2C8セル  INC=A,<body, marginheight=0 marginwidth=0 topmargin=0 leftmargin=0
各マージンを0にするタグを差し込むINCコマンドです。
・自作の画面への適用のポイント
行と列を固定する場合
当サンプルのMasterシート(Masterレポート)、FixListシート(FixListレポート)、FixHeadシート、FixMaskシートに該当する
ひな型を作成します。
各レイヤーの画面作成
各画面を重ねて表示する都合上、ずれが生じないように画面を作る必要がありますが、一画面ずつ作成すると手間が
掛かってしまうため、ベースとなる画面(当サンプルではMasterシートが該当)を最初に作成し、画面のデザインや仕様が
決まった後に、ベース画面のひな型シートをコピーして、他のレイヤー向けのひな型シート(FixList、FixHead、FixMask)を
作成すると省力化できます。
レポートの作成
ベースとなる画面(Masterシート)に書き出す一覧表形式のレポートを作成して下さい。
また、そのレポートをコピーし、ひな型の設定で列を固定するひな型(FixListシート)と関連づけた後、不要なマッピングセルを
外して下さい。
Javaスクリプト
MasterシートのR1〜R8の範囲をそのままコピーし、スクリプトの内容やセル位置を変えずにそのままご利用下さい。
固定レイヤーの呼び出しと、Javaスクリプトのコール
ベースとなる画面(当サンプルではMasterシートが該当)のタグ差込エリア最下部(</Form>タグの下側)にMasterシートの
R18C22:R21C22のタグをそのままコピーして下さい
その後、コピーしたタグから呼び出すURLを実際のレポート名やシート名に合わせて書き換えて下さい
検索値等の引き継ぎ
列の固定では検索結果をベースとなる画面と一致させるため、データベースの書き出し条件を同じにする必要があります。
検索値やNextコマンドの書き出し開始件数、ソート(当サンプルでは未使用)の条件を縦軸の固定画面(FixListシート)に
引き継ぐようにします、当サンプルでは検索値をMyCookieコマンドで受け渡し、データの書き始め件数をSetコマンドで
受け渡しています。
列を固定するひな型(FixListシートの)R1C7セルにFixListシートのMyCookieコマンドをコピーして貼り付けて下さい
作成した画面に応じてMyCookieコマンドの受け渡し範囲を変更して下さい、ベースとなるひな型(MasterシートのR3C7)の
MyCookie記録範囲も同じになるようにします。
また、NextやFilterコマンドもベースとなるひな型(Masterシート)、列固定のひな型(FixList)で同一になる様に設定して下さい。
各シートの印刷範囲
ベースとなるひな型(Masterシート)→レコードを含む全体が表示されるように印刷範囲を設定して下さい。
列を固定するひな型(FixListシート)→固定する列のレコードを表示する範囲を印刷範囲に設定して下さい。
行を固定するひな型(FixHead)→固定する表題の範囲を印刷範囲にして下さい
行と列を固定するひな型(FixMask)→固定する列数分の表題の範囲を印刷範囲にして下さい
表示位置の調整
各レイヤーの位置を調整するため、すべてのひな型シートに次の設定をします。
R2C1:LEFT (印刷範囲を左寄せで表示する設定です。)
R2C2:NOTIE6LINEBUGFIX=1 (ブラウザの表示崩れを防ぐための設定です)
R2C8:INC=A,<body, marginheight=0 marginwidth=0 topmargin=0 leftmargin=0  (マージンを調整する設定です)
また、ベースのひな型(Masterシート)R7C9:R7C16の値を調整して、ブラウザに正しく表示される様に調整して下さい。
                           
行のみ固定する場合
当サンプルのMasterGyouシート(MasterGyouレポート)、FixHeadシートに該当するひな型を作成します。
各レイヤーの画面作成
各画面を重ねて表示する都合上、ずれが生じないように画面を作る必要がありますが、一画面ずつ作成すると手間が
掛かってしまうため、ベースとなる画面(当サンプルではMasterGyouシートが該当)を最初に作成し、画面のデザインや仕様が
決まった後に、ベース画面のひな型シートをコピーして、FixHeadシートを作成すると省力化できます。
レポートの作成
ベースとなる画面(MasterGyouシート)に書き出す一覧表形式のレポートを作成して下さい。
Javaスクリプト
MasterGyouシートのR1〜R8の範囲をそのままコピーし、スクリプトの内容やセル位置を変えずにそのままご利用下さい。
固定レイヤーの呼び出しと、Javaスクリプトのコール
ベースとなる画面(当サンプルではMasterGyouシートが該当)のタグ差込エリア最下部(</Form>タグの下側)にMasterGyou
シートのR18C22:R19C22のタグをそのままコピーして下さい
その後、コピーしたタグから呼び出すURLを実際のレポート名やシート名に合わせて書き換えて下さい
検索値等の引き継ぎ
行固定の場合、通常表題のみの固定となり固定画面へのデータの書き出しはありませんので行固定画面(FixHeadシート)
への検索値の受け渡しは不要です。
各シートの印刷範囲
ベースとなるひな型(MasterGyouシート)→レコードを含む全体が表示されるように印刷範囲を設定して下さい。
行を固定するひな型(FixHead)→固定する表題の範囲を印刷範囲にして下さい
表示位置の調整
各レイヤーの位置を調整するため、すべてのひな型シートに次の設定をします。
R2C1:LEFT (印刷範囲を左寄せで表示する設定です。)
R2C2:NOTIE6LINEBUGFIX=1 (ブラウザの表示崩れを防ぐための設定です)
R2C8:INC=A,<body, marginheight=0 marginwidth=0 topmargin=0 leftmargin=0  (マージンを調整する設定です)
また、ベースのひな型(MasterGyouシート)R7C11:R7C14の値を調整して、ブラウザに正しく表示される様に調整して下さい。
                           
列のみ固定する場合
当サンプルのMasterRetuシート(MasterRetuレポート)、FixListシート(FixListレポート)に該当するひな型を作成します。
各レイヤーの画面作成
各画面を重ねて表示する都合上、ずれが生じないように画面を作る必要がありますが、一画面ずつ作成すると手間が
掛かってしまうため、ベースとなる画面(当サンプルではMasterRetuシートが該当)を最初に作成し、画面のデザインや仕様が
決まった後に、ベース画面のひな型シートをコピーして、FixListシートを作成すると省力化できます。
レポートの作成
ベースとなる画面(MasterRetuシート)に書き出す一覧表形式のレポートを作成して下さい。
また、そのレポートをコピーし、ひな型の設定で列を固定するひな型(FixListシート)と関連づけた後、不要なマッピングセルを
外して下さい。
Javaスクリプト
MasterRetuシートのR1〜R8の範囲をそのままコピーし、スクリプトの内容やセル位置を変えずにそのままご利用下さい。
固定レイヤーの呼び出しと、Javaスクリプトのコール
ベースとなる画面(当サンプルではMasterRetuシートが該当)のタグ差込エリア最下部(</Form>タグの下側)に
MasterRetuシートのR18C22:R19C22のタグをそのままコピーして下さい
その後、コピーしたタグから呼び出すURLを実際のレポート名やシート名に合わせて書き換えて下さい
検索値等の引き継ぎ
列の固定では検索結果をベースとなる画面と一致させるため、データベースの書き出し条件を同じにする必要があります。
検索値やNextコマンドの書き出し開始件数、ソート(当サンプルでは未使用)の条件を縦軸の固定画面(FixListシート)に
引き継ぐようにします、当サンプルでは検索値をMyCookieコマンドで受け渡し、データの書き始め件数をSetコマンドで
受け渡しています。
列を固定するひな型(FixListシートの)R1C7セルにFixListシートのMyCookieコマンドをコピーして貼り付けて下さい
作成した画面に応じてMyCookieコマンドの受け渡し範囲を変更して下さい、ベースとなるひな型(MasterRetuシートのR3C7)の
MyCookie記録範囲も同じになるようにします。
また、R2C8以降に設定したNextやFilterコマンドもベースとなるひな型(MasterRetuシート)、列固定のひな型(FixList)で
同一になるように設定して下さい。
各シートの印刷範囲
ベースとなるひな型(MasterRetuシート)→レコードを含む全体が表示されるように印刷範囲を設定して下さい。
列を固定するひな型(FixListシート)→固定する列のレコードを表示する範囲を印刷範囲に設定して下さい。
表示位置の調整
各レイヤーの位置を調整するため、すべてのひな型シートに次の設定をします。
R2C1:LEFT (印刷範囲を左寄せで表示する設定です。)
R2C2:NOTIE6LINEBUGFIX=1 (ブラウザの表示崩れを防ぐための設定です)
R2C8:INC=A,<body, marginheight=0 marginwidth=0 topmargin=0 leftmargin=0  (マージンを調整する設定です)
また、ベースのひな型(MasterRetuシート)R7C9:R7C12の値を調整して、ブラウザに正しく表示される様に調整して下さい。