私はR Shinyを使ってWebページを開発しています。自分のRコードも含めています。R Shinyとp5.js
私は、Webページにゲームを表示するためにp5.js(https://p5js.org/)を使用しています。
公式のWebページにあるように、私はHTMLとp5 javascriptコードをjavascriptライブラリとともに持っていると言います。 HTMLを実行すると、右クリックしてchromeを押して表示されますが、開始する例(https://p5js.org/get-started/)は発生しません。
ここでは、HTMLコードです:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!--<meta name="viewport" content="width=device-width, initial-scale=1">-->
<script language="javascript" type="text/javascript" src="libraries/p5.js"> </script>
<script language="javascript" type="text/javascript" src="sketch.js"></script>
<!-- this line removes any default padding and style. you might only need one of these values set. -->
<style> body {padding: 0; margin: 0;} </style>
</head>
<body>
</body>
</html>
私はシャイニーで同じことを行うと、私はそれから何かを得ることはありませんR-Studioからコードを実行しています。私はそれがされていると仮定されているように、私は、p5のjavascriptファイルでアラートを設定して以来、私のHTMLは、JavaScriptが呼ばれていることを知っているが、セットアップと描画の方法の外では、問題は、警告がロードされているにもかかわらず、セットアップのように見え、描画メソッドが呼び出されず、明らかに結果としてキャンバスが読み込まれないということです。 R-Studioから同じファイルを実行しても、HTMLファイルを直接実行するセットアップ方法で警告が表示されるため、呼び出されていないことがわかります。
ここではjavascriptのコードP5である:私はコード
... ,tabItem(tabName = "tabProcessing", htmlOutput("processingMasterThesis") ...
の次の行を使用してシャイニーにHTMLページをロードする
alert("GOOD1");
function setup() {
alert("GOOD2");
createCanvas(640, 480);
}
function draw() {
if (mouseIsPressed) {fill(0);}
else {fill(255);}
ellipse(mouseX, mouseY, 80, 80);
}
は、私が対応しているタグに「processingMasterThesis」を添付しserver.R内のHTMLファイルへのURL。問題はここにはないはずです。
なぜこの原因が考えられますか?ブラウザでロードするHTMLファイルを直接呼び出すと動作しますが、R-Studioから実行する場合は動作しません。なぜですか?
JavaScriptコンソールでエラーが発生しましたか? –
こんにちは@ケビン・ワーカー、お返事ありがとうございます。 Webページをロードしようとすると、この警告が表示されます。 'メインスレッド上の同期XMLHttpRequestは、エンドユーザの経験に悪影響を与えるため、非推奨です。詳細については、https:// xhr.spec.whatwg.org/.'をご覧ください。私のjavascriptファイルでは、このリクエストコールを直接使用しませんが、おそらくp5jsライブラリは内部的に行います。これは問題だと思われますが、そうであればRStudioからWebページ(実際にはRStudioから実行されるのはui.Rファイルです)を実行すると、なぜこのエラーが発生するのですか?右クリック? – EaglesAzul
私はこの問題を解決しました。まず、p5jsファイルに変数を作成して、HTMLから参照できるようにしなければなりません。canvas = createCanvas(640、480);と言うことができます。グローバル変数を宣言したら、その変数を親に伝える必要があります。myCanvas.parent( "divCanvas");と言うことができます。 #UI UI 、タグ$ html(tags $ body( tags $ head(tags = $ script(src = "app/libraries/p5.js)"このようなコードを光沢のある、または純粋なhtmlで作成する必要があります。 ") 、タグ$ head(tags $ script(src =" app/sketch.js ")) 、タグ$ div(id = 'divCanvas') – EaglesAzul