60478_ja-JP

liliconcom

インタラクティブなHTMLプロットをウェブサイトに投稿する

こんにちは、

Squarespaceでホストされている個人ウェブサイトに、インタラクティブなJMP HTMLファイルを掲載したいと考えています。その方法は、1) ChromeでインタラクティブHTMLファイルを開き、2) HTMLスクリプトをコピーし（Macの「開発者向け」オプションを使用）、3) ウェブサイトのコードボックスまたは「埋め込み」ボックスにスクリプトを貼り付ける、という方法しかないようです。この方法は確かに機能します（ただし、コードが長すぎるというエラーメッセージが常に表示されます）。しかし、コードボックスをどこに「配置」したかに関係なく、インタラクティブなプロットは常にページ下部のフッターの下に配置されます。スクリプトを修正して、インタラクティブなプロットを希望の場所に配置することはできますか？あるいは、スクリプトを使わずに、インタラクティブなプロットをウェブサイトに「投稿」する方法はありますか？（この方法ではハッカーがデータを盗む可能性があることは承知していますが、これは私にとって問題ではありません。公共の利益のためにデータを使用しているので、人々に盗まれても構わないと思っています。）

Re: ウェブサイトにインタラクティブな HTML プロットを投稿する

詳細な回答をくださった@Michael_Goffさん、ありがとうございます。

地元の IT 部門に自分の選択肢を確認してもらい、自分に合った長期的な解決策を見つけます。

あなたと皆様のご協力に感謝します!

アダム。

Re: ウェブサイトにインタラクティブな HTML プロットを投稿する

こんにちは、アダム！

このスレッドは元々2018年に投稿されたもので、投稿以降、インターネットのエコシステムにはいくつかの変化がありました。この埋め込みシナリオが失敗する理由は、ブラウザのセキュリティポリシーの変更によるものです。2020年、Chromeをはじめとするブラウザは、「 リファラーポリシー 」と呼ばれるポリシーのデフォルト値をより安全なものに変更しました。これは、ユーザーのデータ保護を強化するためです。新しいデフォルトポリシーは、strict-origin-when-cross-originと呼ばれます。このデフォルトポリシーは、コンテンツをホストするサーバーによって他のポリシーが指定されていない場合に使用されます。つまり、2つのWebページが相互に通信しようとする場合、それらのオリジンが同じである必要があります。この場合、 オリジンとは、同じプロトコル、ホスト名、およびポートを意味します。

発生している問題は、このブラウザポリシーの変更によるものです。JMP 17では、インタラクティブなHTMLレポートは親ページにpingを送信し、追加情報があるかどうかを確認していました。このポリシーが適用されているため、新しいデフォルトポリシーでは親ページにアクセスできなくなり、エラーが発生していました。JMP 18でこの状況に対処しました。これが、問題を解決するための最も簡単な方法です。

あなたの場合、ファイルシステムを介してこれらの HTML ページにアクセスしている可能性があります。

