質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

1回答

1600閲覧

Processing.js pdeファイルが読み込めない。動作しない。

00000000000

総合スコア24

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2019/03/12 12:24

編集2022/01/12 10:55

http://processingjs.org/articles/p5QuickStart.html

上記のリンクを参考にpdeファイルをwebブラウザで動作させようとしています。
やったこと
・processing-js-1.4.1.zipファイルをダウンロード
・processing-js-1.4.1.zipファイルのexample.htmlを下記のように書き換える。
・proccesing.appでapp.pdeファイルを下記のように作成。

html

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Hello Web - Processing.js Test</title> 5 <script src="processing-1.4.1.min.js"></script> 6 </head> 7 <body> 8 <h1>Processing.js Test</h1> 9 <p>This is my first Processing.js web-based sketch:</p> 10 <canvas data-processing-sources="app.pde"></canvas> 11 </body> 12 </html>

proccesing

1 void setup() { 2 size(200, 200); 3 background(100); 4 stroke(255); 5 ellipse(50, 50, 25, 25); 6 println("hello web!"); 7 }

フォルダの構成がよくわかりません。
このように解凍したzipファイルに別に作成しておいたapp.pdeを入れればいいのでしょうか。
うまく動作せず困っています。
イメージ説明

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2019/03/12 13:11

行数は再現確認の際には邪魔にしかなりませんので、純粋にコードだけ提示いただけますか?
guest

回答1

0

CORSのせいですね

README.mdに書いてますが

md

1There are several ways to get around this problem. You can use a browser which 2does allow file:/// access, although most current browsers either have, or plan 3to, no longer allow this by default. Another option is to run your own localhost 4webserver so that you can test your page from http://localhost, thus avoiding 5file:/// URLs. If you do not have a webserver installed, you can use the simple 6webserver that is bundled with Processing.js. This requires Python to be installed, 7and can be started by running the "httpd.py" script. This will set up a localhost 8webserver instance for as long as you keep it running, so that you can easily 9test your page in any browser of your choosing.

httpd.pyを実行してサーバー立ち上げて
http://localhost:9914/example.html
にアクセスすればよいかと思います

http://localhost:9914/example.html はhttpd.pyのソースを見て多分こうだろうという感じで書いてますので検証はしてません)
※HTTPサーバーが立ち上がっていてhttp://でアクセスできたらいいのでhttpd.pyでなくてもApacheでもいいですしnodejsのhttpサーバー立ち上げでもいいです(その場合は適時URLやらファイルは置き換えてください

投稿2019/03/13 02:43

rururu3

総合スコア5545

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問