add sandpack to ajaxapp

package.json

@@ -85,7 +85,7 @@
     "gitbook-summary-to-path": "^1.1.0",
     "globby": "^11.0.4",
     "honkit": "^4.0.4",
-    "honkit-plugin-sandpack": "^1.3.3",
+    "honkit-plugin-sandpack": "^1.4.0",
     "js-levenshtein": "^1.1.6",
     "jsdom": "^20.0.0",
     "jsdom-global": "3.0.2",

source/_layouts/website/page.html

@@ -86,8 +86,8 @@
 
     @media (min-width: 1240px) {
         .honkit-plugin-sandpack {
-            width: calc(100% + 240px);
-            margin: 0 0 1em -120px;
+            width: calc(100% + 180px);
+            margin: 0 0 1em -90px;
         }
     }
 

source/use-case/ajaxapp/display/README.md

@@ -158,6 +158,42 @@ result.innerHTML = view;
 - [タグつきテンプレート関数][]を使ってHTML文字列をエスケープした
 - `fetchUserInfo`関数を呼び出し、HTMLにユーザー情報が表示されることを確認した
 
+ここまでのアプリは次のURLで確認できます。
+
+- <https://jsprimer.net/use-case/ajaxapp/display/src/>
+
+<!-- externalResourcesをサイト上のjsを読み込んでいるのでデプロイするまでローカルでは確認できない。これはSandpackの問題を回避するため https://github.com/honkit/honkit-plugin-sandpack#note -->
+
+<!-- sandpack:{
+  "files": {
+    "/index.js": {
+      "path": "src/index.js"
+    },
+    "/index.html": {
+      "path": "src/index.html",
+      "active": true
+    },
+    "/src/index.js": {
+      "code": "/* このファイルは本編とは無関係のファイルなので無視してください。 本編のindex.jsは一つ上のディレクトリにあります */",
+      "hidden": true
+    }
+  },
+  "environment": "static",
+  "template": "vanilla",
+  "options": {
+    "showLineNumbers": true,
+    "editorHeight": 550,
+    "externalResources": ["https://jsprimer.net/use-case/ajaxapp/display/src/index.js"],
+    "showConsole": true, 
+    "showConsoleButton": true
+  },
+  "honkitSettings": {
+    "isOpen": true,
+    "hideExitButton": true
+  }
+} -->
+
+
 [document.getElementById]: https://developer.mozilla.org/ja/docs/Web/API/Document/getElementById
 [ElementのinnerHTML]: https://developer.mozilla.org/ja/docs/Web/API/Element/innerHTML
 [Element]: https://developer.mozilla.org/ja/docs/Web/API/Element

source/use-case/ajaxapp/entrypoint/README.md

@@ -116,6 +116,41 @@ JavaScriptとDOMはWebアプリケーション開発において切っても切
 - `index.js`からコンソールに出力されたログを確認した
 - JavaScriptからHTMLドキュメントを操作するDOMについて学んだ
 
+ここまでのアプリは次のURLで確認できます。
+
+- <https://jsprimer.net/use-case/ajaxapp/entrypoint/src/>
+
+<!-- externalResourcesをサイト上のjsを読み込んでいるのでデプロイするまでローカルでは確認できない。これはSandpackの問題を回避するため https://github.com/honkit/honkit-plugin-sandpack#note -->
+
+<!-- sandpack:{
+  "files": {
+    "/index.js": {
+      "path": "src/index.js"
+    },
+    "/index.html": {
+      "path": "src/index.html",
+      "active": true
+    },
+    "/src/index.js": {
+      "code": "/* このファイルは本編とは無関係のファイルなので無視してください。 本編のindex.jsは一つ上のディレクトリにあります */",
+      "hidden": true
+    }
+  },
+  "environment": "static",
+  "template": "vanilla",
+  "options": {
+    "showLineNumbers": true,
+    "editorHeight": 550,
+    "externalResources": ["https://jsprimer.net/use-case/ajaxapp/entrypoint/src/index.js"],
+    "showConsole": true, 
+    "showConsoleButton": true
+  },
+  "honkitSettings": {
+    "isOpen": true,
+    "hideExitButton": true
+  }
+} -->
+
 [Same Origin Policy]: https://developer.mozilla.org/ja/docs/Web/Security/Same-origin_policy 
 [アプリケーション開発の準備]: ../../setup-local-env/README.md
 [ブラウザーの開発者ツールとは？]: https://developer.mozilla.org/ja/docs/Learn/Common_questions/What_are_browser_developer_tools

