diff --git a/ec.config.mjs b/ec.config.mjs
new file mode 100644
index 0000000..75320f7
--- /dev/null
+++ b/ec.config.mjs
@@ -0,0 +1,7 @@
+import { defineEcConfig } from 'astro-expressive-code'
+import { pluginLineNumbers } from '@expressive-code/plugin-line-numbers'
+import { pluginCollapsibleSections } from '@expressive-code/plugin-collapsible-sections'
+
+export default defineEcConfig({
+ plugins: [pluginLineNumbers(), pluginCollapsibleSections()],
+})
diff --git a/package.json b/package.json
index 4fa56c4..594fcff 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,8 @@
"dependencies": {
"@astrojs/mdx": "^4.3.13",
"@astrojs/preact": "^4.1.3",
+ "@expressive-code/plugin-collapsible-sections": "^0.41.6",
+ "@expressive-code/plugin-line-numbers": "^0.41.6",
"@tailwindcss/vite": "^4.1.18",
"astro": "^5.16.5",
"astro-expressive-code": "^0.41.5",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 353d069..4667186 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,6 +14,12 @@
'@astrojs/preact':
specifier: ^4.1.3
version: 4.1.3(@babel/core@7.28.5)(@types/node@25.0.2)(jiti@2.6.1)(lightningcss@1.30.2)(preact@10.28.0)
+ '@expressive-code/plugin-collapsible-sections':
+ specifier: ^0.41.6
+ version: 0.41.6
+ '@expressive-code/plugin-line-numbers':
+ specifier: ^0.41.6
+ version: 0.41.6
'@tailwindcss/vite':
specifier: ^4.1.18
version: 4.1.18(vite@6.4.1(@types/node@25.0.2)(jiti@2.6.1)(lightningcss@1.30.2))
@@ -390,9 +396,18 @@
'@expressive-code/core@0.41.5':
resolution: {integrity: sha512-II5TEy5eOoXiqPwqtpSqwamUd7lZS3YH3ofxR1ZyQMmygqORZn8/7SzgfF8G0kB7uKCBzFZT6RgKgCuHcJuPpA==}
+ '@expressive-code/core@0.41.6':
+ resolution: {integrity: sha512-FvJQP+hG0jWi/FLBSmvHInDqWR7jNANp9PUDjdMqSshHb0y7sxx3vHuoOr6SgXjWw+MGLqorZyPQ0aAlHEok6g==}
+
+ '@expressive-code/plugin-collapsible-sections@0.41.6':
+ resolution: {integrity: sha512-LxSa49aziWKgpGoOoZlTbXW1V1/mEPyxKb+J9JFgUtTizXNKX363uiCHcKQYzSLmIN7HII5WxF+uArGHwb+X+w==}
+
'@expressive-code/plugin-frames@0.41.5':
resolution: {integrity: sha512-qU0cvAQGfRLX7XwGf3/+hqIVmAc/mNNTlqVLR0iBfJF6EKvtP3R7/uAlPrAxnxQxn0meTazCz8D+PsPyOpHKrQ==}
+ '@expressive-code/plugin-line-numbers@0.41.6':
+ resolution: {integrity: sha512-YS8oLrGNBjY8qVVl6ZntwPXIh5HGrLEq23R6eyJ0tCJQmq03tCOOiWw9cc2R3J/XobXAI7coAtVbqAiGFB8pXQ==}
+
'@expressive-code/plugin-shiki@0.41.5':
resolution: {integrity: sha512-gw6OWvnmDmvcKJ5AZSzl2VkuixJMQ/zWSwPLFNzitqCa8aPfIFunb0K8IIOsE43LELgOWkie9lRFspOxwDVwrg==}
@@ -2565,10 +2580,30 @@
unist-util-visit: 5.0.0
unist-util-visit-parents: 6.0.2
+ '@expressive-code/core@0.41.6':
+ dependencies:
+ '@ctrl/tinycolor': 4.2.0
+ hast-util-select: 6.0.4
+ hast-util-to-html: 9.0.5
+ hast-util-to-text: 4.0.2
+ hastscript: 9.0.1
+ postcss: 8.5.6
+ postcss-nested: 6.2.0(postcss@8.5.6)
+ unist-util-visit: 5.0.0
+ unist-util-visit-parents: 6.0.2
+
+ '@expressive-code/plugin-collapsible-sections@0.41.6':
+ dependencies:
+ '@expressive-code/core': 0.41.6
+
'@expressive-code/plugin-frames@0.41.5':
dependencies:
'@expressive-code/core': 0.41.5
+ '@expressive-code/plugin-line-numbers@0.41.6':
+ dependencies:
+ '@expressive-code/core': 0.41.6
+
'@expressive-code/plugin-shiki@0.41.5':
dependencies:
'@expressive-code/core': 0.41.5
diff --git a/public/sample/php/form/1/styles.css b/public/sample/php/form/1/styles.css
new file mode 120000
index 0000000..3e21891
--- /dev/null
+++ b/public/sample/php/form/1/styles.css
@@ -0,0 +1 @@
+../../submit.css
\ No newline at end of file
diff --git a/public/sample/php/form/1/submit.php b/public/sample/php/form/1/submit.php
index 17b743e..2d3780d 100644
--- a/public/sample/php/form/1/submit.php
+++ b/public/sample/php/form/1/submit.php
@@ -5,28 +5,7 @@
応募完了
-
-
+
diff --git a/public/sample/php/form/2/styles.css b/public/sample/php/form/2/styles.css
new file mode 120000
index 0000000..3e21891
--- /dev/null
+++ b/public/sample/php/form/2/styles.css
@@ -0,0 +1 @@
+../../submit.css
\ No newline at end of file
diff --git a/public/sample/php/form/2/submit.php b/public/sample/php/form/2/submit.php
index e69de29..59fbe31 100644
--- a/public/sample/php/form/2/submit.php
+++ b/public/sample/php/form/2/submit.php
@@ -0,0 +1,43 @@
+
+
+
+
+
+
+ 応募完了
+
+
+
+
+
+
+
応募ありがとうございました!
+
+
+
+ | お名前 |
+ |
+
+
+ | 住所 |
+ |
+
+
+ | 応募する商品 |
+ |
+
+
+
+
応募ページに戻る
+
+
+
+
+
このページに直接アクセスすることは禁止されています。
+
応募ページに戻る
+
+
+
+
+
+
diff --git a/public/sample/php/form/3/styles.css b/public/sample/php/form/3/styles.css
new file mode 120000
index 0000000..3e21891
--- /dev/null
+++ b/public/sample/php/form/3/styles.css
@@ -0,0 +1 @@
+../../submit.css
\ No newline at end of file
diff --git a/public/sample/php/form/4/styles.css b/public/sample/php/form/4/styles.css
new file mode 120000
index 0000000..3e21891
--- /dev/null
+++ b/public/sample/php/form/4/styles.css
@@ -0,0 +1 @@
+../../submit.css
\ No newline at end of file
diff --git a/public/sample/php/form/5/styles.css b/public/sample/php/form/5/styles.css
new file mode 120000
index 0000000..3e21891
--- /dev/null
+++ b/public/sample/php/form/5/styles.css
@@ -0,0 +1 @@
+../../submit.css
\ No newline at end of file
diff --git a/public/sample/php/submit.css b/public/sample/php/submit.css
new file mode 100644
index 0000000..c8a9454
--- /dev/null
+++ b/public/sample/php/submit.css
@@ -0,0 +1,19 @@
+.container {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 16px;
+
+ height: 100svh;
+}
+
+.bordered-table {
+ border-collapse: collapse;
+
+ th,
+ td {
+ border: 1px solid darkgray;
+ padding: 8px;
+ }
+}
diff --git a/public/sample/php/submit.php b/public/sample/php/submit.php
deleted file mode 100644
index 8f5ceb7..0000000
--- a/public/sample/php/submit.php
+++ /dev/null
@@ -1,12 +0,0 @@
- {
+ const path = props.path;
+
+ if (path.startsWith("public")) {
+ return path.slice(6);
+ }
+
+ if (!path.startsWith("/")) {
+ return `/${path}`;
+ }
+
+ return path;
+ })();
+
return (
-```html title="path/to/index.html"
-
`
-
+```html file=public/sample/html/external-css.html
+public/sample/html/external-css.html
```
+
+
`href`は、読み込むCSSファイルのパスを指定します。
`rel`は、読み込むファイルがCSSであることを示すために`stylesheet`を指定します。
diff --git a/src/pages/php/030-form.mdx b/src/pages/php/030-form.mdx
index 0209c39..2dabc05 100644
--- a/src/pages/php/030-form.mdx
+++ b/src/pages/php/030-form.mdx
@@ -18,11 +18,11 @@
## フォームを用意する
-例として、以下のようなフォームを用意しました。
+例として、以下のような懸賞を模したフォームを用意しました。
-```php file=public/sample/php/form.html
+```html file=public/sample/php/form.html
public/sample/php/form.html
内容を取得できませんでした
```
@@ -60,3 +60,39 @@
public/sample/php/form/1/submit.php
内容を取得できませんでした
```
+
+### 接続を拒否してみる
+
+この`submit.php`は、フォームから送信されたデータを受け取るためのファイルです。
+しかしブラウザなどから直接アクセスした場合、フォームからの送信ではありません。
+
+このように、フォームからの送信ではない場合に接続を拒否するコードを追加してみます。
+
+
+
+```html file=public/sample/php/form/2/submit.php ins={12,34-39} collapse={1-10,41-44}
+public/sample/php/form/2/submit.php
+```
+
+様々な実装の方法がありますが、ここでは`if`文を使って条件分岐を行っています。
+
+この条件に、`$_SERVER["REQUEST_METHOD"] === "POST"`という記述があります。
+
+`$_SERVER`という、みかけない変数が出てきました。
+その中身が、`POST`であるかを確認しています。
+
+この`POST`という文字に見覚えはありませんか?
+これは、先ほどフォームの`method`属性で指定したものです。
+
+ちなみに直接アクセスした場合、この値は`GET`となります。
+
+```html "method=\"post\"" file=public/sample/php/form.html {11} collapse={1-10,12-51}
+public/sample/php/form.html
+```
+
+この値が`POST`であればフォームから送られてきた情報だとみなし、雛形の内容を表示しています。
+そうでなかったときの処理として、拒否する旨のHTMLを表示しています。
+
+なお`$_SERVER`という変数は、ブラウザなどから送信された情報を格納するために、自動的に作成される連想配列です。
+
+### フォームから受け取ったデータを表示する
diff --git a/src/sample/php/form/1/submit.php b/src/sample/php/form/1/submit.php
new file mode 100644
index 0000000..2d3780d
--- /dev/null
+++ b/src/sample/php/form/1/submit.php
@@ -0,0 +1,34 @@
+
+
+
+
+
+
+
応募完了
+
+
+
+
+
+
応募ありがとうございました!
+
+
+
+ | お名前 |
+ |
+
+
+ | 住所 |
+ |
+
+
+ | 応募する商品 |
+ |
+
+
+
+
応募ページに戻る
+
+
+
+