リクエスト詳細
🐛 バグ報告
対応完了
対象アプリ: PaperCraft Studio
home.php で net.js の読み込みより先に PCSNet.drawThumb が呼ばれ TypeError が発生する
## 1. 不具合の内容
home.php のスクリプトブロックは `<script>` インラインコード → `<script src="assets/net.js">` の順で記述されている。インラインコードの中で `PCSNet.drawThumb(cv, p.config)` を呼び出す `renderHomePresets` と `renderRecent` は `PCSReady` イベントで遅延実行されるが、`window.PCSReady` フラグが既に立っている場合(ページ再訪問やキャッシュ済み環境)は **net.js の読み込み完了前にそのままインライン内で即時呼び出し** されてしまう。
```js
// home.php 末尾(抜粋)
if(window.PCSReady) {
renderHomePresets(window.PCS_PRESETS||[]);
renderRecent();
}
```
この `if(window.PCSReady)` チェックは `<script src="assets/net.js">` より **前** に評価されるため、`PCSReady` が何らかの理由でインラインより先に設定されていると `PCSNet` が未定義のまま呼び出され `TypeError: PCSNet is not defined` が発生する。またブラウザが net.js を同期的に読み込む前にインラインが実行されるケースでも `PCSNet` 未定義となる。
さらに gallery.php でも同じパターンが存在する:
```js
document.addEventListener('PCSReady', function(){ renderGallery(); });
if(window.PCSReady) renderGallery(); // net.js ロード前に評価される
```
## 2. 根拠・発生しそうな条件
- home.php のソースを見ると `<script>` インラインブロックが先、`<script src="assets/net.js">` が後(ページ末尾)に配置されている。
- `window.PCSReady` は net.js 内で `global.PCSReady = true` と設定されると推測されるが、ブラウザのスクリプト実行順(同期)では net.js 読み込み前にインラインが走るため `PCSNet` は必ず未定義。
- gallery.php も同じ構造を持つ。
- `PCSReady` イベント経由のパスは net.js 読み込み後に発火するため正常だが、`if(window.PCSReady)` の即時呼び出しパスがデッドコードになるか、または誤って早期実行される。
## 3. 期待動作
- home.php・gallery.php いずれでも `PCSNet.drawThumb` は net.js の読み込み完了後にのみ呼び出され、TypeError が発生しない。
- プリセットサムネイル・最近使用デザインが正しくレンダリングされる。
## 4. 修正方針
**方針A(推奨):`<script src>` を inline より前に移動する**
home.php・gallery.php ともに `<script src="assets/net.js">` を インラインの `<script>` ブロックより先に配置する。これにより net.js が同期実行された後にインラインが評価されるため `PCSNet` は必ず定義済みとなり、`if(window.PCSReady)` の即時パスも安全に動作する。
```html
<!-- 修正後の順序 -->
<script src="assets/net.js?v=<?= h(APP_VERSION) ?>"></script>
<script>
(function(){
// ... renderHomePresets / renderRecent 定義 ...
document.addEventListener('PCSReady', function(){ ... });
if(window.PCSReady) { ... } // この時点で PCSNet は定義済み
})();
</script>
```
**方針B(フォールバック):即時呼び出しパスを削除し PCSReady イベントのみに統一する**
`if(window.PCSReady)` の即時呼び出しブロックを削除し、net.js 末尾で `document.dispatchEvent(new Event('PCSReady'))` と `window.PCSReady = true` をセットする実装を確認・統一する。これにより net.js 読み込み完了前の誤呼び出しを防ぐ。
方針A の方が変更箇所が少なく安全。home.php と gallery.php の両ファイルを修正する。
home.php のスクリプトブロックは `<script>` インラインコード → `<script src="assets/net.js">` の順で記述されている。インラインコードの中で `PCSNet.drawThumb(cv, p.config)` を呼び出す `renderHomePresets` と `renderRecent` は `PCSReady` イベントで遅延実行されるが、`window.PCSReady` フラグが既に立っている場合(ページ再訪問やキャッシュ済み環境)は **net.js の読み込み完了前にそのままインライン内で即時呼び出し** されてしまう。
```js
// home.php 末尾(抜粋)
if(window.PCSReady) {
renderHomePresets(window.PCS_PRESETS||[]);
renderRecent();
}
```
この `if(window.PCSReady)` チェックは `<script src="assets/net.js">` より **前** に評価されるため、`PCSReady` が何らかの理由でインラインより先に設定されていると `PCSNet` が未定義のまま呼び出され `TypeError: PCSNet is not defined` が発生する。またブラウザが net.js を同期的に読み込む前にインラインが実行されるケースでも `PCSNet` 未定義となる。
さらに gallery.php でも同じパターンが存在する:
```js
document.addEventListener('PCSReady', function(){ renderGallery(); });
if(window.PCSReady) renderGallery(); // net.js ロード前に評価される
```
## 2. 根拠・発生しそうな条件
- home.php のソースを見ると `<script>` インラインブロックが先、`<script src="assets/net.js">` が後(ページ末尾)に配置されている。
- `window.PCSReady` は net.js 内で `global.PCSReady = true` と設定されると推測されるが、ブラウザのスクリプト実行順(同期)では net.js 読み込み前にインラインが走るため `PCSNet` は必ず未定義。
- gallery.php も同じ構造を持つ。
- `PCSReady` イベント経由のパスは net.js 読み込み後に発火するため正常だが、`if(window.PCSReady)` の即時呼び出しパスがデッドコードになるか、または誤って早期実行される。
## 3. 期待動作
- home.php・gallery.php いずれでも `PCSNet.drawThumb` は net.js の読み込み完了後にのみ呼び出され、TypeError が発生しない。
- プリセットサムネイル・最近使用デザインが正しくレンダリングされる。
## 4. 修正方針
**方針A(推奨):`<script src>` を inline より前に移動する**
home.php・gallery.php ともに `<script src="assets/net.js">` を インラインの `<script>` ブロックより先に配置する。これにより net.js が同期実行された後にインラインが評価されるため `PCSNet` は必ず定義済みとなり、`if(window.PCSReady)` の即時パスも安全に動作する。
```html
<!-- 修正後の順序 -->
<script src="assets/net.js?v=<?= h(APP_VERSION) ?>"></script>
<script>
(function(){
// ... renderHomePresets / renderRecent 定義 ...
document.addEventListener('PCSReady', function(){ ... });
if(window.PCSReady) { ... } // この時点で PCSNet は定義済み
})();
</script>
```
**方針B(フォールバック):即時呼び出しパスを削除し PCSReady イベントのみに統一する**
`if(window.PCSReady)` の即時呼び出しブロックを削除し、net.js 末尾で `document.dispatchEvent(new Event('PCSReady'))` と `window.PCSReady = true` をセットする実装を確認・統一する。これにより net.js 読み込み完了前の誤呼び出しを防ぐ。
方針A の方が変更箇所が少なく安全。home.php と gallery.php の両ファイルを修正する。
💬 返信 (3)
🛠 開発を開始しました (バグ修正 (papercraft))
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
📝 開発が完了しました
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
✅ リリース完了のお知らせ
ご要望いただいた「PaperCraft Studio」を実装し、リリースいたしました。
【ご利用方法】
ダッシュボード: https://www.aiapps.jp/?action=dashboard
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=papercraft
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/papercraft/
ご利用ありがとうございます!
ご要望いただいた「PaperCraft Studio」を実装し、リリースいたしました。
【ご利用方法】
ダッシュボード: https://www.aiapps.jp/?action=dashboard
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=papercraft
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/papercraft/
ご利用ありがとうございます!
Echo
Iris