window.onload (ファイル://isshfs.xxxxx.com/......./Tool_Counters/Counters.htm:1572:1014711)

URL全体を見ずに完全に診断するのは少し難しいですが、一部のブラウザはファイル：//プロトコルパスをウェブサーバーでホストされているページとは異なる扱いをし、それらをすべて「クロスオリジン」と見なします。これらのファイルが同じオリジンにあることを確認する方法の一つは、ウェブサーバーでホストすることです。親ページはhttps://のような形式にする必要があります。 .com/iframe_example.html子ページはhttps://からホストされます.com/Counters.html をご覧ください。

VS Codeのライブサーバープラグインを使ってローカルWebサーバーでテストを行うこともあります。このプラグインを使うと、ファイルシステム内のフォルダの内容を使ってWebサーバーを素早く起動できます。ただし、本番環境での使用には、これらのページをホストするためのWebサーバーを起動してもらうために、IT部門に依頼する必要があるでしょう。

繰り返しになりますが、JMP 17 からインタラクティブ HTML レポートを埋め込むには、Web サーバーをホストすることが回避策になります。JMP 18 では、このエラーを回避するための修正が追加されており、ファイルシステムからこれらのページを再度埋め込むことができるようになります。

ありがとう、

マイケル・ゴフ

ウェブサイトにインタラクティブなHTMLプロットを投稿することについて

ありがとう、アダム。

ChromeとFirefoxでページをテストしたところ、コンソールにエラーが表示されていたにもかかわらず、正常に読み込まれました。Edgeでは、ご指摘の通り、iFrameが読み込まれません。私も再現できました。社内でサポートを依頼する予定です。しばらくお待ちください。

ありがとう、

~ジョン

ウェブサイトにインタラクティブなHTMLプロットを投稿することについて

ここで剪毛しても構いません。

動作していないようです。

Re: ウェブサイトにインタラクティブな HTML プロットを投稿する

こんにちは、アダム。

メイン Web ページに、キャッチされない例外として表示されるインタラクティブ HTML ページが含まれている可能性があります。

これを行う方法はたくさんあります。以下は、通常有効な最も簡単な方法の一つです。

メインページには次の内容が含まれます。

    <TITLE>iFrame Example</TITLE>


    <H1 id="toc-hId-2019574708">iFrame Example</H1>
    <P>Below is an example of an embedded Interactive HTML file using and iframe.</P>
    <IFRAME src="https://community.jmp.com/bivariate.html" height="900" width="500" title="iframe example"></IFRAME>

この場合、bivariate.html は JMP からエクスポートされたインタラクティブ HTML ファイルです。

JMP 17インタラクティブHTMLファイルでこれを行うと、コンソールにネットワークエラーが表示されます。

「GET ファイル:///C:/api/webjmp net::ERR_FILE_NOT_FOUND」

ただし、ページの読み込みが停止されることはありません。

もしよろしければ、これを試してみて、うまくいくかどうか教えてください。

メイン ページで JavaScript を使用してインタラクティブ HTML ページを読み込む場合、ページの読み込みを続行できるように、ネットワーク障害を処理/無視するために try/catch ブロックを使用する必要がある場合があります。

これに関してサポートが必要な場合は、このフォーラムで情報を共有することに抵抗がない限り、JMP テクニカル サポートに連絡して詳細をお知らせください。

~ジョン

ウェブサイトにインタラクティブなHTMLプロットを投稿することについて

同じサーバー上（同じメインフォルダ内）にあります。

別のサーバーやデスクトップに移動することも試みました。

残念ながら、同じエラーが発生しています。

アダム。

ウェブサイトにインタラクティブなHTMLプロットを投稿することについて

@アダム・チョエン ,

このエラーは、iframe を含むウェブページが、iframe が参照するインタラクティブ HTML ページとは異なるサーバー上にある場合に発生します。インタラクティブ HTML コンテンツを iframe を含むページと同じサーバー/ドメインに移動すれば、このエラーは解消されるはずです。

JMP 18 では、インタラクティブ HTML 出力を変更することでこの制限を回避しました。

~ジョン

ウェブサイトにインタラクティブなHTMLプロットを投稿することについて

@ジョン・パウエル_JMP

それが私の問題に関連するエラーだと思います

キャッチされない (promise 内) DOMException: 'Window' から名前付きプロパティ 'document' を読み取ることができませんでした: オリジンが "null" のフレームがクロスオリジン フレームにアクセスするのをブロックしました。
window.onload で (file://isshfs.xxxxx.com/......./Tool_Counters/Counters.htm:1572:1014711)

Re: ウェブサイトにインタラクティブな HTML プロットを投稿する

@アダム・チョエン ,

JMP 17 からインタラクティブ HTML ページを埋め込んだ Web ページを開くときは、ブラウザー コンソール (右クリックして [検査] を選択し、[コンソール] を選択) をチェックして、エラーが報告されているかどうかを確認してください。

もしあれば、何が問題なのか確認できるようにここにコピーしてください。

ありがとう、

~ジョン

ウェブサイトにインタラクティブなHTMLプロットを投稿することについて

@ジョン・パウエル_JMPメールで通知を受けた人に @mntion すれば、Adam @アダム・チョエンに回答できるかもしれない質問が届きました。

アダムチョーン

レベルIII

2024年5月29日午後3時01分 | 返信として投稿 cwilldenからのメッセージ 2018年6月22日

JMP17 インタラクティブ HTML では、Iframe が機能しなくなりました。

TSのヒントをいただければ幸いです

ありがとう、アダム

ウェブサイトにインタラクティブなHTMLプロットを投稿することについて

JMP17 インタラクティブ HTML では、Iframe が機能しなくなりました。

TSのヒントをいただければ幸いです

ウェブサイトにインタラクティブなHTMLプロットを投稿することについて

OneDriveにHTMLファイルの処理能力のなさについて苦情を申し立てました。OneDrive内でインタラクティブなHTMLファイルを「開く」と、コードしか表示されません！Microsoftならこんなこともできそうな気がしますが…。

JMPの専門家や従業員以外の方が偶然この投稿に遭遇した場合に備えて、インタラクティブグラフから生データを抽出できることをここでお伝えしておきます（つまり、ハッカーがデータにアクセスして再現できる可能性があります）。そのため、このようなインタラクティブグラフを個人のウェブサイトに投稿する需要は今のところそれほど高くないと考えています（そして、これがこのトピックに関する最初の投稿である理由です）。私は主に既に発表されているデータのメタアナリシスに焦点を当てているため、この点は私にとってそれほど問題ではありません。

Re: ウェブサイトにインタラクティブな HTML プロットを投稿する

このリクエストと反応は素晴らしいです！ありがとうございます！

昨年、インタラクティブ HTML の共有に関するプレゼンテーションの前に、Dropbox、GoogleDrive、OneDrive を試してみましたが、残念な結果になりました。

機能する代替手段があることを知るのは良いことです。

ちなみに、iFrame は JMP コミュニティでも機能します。

ウェブサイトにインタラクティブなHTMLプロットを投稿することについて

ちなみに、これも「受け入れられた」解決策です。私の環境ではうまくいかなかったのは、どのウェブサイトもクラウドもインタラクティブなHTMLファイルを適切に「ホスト」できなかったからです。ところが、AmazonのS3サーバーはそれが可能なので、あなたのスクリプトを使って、私のS3クラウドにあるインタラクティブなJMP HTMLプロットへのリンクを提供すると、プロットが正しい場所に表示されるようになり、200ページものスクリプトを貼り付ける必要がなくなりました。

ウェブサイトにインタラクティブなHTMLプロットを投稿することについて

素晴らしいですね！そして、他の関心のある方への注意点として、Google Driveも動作しません（インタラクティブHTMLファイルをGoogleDriveでホストし、ウェブサイトに表示するスクリプトで参照することはできません）。なぜ主要クラウドの中でS3だけがインタラクティブHTMLに対応しているのか不思議です（AppleのiCloudは試していませんが）。インタラクティブファイルを扱うなら、もう既にこの言語に切り替えているべきではないでしょうか？

次のステップは、複数のウィンドウを持つJMPレポートをウェブサイトに表示することです。必要な手順は、単一のグラフを作成する場合と変わらないと思います（S3を使用する場合）。

ウェブサイトにインタラクティブなHTMLプロットを投稿することについて

お役に立てて嬉しいです！JMP Proをご利用の場合は、JMPモデルをスコアリングコードにエクスポートしてAWSでホストすることもできます。

https://dfd3m9li3aipf.cloudfront.net/index.html

または、それらを（JavaScript スコアリング コードとして）HTML 動的ページに直接埋め込みます。

http://jmp.scoring.iris.s3-website.us-east-2.amazonaws.com/

http://jmp.valentine.s3-website-us-east-1.amazonaws.com/

ウェブサイトにインタラクティブなHTMLプロットを投稿することについて

素晴らしいアイデアですね！なぜ今まであなたのコードをコピー＆ペーストしなかったのか分かりませんが、あなたのグラフは私のウェブサイトで問題なく表示されました。OneDriveのHTMLファイルの処理については、多くの苦情が寄せられています（OneDrive内で最終ファイルとして開かれるのではなく、スクリプトとして開かれるのです）。Dropboxで試してみたところ、OneDriveと同じ問題が発生しました。リンク経由でファイルを共有すると、リンクが（あなたのウェブサイトのような）通常のウェブサイトリンクのようには見えないのが原因でしょうか？例えば、 https://www.dropbox.com/s/dwjyb5n0fk24zoo/Fit%20Y%20by%20X.html ?dl=0 です。興味深いことに、OneDriveにはこの問題を回避するための「埋め込み」機能（ウェブサイトにコピーできるHTMLコードを提供する）があるのですが、皮肉なことに、インタラクティブなHTMLには機能しません！

いずれにせよ、S3アカウントにサインアップしたところ、ちゃんと動きました！こんなに面倒だとは思っていませんでしたが、皆さんのご協力のおかげで、JMPのインタラクティブHTMLファイルをS3でホストし、S3ファイルリンクを参照するという解決策が実現可能だと思いました。ご協力いただいた皆様、そして他の皆様にも心から感謝いたします。

ウェブサイトにインタラクティブなHTMLプロットを投稿することについて

ページが正しい MIME タイプを報告するには、One Drive で表示プロパティを有効にする必要がある場合があります。

また、セキュリティ上の理由から、Square Space がすべての外部ページ (またはすべての外部 JavaScript コンテンツ) をブロックしている可能性もあります。

S3上のインタラクティブHTMLページを指すiframeを作成してみてください。URLは最初の投稿に記載されています。

こうすることで、問題が One Drive にあるのか SquareSpace にあるのかがわかります。

また、JavaScript コンソールでエラー メッセージを確認すると、手がかりが見つかるかもしれません。

Re: ウェブサイトにインタラクティブな HTML プロットを投稿する

こんにちは、

これは良い計画のように思えますが、One Drive（現在使用しているファイル共有/保存デバイス）ではうまくいきません。以前はインタラクティブHTMLファイルをOne Driveにホストし、Squarespaceで参照していたのですが、ウェブサイトでは空のボックスとして表示されてしまいます。後でS3も試してみようと思いますが、同じ結果になるはずですよね？もしかしたらSquarespaceの問題かもしれません…。

Re: ウェブサイトにインタラクティブな HTML プロットを投稿する

生成されたHTMLをS3にホストし、そこからiframeをそのHTMLに向けることができます。以下に例を示します。

http://blog.nascif.com/2015/08/a-software-developers-career-visualized.html

関連コード:

<a href="https://s3-us-west-2.amazonaws.com/jmp.examples/career/index.html</A&gt" target="_blank">https://s3-us-west-2.amazonaws.com/jmp.examples/career/index.html</A&gt</a>;" width="100%">

ウェブサイトにインタラクティブなHTMLプロットを投稿することについて

これは素晴らしいアイデアですが、どうやらSquarespaceでは許可されていないようです！Squarespaceからの説明は以下の通りです。

「HTML ファイルをダウンロードすることはできますが、Squarespace リンク経由でブラウザ内で開くことができず、.pdf ファイルのように静的 URL を取得できないだけです。」

私はこの人が間違っていることを少し期待しているので、あなたのやり方で実行するための回避策を考えてみようと思います。これは他のほとんどの Web サイトでは可能のようです。

そうしないと、200 ページのコードを貼り付け直す必要があります...

成功したらお知らせします。ご協力ありがとうございました。インタラクティブなHTMLを個人のウェブサイトの適切な場所に掲載することは、きっと可能です！

アンダーソン

ウェブサイトにインタラクティブなHTMLプロットを投稿することについて

I found a really easy solution! You can embed an html page within another html page using tags.  Here's a really simple example:</P><PRE><!DOCTYPE html> <html> <head> <title>Main Page</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="initial-scale=1.0"> <style> iframe { width: 100%; height: 600px; } </style> </head> <body> <p>Some content above.</p> <iframe src="Graph%20Builder.htm">

以下にいくつかの内容を示します。

開始iframeタグで、JMPインタラクティブHTMLファイルへのリンクを設定します。このファイルをFoursquareにアップロードして、Foursquareがファイルを見つけられるようにし、パスが正しいことを確認する必要があります。また、必要に応じてiframeのサイズを変更できるように、スタイルを設定する必要があります。 tags, I made the iframe as wide as possible and 600 pixels tall.</P><br /><P>Here's what my result looks like.<span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="iframeexample.PNG" style="width: 592px;"><img src="https://us.v-cdn.net/6038925/uploads/images/11223i427DB074EDA86FA5/iframeexample.PNG" role="button" title="iframeexample.PNG" alt="iframeexample.PNG" /></span></P><br /><br /><br /></lingo-body>

Re: ウェブサイトにインタラクティブな HTML プロットを投稿する

ゲイル、

ご返信ありがとうございます。HTMLファイル/リンクの共有は簡単です。私がやりたいのは、インタラクティブプロットを自分のウェブサイトに表示させることです。今のところ、膨大な量のHTMLコードをコピーしてコードボックスに貼り付けることで実現しています。ただ、インタラクティブプロットがページ内の正しい位置ではなく、常にフッター領域に配置されてしまう理由が分かりません。コードを少し修正する必要があると思うので、Cameronに連絡して、コードのどこを修正すればよいか教えてもらえるようお願いしました。別の方法としては、読者にページの一番下までスクロールするように指示する方法があります。

とてもワクワクしています。読者やユーザーが速度やタイミングなどを自由に調整できるように、動くバブルプロットも埋め込みました。正しく配置できれば、私のウェブサイトは動くインタラクティブなJMPプロットでいっぱいになるでしょう！

ご協力いただきありがとうございます、

アンダーソン

ウェブサイトにインタラクティブなHTMLプロットを投稿することについて

キャメロン、

JMPとSquarespaceをいろいろ試してみた結果、ありがたいことに、150ページ分のHTMLコードを貼り付けるだけで、どんなに複雑なグラフ（動くバブルプロットも！）でもウェブサイトに埋め込むことができるようになりました。問題は、前回も触れたように、フッターに配置することです。スクリプトに>divを追加するという解決策を教えていただきましたが、MONSTER HTMLスクリプトの一番最後には、次のコード行があります。 これらの「body」の1つを「div」に変更する必要があるのでしょうか？それとも、もっと複雑なのでしょうか？個別に変更したり、divと組み合わせて変更したりしてみましたが、スクリプトの知識がないので、もっと複雑になるかもしれません。何かアイデアはありますか？参考までに200ページのHTMLコードを添付します。

ありがとう、

アンダーソン

ウェブサイトにインタラクティブなHTMLプロットを投稿することについて

こんにちは、アンダーソンさん。

JMP のスタッフ数名があなたの問題の解決策を見つけようとしており、あなたが説明したニーズを満たすために将来の JMP の機能強化が必要であることが記録されています。

最初にお問い合わせいただいたときにお伝えしたとおり、共有する手順は次のとおりです。

1. グラフを作成し、どこかに保存します。(これはすでに実行済みです)。
2. 重要なのは、.htm ファイルを共有することです。つまり、a) メールに添付して「開く」ように指示します。(私のファイルをメールで送りました。開いてみてください。) b) 共有ドライブに置き、相手がクリックするとファイルを開きます。(Chrome で開くように公開したファイルも添付しました。このファイルを開くには Chrome が必要です。)
3. あるいは、1 つ以上のレポートを公開し、.html ファイルで同じ操作を行うこともできます。https /www.jmp.com/support/help/14/create-a-web-report.shtml

