🍊mikanBox 操作マニュアル v2.8.5

🍊mikanBoxには、SQLiteデータベースを使う🍊mikanBox SQLite版と、データベースを使わないJSONファイルベースの🍊mikanBox flat flat版があります。基本的な使い方は共通なので、このヘルプは両方に対応しています。バージョンによって内容が異なる箇所には、上記のバッジで区別を示します。

コンセプト・特長

🍊mikanBoxは、「AI時代のパーツ組み立て型・超軽量CMS」です。数ページから数十ページ規模のWebサイトを、最速かつ安全に構築・運用するために設計された🍊mikanBox flat（JSON版）と、より規模の大きいサイトを快適に運用できる🍊mikanBox（SQLite版）があります。

• ファイルベース（JSON） — データベース不要。PHPの動くサーバーに置くだけ flat版
• SQLite（単一ファイルDB） — データは1つのDBファイルにまとまり、PHPの動くサーバーに置くだけ SQLite版
• モードレスUI — ページ遷移なし、1画面で全作業完結。軽快な操作感
• Markdown対応 — コンテンツを簡単に編集可能、情報のアーカイブとしても適している
• カテゴリで絞り込み — ページや画像をカテゴリで絞り込み、ワークスペースとして利用できる
• ファイル名だけで画像表示 — ファイルのパスを意識せずに画像を張り込める
• コンポーネント構造 — 組み合わせて利用できるページテンプレートやパーツ
• コンポーネント単位のCSS管理 — 小さい範囲でCSSが書けて、干渉を気にしなくてよい
• AI生成コードを直接配置可能 — 手作業でのデザインなしでの運用にも対応
• AIエージェント連携（MCP） — AIがサイト構造やデザイン基調などを理解し、直接ファイルを読み書き
• DESIGN.mdの管理 — AIへの指示もサイトで管理し、AIに伝えられる
• マルチモーダルAI対応 — AIが画像を生成し、そのままメディアフォルダへ送信・配置
• 静的（SSG）も、動的も、それらの混在も — レスポンスの速い静的サイトも、静的・動的の混在も可能
• DB Less DB — ページにデータを埋め込んでAPIで出力。ヘッドレスCMSにも
• ポッドキャスト — RSSを自動生成してポッドキャスト配信も可能

設計方針

規模を限定する🍊mikanBox flat flat版

🍊mikanBox flatは数千ページ規模のサイトは想定していません。数ページのサイトだけど情報の更新はしたい、そんなサイトにDBを使った重いシステムを導入する必要はないのでは。あえてデータベースを使わないことで、以下の手軽さを実現しています。

• 設置が簡単
• 構造がシンプルで覚えやすい
• バックアップ・サーバー移設が簡単

ページ数の多いサイトも運用できる🍊mikanBox SQLite版

🍊mikanBox（SQLite版）は、もう少し大きなサイトも運用したいご要望にお応えします。しかも、単一ファイルのSQLiteなので、手軽さはほとんどそのままです。

• 設置が簡単
• バックアップ・サーバー移設が簡単
• ページ数の多いサイトにも対応
• 複数ユーザーによる編集や承認システムに対応
• 編集履歴の管理に対応

柔軟な設計

ページやコンポーネントがCSSと結びついているのでわかりやすく、また、干渉を気にしなくてよい設計になっています。コンポーネントの使い方次第で、自由で柔軟なサイト設計が行えます。

• ページやコンポーネントがCSSとJavaScriptを持てる
• CSSをスコープ化して、干渉を防止
• コンポーネントの入れ子が可能
• WordPressのテーマにあたるものが手軽に作れ、AIでも作れる
• 画像などのメディアファイルのパスも自動で解決
• ページにデータを簡単に埋め込める
• 他ページ、他サイトのデータを読み込んで利用できる
• データの持ち方が多様で、工夫次第で様々使い方ができる

AIフレンドリー

• AIで生成したページをそのまま貼り込んで使いやすい。凝ったデザインも、少ない作業でそのまま公開
• コードがコンパクトでシンプル。AIが理解しやすいので、専用のデータ構造にあわせて、ページ制作、デザインしてもらうことも簡単
• MCPを通じして、記事の作成からデザインまで、AIにリモートコントロールさせられる
• DESIGN.mdなど、AIへの指示を管理して、AIに読ませたり、逆にデザインからデザインシステムを生成させることが可能
• GitHubなど外部のMarkdownファイルをソースにできる {{EXT_MD:url}} タグを活用することで、管理画面を開かなくても「AIエージェントに指示してレポジトリを更新してもらう」だけでWebサイトが更新される運用スタイルも可能
• コードが小さく、AIが理解しやすいので、機能追加はプラグインではなく、AIでソースを書き換える

セキュリティをシンプルに

静的サイトにも対応し、攻撃面を増やさない設計です。

• データベースなし（SQL攻撃面なし） flat版
• すべてのDB操作にプリペアドステートメントを使用し、SQLインジェクションを防止 SQLite版
• コードベースが小さい
• プラグインなど複雑な依存関係なし
• 大規模CMS特有の攻撃対象になりにくい

初期設定・配布について

🍊mikanBoxは、PHPが動作するサーバーにアップロードするだけですぐに利用可能です。

動作要件

PHP 8.0以上が動作するサーバーが必要です。SQLite版はこれに加えて、SQLite3拡張が有効である必要があります（多くのレンタルサーバーで標準有効です）。

インストール

index.php と同じディレクトリに mikanBox フォルダをアップロードします。このフォルダ名は変更可能です。変更したほうが、管理画面の場所（ admin.php の場所）が推測されにくくなるため、セキュリティの観点から推奨されます。変更した場合は、 index.php の冒頭部分の $core_dir を修正してください。2.6.4以降、この設定はシステム更新で維持されます（更新プログラムが、実際に使用しているフォルダ名を書き戻します）。2.6.3以前は更新のたびにこの設定が失われ、サイトの表示が止まりました。その状態になっている場合も、管理画面からシステム更新を実行すれば復旧します。以下の説明では mikanBox ディレクトリとして説明します。

サイト固有のデータは、初回アクセス時に index.php と同じディレクトリの mikanData フォルダへ作成されます。旧バージョンの mikanBox/data が存在する場合は、安全に移動できるときだけ自動移行されます。移動先がすでに存在する場合やページURLと衝突する場合は、空のデータへ切り替えず、従来の保存先をそのまま使用します。

データフォルダ名を変更する場合は、管理フォルダ内に自動更新の対象外となる local-config.php を作成し、define('MIKANBOX_DATA_DIR_NAME', '任意のフォルダ名'); と記述します。指定できるのは英数字・ハイフン・アンダースコアだけの単一フォルダ名です。データ作成後に名前を変更する場合は、実フォルダも同じ名前へ移してから設定してください。

インストール直後（ページ・コンポーネントのデータがまだ存在しない状態）で最初にアクセスがあると、ブラウザの言語設定（日本語・英語）に応じたサンプルコンテンツが自動的に投入されます。

ローカルで動かす

サーバーにアップロードせず、手元のパソコンで動かすこともできます。公開サーバーに管理画面を置かない運用（静的生成したファイルだけを公開する運用）の前提になり、AIのコーディングツールの作業フォルダとしても使えます。

必要なのはPHPだけです。データベースも、ビルドツールも、Node.jsも使いません。

1. PHPが入っているか確認します。ターミナルで php -v と入力し、8.0以上が表示されれば準備完了です。
2. 入っていなければインストールします。macOSには標準で含まれていないため、Homebrew を入れてから brew install php を実行します。Windowsは windows.php.net から入手し、Linuxは sudo apt install php（Debian系）または sudo dnf install php（Fedora系）を実行します。
3. index.php と mikanBox フォルダを、任意のフォルダへ展開します。
4. そのフォルダへ移動し、php -S localhost:8000 を実行します。これはPHPに付属する簡易サーバーで、追加のソフトは不要です。
5. ブラウザで http://localhost:8000/mikanBox/admin.php を開き、管理用パスワードを設定します。

mikanData フォルダと media フォルダは、初回アクセス時に自動生成されます。サーバーへ設置した場合と同じです。サーバーを止めるときは、起動したターミナルで Control+C を押します。

このフォルダをAIのコーディングツールで開くと、AIがページのMarkdownやJSONを直接読み書きできます。管理MCPも同じサイトに対して使えます。コンテンツがファイルとして見えるため、AIが書いた内容を後から開いて確認できます。

公開するときは、静的生成した出力フォルダをアップロードします。この運用では公開側にPHPもデータも管理画面も存在しないため、改ざんの対象がありません。

初回パスワード設定

導入後、最初に mikanBox/admin.php にアクセスした人が管理用パスワードを設定します。

SQLite版では、ユーザー名・表示名・パスワードに加えて、パスワードを忘れた際の本人確認用の「秘密の質問と答え」も設定します。これらは mikanData/mikanBox.sqlite 内の users テーブルに保存されます。

flat版では、パスワードのみを設定します。ハッシュ値（暗号化されたデータ）は mikanData/settings.json に保存されます。

他者への配布方法

自作したデザインやコンテンツを含めて誰かに配布（納品）する場合、受け取った人が自分の環境で新しく管理者アカウントを設定できるようにするための手順は、バージョンによって異なります。

• SQLite版: サーバー上に空のファイル mikanData/reset_password.txt を設置してください。次回アクセス時に登録済みユーザーがすべて削除され、初回セットアップ画面が表示されます。このファイルは処理後に自動的に削除されるため、置いたままになる心配はありません。
• flat版: mikanData/settings.json ファイル内の "password_hash" の値を空にしてください。

セキュリティ

admin.php 以外のファイル（ data フォルダ内のJSONファイルなど）は、ブラウザから直接アクセスできないようになっています（ .htaccess 等による制限）。

全体像

mikanBoxは、以下の4つのパートでサイトを構築・管理します。

descriptionページ (Pages)

サイトの「実体」となるページ自体を管理します。URL（ID）を決め、タイトルやSEO情報を設定し、本文（Markdown/HTML）を執筆します。

saveサイト (Site)

管理メモ、静的サイト生成（SSG）、言語、MCP APIキー、CSVインポート、データ管理／バックアップ、サイト共通設定、ユーザー管理（編集者）、パスワード変更などサイト運営に関わる設定・管理機能をまとめています。

widgetsデザイン (Design)

ページ全体のデザインを設定する ページ 、共通部品を作る パーツ 、AIエージェントへの指示を書く AI指示 の3種類のコンポーネントがあります。ヘッダーやフッター、ナビゲーションなどの共通で使うものは パーツ として作成しておくことで、どこからでも利用できます。デザイン要素（コンポーネント）の管理が主な役割です。

imageメディア (Media)

Cloud版では、各画像は「リサイズ▼」「名前変更▼」「WebP に変換」の順で操作します。WebP変換はJPEG・PNGだけに表示します。WebP変換では拡張子を自動的に .webp にし、ページ本文・CSS・JavaScript・OGP画像、コンポーネント、サイト共通OGP画像の参照を更新します。公開済みHTMLの反映には再構築・配信更新が必要です。メディアのカテゴリは管理画面上部のカテゴリ選択と連動し、接頭辞付きの画像と g_ の共通画像を表示します。選択カテゴリはアップロード時のファイル名にも付与しますが、既に英数字の接頭辞がある名前には追加しません。ファイル名検索はこの絞り込み内で行います。

