webtalekit-alpha 0.2.11 → 0.2.14

package/src/core/index.js

@@ -4,34 +4,41 @@ import { ImageObject } from '../resource/ImageObject'
 import { ResourceManager } from './resourceManager'
 import { SoundObject } from '../resource/soundObject'
 import engineConfig from '../../engineConfig.json'
-import { outputLog } from '../utils/logger'
 import { sleep } from '../utils/waitUtil'
+import { getDefaultDialogTemplate } from '../utils/fallbackTemplate'
+import { generateStore } from '../utils/store'
+import { EventBus } from '../utils/eventBus'
+import { DefaultUIHandler } from './defaultUIHandler'
+import { logError } from '../utils/logger'
 
 export class Core {
-  bgm = null
-  isAuto = false
-  isNext = false
-  isSkip = false
-  onNextHandler = null
-  sceneFile = {}
-  sceneConfig = {}
-  commandList = {
-    text: this.textHandler,
-    choice: this.choiceHandler,
-    show: this.showHandler,
-    newpage: this.newpageHandler,
-    hide: this.hideHandler,
-    jump: this.jumpHandler,
-    sound: this.soundHandler,
-    say: this.sayHandler,
-    if: this.ifHandler,
-    call: this.callHandler,
-    moveto: this.moveToHandler,
-    route: this.routeHandler,
-    wait: this.waitHandler,
-  }
-
-  constructor() {
+  constructor(options = {}) {
+    // プロパティの初期化
+    this.bgm = null
+    this.isAuto = false
+    this.isNext = false
+    this.isSkip = false
+    this.onNextHandler = null
+    this.sceneFile = {}
+    this.sceneConfig = {}
+    this.commandList = {
+      text: this.textHandler,
+      choice: this.choiceHandler,
+      show: this.showHandler,
+      newpage: this.newpageHandler,
+      hide: this.hideHandler,
+      jump: this.jumpHandler,
+      sound: this.soundHandler,
+      say: this.sayHandler,
+      if: this.ifHandler,
+      call: this.callHandler,
+      moveto: this.moveToHandler,
+      route: this.routeHandler,
+      wait: this.waitHandler,
+      dialog: this.dialogHandler,
+      save: this.saveHandler,
+      load: this.loadHandler,
+    }
     // gameContainerの初期化（HTMLのgameContainerを取得する）
     this.gameContainer = document.getElementById('gameContainer')
     // Drawerの初期化（canvasタグのサイズを設定する)
@@ -42,16 +49,23 @@ export class Core {
     this.resourceManager = new ResourceManager(import(/* webpackIgnore: true */ '/src/resource/config.js')) //  webpackIgnoreでバンドルを無視する
     this.displayedImages = {}
     this.usedSounds = {}
+    // ストレージの初期化
+    this.store = generateStore()
+    // EventBusの初期化
+    this.eventBus = new EventBus()
+    // DefaultUIHandlerの登録（customUI: trueの場合はスキップ）
+    if (!options.customUI) {
+      DefaultUIHandler.register(this.eventBus, this.drawer, this.gameContainer, engineConfig.resolution)
+    }
   }
 
   setConfig(config) {
-    outputLog('call', 'debug', config)
     // ゲームの設定情報をセットする
     engineConfig = config
   }
 
   async start(initScene) {
-    outputLog('call', 'debug', initScene)
+    try {
     // TODO: ブラウザ用のビルドの場合は、最初にクリックしてもらう
     // titleタグの内容を書き換える
     document.title = engineConfig.title
@@ -59,38 +73,43 @@ export class Core {
     await this.loadScene(initScene || 'title')
     // 画面を表示する
     await this.loadScreen(this.sceneConfig)
-    // 入力イベントを設定する
-    document.querySelector('#gameContainer').addEventListener('keydown', (e) => {
-      if (e.key === 'Enter') {
-        this.onNextHandler()
-      } else if (e.key === 'Control') {
-        this.drawer.isSkip = true
-        this.isNext = true
-      }
-    })
-    document.querySelector('#gameContainer').addEventListener('keyup', (e) => {
-      if (e.key === 'Control') {
-        this.drawer.isSkip = true
-        this.isNext = false
-      }
-    })
-    document.querySelector('#gameContainer').addEventListener('click', (e) => {
-      this.onNextHandler()
+    // 入力イベントを設定する（DefaultUIHandlerに委譲）
+    await this.eventBus.emit('input:bind', {
+      onNext: () => { if (this.onNextHandler) this.onNextHandler() },
+      setSkip: (drawerSkip, coreNext) => {
+        this.drawer.isSkip = drawerSkip
+        this.isNext = coreNext
+      },
+      toggleAuto: () => { this.isAuto = !this.isAuto },
+      toggleSkip: () => { this.isSkip = !this.isSkip },
     })
 
-    await this.textHandler('タップでスタート')
-    // BGMを再生する
-    this.bgm.play(true)
-    // シナリオを実行する
-    while (this.scenarioManager.hasNext()) {
-      await this.runScenario()
+      await this.textHandler('タップでスタート')
+      // BGMを再生する
+      await this.soundHandler({
+        mode: 'bgm',
+        src: this.sceneConfig.bgm,
+        loop: true,
+        play: true,
+      })
+      // シナリオを実行する
+      while (this.scenarioManager.hasNext()) {
+        await this.runScenario()
+      }
+    } catch (error) {
+      // エラーをログに記録（スタックトレース付き）
+      await logError(error, 'Error in runScenario')
+       // エラーをアラートで表示
+      alert(`システムエラーが発生しました。\n詳細はコンソールで確認してください。:\n${error.message}`)
+      throw error
     }
   }
 
   async loadScene(sceneFileName) {
-    outputLog('call', 'debug', sceneFileName)
     // sceneファイルを読み込む
-    this.sceneFile = await import(/* webpackChunkName: "[request]" */ `/src/js/${sceneFileName}.js`)
+    // ESモジュールの名前空間オブジェクトは外部から書き込み不可なため、プレーンオブジェクトにコピーする
+    const moduleNamespace = await import(/* webpackChunkName: "[request]" */ `/src/js/${sceneFileName}.js`)
+    this.sceneFile = { ...moduleNamespace }
     // sceneファイルの初期化処理を実行
     if (this.sceneFile.init) {
       this.sceneFile.init(this.getAPIForScript())
@@ -98,102 +117,127 @@ export class Core {
     // シナリオの進行状況を初期化
     this.scenarioManager.setScenario(this.sceneFile.scenario, sceneFileName)
     this.sceneConfig = { ...this.sceneConfig, ...this.sceneFile.sceneConfig }
-    outputLog('sceneFile', 'debug', this.sceneFile)
-  }
-
-  async loadScreen(sceneConfig) {
-    outputLog('call', 'debug', sceneConfig)
-    // sceneConfig.templateを読み込んで、HTMLを表示する
-    const htmlString = await (await fetch(sceneConfig.template)).text()
-    // 読み込んだhtmlからIDにmainを持つdivタグとStyleタグ以下を取り出して、gameContainerに表示する
-    var parser = new DOMParser()
-    var doc = parser.parseFromString(htmlString, 'text/html')
-    this.gameContainer.innerHTML = doc.getElementById('main').innerHTML
-    // 既に読み込んだスタイルシートがあったら削除する
-    const styleTags = document.head.getElementsByTagName('style')
-    for (const styleTag of styleTags) {
-      document.head.removeChild(styleTag)
-    }
-
-    // Styleタグを取り出して、headタグに追加する
-    const styleElement = doc.head.getElementsByTagName('style')[0]
-    document.head.appendChild(styleElement)
-    // ゲーム進行用に必要な情報をセットする
-    this.drawer.setScreen(this.gameContainer, engineConfig.resolution)
-    // シナリオの進行状況を保存
+  }
+
+  // ファイルの存在確認を行う関数
+  async checkResourceExists(url) {
+    try {
+      const response = await fetch(url, { method: 'HEAD' })
+      return response.ok
+    } catch (error) {
+      return false
+    }
+  }
+
+  async loadScreen(sceneConfig, options = {}) {
+    const {
+      isDialog = false, // ダイアログモードかどうか
+      fallbackTemplate = null, // フォールバック用テンプレート
+      skipBackground = false, // 背景画像の読み込みをスキップ
+    } = options
+
+    // 画面名を設定する。
     this.scenarioManager.progress.currentScene = sceneConfig.name
-    // 背景画像を表示する
-    const background = await new ImageObject().setImageAsync(sceneConfig.background)
-    this.displayedImages['background'] = {
-      image: background,
-      size: {
-        width: this.gameContainer.clientWidth,
-        height: this.gameContainer.clientHeight,
-      },
+    this.scenarioManager.setSceneName(sceneConfig.name)
+    // テンプレートの存在確認（ダイアログ以外のみ）
+    if (!isDialog && !(await this.checkResourceExists(sceneConfig.template))) {
+      console.error(`Template file not found: ${sceneConfig.template}`)
+      throw new Error(`Template file not found: ${sceneConfig.template}`)
+    }
+
+    if (!this.gameContainer) {
+      throw new Error('Game container not found.')
+    }
+
+    // screen:loadイベントを発行してHTMLの読み込み・パース・DOM注入をDefaultUIHandlerに委譲する
+    // テンプレートURLとフォールバック関数を渡すことで、UIフレームワークが独自のfetch/描画処理を実装できる
+    await this.eventBus.emit('screen:load', {
+      template: sceneConfig.template,
+      isDialog,
+      fallbackTemplate,
+    })
+
+    if (!skipBackground) {
+      console.info(`background: ${await this.checkResourceExists(sceneConfig.background)}`)
+      // 背景画像の存在確認
+      if (!(await this.checkResourceExists(sceneConfig.background))) {
+        throw new Error(`Background image not found: ${sceneConfig.background}`)
+      } else {
+        // 背景画像を表示する
+        const background = await new ImageObject().setImageAsync(sceneConfig.background)
+        this.displayedImages['background'] = {
+          image: background,
+          size: {
+            width: this.gameContainer.clientWidth,
+            height: this.gameContainer.clientHeight,
+          },
+        }
+      }
+      this.drawer.show(this.displayedImages)
     }
-    this.drawer.show(this.displayedImages)
-    this.bgm = await new SoundObject().setAudioAsync(sceneConfig.bgm)
   }
 
   async runScenario() {
-    outputLog('call index:', 'debug', this.scenarioManager.getIndex())
+
     let scenarioObject = this.scenarioManager.next()
     if (!scenarioObject) {
       return
     }
-    outputLog('scenarioObject', 'debug', scenarioObject)
     // シナリオオブジェクトのtypeプロパティに応じて、対応する関数を実行する
-    const boundFunction = this.commandList[scenarioObject.type || 'text'].bind(this)
-    outputLog(`boundFunction:${boundFunction.name.split(' ')[1]}`, 'debug', scenarioObject)
+    const commandType = scenarioObject.type || 'text'
+    const commandFunction = this.commandList[commandType]
+
+    // コマンドが存在しない場合のエラーハンドリング
+    if (!commandFunction) {
+      const errorMessage = `Error: Command type "${commandType}" is not defined`
+      throw new Error(errorMessage)
+    }
+
+    const boundFunction = commandFunction.bind(this)
     scenarioObject = await this.httpHandler(scenarioObject)
+
+    // ifグローバル属性の処理
+    if (scenarioObject.if !== undefined) {
+      const condition = this.executeCode(`return ${scenarioObject.if}`)
+
+      // 条件がfalseの場合、このタグの処理をスキップ
+      if (!condition) {
+        return
+      }
+    }
+
     await boundFunction(scenarioObject)
   }
 
   async textHandler(scenarioObject) {
-    outputLog('textHandler:line', 'debug', scenarioObject)
     // 文章だけの場合は、contentプロパティに配列として設定する
     if (typeof scenarioObject === 'string') scenarioObject = { content: [scenarioObject] }
     // httpレスポンスがある場合は、list.contentに追加して、表示対象に加える
     if (scenarioObject.then || scenarioObject.error) {
       scenarioObject.content = scenarioObject.content.concat(scenarioObject.then || scenarioObject.error)
     }
-    outputLog('call', 'debug', scenarioObject)
-
-    // 名前が設定されている場合は、名前を表示する
-    if (scenarioObject.name) {
-      this.drawer.drawName(scenarioObject.name)
-    } else {
-      this.drawer.drawName('')
-    }
 
     //prettier-ignore
     this.onNextHandler = () => { this.drawer.isSkip = true }
-    this.drawer.clearText() // テキスト表示領域をクリア
-    // 表示する文章を1行ずつ表示する
-    for (const text of scenarioObject.content) {
-      outputLog('textSpeed', 'debug', text)
-      if (typeof text === 'string') {
-        await this.drawer.drawText(this.expandVariable(text), scenarioObject.speed || 25)
-      } else {
-        if (text.type === 'br' || text.type === 'wait') {
-          outputLog('text', 'debug', text)
-          if (text.type === 'br') this.drawer.drawLineBreak()
-          if (!text.nw) {
-            await this.waitHandler({ wait: text.time })
-          }
-        } else {
-          const container = this.drawer.createDecoratedElement(text)
-          await this.drawer.drawText(this.expandVariable(text.content[0]), text.speed || 25, container)
-        }
-      }
-    }
+
+    // text:clearイベントを発行してテキスト表示領域をクリアする
+    await this.eventBus.emit('text:clear')
+
+    // text:showイベントを発行してテキスト表示をDefaultUIHandlerに委譲する
+    await this.eventBus.emit('text:show', {
+      name: scenarioObject.name || '',
+      content: scenarioObject.content,
+      speed: this.isSkip ? 1 : scenarioObject.speed || 25,
+      expandVariable: this.expandVariable.bind(this),
+      waitFn: this.waitHandler.bind(this),
+    })
+
     await this.waitHandler({ wait: scenarioObject.time })
     this.drawer.isSkip = false
     this.scenarioManager.setHistory(scenarioObject.content)
   }
 
   expandVariable(text) {
-    outputLog('call', 'debug', text)
     if (typeof text !== 'string') return text
     return text.replace(/{{([^{}]+)}}/g, (match) => {
       const expr = match.slice(2, -2)
@@ -205,35 +249,42 @@ export class Core {
   async waitHandler(line) {
     // line.timeがある場合、line.waitに代入する
     if (line.time) line.wait = line.time
-    outputLog('call', 'debug', line)
     //prettier-ignore
     this.onNextHandler = () => { this.isNext = true }
-    outputLog('wait type', 'debug', typeof line.wait)
 
     // line.waitが数値に変換可能な文字列の場合、数値に変換
     if (typeof line.wait === 'string' && !isNaN(Number(line.wait))) {
       line.wait = Number(line.wait)
     }
+
+    // スキップモードが有効な場合は全ての待機をスキップする
+    if (this.isSkip) {
+      return
+    }
+
     if (typeof line.wait === 'number') {
-      outputLog('wait number', 'debug', line.wait)
       if (line.wait > 0 || this.isAuto) {
         const waitTime = line.wait || 1500
         // 指定された時間だけ待機
         await sleep(waitTime)
       }
     } else {
-      // 改行ごとに入力待ち
-      await this.clickWait()
+      if (this.isAuto) {
+        // オートモードが有効な場合はデフォルト時間後に自動進行する
+        await sleep(1500)
+      } else {
+        // 改行ごとに入力待ち
+        await this.clickWait()
+      }
     }
   }
 
   // クリック待ち処理
   async clickWait() {
-    outputLog('call', 'debug')
     this.drawer.setVisibility('#waitCircle', true)
     return new Promise((resolve) => {
       const intervalId = setInterval(() => {
-        if (this.isNext) {
+        if (this.isNext || this.isAuto || this.isSkip) {
           this.drawer.setVisibility('#waitCircle', false)
           clearInterval(intervalId)
           this.isNext = false
@@ -244,31 +295,29 @@ export class Core {
   }
 
   async sayHandler(line) {
-    outputLog('call', 'debug', line)
     // say(name:string, pattern: string, voice: {playの引数},  ...text)
-    if (line.voice) await this.soundHandler({ path: line.voice, play: undefined })
+    if (line.voice) await this.soundHandler({ path: line.voice, play: true })
     await this.textHandler({ content: line.content, name: line.name, speed: line.speed || 25 })
     this.scenarioManager.setHistory(line)
   }
 
   async choiceHandler(line) {
-    outputLog('call', 'debug', line)
-    document.querySelector('#interactiveView').style.visibility = 'visible'
     if (line.prompt) this.textHandler(line.prompt)
     // ムスタッシュ構文があるときは、変数の展開
     line.content.forEach((choice) => {
       choice.label = this.expandVariable(choice.label)
     })
-    const { selectId, onSelect: selectHandler } = await this.drawer.drawChoices(line)
+    // choice:showイベントを発行して選択肢の表示と選択結果の取得をDefaultUIHandlerに委譲する
+    const [result] = await this.eventBus.emit('choice:show', line)
+    const { selectId, onSelect: selectHandler } = result || {}
     if (selectHandler !== undefined) {
       this.scenarioManager.addScenario(selectHandler)
     }
     this.scenarioManager.setHistory({ line, ...selectId })
-    document.querySelector('#interactiveView').style.visibility = 'hidden'
+    this.isNext = false
   }
 
   jumpHandler(line) {
-    outputLog('call:', 'debug', line.index)
     // ジャンプ先が現在の行より小さいときは、今の行とジャンプ先の行の間で、sub=falseの行を抽出して、scenarioManagerに追加する
     if (line.index < this.scenarioManager.getIndex()) {
       // scenarioManagerからシナリオを取得
@@ -278,23 +327,19 @@ export class Core {
         before: scenario.slice(0, line.index),
         after: scenario.slice(this.scenarioManager.getIndex()),
       }
-      outputLog('noEditScenarioList', 'debug', noEditScenarioList)
       // ジャンプ先のインデックスまでのシナリオを取得
       const scenarioList = scenario.slice(line.index, this.scenarioManager.getIndex())
-      outputLog('scenarioList', 'debug', scenarioList)
       // sub=falseの行だけを取得
       const subFalseScenario = scenarioList.filter((line) => !line.sub)
-      outputLog('subFalseScenario', 'debug', subFalseScenario)
+      // after に残っている sub=true の要素を除去（前回の選択肢の残骸を除去する）
+      const filteredAfter = noEditScenarioList.after.filter((item) => !item.sub)
       // scenarioManagerに追加
-      this.scenarioManager.setScenario([...noEditScenarioList.before, ...subFalseScenario, ...noEditScenarioList.after])
-      outputLog('scenarioManager', 'debug', this.scenarioManager.getScenario())
+      this.scenarioManager.setScenario([...noEditScenarioList.before, ...subFalseScenario, ...filteredAfter])
     }
-    this.newpageHandler()
     this.scenarioManager.setIndex(Number(line.index))
   }
 
   async showHandler(line) {
-    outputLog('line', 'debug', line)
     // ムスタッシュ構文があるときは、変数の展開
     Object.keys(line).forEach((item) => {
       line[item] = this.expandVariable(line[item])
@@ -352,7 +397,6 @@ export class Core {
       entry: line.entry,
     }
 
-    outputLog('displayedImages', 'debug', this.displayedImages[key])
     if (line.sepia) this.displayedImages[key].image.setSepia(line.sepia)
     if (line.mono) this.displayedImages[key].image.setMonochrome(line.mono)
     if (line.blur) this.displayedImages[key].image.setBlur(line.blur)
@@ -371,11 +415,9 @@ export class Core {
       // 通常の表示処理
       this.drawer.show(this.displayedImages)
     }
-    outputLog('this.displayedImages', 'debug', this.displayedImages)
   }
 
   async hideHandler(line) {
-    outputLog('call', 'debug', line)
     const targetImage = this.displayedImages[line.name]
     if (line.mode === 'cg') {
       this.displayedImages = { ...this.tempImages }
@@ -395,49 +437,52 @@ export class Core {
   }
 
   async moveToHandler(line) {
-    outputLog('moveToHandler:line', 'debug', line)
     const key = line.name
-    outputLog('moveToHandler:displayedImages', 'debug', this.displayedImages)
     await this.drawer.moveTo(key, this.displayedImages, { x: line.x, y: line.y }, line.duration | 1)
   }
 
   async getImageObject(line) {
-    outputLog('call', 'debug', line)
     const name = line.name || line.src.split('/').pop()
     let image
+
+    // ファイルの存在確認
+    if (!(await this.checkResourceExists(line.src))) {
+      throw new Error(`Image file not found: ${line.src}`)
+    }
+
     // 既にインスタンスがある場合は、それを使う
     if (Object.hasOwn(this.displayedImages, name)) {
       const targetImage = this.displayedImages[name]
       const imageObject = targetImage ? targetImage.image : new ImageObject()
       image = await imageObject.setImageAsync(line.src)
     } else {
-      outputLog('new ImageObject', 'debug')
       image = await new ImageObject().setImageAsync(line.src)
     }
     return image
   }
 
   async soundHandler(line) {
-    outputLog('call', 'debug', line)
-    let soundObject = null
+    const soundObject = await this.getSoundObject(line)
+
     if (line.mode === 'bgm') {
-      if (this.bgm.isPlaying) {
+      // BGMの場合、既存のBGMを停止して、新しいBGMをセットする
+      if (this.bgm && this.bgm.isPlaying) {
         this.bgm.stop()
       }
-      soundObject = await this.getSoundObject(line)
       this.bgm = soundObject
+      this.bgm.play(true)
     } else {
-      // soundObjectを作成
-      soundObject = await this.getSoundObject(line)
-      // playプロパティが存在する場合は、再生する
+      if ('play' in line) {
+        'loop' in line ? soundObject.play(true) : soundObject.play()
+      }
     }
-    if ('play' in line) {
-      'loop' in line ? soundObject.play(true) : soundObject.play()
-    } else if ('stop' in line) {
+
+    if ('stop' in line) {
       soundObject.stop()
     } else if ('pause' in line) {
       soundObject.pause()
     }
+
     // soundObjectを管理オブジェクトに追加
     const key = line.name || line.src.split('/').pop()
     this.usedSounds[key] = {
@@ -446,9 +491,17 @@ export class Core {
   }
 
   async getSoundObject(line) {
-    outputLog('call', 'debug', line)
     const name = line.name || line.src.split('/').pop()
     let resource
+
+    // ファイルの存在確認
+    if (line.src) {
+      if (!(await this.checkResourceExists(line.src))) {
+        throw new Error(`Sound file not found: ${line.src}`)
+      }
+    }
+
+    // 既にインスタンスがある場合は、それを使う
     if (Object.hasOwn(this.usedSounds, name)) {
       const targetResource = this.usedSounds[name]
       const soundObject = targetResource ? targetResource.audio : new SoundObject()
@@ -460,7 +513,6 @@ export class Core {
   }
 
   newpageHandler() {
-    outputLog('call', 'debug')
     this.displayedImages = {
       background: {
         image: this.getBackground(),
@@ -475,20 +527,12 @@ export class Core {
   }
 
   async ifHandler(line) {
-    outputLog('call', 'debug', line)
     const isTrue = this.executeCode(`return ${line.condition}`)
-    outputLog(`${isTrue}`, 'debug')
     const appendScenario = isTrue ? line.content[0].content : line.content[1].content
-    outputLog('', 'debug', appendScenario)
     this.scenarioManager.addScenario(appendScenario)
   }
 
   async routeHandler(line) {
-    outputLog('call', 'debug', line)
-    if (this.bgm.isPlaying) {
-      this.bgm.stop()
-      this.bgm = null
-    }
     this.newpageHandler()
     if (this.sceneFile.cleanUp) {
       // 終了処理を実行する
@@ -499,20 +543,26 @@ export class Core {
     // 画面を表示する
     await this.loadScreen(this.sceneConfig)
     // BGMを再生する
-    this.bgm.play(true)
+    this.soundHandler({
+      mode: 'bgm',
+      src: this.sceneConfig.bgm,
+      loop: true,
+      play: true,
+    })
   }
 
   // Sceneファイルに、ビルド時に実行処理を追加して、そこに処理をお願いしたほうがいいかも？
-  callHandler(line) {
-    outputLog('call', 'debug', line)
-    this.executeCode(line.method)
+  async callHandler(line) {
+    const result = this.executeCode(line.method)
+    if (result && typeof result.then === 'function') {
+      await result
+    }
   }
 
   async httpHandler(line) {
     if (!(line.get || line.post || line.put || line.delete)) {
       return line
     }
-    outputLog('call', 'debug', line)
     // progress属性を処理する
     // prettier-ignore
     const progressText = line.content.filter((content) => content.type === 'progress')[0]
@@ -538,8 +588,6 @@ export class Core {
         }),
         {},
       )
-    outputLog('headers', 'debug', headers)
-    outputLog('body', 'debug', body)
     const response = await fetch(line.get || line.post || line.put || line.delete, {
       method: line.get ? 'GET' : line.post ? 'POST' : line.put ? 'PUT' : 'DELETE',
       headers: headers,
@@ -548,7 +596,6 @@ export class Core {
     if (response.ok) {
       const json = await response.json()
       this.sceneFile.res = json
-      outputLog('res', 'debug', json)
       line.then = line.content.filter((content) => content.type === 'then')[0].content
     } else {
       this.sceneFile.res = json
@@ -570,6 +617,27 @@ export class Core {
     return line
   }
 
+  async dialogHandler(scenarioObject) {
+    if (!scenarioObject || !scenarioObject.content) {
+      throw new Error('Invalid scenario object for dialog handler.')
+    }
+    // ダイアログのテンプレートを読み込む
+    // screen:loadイベント(isDialog:true)ハンドラ内で既存ダイアログの閉鎖も行われる
+    await this.loadScreen(scenarioObject, {
+      isDialog: true,
+      skipBackground: true,
+      skipBgm: true,
+      fallbackTemplate: getDefaultDialogTemplate,
+    })
+    // dialog:showイベントを発行してダイアログのDOM操作をDefaultUIHandlerに委譲する
+    const [result] = await this.eventBus.emit('dialog:show', {
+      content: scenarioObject.content,
+      expandVariable: this.expandVariable.bind(this),
+      addScenario: this.scenarioManager.addScenario.bind(this.scenarioManager),
+    })
+    return result
+  }
+
   setBackground(image) {
     this.displayedImages['background'] = image
   }
@@ -579,19 +647,39 @@ export class Core {
   }
 
   executeCode(code) {
-    outputLog('call', 'debug', code)
     try {
-      const context = { ...this.sceneFile }
-      const func = new Function(...Object.keys(context), code)
-      return func.apply(null, Object.values(context))
+      const keys = Object.keys(this.sceneFile).filter((key) => /^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(key))
+      const declarations = keys.map((key) => `let ${key} = _ctx[${JSON.stringify(key)}];`).join('\n')
+      const writeBacks = keys.map((key) => `_ctx[${JSON.stringify(key)}] = ${key};`).join('\n')
+      const wrappedCode = `${declarations}\nconst _result = (function() { ${code} })();\n${writeBacks}\nreturn _result;`
+      const func = new Function('_ctx', wrappedCode)
+      return func(this.sceneFile)
+    } catch (error) {
+      throw new Error(`Error executing code: ${error.message}`)
+    }
+  }
+
+  async executeScenario(scenarioObjects) {
+    const snap = this.scenarioManager.snapshot()
+    try {
+      this.scenarioManager.setScenario(scenarioObjects)
+      await this.runScenario()
+      return { success: true }
     } catch (error) {
-      console.error('Error executing code:', error)
+      console.error('scenario error:', error)
+      return {
+        success: false,
+        error: error.message || 'Unknown error',
+      }
+    } finally {
+      this.scenarioManager.restore(snap)
     }
   }
 
   // Scriptから安全にアクセスできるメソッドを定義
   getAPIForScript() {
     return {
+      eventBus: this.eventBus,
       drawer: {
         drawName: this.drawer.drawName.bind(this.drawer),
         drawText: this.drawer.drawText.bind(this.drawer),
@@ -655,7 +743,158 @@ export class Core {
         moveto: this.moveToHandler.bind(this),
         route: this.routeHandler.bind(this),
         wait: this.waitHandler.bind(this),
+        save: this.saveHandler.bind(this),
+        load: this.loadHandler.bind(this),
+      },
+      save: {
+        save: this.saveHandler.bind(this),
+        load: this.loadHandler.bind(this),
+        getSaveData: () => this.getSaveData(),
+        setSaveData: (data) => this.setSaveData(data),
+        getSaveList: () => this.getSaveList(),
+        deleteSave: (slot) => this.deleteSave(slot),
+      },
+      store: this.store,
+      playback: {
+        toggleAuto: () => { this.isAuto = !this.isAuto },
+        setAuto: (value) => { this.isAuto = value },
+        getAuto: () => this.isAuto,
+        toggleSkip: () => { this.isSkip = !this.isSkip },
+        setSkip: (value) => { this.isSkip = value },
+        getSkip: () => this.isSkip,
+      },
+      sandbox: {
+        execute: this.executeScenario.bind(this),
+      },
+    }
+  }
+
+  async saveHandler(line) {
+    const slot = line.slot || 'auto'
+    const name = line.name || `セーブ${slot}`
+
+    const saveData = {
+      slot: slot,
+      name: name,
+      timestamp: new Date().toISOString(),
+      scenarioManager: {
+        progress: JSON.parse(JSON.stringify(this.scenarioManager.progress)),
+        sceneName: this.scenarioManager.getSceneName() || this.sceneConfig.name,
+        currentIndex: this.scenarioManager.getIndex(),
+        history: this.scenarioManager.getHistory ? [...this.scenarioManager.getHistory()] : [],
       },
+      sceneConfig: this.sceneConfig,
+      displayedImages: Object.keys(this.displayedImages).reduce((acc, key) => {
+        if (key !== 'background') {
+          acc[key] = {
+            src: this.displayedImages[key].image?.src || null,
+            pos: this.displayedImages[key].pos,
+            size: this.displayedImages[key].size,
+            look: this.displayedImages[key].look,
+            entry: this.displayedImages[key].entry,
+          }
+        }
+        return acc
+      }, {}),
+      backgroundImage: this.displayedImages.background?.image?.getImage()?.src || null,
+      usedSounds: Object.keys(this.usedSounds).reduce((acc, key) => {
+        acc[key] = {
+          src: this.usedSounds[key].audio?.src || null,
+        }
+        return acc
+      }, {}),
+      bgmSrc: this.bgm?.src || null,
+    }
+
+    this.store.set(`save_${slot}`, saveData)
+
+    if (line.message !== false) {
+      await this.textHandler(`ゲームをセーブしました: ${name}`)
+    }
+  }
+
+  async loadHandler(line) {
+    const slot = line.slot || 'auto'
+
+    const saveDataRaw = this.store.get(`save_${slot}`)
+    if (!saveDataRaw) {
+      throw new Error(`セーブデータが見つかりません: スロット${slot}`)
+    }
+
+    // ディープコピーで循環参照を回避
+    const saveData = JSON.parse(JSON.stringify(saveDataRaw))
+
+    const sceneName = saveData.scenarioManager.sceneName || saveData.sceneConfig.name
+    if (!sceneName) {
+      throw new Error('Scene name not found in save data')
+    }
+
+    // シーンとプログレスを復元
+    await this.loadScene(sceneName)
+    await this.loadScreen(saveData.sceneConfig, { skipBackground: true, skipBgm: true })
+
+    // 読んだところまで復元
+    this.scenarioManager.setSceneName(saveData.scenarioManager.sceneName)
+    this.scenarioManager.setIndex(saveData.scenarioManager.currentIndex)
+    this.scenarioManager.setHistory(saveData.scenarioManager.history || [])
+    this.scenarioManager.progress = { ...this.scenarioManager.progress, ...saveData.scenarioManager.progress }
+
+    // 画面の復元
+    this.displayedImages = {}
+    if (saveData.backgroundImage) {
+      const background = await new ImageObject().setImageAsync(saveData.backgroundImage)
+      this.displayedImages['background'] = {
+        image: background,
+        size: {
+          width: this.gameContainer.clientWidth,
+          height: this.gameContainer.clientHeight,
+        },
+      }
+    }
+
+    for (const [key, imageData] of Object.entries(saveData.displayedImages)) {
+      if (imageData.src) {
+        const image = await new ImageObject().setImageAsync(imageData.src)
+        this.displayedImages[key] = {
+          image: image,
+          pos: imageData.pos,
+          size: imageData.size,
+          look: imageData.look,
+          entry: imageData.entry,
+        }
+      }
     }
+
+    // BGMの復元
+    if (saveData.bgmSrc) {
+      this.soundHandler({ mode: 'bgm', src: saveData.bgmSrc, loop: true, play: true })
+    }
+
+    this.drawer.show(this.displayedImages)
+
+    if (line.message !== false) {
+      await this.textHandler(`ゲームをロードしました: ${saveData.name}`)
+    }
+  }
+
+  getSaveData() {
+    const saveKeys = Object.keys(this.store).filter((key) => key.startsWith('save_'))
+    return saveKeys
+      .map((key) => this.store[key])
+      .sort((a, b) => {
+        return new Date(b.timestamp) - new Date(a.timestamp)
+      })
+  }
+
+  setSaveData(data) {
+    this.store.set(`save_${data.slot}`, data)
+  }
+
+  getSaveList() {
+    return this.getSaveData()
+  }
+
+  deleteSave(slot) {
+    this.store.remove(`save_${slot}`)
   }
 }