HTML・Markdown・テキストの扱い

# HTML・Markdown・テキストの扱い Clipnoteは3つの形式を扱います。どれを選ぶかで、保存したものの見え方が変わります。 | 形式 | バッジ | 見え方 | | --- | --- | --- | | HTML | `HTML` | 書かれたとおりに描画されます。CSSもJavaScriptも動きます | | Markdown | `MD` | 見出し・リスト・表などが整形されて表示されます | | プレーンテキスト | `TXT` | 改行と空白を保ったまま、そのままの文字として表示されます | ## 形式は自動で決まります管理画面から保存するとき、形式を手で選ぶ必要はありません。 1. **ファイルを読み込んだ場合**は拡張子が優先されます（`.html` / `.htm` → HTML、`.md` / `.markdown` → Markdown、`.txt` → プレーンテキスト） 2. **貼り付けた場合**は本文の中身から判定します。HTMLタグらしき記述があればHTML、見出し・リスト・表・コードブロックなどMarkdownらしい記法があればMarkdown、どちらでもなければプレーンテキストです AIクライアントから保存する場合だけは、`content_type`を明示して渡す仕組みになっています（自動判定はしません）。 ## タイトルの自動取得新しいクリップを作るとき、タイトル欄が空なら本文から候補を拾います。 | 形式 | 拾う場所 | | --- | --- | | HTML | `<title>`タグ。無ければ最初の`<h1>` | | Markdown | 先頭のfront matterの`title`。無ければ先頭の`# 見出し` | | プレーンテキスト | 空行を除いた最初の1行 | 一度でも自分でタイトルを編集すると、それ以降は自動で上書きされません。 ## HTMLについて知っておくこと **HTMLクリップの中身は書いたとおりに動きます。** スタイルもスクリプトも制限しません。AIが作った小さなツールや診断ページを、そのまま動く状態で残せるのはこのためです。その代わり、本文は**Clipnote本体とは別のドメイン**から、強く制限された枠（サンドボックス化されたiframe）の中で配信されます。クリップ本文のスクリプトからは、Clipnoteのログイン情報や他のクリップには一切触れられません。表示している側とされている側が互いに干渉できないようにしてあります。この仕組みの副作用として、次の制限があります。 - **Cookie・localStorageが使えません。** ページを開き直すと状態は初期化されます - **フォームの送信ができません。** 入力欄を置いても、送信ボタンでどこかにデータを送ることはできません - **本文中のリンクは新しいタブで開きます。** 表示中のページ自体を別のURLに移動させることはできませんボタンやアニメーション、計算するツールのようにその場で完結するものは問題なく動きます。 ## Markdownについて知っておくこと ### front matter 本文の先頭を`---`で囲んだYAMLブロック（front matter）で始めると、メタデータとして扱われます。 ``` --- title: 京都旅行プラン author: 私 updated: 2026-09-01 --- # 1日目 ... ``` - `title`は**クリップのタイトル**として使われ、本文には表示されません - `title`以外のキーは、本文の冒頭に**メタデータ欄**として一覧表示されます。値はそのままの文字として表示され、Markdownとしては解釈されません - 人に見せたくない情報をfront matterに書かないでください。公開クリップでは閲覧者にそのまま見えます `---`で始まっていても、対応する閉じの`---`が無ければ、ただの水平線として扱われます。 ## プレーンテキストについて知っておくこと構文はいっさい解釈しません。`#`も`<b>`も、書いたままの文字として表示されます。整形されたくないログや、AIの出力をそのまま残したいときに向いています。 ## もっと知る - [クリップを保存・整理する](https://clipnote.paritto.dev/p/e2eceb9a-7748-4361-8562-105b4c6707ed) - [画像アセットを使う](https://clipnote.paritto.dev/p/e671f30a-3e94-4ec9-8f98-b28914ffbfa0) - [クリップを公開して共有する](https://clipnote.paritto.dev/p/62af1aa8-bad3-4a3a-9d73-f76b8cf8b52d)