画像、動画、音声などのファイルを管理します。アップロード、一覧確認、リサイズ、および貼り付け用のファイル名コピーを素早く行えます。

共通

プレビュー

サイトのトップページを開きます（新規タブ）。

ログアウト

システムからログアウトします。

（各パートの見出しの横の）ヘルプ

ヘルプページを開きます（新規タブ）。

AIに質問

各ヘルプボタンの横に表示されます。クリックすると質問欄が開き、GPTまたはClaudeを別タブで起動できます。外部AIへ渡すのは、入力した質問、現在のページ・Helpセクションと、回答に必要な公開情報の参照先です。管理用MCPのAPIキー、管理メモ、非公開ページ、サイト設定は渡しません。

対応するAIサービスで入力欄の自動反映が利用できない場合に備え、同じ質問文をクリップボードにもコピーします。GPTには、現在のHelpセクションに対応する公式公開マニュアルを案内します。日本語表示では日本語版（https://yoshihiko.com/mikanbox/help_ja.html）、日本語以外では英語版を使用します。

ClaudeにはHTMLマニュアルを案内せず、匿名・読み取り専用の公開MCP（https://yoshihiko.com/mikanbox/mcp）だけを参照するよう指示します。利用前にClaudeの「設定 > コネクタ > 追加 > カスタムコネクタを追加」で、このURLをリモートMCPサーバーとして登録してください。

起動文の冒頭には、公式公開情報を使った操作案内だけを依頼し、外部サービスの操作や個人情報・非公開情報の取得を依頼していないことを明記します。

WebMCPと公開MCP窓口は、対応ブラウザ内のエージェントや構造化検索向けの追加機能です。公開窓口はサイト直下の サイトURL/mcp で、匿名・読み取り専用です。管理用の サイトURL/mikanBox/mcp とは分離され、APIキー、管理メモ、非公開ページ、サイト設定、書き込みツールを公開しません。GPTは公式公開マニュアルURLを、Claudeは公開MCPを情報源として利用します。

/mcp はRemote MCPクライアントが接続するHTTP窓口です。ページ上のWebMCPツールも同じ公開窓口を利用し、search_help、get_help_section、get_product_info、get_agent_instructions の4つだけを提供します。旧URLの mikanBox/public-mcp.php は互換性のため残ります。

公開MCPは、MCP 2026-07-28のステートレス接続に加え、Remote MCPクライアントとの互換性のためMCP 2025-11-25、2025-06-18、2025-03-26の initialize 型Streamable HTTP接続にも対応します。いずれの方式でも匿名・読み取り専用の4ツールだけが利用でき、OAuthやAPIキーは要求しません。

GPTの起動文には人が読む公式マニュアルURLを含めます。Claudeの起動文にはHTMLマニュアルURLを含めず、あらかじめカスタムコネクタへ登録した公開MCPの search_help、get_help_section、get_product_info、get_agent_instructions を使うよう指示します。どちらもマニュアル全文を起動文へ埋め込みません。

公開MCPの情報源は、CMS上の公開ページ help_ja と help_en です。対象ページが public_dynamic または public_static の場合だけ本文を見出し単位で読み取り、下書きや他のページは公開しません。対象ページが存在しない場合は、mikanBoxに同梱された読み取り専用マニュアルへフォールバックします。

公開ページや紹介ページに同じ質問ボックスを置く場合は、本文へ {{COMPONENT:_ai_question}} を記述します。_ai_question コンポーネントの内部で {{AI_QUESTION}} タグを呼び出すため、必要に応じてコンポーネントのHTMLや配置を編集できます。特定のHelpセクションを明示する高度な使い方では、{{AI_QUESTION:page-edit}} のようにタグを直接記述します。

質問文は選択した外部AIへ送信され、そのサービスの履歴等に保存される場合があります。APIキー、パスワード、個人情報、公開前の内容は入力しないでください。

ページ

作成済みのページを一覧で確認・管理する画面です。

add 新規作成

新しいページを作成します。クリックするとページ編集エリアが開きます。カテゴリを絞り込んだ状態で新規作成すると、そのカテゴリがあらかじめ設定された状態でページ編集画面が開きます。

カテゴリでの絞り込み

ページ一覧の上部に、登録されているカテゴリがタグ（クラウド）状に表示され、クリックでそのカテゴリのページだけに絞り込めます。

カテゴリ:

• すべて — 絞り込みを解除し、全ページを表示します。
• カテゴリ名 — クリックすると、そのカテゴリを含むページだけに絞り込みます。タグの右上の「×」をクリックすると、そのカテゴリを全ページから一括削除できます（削除モード時のみ表示）。
• add新規 — 新しいカテゴリ名を直接入力して追加します。まだどのページにも設定されていないカテゴリでも、この時点でクラウドに表示されます。
• delete削除 — クリックすると各カテゴリタグに削除用の「×」が表示される「削除モード」に切り替わります。

キーワード検索 SQLite版のみ

検索ボックス

キーワードでタイトル・本文などを検索できます。SQLite版は入力時に一覧を更新し、flat版とCloud版はEnterで検索します。入力欄右の close ボタンで検索条件をクリアできます。

ページ一覧

編集・プレビュー

プレビューボタンは3版とも青で表示します。

• edit編集 — クリックすると、そのページの編集画面へ移動します。
• open_in_new — クリックすると、公開設定に応じたURLでページを新しいタブで開きます。
• 「承認待ち」ステータスのページの場合は、確認用の共有URL（プレビュートークン付き）が開きます。SQLite版のみ

公開設定

ページごとの公開状態を切り替えるドロップダウンメニューです。変更すると即座に保存されます。

• 下書き — 非公開。管理者以外はアクセスできません。
• 承認待ち — SQLite版のみ 非公開ですが、推測不可能な確認用URL（?preview=トークン）を知っている人だけが内容を確認できます。承認者へのレビュー依頼に使います。承認待ちのページは一覧の先頭に表示されます。
• 公開(動的) — PHPで動的に表示します。
• 公開(静的) — サイト画面の静的サイト生成 (SSG)の設定に従ったディレクトリ、ファイル設定で静的HTMLファイルとして公開します。
• DB — ページとしては非公開になり、{{DATAROW}}のデータが、サイトURL/api/ページIDのアドレスのAPIとして読み取れるようになります。

公開(静的)のページをそれ以外の公開設定に設定すると、静的HTMLファイルは削除されます。

ID

ページのURLになる識別子（スラッグ）です。例として news と設定すると、URLは /news の形になります。

タイトル

ページのタイトルです。クリックすると編集画面へ移動します。

更新

ページ作成時に設定されます。日時は変更可能です。

表示順

ナビゲーションなどの一覧での表示優先順位です。リスト表示するNAV_LINKSNAV_CARDSのなかで、またこのページ一覧のなかで、数字が小さいほど前（上）に表示されます。0より小さいものは、リスト表示されません。

カテゴリ

ページに設定されたカテゴリが表示されます。{{NAV_LINKS:カテゴリ}} などで絞り込みに利用されます。

静的サイトビルドボタン

auto_awesome 静的サイトをビルドする

ページ一覧の下部にあります。公開設定が「公開(静的)」のページをすべて静的HTMLファイルとして書き出します。「公開(静的)」のページを編集した際には、他のページとの矛盾が生じる場合もあるので、ここでサイト全体のビルドをしておくことをおすすめします。

ページ編集

ページの内容や設定を細かく編集する画面です。「新規作成」ボタンやページのタイトル・編集ボタンをクリックすると表示されます。

履歴 SQLite版のみ

history アイコン付きのドロップダウンです。保存するたびに過去の内容が自動的に最大10件保存され、日時と編集者名（複数ユーザーで運用している場合）付きで選択できます。過去のリビジョンを選ぶと内容がフォームに読み込まれ、「過去のリビジョンをプレビュー中」という警告バナーが表示されます。そのまま save保存 を押すと、そのリビジョンの内容が現在のバージョンとして復元されます。ドロップダウンの先頭（「最新バージョン (現在)」）を選び直すと、最新の内容に戻ります。

更新日

ページ作成時に設定されます。日時は変更可能です。下書き・承認待ちなど非公開の状態から「公開(動的)」「公開(静的)」へ切り替えたタイミングで、実際に公開した日時に自動的に更新されます（すでに公開済みのページを編集しただけでは変わりません）。

タイトル

ページのタイトルです。必須項目です。コンポーネント内では {{TITLE}} や {{FULL_TITLE}}（「ページタイトル - サイト名」の形式）で出力できます。

公開設定

ページの公開状態をラジオボタンで選択します。

• 下書き — 非公開。管理者以外はアクセスできません。
• 承認待ち — SQLite版のみ 非公開ですが、推測不可能な確認用の共有URL（?preview=トークン）が自動生成され、この画面にも表示されます。URLを知らせるだけで、承認者に管理画面へログインさせずに内容を確認してもらえます。
• 公開(動的) — PHPで動的に表示します。
• 公開(静的) — サイト画面の静的サイト生成 (SSG)の設定に従ったディレクトリ、ファイル設定で静的HTMLファイルとして公開します。
• DB — ページとしては非公開になり、{{DATAROW}}のデータが、サイトURL/api/ページIDのアドレスのAPIとして読み取れるようになります。

公開(静的)のページをそれ以外の公開設定に設定すると、静的HTMLファイルは削除されます。

確認用共有URL SQLite版のみ

公開設定を「承認待ち」にすると表示されます。テキストボックスにURLが入り、隣の content_copyコピー ボタンでクリップボードにコピーできます。

メモ

管理者だけが見られる非公開のメモ欄です。覚えておきたいことや引き継ぎ事項などを自由に入力できます。サイトには一切表示されず、AI（MCP）にも渡りません。

ID

URLになるページの識別記号（スラッグ）です。半角英数字とハイフンが使用できます。ページのURLは サイトのURL/ID の形になります。既存のIDと同じものを指定して保存すると、その内容で上書きされますのでご注意ください。indexページのIDは変更できません。ID自体に「/」を使用することもできます。静的サイトの際、IDに「/」が含まれていると、その部分がディレクトリとして扱われます。また、動的サイトの場合も擬似的にディレクトリ構造が作られます。例えば、news/2024 のようなIDを設定すると、サイトのURL/news/2024 のようなURLになります。

デザインコンポーネント

このページのレイアウトに使用するページコンポーネントを選択します。「デザイン」メニューで「ページコンポーネントとして使用する」にチェックを入れたコンポーネントが選択肢として表示されます。

カテゴリ（カンマ区切り）

ページを分類するカテゴリをカンマ区切りで自由に入力します。入力欄の下に現在使用中のカテゴリが表示されます。カテゴリの一覧ページは自動では作成されません。必要な場合は、ページを作成し、{{NAV_LINKS:カテゴリ}} や {{NAV_CARDS:カテゴリ:コンポーネントID}} を配置してください。

表示順

ナビゲーションなどでの並び順を指定できます。数字の小さい順に並びます。0より小さいものは、リスト表示されません。

サムネール・OGP画像

SNSでシェアされた際や、カード一覧などで表示される画像ファイル名（例: ogp.jpg）を指定します。meta タグの og:image として出力されます。コンポーネント内では {{OGP_IMAGE}} で利用できます。

キーワード

ページの検索用キーワード（meta keywords）をカンマ区切りで入力します。コンポーネント内では {{KEYWORDS}} で出力されます。

