webtalekit-alpha 0.2.11 → 0.2.13

package/{src → dist/src}/core/scenarioManager.js

@@ -22,7 +22,6 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ScenarioManager = void 0;
 var ImageObject_1 = require("../resource/ImageObject");
-var logger_1 = require("../utils/logger");
 var ScenarioManager = /** @class */ (function () {
     function ScenarioManager() {
         this.background = new ImageObject_1.ImageObject();
@@ -39,7 +38,6 @@ var ScenarioManager = /** @class */ (function () {
     }
     ScenarioManager.prototype.setScenario = function (scenario, sceneName) {
         if (sceneName === void 0) { sceneName = ''; }
-        (0, logger_1.outputLog)('call', 'debug', { scenario: scenario, sceneName: sceneName });
         this.scenarioData = scenario;
         this.progress.currentScene = sceneName;
         this.progress.currentIndex = 0;
@@ -48,7 +46,8 @@ var ScenarioManager = /** @class */ (function () {
         var _a, _b;
         // 区別にsub=trueを追加
         var _scenario = scenario.map(function (item) { return (__assign(__assign({}, item), { sub: true })); });
-        (0, logger_1.outputLog)('call', 'debug', { scenario: scenario, index: index });
+        // この行を消すと動く
+        // ('call','debug', {scenario, index})
         // index指定がある場合はその値に挿入する
         if (index) {
             (_a = this.scenarioData).splice.apply(_a, __spreadArray([index, 0], _scenario, false));
@@ -57,13 +56,11 @@ var ScenarioManager = /** @class */ (function () {
             // 現在の位置に挿入する
             (_b = this.scenarioData).splice.apply(_b, __spreadArray([this.progress.currentIndex, 0], _scenario, false));
         }
-        (0, logger_1.outputLog)('call', 'debug', this.scenarioData);
     };
     ScenarioManager.prototype.getScenario = function () {
         return this.scenarioData;
     };
     ScenarioManager.prototype.next = function () {
-        (0, logger_1.outputLog)('call: index:', 'debug', this.progress.currentIndex);
         if (this.progress.currentIndex <= this.scenarioData.length) {
             var nextScenario = this.scenarioData[this.progress.currentIndex];
             this.progress.currentIndex += 1;
@@ -80,7 +77,6 @@ var ScenarioManager = /** @class */ (function () {
         return this.progress.currentIndex;
     };
     ScenarioManager.prototype.setIndex = function (index) {
-        (0, logger_1.outputLog)('call index:', 'debug', index);
         this.progress.currentIndex = index;
     };
     ScenarioManager.prototype.setSceneName = function (sceneName) {
@@ -92,6 +88,9 @@ var ScenarioManager = /** @class */ (function () {
     ScenarioManager.prototype.setHistory = function (text) {
         this.backlist.push(text);
     };
+    ScenarioManager.prototype.getHistory = function () {
+        return this.backlist;
+    };
     ScenarioManager.prototype.setSelectedChoice = function (prompt, id) {
         this.progress.selected[this.progress.currentScene] = { prompt: prompt, id: id };
     };

package/dist/src/core/scenarioManager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scenarioManager.js","sourceRoot":"","sources":["../../../src/core/scenarioManager.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA,uDAAqD;AACrD;IAQE;QAHQ,eAAU,GAAgB,IAAI,yBAAW,EAAE,CAAA;QAIjD,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAA;QAClB,IAAI,CAAC,YAAY,GAAG,EAAE,CAAA;QACtB,IAAI,CAAC,QAAQ,GAAG;YACd,iBAAiB,EAAE,EAAE;YACrB,YAAY,EAAE,EAAE;YAChB,YAAY,EAAE,CAAC;YACf,QAAQ,EAAE;YACR,kBAAkB;aACnB;SACF,CAAA;IACH,CAAC;IAED,qCAAW,GAAX,UAAa,QAAa,EAAE,SAAoB;QAApB,0BAAA,EAAA,cAAoB;QAC9C,IAAI,CAAC,YAAY,GAAG,QAAQ,CAAA;QAC5B,IAAI,CAAC,QAAQ,CAAC,YAAY,GAAG,SAAS,CAAA;QACtC,IAAI,CAAC,QAAQ,CAAC,YAAY,GAAG,CAAC,CAAA;IAChC,CAAC;IAED,qCAAW,GAAX,UAAa,QAAa,EAAE,KAAa;;QACvC,iBAAiB;QACjB,IAAM,SAAS,GAAI,QAAQ,CAAC,GAAG,CAAC,UAAC,IAAS,IAAK,OAAA,uBAAM,IAAI,KAAE,GAAG,EAAE,IAAI,IAAG,EAAxB,CAAwB,CAAC,CAAA;QACxE,YAAY;QACZ,sCAAsC;QACtC,wBAAwB;QACxB,IAAG,KAAK,EAAE,CAAC;YACT,CAAA,KAAA,IAAI,CAAC,YAAY,CAAA,CAAC,MAAM,0BAAC,KAAK,EAAE,CAAC,GAAK,SAAS,UAAC;QAClD,CAAC;aAAM,CAAC;YACN,aAAa;YACb,CAAA,KAAA,IAAI,CAAC,YAAY,CAAA,CAAC,MAAM,0BAAC,IAAI,CAAC,QAAQ,CAAC,YAAY,EAAE,CAAC,GAAK,SAAS,UAAC;QACvE,CAAC;IACH,CAAC;IAED,qCAAW,GAAX;QACE,OAAO,IAAI,CAAC,YAAY,CAAA;IAC1B,CAAC;IAED,8BAAI,GAAJ;QACC,IAAG,IAAI,CAAC,QAAQ,CAAC,YAAY,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,CAAC;YAC1D,IAAM,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAA;YAClE,IAAI,CAAC,QAAQ,CAAC,YAAY,IAAI,CAAC,CAAA;YAC/B,OAAQ,YAAY,CAAA;QACtB,CAAC;aAAM,CAAC;YACP,OAAO,IAAI,CAAA;QACZ,CAAC;IACF,CAAC;IAED,iCAAO,GAAP;QACE,OAAO,IAAI,CAAC,QAAQ,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,MAAM,CAAA;IAC9D,CAAC;IAED,kCAAQ,GAAR;QACE,OAAO,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAA;IACnC,CAAC;IAED,kCAAQ,GAAR,UAAS,KAAa;QACpB,IAAI,CAAC,QAAQ,CAAC,YAAY,GAAG,KAAK,CAAA;IACpC,CAAC;IAED,sCAAY,GAAZ,UAAa,SAAiB;QAC5B,IAAI,CAAC,QAAQ,CAAC,YAAY,GAAG,SAAS,CAAA;IACxC,CAAC;IAED,sCAAY,GAAZ;QACE,OAAO,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAA;IACnC,CAAC;IAED,oCAAU,GAAV,UAAY,IAAY;QACtB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAC1B,CAAC;IAED,oCAAU,GAAV;QACE,OAAO,IAAI,CAAC,QAAQ,CAAA;IACtB,CAAC;IAED,2CAAiB,GAAjB,UAAmB,MAAa,EAAE,EAAS;QACzC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,GAAG,EAAC,MAAM,QAAA,EAAE,EAAE,IAAA,EAAC,CAAA;IACnE,CAAC;IAED,uCAAa,GAAb,UAAc,KAAkB;QAC/B,IAAI,CAAC,UAAU,GAAG,KAAK,CAAA;IACxB,CAAC;IAED,uCAAa,GAAb;QACE,OAAO,IAAI,CAAC,UAAU,CAAC;IACzB,CAAC;IACH,sBAAC;AAAD,CAAC,AA9FD,IA8FC;AA9FY,0CAAe"}

package/{src → dist/src}/resource/soundObject.js

@@ -42,8 +42,9 @@ var SoundObject = /** @class */ (function () {
         // 表示済みの画像を管理するクラス
         this.audio = null;
         this.ctx = new AudioContext();
-        this.source = this.ctx.createBufferSource();
         this.isPlaying = false;
+        this.source = this.ctx.createBufferSource();
+        this.src = '';
         this.ctx = new AudioContext();
     }
     SoundObject.prototype.getAudio = function () {
@@ -89,6 +90,7 @@ var SoundObject = /** @class */ (function () {
                         if (!src || src.length == 0) {
                             return [2 /*return*/, this];
                         }
+                        this.src = src;
                         return [4 /*yield*/, fetch(src)];
                     case 1: return [4 /*yield*/, (_b.sent()).arrayBuffer()];
                     case 2:
@@ -126,7 +128,7 @@ var SoundObject = /** @class */ (function () {
         };
     };
     SoundObject.prototype.stop = function () {
-        if (this.source && this.isPlaying) {
+        if (this.source) {
             this.source.stop();
             this.source.disconnect();
             this.source = null;

package/dist/src/resource/soundObject.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"soundObject.js","sourceRoot":"","sources":["../../../src/resource/soundObject.ts"],"names":[],"mappings":"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"}

package/dist/src/utils/fallbackTemplate.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDefaultDialogTemplate = void 0;
+function getDefaultDialogTemplate() {
+    var htmlString = "\n    <dialog id=\"dialogContainer\">\n      <div class=\"dialog-content\">\n        <div class=\"dialog-header\">\n          <button data-close class=\"dialog-close\">&times;</button>\n        </div>\n        <div class=\"dialog-body\">\n          <p data-prompt class=\"dialog-prompt\"></p>\n          <div data-buttons class=\"dialog-buttons\">\n            </div>\n          </div>\n          <div class=\"dialog-footer\" data-options></div>\n        </div>\n      </dialog>\n    ";
+    var styleString = "\n        #dialogContainer {\n          border: 1px solid #ccc;\n          border-radius: 4px;\n          padding: 0;\n          width: 400px;\n        }\n        .dialog-content { padding: 20px; }\n        .dialog-header { text-align: right; margin-bottom: 10px; }\n        .dialog-close { background: none; border: none; font-size: 18px; cursor: pointer; }\n        .dialog-body { display: flex; flex-direction: column; align-items: center; }\n        .dialog-footer { display: flex; gap: 10px; justify-content: flex-end; }\n        .display-buttons { display: flex; justify-content: flex-end; width: 100%; gap: 5px; }\n        .dialog-button {\n          padding: 8px 16px;\n          border: 1px solid #007bff;\n          background: #007bff;\n          color: white;\n          border-radius: 4px;\n          cursor: pointer;\n        }\n        .dialog-button:hover { background: #0056b3; }\n        dialog::backdrop {\n          background-color: rgba(0, 0, 0, 0.8);\n        }\n    ";
+    return {
+        htmlString: htmlString,
+        styleString: styleString
+    };
+}
+exports.getDefaultDialogTemplate = getDefaultDialogTemplate;
+//# sourceMappingURL=fallbackTemplate.js.map

package/dist/src/utils/fallbackTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fallbackTemplate.js","sourceRoot":"","sources":["../../../src/utils/fallbackTemplate.ts"],"names":[],"mappings":";;;AAAA,SAAgB,wBAAwB;IACtC,IAAM,UAAU,GAAG,seAchB,CAAC;IACJ,IAAM,WAAW,GAAG,g+BAyBjB,CAAC;IACJ,OAAO;QACL,UAAU,YAAA;QACV,WAAW,aAAA;KACZ,CAAC;AACJ,CAAC;AA9CD,4DA8CC"}

package/docs/event-system-specification.md

@@ -0,0 +1,493 @@
+# WebTaleKit イベント発火機能 仕様書
+
+## 概要
+
+WebTaleKitのフロントエンドフレームワーク向けイベント発火機能の完全仕様です。全メソッド実行時に前後でイベントを発火し、キューベースで順次処理を行います。
+
+## 1. 対象メソッドの範囲
+
+### 対象クラス
+- **Core クラス**: メインゲームエンジン
+- **ScenarioManager クラス**: シナリオ管理
+- **Drawer クラス**: 描画処理
+- **ResourceManager クラス**: リソース管理
+- **ImageObject クラス**: 画像オブジェクト
+- **SoundObject クラス**: 音声オブジェクト
+
+### 対象メソッド
+各クラスの全メソッド（constructorを除く）
+
+#### Core クラスの主要メソッド
+- `textHandler`, `choiceHandler`, `showHandler`, `hideHandler`
+- `jumpHandler`, `soundHandler`, `sayHandler`, `ifHandler`
+- `callHandler`, `moveToHandler`, `routeHandler`, `waitHandler`
+- `dialogHandler`, `newpageHandler`, `executeCode`
+- `setBackground`, `getBackground` など
+
+#### ScenarioManager クラスの主要メソッド
+- `setScenario`, `addScenario`, `getScenario`
+- `next`, `hasNext`, `getIndex`, `setIndex`
+- `setSceneName`, `getSceneName`, `setHistory`
+- `setSelectedChoice` など
+
+#### Drawer クラスの主要メソッド
+- `drawName`, `drawText`, `drawChoices`
+- `fadeIn`, `fadeOut`, `show`, `moveTo`
+- `clear`, `drawCanvas`, `setVisibility` など
+
+## 2. イベント仕様
+
+### イベントタイミング
+- **メソッド実行前**: `method:before`
+- **メソッド実行後**: `method:after`
+
+### イベントデータ構造
+```typescript
+interface EventData {
+  eventType: 'method:before' | 'method:after'
+  className: string      // 'Core', 'Drawer', 'ScenarioManager' など
+  methodName: string     // 'textHandler', 'drawText' など
+  arguments: any[]       // メソッドの引数配列
+  result?: any          // 実行結果（afterのみ）
+  timestamp: number      // 実行タイムスタンプ
+  executionTime?: number // 実行時間（afterのみ、ms）
+  id: string            // イベント固有ID
+}
+```
+
+### イベント名規則
+- **実行前**: `webtalekit:method:before`
+- **実行後**: `webtalekit:method:after`
+
+## 3. キューベースのイベント発火機構
+
+### EventQueue クラス
+```typescript
+interface EventData {
+  eventType: 'method:before' | 'method:after'
+  className: string
+  methodName: string
+  arguments: any[]
+  result?: any
+  timestamp: number
+  executionTime?: number
+  id: string
+}
+
+class EventQueue {
+  private queue: EventData[] = []
+  private isProcessing: boolean = false
+  private maxQueueSize: number = 1000
+  private batchSize: number = 10
+  
+  enqueue(event: EventData): void {
+    // キューサイズ制限
+    if (this.queue.length >= this.maxQueueSize) {
+      this.queue.shift() // 古いイベントを削除
+    }
+    
+    this.queue.push(event)
+    
+    if (!this.isProcessing) {
+      this.processQueue()
+    }
+  }
+  
+  private async processQueue(): Promise<void> {
+    this.isProcessing = true
+    
+    while (this.queue.length > 0) {
+      const batch = this.queue.splice(0, this.batchSize)
+      
+      // バッチ処理で複数イベントを同時発火
+      await Promise.all(
+        batch.map(event => this.dispatchEvent(event))
+      )
+      
+      // CPU負荷を軽減するための遅延
+      if (this.queue.length > 0) {
+        await new Promise(resolve => setTimeout(resolve, 1))
+      }
+    }
+    
+    this.isProcessing = false
+  }
+  
+  private async dispatchEvent(event: EventData): Promise<void> {
+    const customEvent = new CustomEvent(`webtalekit:${event.eventType}`, {
+      detail: event,
+      bubbles: false,
+      cancelable: false
+    })
+    
+    // 非同期でイベント発火
+    setTimeout(() => {
+      document.dispatchEvent(customEvent)
+    }, 0)
+  }
+}
+```
+
+### EventEmitter クラス
+```typescript
+class EventEmitter {
+  private static instance: EventEmitter
+  private eventQueue: EventQueue = new EventQueue()
+  private eventId: number = 0
+  
+  static getInstance(): EventEmitter {
+    if (!EventEmitter.instance) {
+      EventEmitter.instance = new EventEmitter()
+    }
+    return EventEmitter.instance
+  }
+  
+  emitBefore(className: string, methodName: string, args: any[]): string {
+    const eventId = this.generateEventId()
+    const event: EventData = {
+      eventType: 'method:before',
+      className,
+      methodName,
+      arguments: args,
+      timestamp: performance.now(),
+      id: eventId
+    }
+    
+    this.eventQueue.enqueue(event)
+    return eventId
+  }
+  
+  emitAfter(eventId: string, className: string, methodName: string, 
+           args: any[], result: any, startTime: number): void {
+    const event: EventData = {
+      eventType: 'method:after',
+      className,
+      methodName,
+      arguments: args,
+      result,
+      timestamp: performance.now(),
+      executionTime: performance.now() - startTime,
+      id: eventId
+    }
+    
+    this.eventQueue.enqueue(event)
+  }
+  
+  private generateEventId(): string {
+    return `evt_${++this.eventId}_${Date.now()}`
+  }
+}
+```
+
+### メソッドラッパーの実装
+```typescript
+function withEventEmission(target: any, className: string) {
+  const emitter = EventEmitter.getInstance()
+  
+  // クラスの全メソッドをラップ
+  Object.getOwnPropertyNames(target.prototype).forEach(methodName => {
+    if (methodName !== 'constructor' && 
+        typeof target.prototype[methodName] === 'function') {
+      
+      const originalMethod = target.prototype[methodName]
+      
+      target.prototype[methodName] = function(...args: any[]) {
+        const startTime = performance.now()
+        const eventId = emitter.emitBefore(className, methodName, args)
+        
+        try {
+          const result = originalMethod.apply(this, args)
+          
+          // Promiseの場合
+          if (result instanceof Promise) {
+            return result.then(resolvedResult => {
+              emitter.emitAfter(eventId, className, methodName, 
+                              args, resolvedResult, startTime)
+              return resolvedResult
+            }).catch(error => {
+              emitter.emitAfter(eventId, className, methodName, 
+                              args, error, startTime)
+              throw error
+            })
+          } else {
+            emitter.emitAfter(eventId, className, methodName, 
+                            args, result, startTime)
+            return result
+          }
+        } catch (error) {
+          emitter.emitAfter(eventId, className, methodName, 
+                          args, error, startTime)
+          throw error
+        }
+      }
+    }
+  })
+}
+```
+
+## 4. フロントエンド向けAPIインターフェース
+
+### 基本的なイベントリスナー登録
+```javascript
+// 全メソッドの実行前後を監視
+document.addEventListener('webtalekit:method:before', (event) => {
+  const { className, methodName, arguments: args } = event.detail
+  console.log(`[BEFORE] ${className}.${methodName}`, args)
+})
+
+document.addEventListener('webtalekit:method:after', (event) => {
+  const { className, methodName, result, executionTime } = event.detail
+  console.log(`[AFTER] ${className}.${methodName}`, result, `${executionTime}ms`)
+})
+```
+
+### フィルタリング機能付きAPI
+```javascript
+// WebTaleKit専用のイベント管理クラス
+class WebTaleKitEvents {
+  // 特定のクラスのメソッドのみ監視
+  onClassMethod(className, callback) {
+    const handler = (event) => {
+      if (event.detail.className === className) {
+        callback(event.detail)
+      }
+    }
+    document.addEventListener('webtalekit:method:before', handler)
+    document.addEventListener('webtalekit:method:after', handler)
+    
+    return () => {
+      document.removeEventListener('webtalekit:method:before', handler)
+      document.removeEventListener('webtalekit:method:after', handler)
+    }
+  }
+  
+  // 特定のメソッドのみ監視
+  onMethod(className, methodName, callback) {
+    const handler = (event) => {
+      const detail = event.detail
+      if (detail.className === className && detail.methodName === methodName) {
+        callback(detail)
+      }
+    }
+    document.addEventListener('webtalekit:method:before', handler)
+    document.addEventListener('webtalekit:method:after', handler)
+    
+    return () => {
+      document.removeEventListener('webtalekit:method:before', handler)
+      document.removeEventListener('webtalekit:method:after', handler)
+    }
+  }
+  
+  // beforeのみ監視
+  onBefore(className, methodName, callback) {
+    const handler = (event) => {
+      const detail = event.detail
+      if (detail.className === className && detail.methodName === methodName) {
+        callback(detail)
+      }
+    }
+    document.addEventListener('webtalekit:method:before', handler)
+    
+    return () => {
+      document.removeEventListener('webtalekit:method:before', handler)
+    }
+  }
+  
+  // afterのみ監視
+  onAfter(className, methodName, callback) {
+    const handler = (event) => {
+      const detail = event.detail
+      if (detail.className === className && detail.methodName === methodName) {
+        callback(detail)
+      }
+    }
+    document.addEventListener('webtalekit:method:after', handler)
+    
+    return () => {
+      document.removeEventListener('webtalekit:method:after', handler)
+    }
+  }
+}
+
+// グローバルに公開
+window.WebTaleKitEvents = new WebTaleKitEvents()
+```
+
+### React向けのカスタムフック
+```javascript
+// React用カスタムフック
+function useWebTaleKitMethod(className, methodName, eventType = 'both') {
+  const [eventData, setEventData] = useState(null)
+  
+  useEffect(() => {
+    const unsubscribers = []
+    
+    if (eventType === 'before' || eventType === 'both') {
+      const unsubBefore = window.WebTaleKitEvents.onBefore(
+        className, methodName, setEventData
+      )
+      unsubscribers.push(unsubBefore)
+    }
+    
+    if (eventType === 'after' || eventType === 'both') {
+      const unsubAfter = window.WebTaleKitEvents.onAfter(
+        className, methodName, setEventData
+      )
+      unsubscribers.push(unsubAfter)
+    }
+    
+    return () => {
+      unsubscribers.forEach(unsub => unsub())
+    }
+  }, [className, methodName, eventType])
+  
+  return eventData
+}
+
+// 使用例
+function GameDebugPanel() {
+  const textEvent = useWebTaleKitMethod('Core', 'textHandler')
+  const drawEvent = useWebTaleKitMethod('Drawer', 'drawText')
+  
+  return (
+    <div>
+      <div>Last text: {textEvent?.arguments?.[0]}</div>
+      <div>Draw time: {drawEvent?.executionTime}ms</div>
+    </div>
+  )
+}
+```
+
+### Vue.js向けのComposable
+```javascript
+// Vue 3 Composition API用
+function useWebTaleKitEvents() {
+  const events = ref([])
+  const latestEvent = ref(null)
+  
+  const subscribe = (className, methodName, eventType = 'both') => {
+    const unsubscribers = []
+    
+    const handler = (eventData) => {
+      events.value.push(eventData)
+      latestEvent.value = eventData
+      
+      // 最新100件のみ保持
+      if (events.value.length > 100) {
+        events.value.shift()
+      }
+    }
+    
+    if (eventType === 'before' || eventType === 'both') {
+      unsubscribers.push(
+        window.WebTaleKitEvents.onBefore(className, methodName, handler)
+      )
+    }
+    
+    if (eventType === 'after' || eventType === 'both') {
+      unsubscribers.push(
+        window.WebTaleKitEvents.onAfter(className, methodName, handler)
+      )
+    }
+    
+    return () => {
+      unsubscribers.forEach(unsub => unsub())
+    }
+  }
+  
+  return {
+    events: readonly(events),
+    latestEvent: readonly(latestEvent),
+    subscribe
+  }
+}
+```
+
+## 5. 実装手順
+
+### 1. 初期化コード
+```javascript
+// 各クラスにイベント発火機能を追加
+withEventEmission(Core, 'Core')
+withEventEmission(Drawer, 'Drawer')  
+withEventEmission(ScenarioManager, 'ScenarioManager')
+withEventEmission(ResourceManager, 'ResourceManager')
+withEventEmission(ImageObject, 'ImageObject')
+withEventEmission(SoundObject, 'SoundObject')
+```
+
+### 2. 利用例
+
+#### 基本的な使用方法
+```javascript
+document.addEventListener('webtalekit:method:before', (event) => {
+  console.log('実行前:', event.detail)
+})
+
+document.addEventListener('webtalekit:method:after', (event) => {
+  console.log('実行後:', event.detail)
+})
+```
+
+#### 特定メソッドのみ監視
+```javascript
+const unsubscribe = window.WebTaleKitEvents.onMethod(
+  'Core', 'textHandler', (eventData) => {
+    console.log('テキスト表示:', eventData)
+  }
+)
+
+// 監視停止
+unsubscribe()
+```
+
+#### React での使用
+```javascript
+function MyComponent() {
+  const textEvent = useWebTaleKitMethod('Core', 'textHandler')
+  
+  return (
+    <div>
+      {textEvent && (
+        <p>最新のテキスト: {textEvent.arguments?.[0]}</p>
+      )}
+    </div>
+  )
+}
+```
+
+## 6. パフォーマンス考慮事項
+
+### キューシステム
+- **最大キューサイズ**: 1000イベント
+- **バッチサイズ**: 10イベント/バッチ
+- **バッチ間遅延**: 1ms
+
+### メモリ管理
+- 古いイベントの自動削除
+- WeakRef使用による循環参照防止
+
+### CPU負荷軽減
+- 非同期イベント発火
+- バッチ処理による効率化
+
+## 7. 注意事項
+
+- **非同期実行**: イベントは非同期で発火されるため、メソッド実行の直後に完了していない場合があります
+- **エラー処理**: メソッドでエラーが発生した場合もafterイベントは発火され、resultにErrorオブジェクトが含まれます
+- **パフォーマンス**: 大量のイベントが発生する場合、キューによる制御が行われます
+
+## 8. 拡張可能性
+
+この設計により以下の拡張が可能です：
+
+- イベントフィルタリングの詳細化
+- イベントの永続化（ログ保存）
+- リアルタイム監視ダッシュボード
+- デバッグツールとの連携
+- メトリクス収集機能
+
+---
+
+**作成日**: 2025-08-08  
+**バージョン**: 1.0.0