みんなに優しく、解りやすくをモットーに開設しています。 以下のルールを守りみんなで助け合いましょう。
1.ファイルメーカーで解らない事があればここで質問して下さい。 何方でも、ご質問・ご回答お願いします。 (優しく回答しましょう)
You are not logged in.
いつもお世話になっております。今回FMの19 3.2.206が出たので早速更新してみました。相変わらずchart.jsのプラグインが動かない(urlサイト連結では動くのでパスの問題かと考えているが原因は分からない)のはまだしもleafletのmap表示がバラバラに表示されるのに初めて気付いた・・・前回の更新時のFMのサポートの返事(javascriptのコードに問題がある・・IEに特化・・そんなのあるわけないのに)に頭にきて19.2.2に戻したので確認をしなかった!
そこで一応下記にコードを記しますのでMicrosoft Edge WebView2でバラバラに表示されない方法があればご教授お願いいたします。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>GSI Tiles on Leaflet</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
crossorigin=""></script>
<style>
body {padding: 0; margin: 0}
html, body, #map {height: 100%; width: 100%;}
</style>
<script>
//マーカーに表示したい対象の緯度経度とポップアップする名称を設定
var markerList = [
{ pos: [33.847861, 132.796472],name:"石手寺<br/>愛媛県松山市石手2丁目9-21",id:"51"},];
function init() {
var map = L.map('map');
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
//マーカー全体が入るボックスを作る
var bound = L.latLngBounds(markerList[0].pos, markerList[0].pos);
//markerListの設定でマーカーを追加
for (var num in markerList) {
var mk = markerList[num];
var popup = L.popup().setContent(mk.name);
L.marker(mk.pos, { title:mk.pos}).bindPopup(popup).addTo(map);
//マーカー全体が入るボックスを広げる
bound.extend(mk.pos);
}
//マーカー全体が入るように地図範囲を設定する
map.fitBounds(bound);
}
</script>
</head>
<body onload="init()">
<div id="map" ></div>
</body>
</html>
windows10上で使用しています。これからまた戻す作業に掛かりますので皆様のお時間が許せばお願いいたします。
戻す前に別のmap表示のコードで試したところ問題なく表示されたので一応の解決とさせていただきます。何故かは分かりませんが結果オーライで・・
変更部分を一応記させていただきます
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
を
<link rel=\"stylesheet\" href=\"https://unpkg.com/leaflet@1.7.1/dist/leaflet.css\" />
に変更
毎回お騒がせして申し分かりません。あとchart.jsのcolorのプラグインはそれなりに便利なのですが固定した色配列なので今はFMの別テーブルでcolor schemeを用意して配色をしています・・色のセンスはいまいちですが・・ので問題点はゆっくり考えます。しかしブラウザで表示できてもMicrosoft Edge WebView2では表示できない理由が全く理解できません。
残念、解決にはほど遠かった。
肝心のポップアップが表示されないし、他にカスタムアイコンやナンバー表示アイコンなどのコードでもmap表示されるがアイコン機能が全然効かない、一見バラバラ表示が解決しただけです。
焦っているせいかまた間違えた、ポップアップは表示されるがアイコンの問題は、後で考えるとしたパスの問題だった。
19 2.2で画像を呼び込むためのパスを計算式
Substitute ( Get ( ファイルパス ) ; Get ( ファイル名 ) & ".fmp12"; "images/pin.png" )
で次のようにしていたが
iconUrl: 'file:/D:/FM/map/images/pin.png',
これが通らないのでアイコンが表示されずまたナンバー表示も同様に数字だけ表示されている結果になる。
右クリックで「開発者ツール」が使えるようになったので、エラーコンソールを見ると、多分file:が使えないという「not allowed」が出てるでしょう。
data.htmという一時ファイルを表示しているので、file://で他の場所のリソースにはアクセスできません。
http:でアクセスするように変えればいいのでは。
himadanee様 いつも有り難うございます。
ご教授いただいた「http:でアクセスするように変えればいいのでは。」に従い
iconUrl: "http://D:/FM/map/images/pin.png",
を始め試してみましたが、私の設定が悪いのかカスタムアイコンの画像を読み込めませんでした。
ちなみにブラウザ(Firefoxの場合)でカスタムアイコンのを表示させるためのコードをフィールド内容のエクスポートでhtmlファイルを作り実行すると問題なく表示されます。Egdeで開いても問題はありません。
コードは、webビューアと違う点は、パスのルート表示の部分だけです。
iconUrl: 'images/pin.png',
コンソール エラーメッセージ
Not allowed to load local resource:file:///D:/FM/map/images/pin.png data.htm:1
Failed to load resource: net::ERR_FILE_NOT_FOUND /favicon.ico:1
出ても解決の方法は?
httpd:でアクセス、というのは、webサーバ上に置くということです。
webサーバがないなら、
ブラウザで「htmlファイルを作り実行すると問題なく表示されます」
の方向で、imagesと同じ場所(iconUrl: 'images/pin.png',でOKということは、上位階層でも可能でしょう)にHTMLを保存してそれを開くようにしたら動くのでは。
現状は、WebビューアのURLをdata:text/htmlにしているので、一時ファイルとして保存されたdata.htm(AppData\Local\Temp\FileMaker\ContainerCache\webv19v3の中にある)を表示しているため、他の場所(file://d:~)に保存されてるファイルを参照できなくなっています。
これはセキュリティ上必要な制限です。(それが可能だと、どこかのサイトにアクセスした時に勝手に自分のHDの中のファイルを読み込まれてしまう)
himadanee様 当方浅学のため、説明についていいけなが
現状は、WebビューアのURLをdata:text/htmlにしているので、一時ファイルとして保存されたdata.htm(AppData\Local\Temp\FileMaker\ContainerCache\webv19v3の中にある)を表示しているため、他の場所(file://d:~)に保存されてるファイルを参照できなくなっています。
webビューアはブラウザと違い限定的なviwe表示機能しか有しないものと考えるほかしかない・・・javascriptも限定的な使い方しか出来ない
これでは、私にとってchart.js3.4.1が使えてもleafletの使い方(FMのデータを使いwebビューアで表示のパターンが崩れる)に悩むしか・・19.2.2に戻すかどうか思案のしどころとなった。FMのリリースノートに以前より出来なくなったことをきちんと記載してほしい。
いろいろ情報を頂き有り難うございました。
FMのプラグインの場合、ユーザーにメッセージを表示せずに、一覧表示された元の場所から外部アプリケーションを起動できるプロトコルの一覧を定義するにはレジストリの設定で出来るみたいだけど、Windows 上の Web ビューアのローカルファイルパスの場合は、下記のサイトにあるようにfile プロトコルの制限で「先頭に「file:///」つけてファイルパスを指定」で出来ないみたい。
https://jpdsi.github.io/blog/internet-e … eProtocol/
そこでwebビューア上のmapでカスタムアイコン(cssあるいはjavascriptのurlでローカルファイルを指定)を使うためhtmlファイルを経由して表示することにした。(別にブラウザ表示でもも問題はないが自己満足のため)
配列を変数にし
フィールド設定 [ map設定::コード; Evaluate (ExecuteSQL ("select \"text\" from \"javascript\" where \"key\" = ?";"";"";Get ( スクリプト引数 ))) ]
フィールド内容のエクスポート [ map設定::コード; 「file:map.html」; フォルダを作成:いいえ]
を加え
Web ビューアの設定 [ オブジェクト名: "map01"; URL: "file:///D:/FM/map/map.html" ]
に変更したスクリプトでmapを表示させる。
でも、FMでfile プロトコルが使用できるようににしてほしい。
リリースノートに
Windows では、FileMaker Pro は Internet Explorer エンジンの代わりに Microsoft Edge (Chromium) エンジンを使用してカスタム App の Web コンテンツをレンダリングするようになりました。Windows コンピュータが必要な Microsoft Edge コンポーネントに更新されていない場合は、FileMaker Pro のインストーラまたはアップデータがそれらを追加します。
Web ビューアでは、Web 標準に対するより良いサポートを提供しています。これにより、Web ビューアで使用している JavaScript および CSS を簡略化できる可能性があります。
とあるが簡略化じゃなく使用制限になっている。
ブラウザでは表示できるが Web ビューアでは表示できない根本原因が、 #7 にあるようにセキュリティの制限でしょう。
これは他のブラウザでも同じです(逆にこれまで IE がガバガバで問題があったので Edge に変わったのはマイナスではない)
「IE から Edge に変わる」の中に内包されているもので個々の差異について Claris に全列挙を求めるのは違うのでは?
機能に関して要望があるならここで管を巻かずに Claris Community のアイデアに提案しましょう。
アイデア
Last edited by Moz (2021-07-27 13:35:39)
Offline
Moz様 ご意見有り難うございます。
「IE から Edge に変わる」の中に内包されているもので個々の差異について Claris に全列挙を求めるのは違うのでは?
の部分に関しはサードパーティーであるクラリス社が提供している以上、IEからEdgeに変更した時点で、最低限の制限事項を述べる必要があると思います。・・・まあ最低限とはどこまでと問われても受け取る方の問題ですが・・・
変わりましたで済ませ「変更部分は当社の与り知らぬところでマイクロソフトにお聞きください(これサポートの返事です。)」・・クラリス社の姿勢に久しぶりに管も巻きたくなる。入れ替えたりアップデートしたり、今も手直しの最中・・・ガバガバのおかげで昔の記憶よみがえらない
説明についていけないと仰っておられますが......
異なるリソースを表示できない制約は機能制限ではないでしょう。上でも述べられているようにセキュリティ上で必須です。
Safari においても同様の制約によって Web ビューアの挙動が変わっています。
IE から標準的なブラウザの仕様に変わっただけので制限されたと受け取るのは誤解に違いでしょう。
Base64Encode でテキスト化するなどで対応できる範囲なので何らか対策されれば良いでしょう。
Web ビューア上で動作させる所謂 "飛び道具" については Web(HTML) に関する知識を持って自己責任で行うものと認識していますネ。
アドオン含めて動作が保証されているものではありません。「各ブラウザ毎の挙動はあずかり知らぬ所なので」という回答に問題ないと思いますよ。
Last edited by Moz (2021-07-27 15:15:56)
Offline
昔はIEが標準的ブラウザである以上に絶対的でした。IEが動かせない(最新版でないから・・IEは普段使わないので)とセキュリティソフトが入らなかった・・・おまけのくせにと思いそこでもソフト会社に管を巻いた記憶がある
たぶんMoz様の
Web ビューア上で動作させる所謂 "飛び道具" については Web(HTML) に関する知識を持って自己責任で行うものと認識していますネ。
アドオン含めて動作が保証されているものではありません。「各ブラウザ毎の挙動はあずかり知らぬ所なので」という回答に問題ないと思いますよ。
は正しいと思いますが、制約をと制限をどう捉えるかは、認識の違いとしか・・
アドオン含めて動作が保証されているものではありません。「各ブラウザ毎の挙動はあずかり知らぬ所なので」という回答に問題ないと思いますよ。
サードパーティーの説明としては、「アドオン含めて動作が保証されているものではありません。」と説明された訳ではなくただ単に「あずかり知らぬ」です。
これも捉え方の違い他等と考えるしかありませんが・・・
忙しい中、貴重なご意見ありがとうございます。
あらコピペ間違えている。見苦し文になり申し訳ありません。
あと
Base64Encode でテキスト化するなどで対応できる範囲なので何らか対策されれば良いでしょう。
はどのようなことかお教えください。
画像を Base64EncodeRFC 関数でテキスト化します。
ブラウザはBase64をデコードできるので Web ビューアで表示する際に画像として表示されます。
Offline
Moz様 サンプル有り難うございました。
ダウンロードして見ていたのですが、すぐにはよく理解できなかったので時間をください。
折角 作っていただきましたが、当方の理解力がないため申し訳ありません。
Moz様 Base64EncodeRFC関数を使ったことがなかったので戸惑いましたが、アイコンを納めるテーブルをローカルファイルの代わりに作りwebビューアテーブルとリレーションしcssを下記のようにすれば問題なくカスタムアイコンと番号が重なり従来と同じように表示されます。
<style>
body {padding: 0; margin: 0}
html, body, #map {height: 100%; width: 100%;}
}
.my-marker
{
background-image: url(data:image/png;base64,<画像>);
}
.my-custom-marker{
background-image: url(data:image/png;base64,<画像>);
background-repeat: no-repeat;
text-align:center;
line-height:30px;
color:black;
}
</style>
テーブル構成とスクリプトの変更はこれから考えます。chart.jsのカラースキームプラグインをローカルファイルから利用するのはこれと違うので最適の方をゆっくり考えます。・・・すぐ必要はないので
有り難うございました。
ローカルファイルの接続についてclarisの下記のサイトにQ&Aの遣り取りが載っていたのですが
JavaScript in Web Viewer stopped since 19.3 update
https://community.claris.com/en/s/quest … 193-update
最後の部分にローカルファイルの場所として
C:\Users\Chris\AppData\Local\Temp\FileMaker\ContainerCache\
アクセス先
http://localfm.assets/
等と記されているのですが、如何せん私の英語力は無に等しい故翻訳ソフトに頼っていているので確実なところは分かりません。この方法で可能かどうかお教えください。
また可能ならその方法も含めてお願いいたします。
あ!
開発者コンソールがパスしか表示してないので、以前と同じfile:参照だと思い込んでました。
data:のURLの場合に一時ファイルが作られるのは同じですが、http:でアクセスしていますね。
どういう仕組みか詳しくは調べてませんが、http://localfm.assets/へのアクセスが、ローカルのフォルダにリダイレクト?されています。
つまり、外部に別途webサーバを用意しなくても、webビューアからは
%TEMP%\FileMaker\ContainerCache
に置いたファイルは上記のhttpでアクセスできます。
(https:も可能でした。)
(このパスに使用している環境変数が、%TEMP%なのか%TMP%なのか、あるいは%LOCALAPPDATA%の下として定義しているのか、は確認してません)
しかし、場所がtempの中なので、恒久的なライブラリを置く場所としてはあんまりお勧めできないですね。(クリーンアップで削除される)
ウェブビューアのURLを設定するたびに、関連するファイルをそこへエクスポートする、というのもなんか間抜けだし...
余談:data:が実際にはhttp:アクセスとなるので、開発者ツールのコンソールに、faviconがないというエラーが残ってました^^;
himadanee様 回答有難うございます。基本的に可能だけど実用性に難ありですか。
質問の書き込みの後で
%TEMP%\FileMaker\ContainerCache
にpegフィルを置き
iconUrl: "http://localfm.assets/pin.png",
としてみたのですが、読み込みが?になりましたので、私の解釈が間違っているのか、方法が間違っていたのかどうか分からない現状でした。
再度見直してみます。
私のテストは、単純な2ケース、webビューアのソース指定と、そのHTML内のi㎎タグでの参照でした。
そちらで使ってるJavascriptのライブラリがどうやってロードしているのかわかりませんが、ブラウザのリダイレクト?の対象から外れてる可能性もあるのかな。
置き場所については、
%TEMP%\FileMaker\ContainerCache
のフォルダは最初からありましたよね?
元ネタのサイトのようにフルパスで書くとWindowsのユーザ名が入ってしまって他では適用できなくなるので、環境変数を使って表記すべきものなんですが、どう書くのが正しいかテストするのは面倒なので...
少し前の発言を読み直してみたら、#7で
>Web ビューアの設定 [ オブジェクト名: "map01"; URL: "file:///D:/FM/map/map.html" ]
と書いてますが、これをやってたらだめですよ。data:の指定がhttp:でのアクセスになってる、という話なので。
webビューアのソースはdata:にしてますか。
再度Urlを下記で書き直したところ問題なく表示されました
iconUrl: ' http://localfm.assets/pin.png',
そこでもう一度
iconUrl: \"http://localfm.assets/pin.png\",
に書き直しみたら問題なく表示された。単純にタイプミスをしてたみたいです。
少し前の発言を読み直してみたら、#7で
>Web ビューアの設定 [ オブジェクト名: "map01"; URL: "file:///D:/FM/map/map.html" ]
と書いてますが、これをやってたらだめですよ。
の件はローカルファイルを直接読み込めなかったので一度htmlで読み込ませてそのhtmlをwebビューアに読み込ませることによりローカルファイルの読み込みを可能にする回避策です。
なお、webビューアのソースは
"<!DOCTYPE html>
でも
"data:text/html,
<!DOCTYPE html>
どちらでも問題なく表示されます。
clarisのQ&Aサイトの遣り取りについて正否が理解できなかったためお騒がせして申し分かりませんでした。その上一歩踏み込んだ解答有り難うございました。
[ Generated in 0.204 seconds, 9 queries executed - Memory usage: 595.6 KiB (Peak: 632.51 KiB) ]