ページ概要 (meta description)

ページの概要となる説明文を設定します。 {{DESCRIPTION}} で出力され、検索結果のタイトル下に表示される紹介文として利用されます。本文欄とすき間なく接続して表示され、ひと続きの内容として編集できます。

本文 (Markdown or HTML)

ページのメインコンテンツを Markdown 記法やHTMLで記述します。MarkdownとHTMLは混在できます。AIが生成した複雑なHTMLをそのまま貼り付けても正常に動作します。利用できるMarkdown記法と独自タグは編集画面下部のガイドを参照してください。詳しくは Markdown・コンポーネント（タグ） の項目を参照してください。

ページ専用CSS

このページだけに適用したいスタイルを記述します。自動的にスコープ化されるため、他のページや本文以外の部分へ影響を与えません。CSSのなかでも独自のタグが使えます。

レイアウトなどスコープ外の要素へ意図的にスタイルを適用する場合は、セレクタ全体を :global(...) で囲みます。たとえば :global(.hero_box) { display: none; } と記述すると、.hero_box だけにスコープ外からスタイルを適用できます。通常のセレクタはこれまでどおり、このページの本文内だけに適用されます。

ページ専用JavaScript

mikanBox 2.6.10以降で利用できます。CSS欄と同じ太字の見出しを持つ、折りたたみ式の専用欄に、<script> タグを付けずにJavaScriptを記述します。コードがある場合は欄が開いた状態で表示されます。CMSがページ本文末尾（通常は </body> の直前。閉じタグのないHTMLでは末尾）へスクリプトを自動挿入します。コンポーネントのJavaScriptに続いて、このページのコードが一度出力されます。動的表示・プレビュー・静的HTMLのいずれでも利用できます。

JavaScriptにはCSSのスコープ設定は適用されません。JS欄ではMarkdown変換・独自タグの展開・URLの自動補完は行われず、コードをそのまま使用します。HTML本文に直接書く <script> も引き続き利用できます。外部ライブラリへの依存など、必要な読み込み順はコード側で指定してください。

save 保存

ページの内容をすべて保存します。

open_in_new プレビュー

(編集時のみ表示)

現在の公開設定に応じたURLでページを新しいタブで開き、表示を確認します。

arrow_back 一覧へ戻る

ページ一覧へ戻ります。未保存の内容は失われますのでご注意ください。

delete 削除

ページを完全に削除します。削除後は元に戻せません。

編集画面下部には、Markdown記法の簡易ガイドと、利用可能なタグ一覧（タグガイド）が折りたたまれた状態で表示されます。クリックで展開できます。

サイト

サイト運営に関わる設定・管理機能をまとめたメニューです。各項目はアコーディオン形式で折りたたまれています（管理メモを除く）。

管理メモ

サイト上部に常時表示される、管理者だけが見られるメモ欄です。引き継ぎ事項や作業メモなどを自由に入力できます。

save 保存

メモの内容を保存します。

システム更新

現在のバージョンとGitHub上の最新バージョンを表示します。新しいバージョンがある場合は、[更新する] ボタンからmikanBoxを更新できます。

最新版を使用中の場合は [再インストール] を選べます。同じバージョンのプログラムファイルを入れ直すもので、更新がうまく適用されずプログラムファイルが不完全な状態になったときの復旧手段です。記事・設定・画像には触れません。

更新時は、記事・設定・画像・データベース・静的出力には触れず、プログラムファイルだけを置き換えます。更新前のプログラムはサーバー上の保護領域へ1世代分保存され、更新に失敗した場合は自動的に元へ戻ります。更新後は、表示される [元に戻す] ボタンから直前のバージョンへ復元することもできます。

[更新する] を押して確認すると、ボタンは [更新中…] に変わり、処理が終わるまで再度押せなくなります。更新完了後は管理画面が自動的に再読み込みされ、インストールされた新しいバージョン番号と完了メッセージが表示されます。手動での再読み込みは不要です。[元に戻す] の実行中も同様に [復元中…] と表示されます。

静的サイト生成 (SSG)

mikanBoxは、PHPで動的にページを表示するだけでなく、サイト全体を「静的なHTMLファイル」として書き出す機能（SSG: Static Site Generation）を備えていて、混在することも可能です。

SSGのメリット

• 超高速な表示 — サーバーがPHPを実行する必要がないため、高速に表示されます。
• 高セキュリティ — 公開領域にPHPファイルやデータ(JSON)を置かない構成にできるため、改ざんリスクを極限まで減らせます。

静的サイトの作成方法

• サーバー内で静的ページを生成 — 基本的にサイトルートへHTMLを書き出します。別の場所へ生成する場合だけ、出力先ディレクトリを指定します。
• アップロード用フォルダを作成（ローカルで運用している場合） — HTMLと media/ を専用の出力先へまとめて書き出します。サイトルート、mikanBox本体、既存のmediaフォルダと重なる出力先は安全のため指定できません。

アップロード用フォルダでは、ページや画像を出力先からの相対リンクにする「相対リンク（推奨）」と、指定した公開先URLへ固定する「公開URL固定」を選択できます。相対リンクではフォルダを別の場所へ移動してもリンクが保たれます。

公開先ルートURLは、どちらのリンク方式でも入力できます。https://example.com/site のように、公開先のルートを丸ごと指定します。Cloudflare PagesやNetlifyのように公開URLが決まっている場合は、そのURL（例: https://yoursite.pages.dev）をそのまま入れてください。

公開先ルートURLは、静的サイトを書き出すときにだけ使われます。手元で動かしている管理画面やプレビューは、いま開いているアドレスを使うため、公開先ルートURLを入れても画像やリンクがそちらを向くことはありません。

• 公開URL固定 — 必須です。ページ内のリンクと sitemap.xml rss.xml の両方に使われます。
• 相対リンク — 任意です。ページ内のリンクには使われません。sitemap.xml と rss.xml の生成にだけ使われ、空欄ならこの2つは生成されません。

出力先ディレクトリ

静的HTMLファイルの書き出し先を、mikanBox フォルダが置かれている場所（サイトルート）を基準にした相対パスで指定します。例えば blog と入力するとサイトルート直下の blog/ フォルダの中に書き出され、../ と入力するとサイトルートより1つ上の階層に書き出されます。未指定（空欄）の場合は、サイトルート直下に直接書き出されます。

「サーバー内で静的ページを生成」で空欄の場合はサイトルートへ生成します。「アップロード用フォルダを作成」を選ぶと、出力先の初期値として export が設定されます。必要に応じて別の専用フォルダ名へ変更できます。

出力構成 / URL形式

生成するHTMLファイルの形式を選択します。

• ディレクトリ型 (folder/index.html): ページID/index.html の形で書き出します。URLは /ページID/ となります。
• ファイル名型 (filename.html): ページID.html の形で書き出します。URLは /ページID.html となります。

ディレクトリ型は、動的公開と同じURLで公開できます。切り替えてもリンク切れが起こりません。ファイル名型は、URLに拡張子が含まれ、シンプルなファイル構成で公開できます。

初期値は、「サーバー内で静的ページを生成」ではディレクトリ型、「アップロード用フォルダを作成」ではファイル名型です。作成方法ごとに最後に選んだ出力構成を記憶するため、切り替えてもそれぞれの設定が保たれます。

auto_awesome 保存して静的サイトをビルド

設定を保存した上で、公開設定が「公開(静的)」のすべてのページを静的HTMLファイルとして書き出します。

ページIDに /（スラッシュ）を含めると（例: news/2024）、そのままディレクトリの階層構造として扱われます。静的ビルド時は、実際に news/2024/index.html（ディレクトリ型）のように、出力先ディレクトリのなかに本当のフォルダが作られ、そのなかにファイルが生成されます。

ビルドは画面を切り替えずにその場で実行され、生成したファイル数が通知で表示されます。設定や開いている欄はそのまま残ります。

サイトマップ・RSS・Podcast RSSの扱いについて

sitemap.xml rss.xml podcast.xml は、通常はアクセスのたびにPHPがその場で最新の内容を生成します（後述のサイトマップ・RSS・APIを参照）。SSGでサイトマップやRSSをファイル出力するには絶対URLが必要なため、公開先ルートURLが設定されている場合に生成します。「サーバー内で静的ページを生成」では、未設定時に現在のサイトURLを使用します。生成後にページを追加・変更しても、次に静的サイトをビルドし直すまでは内容が更新されません。

404ページ（ページID 404）は、サイトマップにもRSSにも含めません。エラー応答であってコンテンツではないため、検索エンジンや読者に案内する対象ではないからです。これは静的・動的のどちらの生成でも同じです。

言語

管理画面の表示言語を設定します。

以下の3つから選択できます。

• ブラウザの設定に合わせる — お使いのブラウザの言語設定に合わせて自動的に日本語または英語に切り替わります。
• 日本語
• English

save 保存

言語設定を保存します。

MCP APIキー

AIエージェント（Claude Codeなど）がMCP経由でこのサイトに接続するためのAPIキーを発行・管理します。

mikanBoxの管理用MCPサーバーは、ステートレスな MCP 2026-07-28 に加え、移行期間の互換性確保のため、initialize を使う MCP 2025-11-25、2025-06-18、2025-03-26にも対応します。いずれの方式でも管理用APIキーによる認証が必要です。

接続には、AIアプリが提供するネイティブのRemote MCP（Streamable HTTP）機能を使用します。

• MCPエンドポイント: サイトURL/mikanBox/mcp（旧URLの mcp.php も利用可能）
• プロトコル: 2026-07-28、2025-11-25、2025-06-18、2025-03-26
• 認証: Authorization: Bearer 発行したAPIキー または X-API-Key: 発行したAPIキー

固定ヘッダーを設定できるクライアントでは、発行したAPIキーを上記のいずれかのヘッダーとして指定します。APIキーをURLのクエリ文字列へ入れてはいけません。

各ツールには、読み取り専用か、既存データを上書き・削除しうるかを示す注釈（readOnlyHint、destructiveHint、idempotentHint）が付いています。対応するMCPクライアントはこれを見て、ページの更新や削除など影響の大きい操作の前に確認を求めます。また、ページやコンポーネントの本文を返すツールには untrustedContentHint が付き、取得した本文は資料として扱われ、AIへの指示としては扱われません。

Claudeのカスタムコネクタ画面が扱う認証は「認証なし」またはOAuthです。表示されるOAuth Client IDとOAuth Client シークレットは管理用APIキーの入力欄ではありません。mikanBoxがOAuthに対応するまでは、管理用MCPをClaudeカスタムコネクタへ安全に登録できません。APIキーをClient ID／シークレット欄へ貼り付けないでください。認証不要の公開ヘルプMCPは、カスタムコネクタへURLだけで登録できます。

APIキーはパスワードと同じように扱い、公開リポジトリや共有ファイルへ記録しないでください。複数のmikanBoxサイトを接続している場合、AIは初回接続時と書き込み前に get_site_info を呼び、対象サイトを確認します。

mikanBox 2.5.1以降では、MCPの接続指示によりAIは初回接続時に get_ai_context を呼びます。このツールは DESIGN.md、BRAND.md、CONTENTS.md など、登録されているすべての AI指示 コンポーネントを一度に返します。AIは受け取った内容をそのサイト固有のプロジェクト指示として、コンテンツ・デザイン・コードの変更に適用します。指示コンポーネントを更新すれば、次回取得時からAIへの指示も更新されます。

