サポート > PC-MAPPING ヒント集 > レイアウトビュー > レイアウトビューの利用方法①
レイアウトビューの利用方法①
「レイアウトビュー」は、HTMLでレイアウトされた特別な「フォーム」ウィンドウに属性を表示できる機能です。
※このウィンドウでは、あくまでも「属性を表示」する事をメインにしていますので、通常の属性照会ダイアログボックスのような内部属性の編集はできません。
■ サンプル
サンプル [layout1.zip(約557KB)]をダウンロードする
公園.pcm：サンプルプロジェクト
最初にお読み下さい.txt：注意書き
shisetsu1.html・shisetsu.html：フォームテンプレート
image：リレーション用写真
shisetsu_p：凡例のパターン・ペンの画像

■ 準備
  1. ダウンロードしたファイルを解凍します。
    「layout1」というフォルダーが生成されます(ここでは「C:\Sample」での動作を前提としています)。

  2. サンプルプロジェクト「公園.pcm」を開きます。

    プロジェクトの構成は
    「まぷこん公園」プロジェクト
    • 「施設」レイヤー：各施設はポイントで入力
    • 「施設」データベース：「種別コード」フィールドが「辞書」データベースと辞書引きリンク
    • 「辞書」データベース：種別辞書データベース
    となっています。
    また、ポイントの属性照会を行うと、

    のようなフィールドが設定されているのが分かります。

    これらの属性を表示する際、通常の属性照会ダイアログやデータベース呼出のような方法ではなく、HTMLで作成したフォームに属性を表示できるのが「レイアウトビュー」です。
    最初に、フォームで表示したい属性を決めます。
    ここでは「ID」から「備考」までをテキストとして表示し、これまではリレーションで表示していた「写真」も同じフォーム内に表示させます。

■ フォームの作成
サンプルとして「shisetsu1.html」がありますので、メモ帳などのテキストエディターで開いて下さい(あるいはインターネットエクスプローラで開き、[表示]-[ソース]でソース表示ができます)。
※タグについてはHTML関連のサイトや本で調べて下さい。

@{***}と@[***]
  • @{***}のキーワードで、***の部分に一致するフィールド(名)があれば、該当レコードのそのフィールド値(接頭語・接尾語あり)
  • @[***]のキーワードで、***の部分に一致するフィールド(名)があれば、該当レコードのそのフィールド値(接頭語・接尾語なし)
で置き換えられます。

@{***$nn}と@[***$nn]
ポイントの内部属性「種別コード」は辞書DBとリンクして、整数型でありながら文字型のような表示がされています。
ここで、
  • @{***$nn}
  • @[***$nn]
といった記述(***はフィールド名、nnは1からの整数)をします。
「レイアウトビュー内のマルチリンク」の設定方法については、ヒント集レイアウトビューの利用方法④ [マルチリンク表示] を参照して下さい。
これは***フィールドにマルチリンク設定がされている場合、そのnn番目の値と置き換えて表示しますが、@[***$-1]などのように「nn=-1」の時は該当フィールドの辞書引き前の値を取得する事ができます。
例えば
@[種別コード]
ですが、これは辞書引きありの状態で表示(属性照会ウィンドウに表示されているまま)する設定です。
これを
@[種別コード$-1]
とすると、辞書引きなしの状態、つまり辞書DBのコード値が直接レイアウトビュー画面に表示されます。

▲「種別コード」フィールドにリンクしている「辞書」データベース

@(***)
@(***)のキーワードで、***の部分に一致するフィールド(名)があれば、該当レコードのそのフィールド値で置き換え、かつ、これをファイル名としてそのレイヤーのファイルのあるフォルダー、そのプロジェクトのあるフォルダーを探索し、見つかったパス名に置き換えます。
例えば写真を表示するソースの
<img src="@(写真)" alt="@[写真]" />
ですが、これは上の属性照会をした場合、表示したい写真は相対パスで見ると同フォルダ内にあるのでレイアウトビューを使わないリレーションでの写真表示などでは「3002.jpg」のまま構わないのですが、レイアウトビューでは変換されたHTMLファイルは環境変数TEMPで指定されたフォルダーに保存されるので、相対パスでは画像が正しく表示されません。
そこで@[写真]ではなく@(写真)と設定しています。
<img src="@(写真)">の場合
 <img src="@[写真]">の場合
※この時、拡張子がbmp, tif, tiff, nai, pcx, tgaのイメージファイルの場合、これらはpngに自動変換されます。
なお、変換されたhtml、pngファイルともに一時フォルダーに保管され、ブラウザー終了時に破棄されます。

@<***>
@<***>のキーワードで、***を直接書かれたファイルパス名と解釈して、その絶対パスに置き換えます。
例えば
<img src="@<..\..\pcm\test\japan.png>">
という記述をすれば
<img src="E:\pcm\testjapan.png">
に変換します。
ただし、これにより、このHTMLファイルを直接ブラウザーで開くとイメージ部分がXになる、という弊害もあります。
これは、変換されたHTMLファイルは一時フォルダー(C:\Documents and Settings\%username%\Local Settings\Temp…等)に保管されるため、相対パスで記述されたファイルは、そのままでは表示されないため、絶対パスに変換する際に使用します。
※このキーワードは@(***)とは異なり、あくまでもパスを取得するだけであり、@(***)のようにbmp, tif, tiff, nai, pcx, tgaなど、通常HTML内で表示しない画像タイプをpngに変換するという事は行いません。
一部プラグインがあるマシンではブラウザー上でもTIFやBMPなどの静止画像を表示するものもありますが、マシン環境によって差があるので、このキーワードで用いる画像タイプはGIFやJPG、PNG以外は好ましくないと言えます。

