初心者のFileMaker pro Q&A (旧掲示板)

みんなに優しく、解りやすくをモットーに開設しています。 以下のルールを守りみんなで助け合いましょう。

1.ファイルメーカーで解らない事があればここで質問して下さい。 何方でも、ご質問・ご回答お願いします。 (優しく回答しましょう)

You are not logged in.

Announcement

新しい掲示板は、こちら:https://fm-aid.com/forum/t/filemaker


#1 2020-03-11 12:53:37

koko009
Guest

Webビューアで使うhtml文のCSSで外部ファイル呼び出しURLのファイルパスにスペースが入っている場合の処理方法

いつもお世話になります。今回の質問は、Webビューアでmapを表示するためhtml&JavaScript文をテキストとして記述する仕方についてです。カスタムマーカーを使うためhtml文のCSSに外部ファイル呼び出しURLを計算式で書き込みたいと思い下記のようなコードを書きました。
"<!DOCTYPE html>~省略~
<style>¶  body {padding: 0; margin: 0}¶  html, body, #map {height: 100%; width: 100%;}¶}¶.my-marker¶{¶background-image: url("&Substitute ( Get ( ファイルパス ) ; Get ( ファイル名 ) & ".fmp12"; "images/my-icon4.png" )&");¶     ¶}¶.my-custom-marker{¶background-image: url("&Substitute ( Get ( ファイルパス ) ; Get ( ファイル名 ) & ".fmp12"; "images/my-icon4.png" )&");¶background-repeat: no-repeat;¶ text-align:center;¶    line-height:30px;¶    color:black;   ¶}¶</style>
~省略~</html>"
※ ¶が多いのは元コードを変数を使うためにQuote ( )で処理しているため
ファイルパスにスペースが含まれている場合の計算結果が
file:/C:/Users/sss aaa/Documents/images/my-icon4.png   
となり外部ファイルのマーカーを参照できません。
file:/C:/test/images/my-icon4.png
ファイルの置き場所を「Users/sss aaa」から「test」に変えた場合は外部ファイルのマーカーを参照出来ます。
Webビューアを使わずフィールド内容のエクスポートでmap表示すらならば、余計な計算式を使わないでも
images/my-icon4.png
と記述だけでいいのですが、Webビューアの場合相対パスが使えなかったので絶対パスを使うこととし計算式を組み込みました。ファイルパスにスペースがある場合、一般的に「"」で囲む等云々とありますが以前にもEventを送信の計算式等でGet ( ファイルパス)を使わず直接書き込む場合に苦労した経験があります。
さしあったては、ファイルの置き場所に注意をすれば問題は無いのですがなんか解決の方がないかご教授いただければと思います。
作業環境 Windows10 FM17です。

#2 2020-03-11 13:24:50

himaganee
Guest

Re: Webビューアで使うhtml文のCSSで外部ファイル呼び出しURLのファイルパスにスペースが入っている場合の処理方法

URL内のスペースは「+」か「%20」に置換するのが規定です。

このファイルは共有しないのですか?

#3 2020-03-11 13:30:38

ててを
Member

Re: Webビューアで使うhtml文のCSSで外部ファイル呼び出しURLのファイルパスにスペースが入っている場合の処理方法

url に記載しているパスをダブルクォートで囲んでみては?

と書いたもののそれに苦労されているという話ですね。
Substitute の結果を Quote 処理してください。

Last edited by ててを (2020-03-11 13:37:26)

Offline

#4 2020-03-11 14:16:55

qb_dp
Member

Re: Webビューアで使うhtml文のCSSで外部ファイル呼び出しURLのファイルパスにスペースが入っている場合の処理方法

こんな感じで書くと見やすくなり、修正もしやすいですよ。

Let([
_DirPath=GetValue (Substitute ( Get ( ファイルパス ) ; Get ( ファイル名 ) ; ¶ );1)
;_html="<!DOCTYPE html>~省略~
<style>
  body {padding: 0; margin: 0}
  html, body, #map {height: 100%; width: 100%;}
}
.my-marker
{
background-image: url(\"{DirPath}images/my-icon4.png\");
     
}
.my-custom-marker{
background-image: url(\"{DirPath}images/my-icon4.png\");
background-repeat: no-repeat;
 text-align:center;
    line-height:30px;
    color:black;   
}
</style>
~省略~</html>"
];
Substitute ( _html ; "{DirPath}" ; _DirPath )
)

Last edited by qb_dp (2020-03-11 14:20:33)

Offline

#5 2020-03-11 14:46:17

koko009
Guest

Re: Webビューアで使うhtml文のCSSで外部ファイル呼び出しURLのファイルパスにスペースが入っている場合の処理方法

himaganee様 回答有難うございます。
単純に%20での置き換えは計算式に替え
\"file:/C:/Users/sss%20aaa//Documents/images/my-icon4.png\"
としても参照せず。%20での置き換えは昔ある計算式で使ったときは成立したがそれ以降の別の計算式で使ったところ成立せず・・・よく分からない

ててを様 回答有難うございます。
前の計算式にQuote ( )を加え
<style>¶  body {padding: 0; margin: 0}¶  html, body, #map {height: 100%; width: 100%;}¶}¶.my-marker¶{¶background-image: url("&Quote (Substitute ( Get ( ファイルパス ) ; Get ( ファイル名 ) & ".fmp12"; "images/my-icon4.png" ))&");¶     ¶}¶.my-custom-marker{¶background-image: url("&Quote (Substitute ( Get ( ファイルパス ) ; Get ( ファイル名 ) & ".fmp12"; "images/my-icon4.png" ))&");¶background-repeat: no-repeat;¶ text-align:center;¶    line-height:30px;¶    color:black;   ¶}¶</style>
で実行
カスタムマーカーを呼び出しできました。有難うございました。

#6 2020-03-11 14:56:51

koko009
Guest

Re: Webビューアで使うhtml文のCSSで外部ファイル呼び出しURLのファイルパスにスペースが入っている場合の処理方法

qb_dp様 有難うございます
Let式ですか なるほど私の¶だらけの変換コードに比べすっきりして見やすい。勉強になります。

Registered users online in this topic: 0, guests: 1
[Bot] ClaudeBot

Board footer

Powered by FluxBB
Modified by Visman

[ Generated in 0.007 seconds, 9 queries executed - Memory usage: 561.95 KiB (Peak: 581.82 KiB) ]