📖 <card> タグの書き方
投稿の本文に <card> タグを書くと、タイムライン上でカードとして表示されます。このページでは記法を解説します。
基本形
<card type="カードの種類" title="タイトル" その他の属性>
（カードの内容）
</card>
開始タグに type 属性でカードの種類を指定し、タグの内側に内容を書きます。本文テキストのどこに置いてもOKで、1つの投稿に複数のカードを入れることもできます。
| type | 用途 |
|---|---|
| quiz | タイムライン上で回答できるクイズ |
| product | 自作のWebツール・作品の紹介 |
| code | ワンクリックでコピーできるコード |
QUIZクイズカード
タイムライン上でそのまま回答・正誤判定ができるクイズです。
<card type="quiz" title="都道府県クイズ">
Q: 日本一人口が多い都道府県は？
A: 東京都
opts: 大阪府, 愛知県, 東京都, 北海道
</card>
| 記法 | 説明 |
|---|---|
| Q: 〜 | 問題文（必須） |
| A: 〜 | 正解（必須） |
| opts: 〜 | 選択肢。カンマか読点で区切る。省略するとAだけが選択肢になる |
| title | カード上部に表示されるタイトル |
PRODUCT成果物カード
作ったWebツールやアプリを紹介します。「開いてみる」ボタンからリンク先へ飛べます。
<card type="product" title="StudyTimer" url="https://example.com">
ポモドーロタイマーです。作業25分＋休憩5分を自動で繰り返します。
</card>
| 属性 | 説明 |
|---|---|
| title | 作品名（必須に推奨） |
| url | リンク先URL |
タグの内側の文章が説明文として表示されます。
CODEコードカード
コードを整形して表示し、コピーボタンでワンクリックコピーできます。
<card type="code" title="朝を飛ばすコマンド" lang="mcfunction">
/time set day
/weather clear
</card>
| 属性 | 説明 |
|---|---|
| title | コードのタイトル |
| lang | 言語名（表示用ラベル。省略可） |
複数カード・混在
1つの投稿に複数のカードを入れたり、本文テキストと組み合わせたりできます。
今日は2つ紹介します！
<card type="code" title="Tips">console.log("hello");</card>
<card type="quiz" title="おまけ">
Q: 1+1は？
A: 2
</card>
📎 ファイル添付
投稿フォームの「📎 画像・ファイル」ボタンから、画像やファイルを添付できます。
| 項目 | 仕様 |
|---|---|
| 対応形式 | PNG / JPEG / GIF / WebP / テキスト / PDF |
| サイズ上限 | 1ファイル 5MB まで |
| 添付数 | 1投稿につき最大4件 |
添付された画像はタイムライン上でサムネイル表示され、クリックすると拡大表示されます。ファイルはダウンロードリンクとして表示されます。
💡 本番環境（Cloudflare）ではファイルは Cloudinary に保存され、CDN経由で配信されます。ローカル開発時は
./uploads フォルダに保存されます。
注意事項
⚠️ 本プロトタイプはJavaScriptによる簡易パーサー（正規表現）で変換しています。今後バックエンド（Node.js）側で変換する構成に移行する予定です。
💡 カード内ではHTMLタグは実行されません。表示前にすべてエスケープされるため、安全に閲覧できます（XSS対策）。
- 開始タグと終了タグの
<card>は必ず対にしてください。 - 属性値はダブルクオートで囲んでください（例：
title="クイズ"）。 - クイズの
optsを省略した場合、A:の内容だけが選択肢として出題されます。