source/use-case/ajaxapp/http/README.md

@@ -179,6 +179,41 @@ XHRの詳しい使い方については、[XHRの利用についてのドキュ
 - Fetch APIの呼び出しに対するエラーハンドリングを行った
 - `fetchUserInfo`関数を宣言し、ボタンのクリックイベントで呼び出した
 
+ここまでのアプリは次のURLで確認できます。
+
+- <https://jsprimer.net/use-case/ajaxapp/http/src/>
+
+<!-- externalResourcesをサイト上のjsを読み込んでいるのでデプロイするまでローカルでは確認できない。これはSandpackの問題を回避するため https://github.com/honkit/honkit-plugin-sandpack#note -->
+
+<!-- sandpack:{
+  "files": {
+    "/index.js": {
+      "path": "src/index.js"
+    },
+    "/index.html": {
+      "path": "src/index.html",
+      "active": true
+    },
+    "/src/index.js": {
+      "code": "/* このファイルは本編とは無関係のファイルなので無視してください。 本編のindex.jsは一つ上のディレクトリにあります */",
+      "hidden": true
+    }
+  },
+  "environment": "static",
+  "template": "vanilla",
+  "options": {
+    "showLineNumbers": true,
+    "editorHeight": 550,
+    "externalResources": ["https://jsprimer.net/use-case/ajaxapp/http/src/index.js"],
+    "showConsole": true, 
+    "showConsoleButton": true 
+  },
+  "honkitSettings": {
+    "isOpen": true,
+    "hideExitButton": true
+  }
+} -->
+
 [Fetch API]: https://developer.mozilla.org/ja/docs/Web/API/Fetch_API
 [XMLHttpRequest]: https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest
 [XHRの利用についてのドキュメント]: https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest

source/use-case/ajaxapp/promise/README.md

@@ -204,5 +204,41 @@ index.jsにも`<input>`タグから値を受け取るための処理を追加す
 - [Async Function][] を使って`main`関数をリファクタリングした
 - `index.html`に`<input>`タグを追加し、`getUserId`関数でユーザーIDを取得した
 
+この章で作成したアプリは次のURLで確認できます。
+
+- <https://jsprimer.net/use-case/ajaxapp/promise/src/>
+
+<!-- externalResourcesをサイト上のjsを読み込んでいるのでデプロイするまでローカルでは確認できない。これはSandpackの問題を回避するため https://github.com/honkit/honkit-plugin-sandpack#note -->
+
+<!-- sandpack:{
+  "files": {
+    "/index.js": {
+      "path": "src/index.js"
+    },
+    "/index.html": {
+      "path": "src/index.html",
+      "active": true
+    },
+    "/src/index.js": {
+      "code": "/* このファイルは本編とは無関係のファイルなので無視してください。 本編のindex.jsは一つ上のディレクトリにあります */",
+      "hidden": true
+    }
+  },
+  "environment": "static",
+  "template": "vanilla",
+  "options": {
+    "showLineNumbers": true,
+    "editorHeight": 550,
+    "externalResources": ["https://jsprimer.net/use-case/ajaxapp/promise/src/index.js"],
+    "showConsole": true, 
+    "showConsoleButton": true
+  },
+  "honkitSettings": {
+    "isOpen": true,
+    "hideExitButton": true
+  }
+} -->
+
+
 [Promiseチェーン]: https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise/then#%E3%83%81%E3%82%A7%E3%83%BC%E3%83%B3
 [Async Function]: ../../../basic/async/README.md#async-function