@@(***)
@@(***)のキーワードで、***の部分に一致する内部属性フィールドがあれば、該当レコードのそのフィールド値にある、画像ファイルをBASE64エンコードしたテキストに置き換えます。
例えば、［イメージ］-［閲覧］-［球面表示（地球儀）を行うHTMLファイルを出力］から出力したHTMLファイルをエディターで開いたとき、var pngImg = "";内に記載されているテキストがそれに該当します。
詳しくは、ヒント集レイアウトビューの利用方法⑨[360度静止画像を表示する]-実用例(3) をご覧下さい。

@@<***>
@@<***>のキーワードで、***の部分に一致する内部属性フィールドがあれば、該当レコードのそのフィールド値にある、360度静止画像ファイルをY軸反転させBASE64エンコードしたテキストに置き換えます。
例えば、［イメージ］-［閲覧］-［360度静止画像閲覧HTMLの生成］から出力したHTMLファイルをエディターで開いたとき、var pImg = "";内に記載されているテキストがそれに該当します。
詳しくは、ヒント集レイアウトビューの利用方法⑨[360度静止画像を表示する]-実用例(3) をご覧下さい。

@#<***>
@#<***>キーワードで、***の部分に一致する内部属性フィールドがあれば、該当レコードのそのフィールド値にある、360度静止画像ファイルをY軸反転させBASE64エンコードしたテキストに変換、一時フォルダーに360度静止画像閲覧HTMLファイルとして出力し、そのHTMLファイルパスに置き換えます。
例えば、［イメージ］-［閲覧］-［360度静止画像閲覧HTMLの生成］から出力したHTMLファイルがそれに該当します。
詳しくは、ヒント集レイアウトビューの利用方法⑨[360度静止画像を表示する]-実用例(4) をご覧下さい。

上記以外に、以下の変数(プレースフォルダー)も利用できます。
@$ProjectID$所属プロジェクトID
@$LayerID$レイヤーID
@$DbID$DBのID
@$DbType$要素タイプ
@$ID$内部ID(レコード番号)

■ フォームを登録する
「shisetsu1.html」を登録します。
  1. [レイヤエキスパート]-[キーリスト]パネルを開いて下さい。
    ＜追加＞ボタンを押し、キーリストの設定を行ないます。

  2. 各ベクター要素毎に設定ができますが、今回はポイントだけなので、
    • キー = PntHtml
    • 値 = C:\sample\layout1\shisetsu1.html
    と入力します。

    ※[キー]は、全角・半角、大文字・小文字を認識していますのでご注意下さい。
    ※[値]のファイルパス名は相対パスでも構いません。
    ※ファイルパス名やファイル名に半角スペースが含まれる場合はダブルクォーテーション("")で括って下さい。
    例：C:\document and setting\layout1\shisetsu1.html⇒"C:\document and setting\layout1\shisetsu1.html"

  3. ＜OK＞ボタンを押して[キーリストの設定]ダイアログボックスを閉じます。
    [キーリスト]パネルのリストに「PntHtml=C:\sample\layout1\shisetsu1.html」の設定が登録されましたら、＜OK＞ボタンを押して[キーリスト]パネルを閉じて下さい。

■ フォームに表示させる
  1. ポイントの属性照会を行います。
    先程は利用できなかった＜レイアウトビュー＞のボタンが利用できるようになっているのが分かります。

  2. ボタンを押すと、作成したフォームに属性が表示され、また写真も＜リレーション＞ボタンを押す事なく、一つのフォーム内に表示されています。

  3. このウィンドウを残しておいて、次の属性照会では別ウィンドウに表示させたい場合は、ロックボタンを押して下さい。
    ロックボタンを押しておくと、次の＜レイアウトビュー＞では新しいフォームウィンドウが開きます。

  4. 属性照会→レイアウトビューという二段階の作業を省くには、[プロジェクトエキスパート]-[環境-2]パネルで「属性照会時の処理」「レイアウトビューを開く」を選択して下さい。
    するとベクターの属性照会後、すぐにフォームが開きます。

■ 追加ファイルについて
フォームのサンプルとして、shisetsu1.html の他にshisetsu.html があります。
[レイヤエキスパート]-[キーリスト]パネルでキー：PntHtmlはそのままで、値：shisetsu1.htmlをshisetsu.htmlに書き換えるだけでフォームの差し替えが可能です。
shisetsu.html の方は、フォーム内に表示するフィールドの設定に関してはshisetsu1.html と同じですが、若干フォームらしく整飾をしてある事と、「凡例のhtmlファイルとして保存」を利用して、同じフォーム内に凡例も表示されるようにしています。

詳しくは shisetsu.html のソースを開いてどのような作りになっているのか確認して下さい。
「凡例のhtmlファイルとして保存」は保存したい凡例(描画パラメーター)をウィンドウ表示させ、そのウィンドウのメニュー[ファイル]-[名前を付けて保存]でファイルの種類を「HTMLファイル」として保存して下さい。
※「凡例のhtmlファイルとして保存」を実行した場合、ペンやシンボル、ブラシはイメージ画像として保存されます(png形式)。
htmlファイルからその画像を読みに行くパス名は絶対パスになっていますので、保存した後にフォルダーを移動する場合は凡例のhtmlファイルを編集し直して下さい。