APIキー未発行の場合

• auto_awesomeAPIキーを生成 — 新しいAPIキーを発行します。

APIキー（発行済みの場合）

発行済みのAPIキーが読み取り専用の欄に表示されます。

• auto_awesomeAPIキーを再生成 — 現在のキーを無効化し、新しいキーを発行します。既存のAI連携設定は再設定が必要になります。
• content_copyコピー — APIキーをクリップボードにコピーします。生成したキーは、Claude Desktopなど接続するツール側の設定（.mcp.jsonなど）に貼り付けて使用します。

CSVインポート

CSVデータをサイト内で利用できるデータベースの形（DATAROWブロック）に変換するツールです。

ファイルを選択

CSVファイルを選択します。エンコーディング（UTF-8 / Shift-JIS）は自動判定します。

content_copy 変換してコピー

1行目をフィールド名として読み込み、各行を {{DATAROW:連番}} ブロックに変換してクリップボードにコピーします。コピー後、ページ編集の本文に貼り付けて保存してください。

使い方のポイント

• フィールド名（1行目）は英数字で記述してください。
• 価格の位取りカンマ（例: 1,000）はExcelが自動的にクォートするため正しく読み込めます。
• データ専用ページは下書きにしておくことを推奨します。訪問者には見えませんが、{{POST_MD:pageID#rowID:FIELD}} や {{NAV_CARDS}} からは参照できます。
• 公開設定をDBにすると、ページとしては非公開になり、{{DATAROW}}のデータが、サイトURL/api/ページIDのアドレスのAPIとして読み取れるようになります。

データ管理 SQLite版のみ

サイトの全データ（SQLiteファイル／JSON ZIP）や、アップロードしたメディアファイルをダウンロードしてバックアップします。外部データからのインポートも可能です。

download データ一括ダウンロード (SQLite)

サイトのデータベースファイル（mikanBox.sqlite）をそのままダウンロードします。

download データ一括ダウンロード (JSON)

記事、デザイン、設定などのすべてのテキストデータをJSONファイルとして書き出してダウンロードします。

download メディア一括ダウンロード

アップロード済みの画像などのファイルを一つのZIPにまとめてダウンロードします。

settings_backup_restore データ移行・インポートツール

データ移行・インポートツール（convert.php）を新しいタブで開きます。

バックアップ flat版のみ

サイトの全データ（JSON）と、アップロードしたメディアファイル（jpg, svgなど）をZIPでダウンロードします。定期的な保存を推奨します。

download データ一括ダウンロード (JSON)

記事、デザイン、設定などのすべてのテキストデータをJSONファイルとして書き出してダウンロードします。

download メディア一括ダウンロード (files)

アップロード済みの画像などのファイルを一つのZIPにまとめてダウンロードします。

サイト共通設定

最上段は左に変更不可のサイトID、右にサイト名を表示します。サイトURLなどの説明は入力欄の下に配置しています。

サイト共通設定は、最初の行に左側のサイト名と右側の変更できないサイトIDを同じ幅で表示します。次の行にサイトURLを表示し、説明は入力欄の下に配置します。静的サイト生成の作成方法の補足説明は通常の文字の太さで表示します。Cloud版のJSONデータの一括バックアップ・復元は、サイト設定の「データ移行・インポートツール」から専用ページを開きます。

サイトID（AI識別用）

サイトごとに自動生成される変更不可のIDです。複数のmikanBoxサイトをAIへ接続したとき、AIが操作対象を取り違えないために使用します。既存サイトでは、サイト共通設定の保存時またはAIが初めてサイト情報を確認したときに生成されます。

サイト名

サイトの名前を設定します。 {{SITE_NAME}} で出力できます。 {{FULL_TITLE}} は、「ページタイトル - サイト名」という形で表示され、ブックマークや検索時のページタイトルなどにも利用されます。

サイトURL

AIが操作対象を確認するためのURLです。通常は空欄のままで、トップページの index.php がある場所をHTTPリクエストから取得します。SSGの出力先・公開先とは別です。別の公開URLをAIに伝えたい場合だけ指定してください。この設定でサイトの移動・リダイレクトやSSGの出力先変更は行いません。CLI接続ではHTTP情報がないため、必要ならURLを明示してください。

サイト環境

本番、ステージング、開発、ローカル、未指定から選択します。AIはMCPの get_site_info を使い、サイトID・サイト名・URLとともにこの環境を確認できます。

用途を伝える目印で、操作やアクセスを自動で制限する機能はありません。例えばAIが試験用のページ変更を行う前に、接続先が「本番」と分かれば、開発用のサイトに切り替えるか確認する判断材料になります。サイトIDと併せて確認する運用が必要です。MCPのサイト識別対応としてv2.3で追加されました。

サイトの共通概要

サイトの概要を設定します。ページごとの概要が設定されていない場合は、検索時のページ概要として、この設定が利用されます。{{SITE_DESCRIPTION}} で出力されます。

共通キーワード

サイトのキーワードを設定します。ページごとのキーワードが設定されていない場合は、検索に使われるキーワードとして、この設定が利用されます。

共通OGP画像

サイト共通のOGP画像を設定します。ページごとのOGP画像が設定されていない場合は、SNSでシェアされる際に使われるOGP画像として、この設定が利用されます。{{SITE_OGP_IMAGE}} で出力されます。推奨サイズは 1200 × 630 px です。

ページ一覧の表示件数 (1ページあたり)

「ページ」画面の一覧を、何件ごとにページ分割するかを指定します（初期値: 30件）。ページ数がこの件数未満の場合、ページ送りのリンクは表示されません。

メディア一覧の表示件数 (1ページあたり)

「メディア」画面の一覧を、何件ごとにページ分割するかを指定します（初期値: 100件）。

save 保存

「サイト共通設定」の内容を保存します。

ユーザー管理 (編集者) SQLite版のみ

複数人でサイトを編集する場合の、編集者アカウントを管理する機能です。編集者ごとに個別のユーザー名・パスワードでログインでき、編集履歴には編集者名が記録されます。

登録ユーザー一覧

ユーザー名・表示名の一覧です。ログイン中の自分自身のアカウントと、自分ひとりしかユーザーがいない場合は削除できません。

• delete削除 — そのユーザーアカウントを削除します。削除後は元に戻せません。

新規ユーザーを追加

クリックして展開すると、以下の入力欄が表示されます。

• ユーザー名 — 半角英数字・アンダースコア・ハイフンのみ。ログインIDになります。
• 表示名 — 編集履歴などに表示される名前です。未入力の場合はユーザー名がそのまま使われます。
• パスワード — 4文字以上。

add ユーザーを追加

入力内容で新しい編集者アカウントを作成します。

アカウント設定 (ユーザーID・パスワード・秘密の質問)

クリックして展開すると、ログイン中の自分自身のアカウント情報をまとめて編集できます。

• ユーザー名 — ログインIDです。半角英数字・アンダースコア・ハイフンのみ使用できます。
• 表示名 — 編集履歴などに表示される名前です。
• 現在のパスワード — 現在ログインに使用しているパスワードを入力します。
• 新しいパスワード — 新しいパスワードを入力します（4文字以上）。空のままにすると、パスワードは変更されません。
• 秘密の質問 — パスワードを忘れた際、本人確認に使う質問文を設定します。未設定の場合は警告が表示されます。
• 秘密の質問の回答 (変更しない場合は空のまま) — 質問への回答を設定します。ログイン画面からのパスワードリセット時に、この回答と照合されます。

save 更新

アカウント設定の内容を保存します。

パスワードを忘れた場合： ログイン画面の「パスワードを忘れた場合」リンクから、ユーザー名の入力 → 秘密の質問への回答 → 新しいパスワードの設定、という手順でセルフサービスでリセットできます（秘密の質問を設定済みの場合のみ）。

サーバーに直接アクセスできる場合は、空のファイル mikanData/reset_password.txt を設置することで、次回アクセス時に登録済みユーザーがすべて削除され、初回セットアップ画面が表示されます。このファイルは処理後に自動的に削除されるため、置いたままになる心配はありません。

パスワードの変更 flat版のみ

管理画面のログインパスワードを変更します。

現在のパスワード

現在ログインに使用しているパスワードを入力します。

新しいパスワード

新しいパスワードを入力します（4文字以上）。

save 保存

パスワードを変更して保存します。

パスワードを忘れた場合： FTPやファイルマネージャー等でサーバー上の mikanData/settings.json ファイルを編集し、 password_hash の値を空にしてください。次回アクセス時に初回パスワード設定画面が表示されます。

データ移行・インポートツール

SQLite版では、管理画面（admin.php）とは別の独立したツール（convert.php）です。ブラウザで mikanBox/convert.php に直接アクセスして利用します。データベースやメディアの現在の状態確認と、外部データの一括インポートを行えます。

現在の状態

SQLiteデータベース状態

データベースファイルの作成有無・ファイルサイズ・登録ページ数・登録コンポーネント数・登録ユーザー（編集者）数を確認できます。

メディアファイル状態

保存ディレクトリ・登録メディアファイル数・総メディア容量を確認できます。

コンテンツパッケージ (ZIP) インポート

posts/・components/ フォルダなどを含むZIPパッケージ（テーマや初期データ一式）をアップロードして、現在のSQLiteデータベースに取り込みます。取り込まれるのは posts/ と components/ の中身のみで、settings.json の中身（サイト設定の値）が読み込まれることはありません。

ZIPを展開すると、posts/ や components/ が直接出てこず、フォルダが1つだけかぶさっていることがあります（例: テーマ名/posts/, テーマ名/components/）。この場合ツールは、フォルダの中にサブフォルダが1つしかない間はその中へ潜り続け、posts/・components/ が並んで見つかる階層（サブフォルダが2つ以上になった時点）を起点フォルダとみなします。settings.json が置かれている場合は、その存在（ファイルがあるかどうか）だけを見て、その階層を即座に起点フォルダと判定します（中身は読みません）。

各データのIDは、JSONファイルのファイル名（拡張子を除いた部分）がそのまま使われます。中身に書かれているタイトルなどとは関係ありません。既存IDと重複するものはスキップされ、上書きはされません。特定のページ・コンポーネントを上書きするような形で取り込みたい場合は、先に管理画面側の該当データを削除してからインポートするか、取り込みたいJSONファイルの名前を目的のIDに変更してからZIPに含めてください。

取り込みが終わったフォルダは import/ フォルダ配下に {フォルダ名}_imported という名前にリネームされ、そのまま残ります（削除はされません）。

ファイルを選択

アップロードするZIPファイルを選択します。

publish アップロード & インポート

選択したZIPファイルをインポートします。

WordPress データ移行 (XML インポート)

WordPressの「ツール ＞ エクスポート」から書き出したXMLファイル（WXR形式）をアップロードし、投稿や固定ページをmikanBoxのページデータとして一括インポートします。公開状態（公開/下書き）は維持され、本文のHTMLは自動的に簡易的なMarkdown形式に変換されます。

ファイルを選択

アップロードするWordPressのXMLファイルを選択します。

publish XML を解析してインポート

選択したXMLファイルを解析してインポートします。

実行ログ

インポート実行後、処理結果（成功・エラーなど）がログとして表示されます。

arrow_back 管理画面へ戻る

通常の管理画面（admin.php）に戻ります。

Cloud版のデータ入出力

サイト設定から/admin?view=importを開きます。SQLite版と同じ構成の状態カード、ZIP取込、WordPress XML取込、実行ログを表示します。ページ・コンポーネント・ユーザー数、メディア数・総容量を確認できます。PHPの保存ディレクトリやSQLiteファイルサイズはCloudには表示しません。

ZIPはposts/・components/のJSONだけを取り込み、既存IDはスキップします。settings.json、アカウント、画像は取り込みません。WordPress WXRでは公開記事を動的ページ、承認待ちを承認待ち、それ以外を下書きとして取り込み、本文を簡易Markdownへ変換します。画像は別途アップロードしてください。ZIP/XMLは20MB以内、ZIP展開サイズは合計15MB以内、取込内容はUTF-8換算1MB以内・合計300件以内です。ZIPは非圧縮・Deflateに対応し、暗号化や破損したZIPは拒否します。ZIP展開・XML解析はブラウザーで行います。

後段にCSV変換とCloud固有のJSON一括バックアップ・復元を配置します。JSON一括復元は、ZIP/XMLでの追加取込と異なり、現在のサイトデータを置き換えます。既存の管理者パスワード確認とユーザー復元の設定に従います。取込後は静的ページを再構築してください。サイト設定の2列入力欄、アカウント管理の折りたたみ欄、カテゴリの新規ボタンは共通CSSで表示をそろえています。

ページ一覧・メディアのキーワード検索は検索欄のクリアから解除できます。カテゴリによる絞り込みは維持します。Cloudの画像名変更は、使用箇所がある場合にキャンセル・名前だけ変更・参照も更新から選べます。画像の変更にCloud公開接続は不要です。接続設定はサイト画面のユーザー管理の下にあります。完全バックアップ（復元用・JSON）は画像・ユーザー・編集履歴まで含み、個別のデータ・メディア保存より広い範囲を復元します。現在のD1画像保存には400 MBの上限があり、復元時は現在の画像と復元分などの合計を450 MB以内に収める必要があります。

Cloud版: D1からR2への移行（開発版 v0.5.0）

最初はR2を有効にせずD1で利用できます。サイト画面の「メディアの保存先」で現在の保存先と使用量を確認し、「D1からR2へ移行」を実行します。これは画像・アップロードしたJS/CSSの保存先の切り替えで、ページ・設定・ユーザーなどはD1に残ります。

R2の準備にはCloudflareで支払い方法を登録してR2を有効にする必要があります。無料枠内でも登録が必要です。バケットを作成し、WorkerのR2接続名を MEDIA にします。ローカルのWrangler設定にはテスト用接続がありますが、公開用設定にR2接続は追加していません。公開用 wrangler.production.json に次の設定を追加し、実際のバケット名でコードをデプロイしてください。この準備だけでは保存先は切り替わりません。

"r2_buckets": [{"binding": "MEDIA", "bucket_name": "実際のバケット名"}]

現在の管理者パスワードを入力して移行を開始します。1画像ずつコピーし、チェックサムとR2への保存結果を検証します。移行中はD1の原本を表示し、画像の追加・変更・削除を止めます。画面を閉じても、同じメニューから再開・中止できます。全件の確認が完了するとD1の画像データを除去し、R2の参照へ一括で切り替えます。未完了・失敗・中止ではD1の原本を保持します。成功後にD1へ戻すメニューはありません。移行前に完全JSONバックアップを保存してください。画像URLと本文中のファイル名は変わりません。

D1の画像上限は400 MBです。D1 Freeは1DB500 MB、Paidは1DB10 GBまでで、プラン変更は別途必要です。R2へ移行すると画像合計400 MBの制限を外し、1画像10 MB・10,000件の制限を維持します。R2 Standardの無料枠はアカウント全体で月間10 GB-month・書込み系100万回・読出し系1,000万回です。容量の上限ではなく超過分は課金されます。

サイト画面にはD1のDB使用量と、管理対象のR2容量（一時画像・保持画像を含む）を表示し、無料枠の80%程度で注意を表示します。他サイトや管理外のR2オブジェクトは含みません。実際のアカウント全体の使用量・リクエスト数・料金はCloudflareで確認してください。料金通知は利用を停止する機能ではありません。D1から画像を削除してもDBの確保済み領域がすぐ小さくなるとは限りません。

R2の書き換えは新しい一意のオブジェクトへ保存してからD1の参照を切り替えます。「不要な一時画像を整理」で、使用中・移行中・復元中の画像を除き、24時間以上保持した未使用画像を最大20件ずつ削除できます。完全JSONバックアップは画像も含み、D1・R2のどちらの保存先にも復元できます。復元先の保存先設定は維持します。D1復元は画像400 MB・現在と一時画像の合計450 MBまで、R2復元は原本と一時画像の両方を使用量に含めます。D1 Time TravelとSQL書き出しにはR2の画像実体が含まれず、古い参照先が整理済みの場合は戻せません。R2では完全JSONバックアップを使用してください。

画像は保存先にかかわらず /media/ファイル名 をWorkerから配信し、画像操作にCloud公開接続は不要です。画像リクエストはWorkerの利用枠を消費します。R2利用時はD1のメタデータ読出しとR2の読出しも発生します。生成済みのページHTMLはStatic Assetsから直接配信します。名前変更・WebP変換で更新した本文や部品を公開済みのHTMLへ反映するには、通常の再構築・配信更新が必要です。

支払い方法を登録せず、Cloudflare公式のローカルWorker・D1・R2を組み合わせて確認するには、Cloudフォルダで node scripts/test-r2-local.mjs を実行します。専用の一時データを作成し、移行・中止・画像操作・バックアップ復元の15項目を検証して削除します。既存のローカルデータや実サービスには接続しません。これはローカルでの結合テストで、実際のR2への接続権限・通信・課金を確認するものではありません。結果は artifacts/r2-local-system-test.json に保存します。

参考: D1の制限、R2の料金、R2の初期設定、料金と使用量。

デザイン

ページ全体のデザインを作る ページ 、共通部品を作る パーツ 、AIへの指示を書く AI指示 の3種類のコンポーネントを管理します。

add 新規作成

新しいコンポーネントを作成します。クリックするとデザイン編集エリアが開きます。

コンポーネント一覧

編集

この edit編集 ボタンをクリックすると、そのコンポーネントの編集画面へ移動します。

コンポーネント一覧では「AIに聞く」の右側のセレクタで、すべて（初期状態）、選択中のカテゴリ、ページ、パーツ、AI指示、標準コンポーネントを選べます。標準コンポーネントはIDが _ で始まるものです。タイプはページ・パーツ・AI指示の設定で判定します。通常の新規作成・複製では _ を付けず、標準扱いを意図する場合は付けて構いません。名前による保存拒否は行いません。 「選択中のカテゴリ」は管理画面上部のカテゴリを使い、画像と同様にIDの接頭辞で判定します。例えば apps_header は apps カテゴリに含まれます。カテゴリ未選択時は絞り込みません。

コンポーネントID

コンポーネントの識別記号です。クリックしても編集画面へ移動します。「_」で始まるIDは、初期設定で用意されているシステムコンポーネントです。これらを編集して使用することもできます。

' 'には、''タグ内の共通設定が記述されていて、CSSを集約出力する''もあらかじめ含まれています。はCSSの挿入位置を指定する任意のタグです。複数ある場合は最初の1つにだけCSSを出力し、残りのタグは取り除きます。省略時は</head>の直前へ自動挿入し、閉じタグがない場合はHTML先頭へ挿入します。AIによる出力をそのまま利用する際には、デザインコンポーネントで「なし（本文のHTMLをそのまま使用）」を、それ外は'_layout'をベースに使用するとよいでしょう。もちろん、他にも自由に作成できます。その際は「_」をつける必要はありません。

ラッパーなし・共通の読み込み

デザインコンポーネントの「なし（本文のHTMLをそのまま使用）」は、_layoutなどのラッパーを使わず本文を表示します。完成済みのHTMLではRaw HTMLを有効にしてください。MCPではwrapper_comp: "__none"を指定します。未指定は従来どおり_layoutです。

全版で、本文のHTMLにあるtitle・metaは上書きせず、不足分だけhead内へ補います。charsetはUTF-8、viewportはwidth=device-width, initial-scale=1.0、titleは{{FULL_TITLE}}と同じ値です。description・OGP画像は、タグがなくページまたはサイト設定に値がある場合だけ補います。日本語・英語のタイトルをそのまま使い、自動翻訳はしません。robots・canonicalは自動追加しません。headがない場合は作成し、HTML断片には最小限のhtml・head・bodyを補います。既存タグの重複を自動で削除する処理は行いません。

サイト設定の「共通の読み込み」→「計測コンポーネント」で、GoogleタグなどをHTML欄に登録したパーツを選択すると、head内へ自動挿入します。「なし」で無効になります。同じパーツが通常のコンポーネント埋め込みで配置済みの場合は、自動挿入しません。CSSスコープ化はOFFで使用してください。JavaScript欄のコードは通常のJS出力位置へ挿入されるため、head用のscriptタグはHTML欄へ記述します。

計測コンポーネントが指定されているときだけ、ページ編集のデザインコンポーネント欄の下に「このページでは計測タグを読み込まない」が表示されます。チェックすると、自動挿入と、指定された計測パーツの通常の埋め込みを抑止します。MCPではexclude_tracking: trueで指定します。HTMLに直接記述された計測コードや、別のコンポーネントの計測コードは抑止しません。プレビューもページの設定に従います。設定変更後は静的ページを再ビルドしてください。

タイプ

コンポーネントの種類を示します。一覧では AI指示 タイプが上部にまとめてソートされます。

• ページ — 「ページコンポーネントとして使用する」にチェックが入ったコンポーネントです。ページ編集の「デザインコンポーネント」で選択できます。
• パーツ — ページや他のコンポーネントに埋め込む部品です。
• AI指示 — サイトのデザインルールなど、AIエージェントに読み込ませるための指示書です（DESIGN.md, BRAND.md など）。

タグ名

コンポーネントを埋め込むためのタグ（例: {{COMPONENT:header}}）が表示されます。クリックするとクリップボードにコピーされます。ページの本文や他のコンポーネントのHTMLに貼り付けて利用します。

デザイン編集

コンポーネントの構造（HTML・CSS・JavaScript）と設定を定義する画面です。

コンポーネントID

コンポーネントの識別記号です。必須項目です。半角英数字とアンダースコアが使用できます。テンプレート内で {{COMPONENT:ID}} として呼び出せます。タイプで「AI指示」を選んだ場合はドット（.）も使用でき、末尾に .md が付いていなければ保存時に自動的に付与されます。

メモ

管理者だけが見られる非公開のメモ欄です。サイトには一切表示されず、AI（MCP）にも渡りません。

タイプ

ラジオボタンで3種類から選択します。

• パーツ — ページや他のコンポーネントに埋め込んで使う部品です。
• ページ — ページ全体をレイアウトするコンポーネントです。選択するとデザイン一覧で ページ として表示され、ページ編集画面の「デザインコンポーネント」で選べるようになります。以下のタグが追加で利用できます。
• {{CONTENT}} — ページの本文が出力される位置に挿入します。
• — ページとコンポーネントのCSSを集約して挿入します。省略時は</head>直前（閉じタグがなければHTML先頭）へ自動挿入します。複数ある場合は最初の1つだけを使用し、残りは取り除きます。
• AI指示 — CSSエディタ・CSSスコープ化のチェックボックスなど、デザインには不要な項目が非表示になり、本文欄がプレーンなテキスト入力（Markdown/HTML兼用）に切り替わります。デザインルールなど、AIエージェントに読ませたい内容をそのまま書けます。これ自体をAIに生成させることもできます。

HTML (タイプが「パーツ」「ページ」の場合)

コンポーネントの内容をHTMLで記述します。ここで使える独自のタグは、編集画面下部のガイドを参照してください。他のコンポーネントを入れ子にして読み込むこともできます。

本文 (Markdown / HTML) (タイプが「AI指示」の場合)

AIエージェントに伝えたい内容を自由に記述します。Markdown・HTMLどちらでも構いません。

MCP接続時には get_ai_context がすべてのAI指示コンポーネントを一括取得します。用途ごとに DESIGN.md、BRAND.md、CONTENTS.md などへ分けて管理しても、AIへは効率よくまとめて伝えられます。

CSS (この部品専用のスタイル) (タイプが「パーツ」「ページ」の場合)

このコンポーネントのなかだけに適用したいスタイルを記述します。CSSのなかでも独自のタグが使えます。

CSSをスコープ化する (他の部品への影響を防止) (タイプが「パーツ」「ページ」の場合)

チェックボックスです。通常はONを推奨します。CSSで記述した内容が、他の部分に影響することを防ぎます。サイト全体に適用したいグローバルなリセットCSSや <head> 用の部品を作る場合のみチェックをはずします。

スコープをONにしたまま一部のセレクタだけをグローバルにするには、セレクタ全体を :global(...) で囲みます。例：:global(.hero_box) { display: none; }。スコープがOFFのコンポーネントはもともとグローバルなため、:global(...) は不要です。

JavaScript (タイプが「パーツ」「ページ」の場合)

2.6.12以降は、同じコンポーネントIDのJSを1ページにつき一回にまとめます。2.6.10〜2.6.11では埋め込みごとに出力していました。

CSS欄と同じ太字の見出しを持つ、折りたたみ式の専用欄に、<script> タグなしでコードを記述します。通常の {{COMPONENT:ID}} 呼び出しでは、同じコンポーネントIDのJSを1ページにつき一回だけ、ページ本文末尾へ出力します。入れ子では呼び出し元、子の順に収集し、同じIDが再登場しても最初の収集位置を保ちます。カード一覧・検索結果の部品も、通常の埋め込みと共通で同じIDにつき一回です。その後、まだ収集していないデザインコンポーネント（ラッパー）のJS、ページ専用JSが続きます。異なるIDのJSやページ専用JSは、コードが同じでもそれぞれ出力します。コードの自動スコープ化は行いません。「AI指示」ではJS欄を表示せず、JavaScriptとしての配信・実行もしません。

JavaScript欄は他の開閉欄と同じ「JavaScript ▼」の表示で、見出し行全体をクリックして開閉できます。

2.7.0以降は、JSだけを読み込む際にファイル名だけで記述でき、編集画面にもHTMLの記述例を表示します。

保存済みのコンポーネントのJavaScript欄には、JSだけを読み込むための記述例、その下にパスの自動補完の説明と完全なJavaScript専用URLが表示されます。ページとコンポーネントのJavaScript欄の説明・表示順は全版共通です。component-js/ID.js ではHTML・CSSの有無に関係なく、JS欄の内容だけを取得できます。IDの大文字・小文字は保存したものと一致させてください。例えば Test のJSだけを読み込むには、本文や部品のHTMLに次のように書きます。JavaScript欄には書きません。

<script src="Test.js" defer></script>

保存済みの通常コンポーネントに対応する ID.js（./ID.js も可）は、画像のファイル名と同じように、設置先とページ階層に合わせて専用URLへ自動補完されます。component-js/Test.js と書く方法も使えます。該当する部品がないファイル名や外部URLは補完しません。静的サイトの書き出しでは component-js/ にJSファイルが同梱され、相対URLモードでは出力ページの階層に合わせて参照が補完されます。URL書き換えを使わない環境では index.php?component_js=Test でも取得できます（このクエリ形式はPHPサーバー用です）。存在しないID・不正なID・AI指示は404、JS欄が空の通常コンポーネントは空のJavaScriptを返します。

通常の {{COMPONENT:Test}} 埋め込みではJSも自動で出力されるため、上記のscriptタグは不要です。ページ内に同じコンポーネントを複数配置しても、JavaScriptの初期実行は一度だけです。クリックなどのイベント処理は、その都度実行されます。また、CSSのスコープ設定はJavaScriptには適用されません。JS欄のコードは、独自タグを展開せずそのまま使います。外部URLでの読み込みと通常のコンポーネント埋め込みを併用した場合も、自動で実行回数を調整しません。例えば同じ部品のボタンを3個置く場合、コードの初期実行は一度だけなので、document.querySelectorAll() で3個すべてを取得し、一つずつクリック処理を設定します。document.querySelector() は最初の一つだけを取得します。読み込み順はコード側で設計してください。MCPの create_page・update_page・create_component・update_component でも js フィールドで設定できます。

save 保存

コンポーネントを保存します。

arrow_back 一覧へ戻る

「デザイン」管理画面に戻ります。未保存の内容は失われますのでご注意ください。

delete 削除

コンポーネントを完全に削除します。削除後は元に戻せません。

編集画面下部には、利用可能なタグ一覧（タグガイド）が折りたたまれた状態で表示されます。クリックで展開できます。

メディア

画像・音声・動画ファイルのアップロードと管理を行う画面です。

JS・CSSライブラリのアップロード

ブラウザーでそのまま使える .js・.css ファイルもメディアにアップロードできます。JS・CSSはUTF-8のテキスト、空でないファイル、1ファイル10 MB以下が対象です。PHP版ではサーバーのアップロード上限も適用します。ファイル名は半角英数字・_・-・.を使い、それ以外は_に置き換えます。拡張子は小文字に揃えます。パスや危険な二重拡張子は受け付けません。

JS・CSSにはカテゴリ接頭辞を付けず、カテゴリを選んでいても一覧に表示します。画像のリサイズ・WebP変換は適用しません。「ファイルの種類」で画像・音声・動画・JS・CSSを絞り込めます。JS・CSSのカードには「URLをコピー」「読み込みタグをコピー」があり、管理画面でファイルのコードを実行しません。名前変更で拡張子は変更できません。同名ファイルは上書きせず、PHP版は連番を付け、Cloud版は別名でのアップロードを求めます。更新時は library-1.2.3.min.js のようなバージョン付きの名前を推奨します。

読み込みタグはページ本文やデザインコンポーネントのHTMLに貼ります。JS欄・CSS欄には貼りません。

<link rel="stylesheet" href="media/library-1.2.3.min.css">
<script src="media/library-1.2.3.min.js" defer></script>

これらの media/ パスは、ページ階層に合わせて補完され、静的書き出しにもファイルが含まれます。アップロードしただけではページへ自動挿入しません。読み込み順や type="module" などはライブラリの説明に従って指定してください。複数ファイルのフォルダ構造をまとめてアップロードする機能はありません。CSSやJSが相対パスで別ファイルを参照する場合は、その配置も利用者側で調整します。

アップロードはコード編集と同じく、信頼できる管理者・MCP APIキーから行ってください。形式検査はコードの安全性を保証するものではありません。提供元と内容を確認して利用します。PHP版は media/ 内のファイルとして保存し、ApacheではJS・CSSの配信形式と nosniff を設定します。Apache以外ではサーバー側で text/javascript / text/css と X-Content-Type-Options: nosniff を設定してください。Cloud版は既存のメディア保存設定に従ってD1またはR2へ保存し、どちらも同じ /media/ファイル名 で配信します。バックアップ・復元とD1からR2への移行にも含まれます。ページ・コンポーネントのコード欄の内容は、引き続きD1に保存します。MCPの upload_media もJS・CSSに対応します。

アップロードエリア

ファイル選択

「ファイルを選択」をクリックしてアップロードするファイルを選択します。このウィンドウにファイルをドラッグ＆ドロップすると、ドロップした段階でアップロードできます。

upload アップロード

選択したファイルをアップロードします。

アップロード設定...

「アップロード設定...」をクリックすると展開します。ここでの選択はアップロード時にだけ適用され、ブラウザに記憶されるため次回以降も同じ設定が使われます。ドラッグ＆ドロップでアップロードした場合も同じ設定が適用されます。

• 長辺を〇〇pxに制限 — 画像の長辺が指定した値を超えている場合、縦横比を維持したまま縮小して保存します。既定は 2000px です。スマートフォンやデジタルカメラの写真をそのまま貼り付けると数千ピクセルの巨大な画像になりがちで、表示速度を大きく損ないます。これを防ぐための設定です。
• WebP に変換（jpg / png のみ） — 画像を WebP 形式に変換して保存します。ファイルサイズがおおむね 25〜35% 小さくなります。拡張子が .webp に変わるため、ファイル名も変わります。jpg は非可逆（品質82）、png は可逆で変換されるため、スクリーンショットや図版の文字がにじむことはありません。

いずれも元の画像データは残りません。原寸のまま配布したいファイルには使わないでください。

gif と svg はどちらの対象にもなりません。gif はアニメーションが失われるため、svg は拡大しても劣化しないベクター形式であるためです。

また、画像の画素数が大きすぎてサーバーのメモリ上限に収まらない場合は、自動処理を行わずに元のファイルのままアップロードし、その旨を表示します（アップロード自体は成功します）。

メディア画面の案内は、対応形式・JS/CSSの条件・ページ内での利用方法を表示します。画像変換の補足とサーバーの最大サイズ表示は省略します。Markdownではパスを省略できます。HTMLでは media/ファイル名 を指定します。

対応形式・制限

jpg, png, gif, webp, svg, mp3, m4a, mp4 に対応しています。最大ファイルサイズはサーバーの設定に依存します。

アップロードされたファイルは media ディレクトリに保存されます。Markdown や HTML での参照方法：

• Markdown: ![説明](ファイル名) または {{IMAGE:ファイル名}}（{{AUDIO:ファイル名}}、{{VIDEO:ファイル名}}）
• HTML: media/ファイル名 を標準として指定します（例: <img src="media/ファイル名">）。画像では従来の images/ファイル名 とファイル名だけの指定も引き続き利用できます。

カテゴリでの絞り込み

「ページ」画面でカテゴリを絞り込んだ状態からメディア画面に遷移すると、そのカテゴリの接頭辞が付いたファイル名（例: blog_photo.jpg）だけに自動的に絞り込まれます。「カテゴリ「〇〇」で絞り込み中」という案内とともに、以下のボタンが表示されます。

filter_list カテゴリ絞り込みを適用する

現在のカテゴリでの絞り込みを有効にします（既定の状態）。

visibility_off カテゴリで絞り込みしない

一時的に絞り込みを解除し、すべてのメディアファイルを表示します。

「ページ」画面でカテゴリを絞り込んだ状態からメディア画面に遷移してアップロードすると、ファイル名の先頭に自動的にそのカテゴリ名の接頭辞が付きます（例: カテゴリ「blog」で photo.jpg をアップロード → blog_photo.jpg）。ただし、ファイル名がすでに何らかの接頭辞（英数字＋_）で始まっている場合は、二重に付与されることはありません。

ファイル名は _ で区切って複数のカテゴリ名を含めることができます。例えば blog_news_001.jpg という名前にしておくと、「blog」カテゴリで絞り込んだ時にも「news」カテゴリで絞り込んだ時にも、どちらでも表示されます。また、g_ から始まるファイル名（例: g_logo.png）は、常にどのカテゴリで絞り込んでも表示される「共通（グローバル）」画像として扱われます。

メディア一覧

プレビュー

画像はサムネイルが表示されます。動画・音声ファイルはアイコンが表示されます。

ファイル名（クリックでコピー）

ファイル名をクリックするとクリップボードにコピーされます。ページの本文へ貼り付けて使用します。

形式・サイズ表示

ファイルの形式（例: JPG）と、画像の場合は解像度（幅×高さ）が表示されます。

delete 削除

メディアファイルを削除します。削除後は元に戻せません。

リサイズ...

「リサイズ...」をクリックすると展開します。幅(W)または高さ(H)のどちらか一方を入力して save を押すと、縦横比を維持したままリサイズされます（jpg, png, webp のみ対応）。リサイズ後は元のサイズに戻せません。

gif は対象外です。処理に使用しているライブラリがアニメーションの1コマ目しか読み込めないため、リサイズするとアニメーションが失われてしまうためです。gif のサイズを変更したい場合は、専用のツールで作り直してからアップロードしてください。

また、画像の画素数が大きすぎてサーバーのメモリ上限に収まらない場合は、リサイズを行わずにその旨を表示します。

名前変更▼

「名前変更▼」をクリックすると展開します。ファイル名を書き換えて save を押すと、メディアファイルの名前を変更できます。既存のページ・コンポーネント内でそのファイル名が使われている場合は確認ダイアログが表示され、以下から選べます。

• リンクを更新 — ファイル名を変更し、そのファイルを参照しているページ・コンポーネント内の記述も新しいファイル名に一括で書き換えます。
• ファイル名のみ変更 — ファイル名だけを変更し、既存の参照は書き換えません（参照先が見つからなくなる点に注意してください）。
• 変更しない — 名前変更をキャンセルします。

メディアの操作

ファイル名検索とページ送りも全版で共通の配置です。検索は現在のカテゴリ絞り込み内で行います。

アップロード設定は「アップロード設定▼」で開閉します。各ファイルの操作は「リサイズ▼」「名前変更▼」「WebP に変換」の順です。リサイズの幅・高さと名前変更の入力欄、保存ボタンは同じ高さで表示します。幅または高さを指定すると縦横比を維持して変更します。

既存のJPEG（jpg/jpeg）・PNGだけに「WebP に変換」を表示します。WebP・GIF・SVG・音声・動画には表示しません。PHP版ではサーバーのWebP変換機能が必要です。変換すると拡張子が.webpになり、ページ本文・CSS・JavaScript・OGP画像、コンポーネントのHTML・CSS・JavaScript、サイト共通のOGP画像の参照を更新します。メモ・過去の版は変更しません。同名のWebPが存在する場合は上書きせず、元画像と参照を保持します。静的ページは再ビルドしてください。Cloud版はブラウザーで画像を変換し、保存します。更新した参照を静的HTMLに反映するには再構築・配信更新が必要です。操作完了まで画面を開いたままにしてください。

Markdown

ページの本文では、標準的なMarkdown記法を使うことができます。

Markdown記法については、ページ編集画面の下部に使用できる記法についてのガイドがあります。

MarkdownとHTML

MarkdownとHTMLは混在できます。本文は基本的にMarkdownとして処理されますが、以下のHTMLタグから始まる行はHTMLコードとして扱われます（Markdown変換されません）。

html head body div section article aside header footer main nav form p h1〜h6 ul ol li dl dt dd table thead tbody tr th td blockquote pre figure figcaption details summary dialog a span button select video audio script style link meta <!-- コメント --> など

開始タグ・終了タグ（</div> </a> など）どちらも対象です。前後に改行を入れる必要はありません（入れても表示は変わりません）。

前後に空行があり、HTMLタグやMarkdown記号がなければ「段落」として扱われ<p>〜</p>で囲まれます。段落内の改行は<br>になります（HTMLタグの直前・直後には入りません）。段落の中にHTMLタグを混ぜることも可能です。

Markdown＋HTML混在では対応しきれない複雑なレイアウトの場合は、ページ編集画面の「Raw HTML」チェックボックスをONにすると、Markdown処理を完全に無効化してHTMLをそのまま出力できます。

段落

前後に空行をいれることで、HTMLタグやMarkdown記法の記号がなければ、段落として扱われ <p>内容</p> のようにタグで囲まれます。段落のなかで改行すると <br> タグが挿入されます。また、段落のなかで、HTMLタグを挿入することも可能です。

見出し

行頭で ## 見出し のように使うと見出しとして扱われ、 <h2>見出し</h2> の形で出力されます。通常、# で示される <h1> タグはページタイトルに使用されるので、本文内では、 ## 見出し ### 小見出し を利用するのが良いでしょう。# 記号の後にスペースを入れる必要があります。

Markdown:## 見出し
HTML:<h2>見出し</h2>

その他のブロック要素

リスト、番号付きリスト、引用、水平線、インラインコードについては、行頭で使用することで、それぞれのHTMLに置き換えられます。

Markdown:- リスト項目
HTML:<ul><li>リスト項目</li></ul>

Markdown:* リスト項目
HTML:<ul><li>リスト項目</li></ul>

番号付きリスト 1.：<ol><li>
Markdown:1. 番号付きリスト項目
HTML:<ol><li>番号付きリスト項目</li></ol>

リスト項目は-または*どちらも使えます。これらは、記号の後にスペースを入れる必要があります。

Markdown:> 引用
HTML:<blockquote>引用</blockquote>

記号の後にスペースはあってもなくても構いません。

Markdown:---
HTML:<hr>

文中で使用できるインライン要素

Markdown:**太字**
HTML:<strong>太字</strong>

Markdown:*斜体*
HTML:<em>斜体</em>

リンク

リンクは [リンクしたい文字](URL) の形で指定できます。 <a href="URL">リンクしたい文字</a> の形で出力されます。

Markdown:[リンクしたい文字](URL)
HTML:<a href="URL">リンクしたい文字</a>

メディアの利用

画像を表示する際には、 ![画像の説明](filename) でページに埋め込むことができます。[ ] のなかには、画像の説明を入れ、 <img src="画像のURL" alt="画像の説明"> の形で出力されます。メディア管理でアップロードした画像は、ファイル名を指定するだけで利用できます。また、独自タグの {{IMAGE:ファイル名}} の形でも同様に利用できます。メディア管理で管理している音声や映像ファイルは、 {{AUDIO:ファイル名}} {{VIDEO:ファイル名}} で利用することができます。

Markdown:![画像の説明](filename)
HTML:<img src="画像のURL" alt="画像の説明">

独自タグ:{{IMAGE:ファイル名}}
HTML:<img src="画像のURL">

自動的に付与される属性

media ディレクトリにある画像を参照した場合、出力される <img> タグには表示速度のための属性が自動的に付きます。書き方を変える必要はありません。

• width / height — 画像本来の縦横のピクセル数。ブラウザが読み込み前に表示場所を確保できるため、画像が表示された瞬間にレイアウトがずれる現象がなくなります。
• fetchpriority="high" — そのページで最初に現れる大きな画像に付きます。ページの第一印象を決める画像を優先的に読み込ませるためです。
• loading="lazy" decoding="async" — 2枚目以降の大きな画像に付きます。画面に近づくまで読み込みを遅らせます。

縦横どちらも 200px 未満の小さな画像（ロゴ、アイコン、区切り線など）には width / height だけが付き、読み込みの指示は付きません。数KBの画像を遅延させても効果がなく、かえって表示が遅れるためです。

svg と外部URLの画像、および media ディレクトリに存在しない画像には何も付きません。ラッパーやコンポーネントに直接書いた <img> タグも、書いた内容がそのまま出力されます。

独自タグ:{{AUDIO:ファイル名}}
HTML:<audio src="音声のURL" controls></audio>

独自タグ:{{VIDEO:ファイル名}}
HTML:<video src="映像のURL" controls></video>

テーブルの表示

テーブルは、セルを | で区切って表示します。 |---| の行を入れることがテーブルとして必須です。1行目が見出し行 <th> 、3行目以降がデータ行 <td> となります。|:---|:---:|---:| のようにコロンを入れることで、表示位置を指定できます。

| 指定なし | 左寄せ | 中央 | 右寄せ |
|---|:---|:---:|---:|
| A | B | C | D |

クラス・IDの指定（Markdown独自拡張）

Markdownの行末に {.className} {#idName} を追加すると、その行のブロック要素にCSSの class や id を指定できます。

Markdown:## 見出し{.highlight}
HTML:<h2 class="highlight">見出し</h2>

Markdown:段落テキスト{.note #intro}
HTML:<p class="note" id="intro">段落テキスト</p>

インラインのテキストに対しては [text]{.className} の記法でクラス・IDを付与した <span> を出力できます。複数クラスやIDとの組み合わせも可能です。

Markdown:[赤いテキスト]{.red}
HTML:<span class="red">赤いテキスト</span>

Markdown:[**太字**で強調]{.highlight .bold}
HTML:<span class="highlight bold"><strong>太字</strong>で強調</span>

Markdown:[アンカー]{#my-id .note}
HTML:<span id="my-id" class="note">アンカー</span>

入れ子のスパン（アイコン付きボタンなど）（Markdown独自拡張）

[text]{.className} は入れ子にできます。内側の [...]{...} から順に処理され、外側のスパンがそれを包みます。三重以上の入れ子も可能です。

Markdown:[[save]{.material-symbols-outlined}保存]{.m-btn .m-btn-blue}
HTML:<span class="m-btn m-btn-blue"><span class="material-symbols-outlined">save</span>保存</span>

Material Symbolsなどのアイコンフォントのアイコンを、ボタン風スパンやバッジの中に埋め込む場合に便利です。なお、[...]{...} の内容に、対応する {...} を持たない裸の [ を含めることはできません（入れ子のブラケットはスパンとして解釈されるため）。

これらの記法はmikanBox独自のMarkdown拡張です。他のMarkdownレンダラー（GitHub等）では動作しません。

コンポーネント（独自タグ）

タグの利用

ページの本文・CSS、コンポーネントの本文・CSSのなかには、 {{TITLE}} などの用意されたタグを使用できます。利用可能なタグは、ページ編集画面・デザイン編集画面の下部にガイドがあります。

コンポーネントの利用

デザイン管理で作成したコンポーネントは、 {{COMPONENT:ID}} の形で、ページや他のコンポーネントに埋め込むことができます。

画像・音声・映像

画像・音声・映像は、 {{IMAGE:ファイル名}} {{AUDIO:ファイル名}} {{VIDEO:ファイル名}} の形で埋め込むことができます。

{{IMAGE:ファイル名}} → <img src="media/ファイル名">
{{AUDIO:ファイル名}} → <audio src="media/ファイル名" controls></audio>
{{VIDEO:ファイル名}} → <video src="media/ファイル名" controls></video>

ナビゲーション

リンクの一覧は {{NAV_LINKS:カテゴリ}} はリスト形式 <li> で出力されます。

画像付きのカードなどで出力したい場合は、 {{NAV_CARDS:カテゴリ:コンポーネントID}} で出力できます。カードのデザインは、コンポーネントで定義できます。コンポーネントIDを省略すると、標準的なデザイン（_nav_cardコンポーネント）で出力されます。

リストやカードの順番はページの「表示順」で指定できます。表示順が0より小さい場合は、表示されません。

どちらも、カテゴリを「all」にすると全ページのリスト、未設定にするとカテゴリのないページのリストが出力されます。ページのカテゴリは複数設定できるので、カテゴリを適切に設定することで、多様な形でのナビゲーションを設定することができます。

他のページの埋め込み

他のページの内容は、 {{POST_MD:ID}} の形で埋め込むことができます。AIで作成した複雑なページのなかの一部だけ（お知らせなど）を、簡単に編集できるようにするには、Markdownで作ったページを埋め込むようにすると便利です。埋め込まれる側のページは「下書き」にしておくことで、単独では見えない設定にすることもできます。

他のサイトのMarkdown文書の埋め込み

GitHubなど、他のサイトに設置したMarkdown文書を {{EXT_MD:url}} の形で埋め込むことができます。GitHub上で直接編集できるのはもちろん、AIエージェントにGitHub上のファイルを書き換えてもらうだけでサイトを更新できる「AIフレンドリー」な運用が可能です。

ページコンポーネント

ページ全体をレイアウトするコンポーネントは、本文を出力する {{CONTENT}} を挿入してください。CSSの挿入位置を指定する場合は を配置します。省略時は </head> 直前（閉じタグがなければHTML先頭）へ自動挿入され、複数ある場合は最初の1つにだけ出力され、残りは取り除かれます。基本的な構成は、初期コンポーネントの _layout を参照してください。

利用可能なタグ一覧

※ 今年の年号（Copyright用
など）を表示したい場合は、JavaScriptでの記述を推奨します（例: <script>document.write(new Date().getFullYear())</script>）。これにより、サーバー側の処理を介さず常に最新の年号を表示できます。

初期コンポーネント一覧

インストール時に同梱されているコンポーネントの一覧です。デザイ ン管理画面で確認・編集できます。キーワード検索に対応しないflat版では、_search_box・_search_result_item と検索結果ページを同梱しません。

データの埋め込み、読み込み、API

データの形式

以下の3種類の形式の情報を扱うことができます。

• Markdown: サイト内部、あるいは外部（GitHub等）のMarkdownデータ
• Data: WordPressの拡張フィールドのような、key-value形式の個別データ
• DataBase: {{DATAROW}} を用いたテーブル形式のデータ

Markdownの読み込み

他のページをMarkdownとして読み込める

コンポーネントだけでなく、他のページ自体もMarkdownとして読み込むことができます。複雑なページを直接編集するのではなく、更新用のシンプルなページを更新するだけで、反映させられます。

他のサイトのページをMarkdownとして読み込める

GitHubなど、他のサイトのページをMarkdownとして読み込むことで、サイトに直接触らなくても更新できます。もちろん、セキュリティ上、JavaScriptは動かないようにしています。

GitHubのページをMarkdownとして出力

GitHubのmdファイルのページは以下のようにURLを変えて、Rawデータにすることで読み込むことができます。

変換前: https://github.com/yoshihik0/testData/blob/main/md-test.md

変換後: https://raw.githubusercontent.com/yoshihik0/testData/main/md-test.md

変換ルール

github.com → raw.githubusercontent.com
/blob/ → /（消す）

読み込み：
{{EXT_MD:https://raw.githubusercontent.com/yoshihik0/testData/main/md-test.md}}

GitHub以外では：

Dropbox: ?dl=1 に変える
Google Docs: 公開設定して /export?format=txt

ページへのデータの埋め込みと利用

{{DATA:key}}データ{{/DATA}}と書くだけで、WordPressの拡張フィールドのように、ページに情報を埋め込んで、ページ内や他のページから利用できます。キー（key）は、半角英数字と「_」を使うことができます。しかも{{DATA:key:GHOST}}データ{{/DATA}}のように「:GHOST」を付け加えると、ページ内では表示されなくなります。

ページ内からの利用：{{POST_MD::key}}
他のページからの利用：{{POST_MD:pageID:key}}

他のサイトでのデータの埋め込みと利用

{{DATA:key}}データ{{/DATA}}の形式は、GitHubなど、他のサイトのページからも読み込めます。サイトに直接触らなくても更新できるので、AIと相性のよいGitHubを利用すれば、自動運用もしやすいです。

他のサイトからのデータの利用：{{EXT_MD:url:key}}

DB Less DB：ページにデータベースを埋め込める

{{DATAROW:rowID}}{{DATA:key}}データ{{/DATA}}{{/DATAROW}}と書くだけで、表形式のデータを埋め込んで、ページ内や他のページから利用できます。データベースを使っていないのに、ページ自体がデータベースになれます。

ページ内のテーブル系形式のデータを表示：{{POST_MD::#rowID:key}}
IDページのテーブル系形式のデータを表示：{{POST_MD:pageID#rowID:key}}

他のサイトのデータベースも読み込める

{{DATAROW:rowID}}{{DATA:key}}データ{{/DATA}}{{/DATAROW}}の形式は、GitHubなど、他のサイトのページからも読み込める。

外部ページのテーブル系：{{EXT_MD:url#rowID:key}}

CSVデータを変換

サイト画面の「CSVインポート」で、エクセルなどのCSVデータを、{{DATAROW}}の形式に変換できます。大きめなデータを扱うにも、手間はいりません。

エクセルから書き出したCSV形式のファイルを選択し、

content_copy 変換してコピー

をクリックして、データをコピーします。ページ内の本文にペーストして利用してください。

1行目をフィールド名として読み込み、各行を {{DATAROW:連番}} ブロックに変換してクリップボードにコピーします。コピー後、ページ編集の本文に貼り付けて保存してください。

ヘッドレスCMSにもなる

{{DATAROW}}を埋め込んだページを、公開設定「DB」で公開することで、外部からAPIで読み取ることができるようになります。

https://yoursite.com/api/pageID

例：https://yoshihiko.com/mikanbox/demo/api/sample-DB

さまざまな情報のカードが作れる

これらの情報は、カード形式の表示（レコードの一覧表示）のなかでも利用できるので、商品情報一覧なども作成できます。

ポッドキャスト配信

音声を張り込んだページを作成し、カテゴリを「podcast」に設定すると、「podcast」カテゴリのページのみのRSSが、以下のURLで出力され、ポッドキャストを配信できます。

https://yoursite.com/podcast.xml

おもに、以下の情報を埋め込みます。AUDIO_FILEは必須です。

{{DATA:AUDIO_FILE:GHOST}}episode01.mp3{{/DATA}}
{{DATA:DURATION:GHOST}}25:30{{/DATA}}
{{DATA:FILE_SIZE:GHOST}}24500000{{/DATA}}

ポッドキャストのページに可能なデータ

{{DATA:AUDIO_FILE:GHOST}}episode01.mp3{{/DATA}} ← 必須
{{DATA:DURATION:GHOST}}25:30{{/DATA}}
{{DATA:FILE_SIZE:GHOST}}24500000{{/DATA}}
{{DATA:EPISODE_NUM:GHOST}}1{{/DATA}}
{{DATA:SEASON:GHOST}}1{{/DATA}}
{{DATA:SUBTITLE:GHOST}}今回のテーマは...{{/DATA}}
{{DATA:EPISODE_IMAGE:GHOST}}ep01-cover.jpg{{/DATA}}
{{DATA:EPISODE_TYPE:GHOST}}full{{/DATA}}
{{DATA:EXPLICIT:GHOST}}false{{/DATA}}

タイトル{{DATA:TITLE}}と概要{{DATA:DESCRIPTION}}はページの設定から自動で取得します。

利用可能なデータはサービスによって異なります。

ポッドキャスト配信の手順

1. 🍊mikanBoxでポッドキャストエピソードページを作る（カテゴリ「podcast」）
2. https://yoursite.com/podcast.xml が自動で生成される
3. そのURLを各プラットフォームに登録する

一度登録すれば、あとは新しいエピソードページを追加するたびに自動で各プラットフォームが podcast.xml を取りに来て更新されます。

音声ファイルは🍊mikanBoxのメディアにアップロードしておくだけでOKです。

サイトマップ・RSS・API

これらのURLは、基本的にアクセスのたびにPHPがその場で最新の内容を生成します（動的）。ただし、静的サイト生成 (SSG)の出力先ディレクトリをサイトのルートと同じ場所にしている場合は、静的ビルドのたびにこれらも実ファイルとして書き出され、以降はビルド時点の内容のまま（次のビルドまで更新されない）静的ファイルとして配信されます。

サイトマップ

以下のURLでサイトマップが出力されます。

https://yoursite.com/sitemap.xml

例：https://yoshihiko.com/mikanbox/demo/sitemap.xml

RSS

以下のURLでRSSフィードが出力されます。

https://yoursite.com/rss.xml

例：https://yoshihiko.com/mikanbox/demo/rss.xml

Podcast RSS

音声を張り込んで、カテゴリを「podcast」に設定すると、「podcast」カテゴリのページのみのRSSが、以下のURLで出力され、ポッドキャストを配信できます。

https://yoursite.com/podcast.xml

例：https://yoshihiko.com/mikanbox/demo/podcast.xml

API

{{DATAROW}}を埋め込んだページを、公開設定「DB」で公開することで、外部からAPIで読み取ることができるようになります。

https://yoursite.com/api/pageID

例：https://yoshihiko.com/mikanbox/demo/api/sample-DB

AIで作ったデザインをそのまま公開する方法

ページ全体をAIで作る場合のプロンプト

CSS・JSも含めて1つのHTMLファイルとして出力して。画像は media/ファイル名 で

デザインを作るプロンプトに以上の情報を加えてください。

ページ全体をAIで作った場合の利用法

ページを生成したら、以下の手順で配置します。

1. 「ページ編集」画面で、デザインコンポーネントに「なし（本文のHTMLをそのまま使用）」を選択します。
2. 生成したHTMLのすべての内容を「本文」にペーストして保存してください。

複数ページで共通部分を作りたい場合

共通部分（ヘッダー、フッター、<head>内など）を切り分けて管理できます。

• _header、_footer、_global_head などに切り分けて登録してください。
• 「デザインコンポーネント」で _layout を選ぶと、これらが自動的に機能します。
• 各ページのSEO情報（タイトル・概要・OGP画像など）を反映させるには、コンポーネント内に {{COMPONENT:_global_head}} を入れてください。
• サイト共通や各ページで管理しているCSSは自動挿入されます。挿入位置を指定したい場合は を配置してください。

お知らせ

本プログラムの制作者は、本プログラムを基本としたCMSの設計・UIデザイン・構築・運用等をお受けすることができます。
また、それ以外でも、UIデザイン・情報設計・DX推進・AI活用・社内広報・デザイン教育・コンテンツ制作などの分野でお困りのことがあれば、お気軽にご相談ください。

著書：『デザインの教室』『デザインの授業』『フラットデザインの基本ルール』

https://yoshihiko.com

ライセンス

MIT License

Copyright (c) 2026 yoshihiko.com