本カテゴリーでは、次のファイル構造を1つのプロジェクトとして使用することにします。プロジェクトフォルダ(1つのWebアプリに必要なファイルを全部まとめたフォルダ)は次の要領で作成します。デスクトップなどに、プロジェクト名(startなど)をつけたフォルダを新規作成する。その中にフォルダを作成する。プロジェクトフォルダ直下にindex.htmlファイルを作成する(後述)。プロジェクトフォルダ直下にsketch.jsファイルを作成する(後述)。画像ファイルなどを使用する場合には、assetsフォルダなど、専用のフォルダを作成し、そこに配置する。必要なJavaScriptファイルは次の要領でダウンロードし、プロジェクトフォルダ内のlibフォルダにコピーします。Library]をクリックしてZIPファイルをダウンロードし、展開して現れるp5フォルダの直下にあるp5.min.jsと、addonsフォルダにあるp5.dom.min.js、p5.sound.min.jsをlibフォルダにコピーする。p5.playサイトの[Download]リンクをクリックしてZIPファイルをダウンロードし、展開して現れるp5.play-master/libフォルダにあるp5.play.jsをlibフォルダにコピーする。各ファイルは次の役目を持ちます。index.html:ブラウザが読み込んで、その内容を表示する。使用するJavaScriptライブラリを読み込む。sketch.js:Webアプリを実際に記述するメインのJavaScriptファイル。p5.jsでは通常sketchという名前がつけられる。p5.min.js:p5.jsライブラリの圧縮版JavaScriptファイル。p5.dom.min.js:p5.dom.jsライブラリの圧縮版JavaScriptファイル。HTMLのDOM操作に使用できる。p5.sound.min.js:p5.sound.jsライブラリの圧縮版JavaScriptファイル。サウンド操作に使用できる。p5.play.js:p5.play.jsライブラリのJavaScriptファイル。DOM操作やサウンド操作を行わないプロジェクトではp5.dom.min.jsやp5.sound.min.jsは必要ないので、実際にはプロジェクトから削除できます。上記のようなプロジェクトをひな型として作っておくと、フォルダをコピーしてフォルダ名を新しいプロジェクトの名前に変えるだけで、新しいプロジェクトのsketch.jsの記述に入れるので効率的です。Codeを使用します。Server」を使用すると、ワンクリックでローカルに簡易Webサーバーが起動でき、Webアプリの動作確認に非常に便利です。index.htmlプロジェクトフォルダ直下には、次のindex.htmlファイルを記述します。src="sketch.js"></script></body></html><script>タグ内には、読み込むJavaScriptライブラリへのパスを指定しますが、読み込む順番に注意が要ります。p5.dom.min.jsやp5.sound.min.js、p5.play.jsは、p5.jsを本家とするアドオンなので、必ずp5.min.jsの後で読み込む必要があります。したがって、<script>タグではまずp5.min.jsを読み込み、その下にp5.dom.min.jsなどを追加します。実際のWebアプリのJavaScriptコードを記述するsketch.jsは</body>タグの直前で読み込みます。skecth.jsファイルには次のJavaScriptコードを記述します。drawSprites();}Webブラウザでindex.htmlを開いて結果を確認します。ページに矩形が1つ描画されていればすべてうまくいっています。うまくいかない場合ページに矩形が表示されない場合は、どこかに間違いがあるので、それを修正する必要があります。ブラウザにはデベロッパーツールと呼ばれる開発ツールがあり、これを使ってエラーを修正します。エラーはデベロッパーツールの[Console]タブに表示されます。p5.playのlをrに間違えて記述していると、コンソールには次のエラーが表示されます。上の2つの[!]マークは警告なので、今は無視できます。エラーはその下の赤い[X]マークの2つです。1つめは「p5.pray.jsファイルが見つからなかった」と言っています。エラーの発生場所はその右に表示されます。今の場合にはindex.htmlの9行めです。policy」に関するものです。p5.js」で述べています。2つめのエラーは、「createSpriteは定義されていない」と言っています。createSpriteはp5.play.jsで定義されている関数ですが、ここではp5.play.jsの読み込みに失敗しているので、JavaScriptは当然createSpriteを知りません。したがってこのエラーは正しくp5.play.min.jsファイルが読み込まれると、発生しなくなります。重要p5.playにはバグがあり、次の変更で修正できます。p5.play.jsの3571行にある次のコードを探す。frame_info.height);このコードを次のように変更する。frame_info.height);p5.play.jsを保存する。コメントをキャンセルメールアドレスが公開されることはありません。*サイト上に表示された文字を入力してください。WAAPIに関する注意WAAPIを利用するにはブラウザに特別な設定が必要です。ブラウザの実験的な機能を有効化する方法に書いているので、必ずお読みください。楕円(円)、円弧を描く。APIやTensorFlow.jsについて調べたことを書いています。freebiescafe.com。