diff --git a/src/life-game/event.js b/src/life-game/event.js
new file mode 100644
index 0000000..9a1d85f
--- /dev/null
+++ b/src/life-game/event.js
@@ -0,0 +1,8 @@
+const on = {};
+
+window.addEventListener("message", (event) => {
+  const handler = on[event.data.type];
+  if (handler) {
+    handler(event.data.data);
+  }
+});
diff --git a/src/life-game/life-game.js b/src/life-game/life-game.js
index 0254ebd..ecab855 100644
--- a/src/life-game/life-game.js
+++ b/src/life-game/life-game.js
@@ -1,6 +1,7 @@
 "use strict";
 
 let timer = "stop";
+let timerId = 0;
 let generationFigure = 0;
 
 //定数
@@ -159,6 +160,26 @@ function progressBoard() {
   renderBoard();
 }
 
+//イベント
+
+on.play = () => {
+  timer = "start";
+  timerId = setInterval(progressBoard, 1000);
+};
+
+on.pause = () => {
+  timer = "stop";
+  clearInterval(timerId);
+};
+
+on.load_board = (boardTemplate) => {
+  board = boardTemplate;
+};
+
+on.resize = (newBoardSize) => {
+  boardSize = newBoardSize;
+};
+
 //以下パターンデータ
 //(注)minBoardSizeは、パターンが余裕をもって変形できるために必要なボードのサイズを表し、パターン自体より大きい。
 
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 4db6088..ee92c09 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -2,7 +2,7 @@
   import * as icons from "$lib/icons/index.ts";
   import lghtml from "../life-game/life-game.html?raw";
   import lgjs from "../life-game/life-game.js?raw";
-  import PlayandPause from "../life-game/play-pause.js?raw";
+  import event from "../life-game/event.js?raw";
 
   let code = $state(lgjs);
 
@@ -10,8 +10,8 @@
     lghtml.replace(
       /<script src="\.\/life-game\.js"><\/script>/,
       `<script>
+      \n${event}\n
       \n${lgjs}\n
-      \n${PlayandPause}\n
       <\/script>`,
     ),
   );
@@ -19,6 +19,10 @@
   let showEditor = $state(true);
   let preview_iframe: HTMLIFrameElement | undefined = $state();
   let isProgress = $state(false);
+
+  function sendEvent(event: string, message?: unknown) {
+    preview_iframe?.contentWindow?.postMessage({ type: event, date: message }, "*");
+  }
 </script>
 
 <div class="navbar bg-[#E0E0E0] shadow-sm">
@@ -35,7 +39,8 @@
   <button
     class="btn btn-ghost btn-circle hover:bg-[rgb(220,220,220)] swap ml-5"
     onclick={() => {
-      preview_iframe?.contentWindow?.postMessage({ type: isProgress ? "pause" : "play" }, "*");
+      const eventName = isProgress ? "pause" : "play";
+      sendEvent(eventName);
       isProgress = !isProgress;
     }}
   >