Re: ウェブサイトにインタラクティブな HTML プロットを投稿する

キャメロン、

ご返信ありがとうございます。どうやら懸念していた通り、インタラクティブなグラフをウェブページに貼り付けるだけではダメなようです！SquarespaceはCSS、Java、HTMLをサポートしているので、明日ご提案いただいた方法を試してみます。皮肉なことに、Squarespaceは意図的にスクリプトを書かなくても済むように設計されていますが、いざという時にはスクリプトを使うことも可能です。ご提案いただき、改めて感謝申し上げます。他のJMPユーザーがインタラクティブなHTMLグラフをウェブサイトに掲載することに興味をお持ちの場合に備えて、成功（または失敗）の結果を後日ご報告いたします。アンダーソン

ウェブサイトにインタラクティブなHTMLプロットを投稿することについて

こんにちは@abmayfield 、

おそらく少し難しいでしょう。これらのファイルは、グラフだけを簡単にコピー＆ペーストしてウェブサイトに埋め込むようには作られていません。HTML、CSS、JavaScriptの経験はお持ちですか？JMPのグラフをウェブサイトに載せたことはありませんが、Graph Builderのサンプルをエクスポートして、全体の構造を確認してみました。すべてのアクションはタグ内で実行されます。実際のDOMは、CSSとJavaScriptを含むheadタグと、空のタグだけです。JavaScriptがすべてのコンテンツをタグに挿入します。

試してみたい場合は、 tags and putting that into a CSS file, and then clipping out all the JavaScript in the <script> tags and saving that as a .js file.  I don't use foursquare, but I found this which may be helpful for adding your own custom CSS and Javascript: <A href="https://support.squarespace.com/hc/en-us/articles/205815928-Adding-custom-HTML-CSS-and-JavaScript" target="_self" rel="nofollow noopener noreferrer">https://support.squarespace.com/hc/en-us/articles/205815928-Adding-custom-HTML-CSS-and-JavaScript</A></P><br /><P>The JavaScript is pretty unreadable in its unformatted state.  I'm guessing it is ending up in the footer because the JavaScript just appends the content to the tag, so it will go right at the end.  You could add a <div> to the body and edit the JavaScript to to write to that div instead.</P><br /><P>Also, I'm sure there will be some conflicts with the CSS that JMP provides with your website's own styling, so that may have some unintended consequences.  If you know what you're doing, you can probably sort that out.</P><br /><P>Good luck!</P></lingo-body>