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

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

コンセプト・特長

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

設計方針

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

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

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

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

柔軟な設計

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

AIフレンドリー

公式デモは、v2.16.9で固定したflatの専用サンプル環境です。製品本体（v2.16.10以降）には、デモ用の機能はありません。デモでは、MCP設定欄は操作場所を確認するため表示しますが、キーは無効なダミー値です。発行・再発行・有効化は実行されず、管理MCPのHTTP・stdio接続も利用できません。システム更新と復元のボタンは表示しますが、ログインした管理者が押しても実行されません。実データや本番の認証情報をデモへ持ち込まないでください。

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

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

初期設定・配布について

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

動作要件

最低動作要件はPHP 8.0以上です。新規導入やインターネット公開には、サポート中のPHP 8.4／8.5の最新修正版を使用してください。SQLite版はこれに加えて、SQLite3拡張が有効である必要があります（多くのレンタルサーバーで標準有効です）。

Webサーバーは、.htaccess が有効なApacheを前提にしています。データフォルダなどをブラウザから直接開けなくする設定を .htaccess で行うためです。.htaccess が使えない環境（Nginxなど）は、動作の対象外です。

インストール

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 と入力し、バージョンを確認します。新規導入にはサポート中のPHP 8.4／8.5の最新修正版を使用してください。
  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が書いた内容を後から開いて確認できます。

ローカルで使うなら、flat版をおすすめします。コンテンツがJSONファイルなので、AIが直接読み書きでき、フォルダごとコピーしてバックアップするのも簡単です。必要なPHP拡張も少なくて済みます。

管理MCPは、キーなしでローカルのstdio接続もできます。stdioはflat版でもSQLite版でも使え、AIツールが php /path/to/site/mikanBox/mcp.php を起動して使います。Claude Codeの .mcp.json なら次のように書きます。

{
  "mcpServers": {
    "mikanbox-local": {
      "command": "php",
      "args": ["/path/to/site/mikanBox/mcp.php"]
    }
  }
}

/path/to/site は、実際のサイトのフォルダに置き換えてください。この接続も、設定の「MCP を有効にする」に従います。delete_page のような削除系のツールは、AIツール側で自動承認にせず、実行のたびに確認することをおすすめします。

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

旧SQLite版が管理フォルダの import/ に残した取込データは、更新後のアクセス時に非公開データ領域の private-import/ へ移します。認証情報を含む旧退避データがあった場合はMCPキーを無効化するため、管理画面から発行し直してください。Webサーバーにはデータ領域と管理フォルダの import/ 全体を配信しない設定が必要です。

初回設定とログイン

flat版では、最初に mikanBox/admin.php を開いた人が、管理用パスワード（7文字以上）を設定します。ハッシュ値（一方向に変換した値）は mikanData/settings.json に保存されます。パスワード変更後は他のブラウザーのログインが失効します。2.16.6への更新時も一度ログインし直してください。

最初のパスワードを設定する

flat版のみ

サーバーへ設置する場合は、他の人に先に設定されないよう、初期設定トークンが必要です（v2.16.8以降）。

  1. ランダムな文字列（20文字以上）を作ります。1度しか使わないので、設定が終わるまで手元に控えておけば十分です。
  2. setup-token フォルダの中の setup-token.txt を開き、説明の下に、その文字列を1行だけ書きます。
  3. mikanBox フォルダ、index.php、setup-token フォルダをアップロードします。
  4. mikanBox/admin.php を開き、トークンとパスワードを入力して設定します。使ったトークンは setup-token.txt から消えます。

setup-token.txt にトークンが書かれていない、20文字より短い、または同じ文字ばかりのときは、設定画面は表示されません。トークンが必要なのは、初めてパスワードを設定するときだけです。設定済みのサイトでは不要です。

自分のパソコン上で、PHPの簡易サーバー（php -S localhost:8000、「ローカルで動かす」参照）を使い、同じパソコンから localhost で開く場合は、トークンは不要で、パスワードだけで設定できます。免除されるのはこの場合に限ります。ApacheやnginxなどのWebサーバー、リバースプロキシ、外部公開用のトンネルを通す場合は、自分のパソコン上であってもトークンが必要です。

SQLite版（v2.9.0以降）にパスワードはありません。管理画面に入れるのは、登録した端末（ブラウザ）だけです。端末の鍵（乱数のトークン）はそのブラウザのCookieに保存され、サーバーにはそのハッシュ値だけを保存します。データベースが漏れても鍵は復元できず、パスワードの使い回しや漏えいも起こりません。管理画面のURLが推測されても、鍵を持たない人はログイン画面までしか進めません。

最初の端末を登録する

SQLite版のみ

  1. ランダムな文字列（20文字以上）を作ります。控えを手元に残してください。1度しか使わないので、長く覚えておく必要はありません。
  2. setup-token フォルダの中の setup-token.txt を開き、説明の下に、その文字列を1行だけ書きます。
  3. mikanBox フォルダ、index.php、setup-token フォルダをアップロードします。
  4. mikanBox/admin.php を開き、控えたトークン、ユーザー名、表示名、この端末の名前（例：仕事用PC）を入力して「この端末を登録」を押します。
  5. 登録に成功すると、このブラウザに端末の鍵が保存され、そのまま管理画面に入ります。使ったトークンは二度と使えません。

setup-token.txt にトークンが書かれていない、20文字より短い、または同じ文字ばかりのときは、登録画面は表示されません。「インストール方法が変更になりました。こちらのページをご覧ください。」という案内だけが表示されます。誰でも先に開けば管理者になれる、ということはありません。PHPの簡易サーバー（php -S localhost:8000）を使い、同じパソコンから localhost で開く場合は、最初の端末の登録にトークンは不要です。ユーザー名と表示名を入力して登録します（端末の名前を空欄にすると「この端末」になります）。ApacheやnginxなどのWebサーバー、リバースプロキシ、外部公開用のトンネルを通す場合は、自分のパソコン上であってもトークンが必要です。すべての端末を失ったときの復旧は、ローカルでもトークンが必要です。

Cookieを消したときや、別のブラウザ・別のパソコンで入るときは、その端末は未登録になります。次の手順で追加してください。

端末を追加する

SQLite版のみ

登録済みの端末で、サイト →「端末とユーザー」→「端末を追加する」→「コードを出す」を押すと、追加用のコードが画面の上部に表示されます。新しい端末で管理画面を開き、コードと端末の名前を入力します。コードは10文字で、3時間有効、1回だけ使えます。人に知られないように扱ってください。コードを10回間違えて入力すると、同じ接続元（IPアドレス）からは15分間入力できません。

ほかの人を編集者として招くときは、同じ場所の「ほかの人を招く」で、招待のコードを出して渡します。ユーザーIDと表示名は、招待された人が、最初に入るときに自分で決めます。追加用のコードで入った端末は、コードを出した人と同じユーザーとして登録されます。

すべての端末を失ったとき（復旧）

SQLite版のみ

  1. 新しいトークンを作り、setup-token フォルダの setup-token.txt に書いて、アップロードします。前に使った値は使えません。
  2. ログイン画面の「復旧（すべての端末を失った場合）」を開き、トークン、既存のユーザー名、端末の名前を入力します。

復旧すると、登録済みの端末はすべて止まり、未使用のコード、編集ロック、MCP APIキーが消えます。MCP APIキーは「MCP APIキー」で作り直してください。

2.8.x から更新するとき

SQLite版のみ

v2.9.0へ更新すると、パスワードと秘密の質問の回答は削除され、パスワードではログインできなくなります。ユーザー名と表示名は残ります。MCP APIキーは変わりません。

複数サイトのログイン

v2.8.6から、同じドメインに複数のmikanBoxを設置しても、ログイン状態・ログアウト・CSRFトークンを設置ごとに分離します。flat版とSQLite版を混在させても、別サイトへのログインは引き継ぎません。サーバー上の設置ディレクトリを移動した場合も再ログインが必要です。同じ実ディレクトリを別URLで公開する場合は同じ設置として扱います。

v2.21.0から、ログインは操作しないまま24時間たつまで保たれます。ブラウザを閉じるとログアウトします。ログインの記録は、データフォルダの sessions/ に保存します（Webからは読めない設定にし、バックアップには含めません）。保存先が変わるため、v2.21.0へ更新したあと一度だけログインし直しが必要です（SQLite版は、登録済みの端末なら自動的に入れます）。v2.21.1から、ログインする前の画面を開いただけでは、ログインの記録は作られません。作られるのは、ログインに成功したときだけです。ログインする前に使う画面のうち、flat版の初回のパスワード設定と、SQLite版の端末の登録・復旧・追加用のコードの入力・招待を受ける画面は、開いてから2時間を過ぎると送信できないので、読み込み直してください。ログインした後の管理画面（ページやデザインの編集、サイトの設定、メディアなど）には、この期限はありません。

編集中にログインの期限が切れていると、保存などを押したときに「ログインの有効期限が切れました」と表示され、送信は止まります。入力した内容は画面に残ります。別のタブで管理画面にログインしてから、元の画面でもう一度保存してください。以前のように、ログイン画面に切り替わって入力が失われたり、実行されていないのに完了と表示されたりすることはありません。

SQLite版では、端末の鍵（Cookie）の名前も設置ごとに異なり、鍵のハッシュ値はその設置のデータベースにしかありません。ほかのサイトの鍵では入れません。

パスワードの保存 flat版のみ

ブラウザに保存したパスワードと、サーバーのログイン状態は別です。保存済みの値をブラウザで変更しただけでは、サーバーのパスワードは変わりません。管理画面でパスワード変更を保存した場合に、そのサイトのパスワードが変わります。現在のパスワードを確認し、新しいパスワードは4文字以上必要です。

初回設定・ログイン・パスワード変更には、管理画面のURLパスを使った「保存用サイトID」（例：/shiro/mikanBox/admin.php）を表示します。入力不要の識別名で、パスワードマネージャーがサイトごとの保存項目を区別するための手がかりです。保存・更新の確認では、このIDが対象サイトと一致していることを確認してください。URLを移動した場合は保存項目の見直しが必要です。

フォームはユーザー名・現在のパスワード・新しいパスワードの用途をブラウザに伝えますが、保存先や上書きの判断はブラウザ／パスワードマネージャー側で行われます。アプリから保存項目の完全分離や既存項目の自動移行は保証できません。

この分離は意図しないログイン共有を防ぐものです。同一オリジン上の別アプリやスクリプトからの完全な隔離を提供するものではありません。

他者への配布方法

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

セキュリティ

admin.php 以外のファイル（ data フォルダ内のJSONファイルなど）は、ブラウザから直接アクセスできないようになっています（ .htaccess による制限）。管理フォルダ内のプログラム（lib・views・lang）も、ブラウザから直接開けません。

全体像

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

descriptionページ (Pages)

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

saveサイト (Site)

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

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 新規作成

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

カテゴリでの絞り込み

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

カテゴリ:

「_」で始まるカテゴリ（_nav、_sample など）は、サイトを組み立てるための構造用の印です。一覧では通常のカテゴリのあとに薄く表示されます。詳しくはページ編集のカテゴリを参照してください。

キーワード検索 SQLite版のみ

検索ボックス

見出しの行の右にある入力欄で、タイトル・本文などを検索できます。入力すると一覧を更新します。入力欄の × で検索条件をクリアできます。

ページ一覧

編集・プレビュー

見出しの「AIに質問」の右のセレクトで、出力形式（HTML・HTML + Markdown・Markdown・データ・mikanBox DB）で一覧を絞り込めます（デザイン画面の種類の絞り込みと同じ位置・同じ見た目です）。カテゴリの絞り込みや検索と組み合わせられ、ページ編集を開いて閉じても保たれます。

出力形式のセレクトの右に、並び順のセレクトがあります（表示順・更新が新しい順・更新が古い順・ID順・タイトル順）。既定の「表示順」は、公開側の一覧（{{NAV_LINKS}}・{{NAV_CARDS}}）と同じ並びで、表示順の数値の小さい順、同じなら更新日の新しい順、それも同じならIDの順です（SQLite版では承認待ちのページを先頭に表示します）。ほかの並びを選んでも、index は常に先頭です。「更新」の日付は、ページの作成時に設定され、非公開から公開に切り替えた時点で更新されます（公開後に編集しても変わりません）。選んだ並び順はカテゴリ・出力形式・検索・ページ送りと同じく保たれ、並べ替えはページ送りの前に行うので、2ページ目以降もその順に続きます。

ページ編集のプレビューと、この地球儀の役割は次のとおりです。

公開設定ページ編集のプレビュー（管理画面で表示）ページ一覧の地球儀（実サイトのアドレス）
下書き編集中の内容なし（グレーで押せない）
承認待ち（SQLite版）編集中の内容なし（グレーで押せない。確認用の共有URLは編集画面に表示）
公開(動的)編集中の内容（保存前に確かめられる）実サイト（保存した内容がそのまま出る）
公開(静的)・ビルド前編集中の内容実サイト（ビルドするまでは前の内容、または未作成）
公開(静的)・ビルド後編集中の内容実サイト（保存した内容と同じ）

公開設定

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

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

ID

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

タイトル

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

更新

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

表示順

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

カテゴリ

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

出力形式のラベル

出力形式がHTML以外のページには、タイトルの横に小さなラベル（HTML + Markdownは +MD、Markdownは MD、データ形式は JSON・JS など）が付きます。地球儀のボタンは、公開中のページを実サイトのアドレスで開きます。ビジュアル編集のボタンは、HTMLを出さないページではグレーになり、押せません。

静的サイトビルドボタン

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

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

ページ編集

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

右上の [edit_square]{.material-symbols-outlined} ビジュアル編集]{.m-btn .m-btn-blue} ボタンで、そのページを[ビジュアル編集で開けます。

履歴 SQLite版のみ

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

更新日

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

タイトル

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

公開設定

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

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

確認用共有URL SQLite版のみ

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

mikanBox 2.9.5以降、このURLには7日間の有効期限があります。期限が過ぎたURLは開けなくなるので、この画面を開き直して新しいURLを確認し、渡し直してください。同じ日のうちは同じURLが表示されます。2.9.5より前に発行したURLは、更新後は使えません。確認用URLのページには、リファラを送らない・検索エンジンに載せない・キャッシュしない指定が付きます。

メモ

管理者だけが見られる非公開のメモ欄です。覚えておきたいことや引き継ぎ事項などを自由に入力できます。サイトや公開APIには表示されません。認証済みの管理MCPからは、AIも作業の参考として読めます。メモを読めることは、その内容を本文へ転記して公開する許可を意味しません。

ID

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

出力形式

ページの出力形式を、HTML / HTML + Markdown / Markdown / データ（JSON・XML・CSV・テキスト・JavaScript・CSS・mikanBox DB）から1つ選びます。既定はHTMLです。すぐ下に、実際に出るURL（例 https://example.com/news-list.json）が表示されます。選んだ形式で使わない欄は隠れます（Markdownではデザインコンポーネントとページ専用CSS・JS、データ形式ではさらにOGP画像・概要・キーワード）。公開URLがないときは、Markdownを含む形式は選べません。詳しくは出力形式を参照してください。

デザインコンポーネント

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

Markdown版の末尾コンポーネント

出力形式がHTML + Markdown・Markdownのときに表示されます。Markdown版の最後に付けるコンポーネントのIDを、付ける順にカンマ区切りで入力します。空欄なら何も付けません。デザインコンポーネント（ページコンポーネント）とAI指示は使えません。

タグを展開する

出力形式がデータ形式のときに表示されます。本文の {{ }} タグを展開するかどうかを切り替えます。JSON・XML・CSV・テキストは既定でオン、JavaScript・CSSは既定でオフです。値は形式に合わせてエスケープされます（データ形式）。

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

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

「_」で始まるカテゴリ（_nav、_sample、_temp など）は、サイトを組み立てるための構造用の印として扱います。実用的なカテゴリ（coffee など）と文字1つで区別でき、いくつでも付けられます。{{NAV_LINKS:_nav}} のような明示の指定には使えますが、@same の判定、{{CATEGORY}}、Markdown版の categories には使いません（{{CATEGORY:all}} には出ます）。「@」で始まるカテゴリ名は、@same などの特別な指定と区別するため予約されていて使えません。

表示順

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

サムネール・OGP画像

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

キーワード

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

ページ概要 (meta description)

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

本文

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

欄の見出しは出力形式に合わせて、「本文 (Markdown or HTML)」「本文 (Markdown)」「本文 (JSON)」のように変わります。データ形式では、本文がそのまま出力されます（データ形式）。

ページ専用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 プレビュー

編集中の内容を、保存せずに、新しいタブで表示します（ボタンの横に「編集中の内容を表示します（保存はされません）。」と表示します）。すべての出力形式・公開設定、新規ページでも使えます。公開(動的)のページは保存した瞬間に公開されるので、公開前に確かめるにはこのプレビューを使います。HTMLを出すページはページとして、Markdownだけのページ・データ形式・mikanBox DBは実際に出るテキストやJSONを、文字コードUTF-8で表示します。プレビューは管理画面と切り離した状態（スクリプトは動きますが、管理画面には触れません）で表示します。実サイトのアドレスで開くには、ページ一覧の地球儀を使います（ページ一覧の表）。

arrow_back 一覧へ戻る

ページ一覧へ戻ります（編集欄がその場で消え、一覧の先頭へ移動します）。カテゴリ・出力形式の絞り込み、並び順、検索、ページ送りはそのまま保たれます（ページ編集を開くときは、編集欄の先頭まで移動します）。未保存の内容は失われますのでご注意ください。

delete 削除

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

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

ビジュアル編集

ページを、実際の見た目のまま開いて、本文やページ専用CSSを、その場で直せる画面です。サイトのレイアウト・CSS・画像がそのまま表示されるので、仕上がりを見ながら、Markdownを書き換えられます。管理画面と同じログインが必要で、ログインしていないときは、管理画面のログインへ移ります。公開デモ（デモモード）のサイトでは使えません。

ビジュアル編集は、HTMLを出すページ（出力形式がHTML・HTML + Markdown）だけで使えます。Markdownだけのページとデータ形式のページでは、ボタンがグレーになり、押せません。ビジュアル編集の画面のページ選択にも出ません。

開き方

本文を直す（虫眼鏡で選んで、下の「本文」で直す）

本文の編集は、下から開く「本文」パネルひとつです。選んだ部分だけが入力欄に切り出されて出るので、直す場所に集中できます。直している間も、ページの表示は隠れず、入力するとすぐページに反映され、直した場所に枠が出ます。

本文全体・ページ専用CSS

元に戻す・やり直す

ページの切り替え・新規作成・複製

確かめる道具

安全のためのきまりと制限

更新したあとに

2.9.x 以前から更新するときは、更新のしくみ自体が新しくなるため、ビジュアル編集のファイルは、その更新では入りません。更新のあとに、サイト画面の「システム更新」で、[再インストール] を1回実行してください（FTPで上書きしても入ります）。ファイルが入ると、ページ一覧にビジュアル編集のボタンが出ます。

サイト

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

管理メモ

サイト上部に常時表示される運営用のメモ欄です。認証済みの管理MCPからAIも読めますが、公開ページ・公開API・公開ヘルプMCPには含まれません。引き継ぎ事項や作業メモなどを自由に入力できます。

save 保存

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

システム更新

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

更新対象はGitHubで正式公開されたリリースだけです。開発中のmainやリリースのないタグは対象にしません。実行時にも公開状態を確認し、取得するプログラムを固定します。確認できない場合は更新を中止します。更新と復元はサイトごとに一つずつ実行され、別の処理が実行中の場合は完了後にやり直してください。

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

更新時は、記事・設定・画像・データベース・静的出力には触れず、プログラムファイルだけを置き換えます。更新前のプログラムはサーバー上の保護領域へ1世代分保存され、更新に失敗した場合は自動復元を試みます。自動復元にも失敗した場合はエラーを表示し、保護領域の update-backups/.pending-* にバックアップを残します。削除せず、サーバー管理者が復元してください。更新後は、表示される [元に戻す] ボタンから直前のバージョンへ復元することもできます。

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

静的サイト生成 (SSG)

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

SSGのメリット

静的サイトの作成方法

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

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

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

出力先ディレクトリ

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

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

出力構成 / URL形式

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

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

URL形式が影響するのはHTMLだけです。Markdown版とデータ形式のページは、どちらの形式でも ID.md・ID.json のように ID.拡張子 で書き出します。Markdownだけのページは /ID.md でだけ読めます。.htaccess は書き出しません（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にも含めません。エラー応答であってコンテンツではないため、検索エンジンや読者に案内する対象ではないからです。これは静的・動的のどちらの生成でも同じです。

データ形式のページも、サイトマップ・RSSに含めません。Markdownだけのページは、/ID.md のURLで載せます。サイトマップは、1ページだけを書き出したときも、「公開(静的)」のすべてのページで作り直します。

言語

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

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

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）機能を使用します。

固定ヘッダーを設定できるクライアントでは、発行した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 を呼び、対象サイトを確認します。

ページの出力形式は、create_page・update_page の output_format（html / html_md / md / json / xml / csv / txt / js / css / db）、md_footer_comps（末尾コンポーネントのIDの配列）、expand_tags（データ形式でタグを展開するか。省略時は形式ごとの既定）で設定します。get_page・list_pages の結果にも output_format が入ります。update_page で公開済みのページを更新しても、更新日（updated_at）は変わりません。非公開から公開へ切り替えたときだけ現在時刻になります（2.17.0から管理画面と同じ動きです）。status は draft / public_dynamic / public_static です。2.17までの db を渡すと、output_format を db にして公開(動的)で保存します。

preview_page（保存せずに、公開設定に関係なく、出力形式どおりの結果を返します。id だけなら保存済みの内容、本文などの項目も渡せば、保存せずにその内容で描画した結果です。新しい id でも使えます。タグの展開結果の確認に使います）、get_site_info の version（mikanBoxのバージョン。前回の接続時と違うときは、ツール一覧と get_ai_context を読み直します）も追加しました。get_ai_context の制作ルール（documents）にも、出力形式の案内を指す項目（mikanbox-output-formats）が入ります。

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

接続URL

このサイトの管理用MCPのURLです。「コピー」で、そのままクライアントの設定に貼り付けられます。

APIキー

発行済みのAPIキーが読み取り専用の欄に表示されます。未発行のときは欄は出ず、「APIキーを生成」だけが表示されます。

MCPの有効・無効と最終使用日時（PHP版）

「MCP を有効にする」を外して保存すると、管理用MCPはキーを保持したまま停止します。HTTP接続は403を返し、ローカルstdio接続も次の要求から拒否します。処理中の要求を途中で取り消すものではありません。公開ヘルプMCPは利用できます。既存の接続は更新後も有効で、再び有効にすると同じキーで接続できます。漏洩したキーは停止だけでなく再生成してください。サーバーのファイルを直接編集する権限を持つツールまで制限する機能ではありません。

現在のキーについて、HTTPで認証に成功した最終使用日時をUTCで表示します。保存は最大1時間に1回で、無効なキーや公開ヘルプの利用では更新しません。キーを再生成すると記録なしに戻ります。キーを使わないローカルstdioの利用は含めません。

操作の記録（PHP版）

サイト画面の「最近の操作記録」に直近50件を表示します。MCPキーの発行・再発行・有効化・停止、ページの公開状態の変更、ログイン失敗を両PHP版で記録します。SQLite版では端末登録・停止、招待・端末追加コードの発行、ユーザー削除、復旧・アカウント初期化も記録します。プログラムを以前の版へ戻す操作も成功時に記録します。

記録するのは日時、操作、実行者、必要な対象ID、伏せたIPです。キー、トークン、コード、パスワード、本文、完全なIPは保存しません。IPv4は末尾を、IPv6は48ビット以降を伏せます。約1 MBを上限に古い記録から削除します。記録できない場合は管理画面に通知しますが、成功した操作を失敗扱いにはしません。

ログとMCP状態はデータフォルダの security/ に保存します。events.jsonl.php はWebからの実行を拒否するPHPガード行の後にJSON Linesが続く形式です。Apacheのアクセス拒否とフロントコントローラーでもデータ領域を保護します。PHPを通さず静的ファイルを配信するサーバーでは、データフォルダ全体をWebから読ませない設定も必要です。データフォルダを含むバックアップには操作履歴も入るため、安全に保管してください。サーバーのファイルを書き換えられる人による改変を検出する監査証跡ではありません。

CSVインポート

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

PHP版はサイト画面、Cloud版はデータ移行・インポート画面にあります。

ファイルを選択

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

content_copy 変換してコピー

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

使い方のポイント

データ管理 SQLite版のみ

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

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

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

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

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

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

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

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

データ移行・インポートツールを、管理画面の上に重ねて開きます（同じ画面のまま）。

バックアップ 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版のみ

管理画面に入れる端末と、編集者のアカウントを管理する機能です。編集者ごとに端末を登録でき、編集履歴には編集者名が記録されます。パスワードはありません（「初回設定とログイン」を参照）。端末の管理（画面ロックや紛失時の対応）は利用者の責任です。なくした端末は、ほかの端末からここで止めてください。

ユーザーと端末

ユーザーごとに、そのユーザーの端末をまとめて表示します。ユーザー名と表示名、端末の名前、登録日時、最終利用、期限が分かります。自分の端末には「（この端末）」と表示されます。

端末を追加する

追加用のコードを出します。新しい端末で管理画面を開き、コードを入力してください。コードは3時間有効で、1回だけ使えます。コードは出した直後の画面にだけ表示され、あとから見ることはできません。

ほかの人を招く

招待のコードを出して、招待したい人に渡します。ユーザーIDと表示名は決めません。招待された人が、ログイン画面でコードと端末の名前を入力すると、ユーザーIDと表示名を決める画面が出ます（半角英数字・アンダースコア・ハイフンのみ）。決めて登録すると、そのユーザーが作られ、端末が登録されます。ほかの人が使っているユーザーIDは選べません。選べなかった場合でも、コードは使われずに残ります。

未使用のコード

発行済みでまだ使われていないコードの一覧です。「取り消す」で無効にできます。

使わない端末が切れるまで

使わない端末の有効期間を、30日・90日・180日から選びます。端末を使うたびに期間は延びます。期限が切れた端末は、コードで追加し直す必要があります。

すべての端末を失った場合： 「すべての端末を失ったとき（復旧）」の手順で、新しいトークンから登録し直します。

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

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

現在のパスワード

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

新しいパスワード

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

save 保存

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

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

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

SQLite版では、サイト設定の「データ移行・インポートツール」を押すと、管理画面の上に重ねて開きます（同じ画面のまま。閉じると管理画面へ戻ります）。admin.php?view=import を直接開くこともできます。以前の mikanBox/convert.php へのアクセスも、この画面へ移ります。データベースやメディアの現在の状態確認と、外部データの一括インポートを行えます。

現在の状態

SQLiteデータベース状態

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

メディアファイル状態

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

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

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

ZIP内で テーマ名/posts/ のように外側のフォルダに入っていても、posts/ または components/ がある階層を起点として扱い、外側のフォルダ名はIDに含めません。画面の「ZIP内のファイルの置き方」を開くと配置例を確認できます。Macが作成する __MACOSX や ._ の補助ファイルは取り込みません。

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

ZIPからはJSONだけを展開します（1ファイル10 MB、合計50 MB、最大10,000項目）。取り込みが終わったフォルダは mikanData/private-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は、初期設定で用意されているシステムコンポーネントです。これらを編集して使用することもできます。

' 🍊mikanBox 操作マニュアル - mikanBox公式サイト 'には、''タグ内の共通設定が記述されていて、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を補います。既存タグの重複を自動で削除する処理は行いません。

サイト設定の「共通の読み込み」→「計測ID」に、GoogleタグのID（G-…）またはタグマネージャーのコンテナID（GTM-…）を入力すると、公開ページへ計測タグを自動挿入します。IDの種類は先頭の文字で自動判別します。G-…はhead内にgtag.jsを、GTM-…はhead内のスクリプトに加えて、body開始直後にnoscriptも挿入します。空欄で無効になります。

サーバーサイドGTMやConsent Modeの初期化など、標準のタグでは足りない場合は、その下の「コードを直接入力する（上級者向け）」を開き、「head用コード」と、必要に応じて「body開始直後用コード」へ貼り付けます。コードは入力どおりに挿入され、{{...}}タグも展開しません。コードが入力されている間は計測IDより優先され、IDの欄は読み取り専用になります。

以前の「計測コンポーネント」で設定していた場合、設定画面を開くと、そのパーツのHTMLが「head用コード」に表示されます。そのまま保存すると新しい設定へ移行し、元のパーツは変更されません。パーツがコンポーネントタグ・JavaScript・CSSを含む場合は自動では移行せず、保存するまで従来どおりに動作します。

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

タイプ

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

タグ名

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

デザイン編集

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

コンポーネントID

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

メモ

管理者だけが見られる非公開のメモ欄です。サイトや公開APIには表示されません。認証済みの管理MCPからは、AIも作業の参考として読めます。メモを読めることは、その内容を本文へ転記して公開する許可を意味しません。

タイプ

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

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 ▼」の表示で、見出し行全体をクリックして開閉できます。

{{COMPONENT:Test}} を使うと、JS欄のコードもページのHTMLに出力されます。独立したJSファイルを読み込む場合は、メディアに置いて media/ファイル名.js を指定します。ページ内に同じコンポーネントを複数配置しても、JavaScriptの初期実行は一度だけです。クリックなどのイベント処理は、その都度実行されます。また、CSSのスコープ設定はJavaScriptには適用されません。JS欄のコードは、独自タグを展開せずそのまま使います。例えば同じ部品のボタンを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が相対パスで別ファイルを参照する場合は、その配置も利用者側で調整します。

SVGは信頼できる管理者が選んで配置する、コードを含み得るファイルです。アップロード時の処理は完全な無害化を保証しません。提供元と内容を確認してください。

アップロードはコード編集と同じく、信頼できる管理者・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 アップロード

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

アップロード設定...

「アップロード設定...」をクリックすると展開します。対応形式と、JS・CSSの条件（UTF-8、10 MB以下。信頼できるファイルだけをアップロードすること）もここに表示します。ここでの選択はアップロード時にだけ適用され、ブラウザに記憶されるため次回以降も同じ設定が使われます。ドラッグ＆ドロップでアップロードした場合も同じ設定が適用されます。

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

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

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

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

対応形式・制限

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

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

カテゴリでの絞り込み

「ページ」画面でカテゴリを絞り込んだ状態からメディア画面に遷移すると、そのカテゴリの接頭辞が付いたファイル名（例: 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 を押すと、メディアファイルの名前を変更できます。既存のページ・コンポーネント内でそのファイル名が使われている場合は確認ダイアログが表示され、以下から選べます。

PHP版ではサイト共通OGPで使っている場合も確認されます。「リンクを更新」はページ本文・CSS・JavaScript・ページOGP、コンポーネントのHTML・CSS・JavaScript、サイト共通OGPの該当するファイル名を更新し、似た別のファイル名やメモ・過去の版は変更しません。SQLite版では更新対象のページやコンポーネントが編集中の場合、操作を中止します。静的ページへの反映には再ビルドが必要です。

メディアの操作

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

アップロード設定は「アップロード設定▼」で開閉します。 アップロード、名前変更、リサイズ、WebP変換、削除の後も、可能な範囲でメディア一覧のスクロール位置を保ちます。各ファイルの操作は「リサイズ▼」「名前変更▼」「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>

コードブロック

コードは、行頭にバッククォートを3つ以上、またはチルダ（~）を3つ以上だけ書いた行で囲みます。閉じる行には、開く行と同じ文字を、同じ数以上並べます。囲まれた中は、Markdown、HTML、{{タグ}} のどれも変換されず、書いたとおりに表示されます。HTMLでは <pre><code>…</code></pre> になります。

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

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> タグには表示速度のための属性が自動的に付きます。書き方を変える必要はありません。

縦横どちらも 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 |

指定なし左寄せ中央右寄せ
ABCD

クラス・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」にすると全ページのリスト、未設定にするとカテゴリのないページのリストが出力されます。ページのカテゴリは複数設定できるので、カテゴリを適切に設定することで、多様な形でのナビゲーションを設定することができます。

一覧のオプション

位置の引数（カテゴリ、カードのコンポーネントID）のあとに、名前=値 を : でつないで指定できます。

{{NAV_LINKS:news:limit=5}}
{{NAV_CARDS:news:_nav_card:limit=5:sort=new}}
{{NAV_CARDS:news:sort=old}}
オプション意味
sort=new更新日の新しい順（同じ日時なら表示順）
sort=old更新日の古い順（同じ日時なら表示順）
limit=N先頭からN件まで（@same ではカテゴリごと）
sep=文字列項目と項目のあいだに入れる区切り（主にデータ形式でJSONの配列を作るため）。値は次の : か }} までをそのまま使い、\n（改行）と \t（タブ）だけを特別に解釈します

更新日は、作成時に設定され、非公開から公開に切り替えた時点で更新され、公開後の編集では変わりません。実質的に公開日なので sort=new に使えます。オフセットや自動のページャーはありません。全件の一覧ページを作ってそこへリンクするか、目録データとJavaScriptで作ります。

関連ページ @same

{{NAV_LINKS:@same}}・{{NAV_CARDS:@same:コンポーネントID}} は、表示中のページと「_」以外のカテゴリが1つ以上重なるページ（自分自身を除く）を出します。表示中のページの「_」以外のカテゴリが、0個なら何も出さず、1個なら平らなリスト、2個以上ならカテゴリごとにまとめます。両方に属するページは両方に出ます（関連の理由が見えるためです）。並び順は表示順で、sort があればそれに従います。

まとめたときのHTMLは、NAV_LINKS が入れ子の <ul>（li.nav-group の中に span.nav-group-label とリンクの ul）、NAV_CARDS がカテゴリごとの div.nav-group（div.nav-group-label とカード群）です。Markdown版では入れ子のリストになります。

カテゴリの表示 {{CATEGORY}}

{{CATEGORY}} は、ページのカテゴリを「_」で始まるものを除いて書いた順に出します。HTMLでは1つずつ <span class="category">coffee</span> で囲み、Markdown版とデータ形式ではカンマ区切り（coffee, tokyo）です。{{CATEGORY:all}} は「_」で始まるものも含めます。カード用コンポーネントの中では、そのカードのページのカテゴリを出します。

他のページの埋め込み

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

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

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

PHP版の設定： サイト設定の「外部Markdownの読み込みを許可」で切り替えます。新規サイトはOFFです。設定のない既存サイトは、保存済みのページ・部品に EXT_MD があれば利用を引き継ぎます。OFFでは表示・プレビュー・ビルドのいずれも外部通信しません。ONではPHPのcURL拡張が必要です。HTTP/HTTPSの公開アドレスだけを取得し、内部アドレス・リダイレクトは拒否します。文書の直接URLを使ってください。取得上限は1 MiB、通信時間は最大5秒です。取得できない場合、その部分は表示されません。DATA/DATAROWから取り出す値も文字として扱います。信頼できない値をJavaScript・CSS・URL属性のコードとして使わないでください。設定をOFFにしても、生成済みHTMLは再ビルドするまで変わりません。

Cloud版では使用できません。 EXT_MD は、外部のサーバーから文書を取得するタグです。Cloud版は取得しないため、タグの位置には何も表示されません。

ページコンポーネント

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

利用可能なタグ一覧

タグ説明
{{ TITLE }}ページタイトル
{{ FULL_TITLE }}ページタイトル - サイト名
{{ UPDATE_DATE }}ページ更新日（YYYY-MM-DD）
{{ UPDATE_DATE:JP }}ページ更新日（YYYY年MM月DD日）
{{ UPDATE_DATE:SLASH }}ページ更新日（YYYY/MM/DD）
{{ IS_NEW:N }}N日以内の更新なら「new」、それ以外は空欄
{{ DESCRIPTION }}ページ概要（空欄ならサイト共通説明）
{{ KEYWORDS }}ページのキーワード
{{ OGP_IMAGE }}ページサムネール・OGP画像URL
{{ PAGE_URL }}ページURL
{{ PAGE_URL:ID }}指定したページのURL（出力形式の拡張子付き。データ形式のページは ?v= 付き）。詳しく
{{ CATEGORY }}ページのカテゴリ（「_」で始まるものを除く）
{{ CATEGORY:all }}ページのすべてのカテゴリ
{{ SITE_URL }}サイトURL。Markdownのリンク先にも使えます（例：[詳細]({{SITE_URL}}/about)）
{{ SITE_NAME }}サイトのタイトル
{{ SITE_DESCRIPTION }}サイトの共通説明
{{ SITE_OGP_IMAGE }}サイトの共通OGP画像URL
{{ COMPONENT:ID }}コンポーネントを埋め込む
{{ IMAGE:ファイル名 }}静止画を表示
{{ AUDIO:ファイル名 }}音声モジュールを挿入
{{ VIDEO:ファイル名 }}動画を表示
{{ AI_QUESTION }}公開ページにmikanBoxのAI質問ボックスを表示
{{ AI_QUESTION:HelpセクションID }}指定したHelpセクションを初期コンテキストにしてAI質問ボックスを表示
{{ NAV_LINKS:カテゴリ }}指定したカテゴリのページをリンクとして表示
{{ NAV_LINKS:all }}すべてのページをリンクとして表示
{{ NAV_LINKS:未設定 }}カテゴリのないページをリンクとして表示
{{ NAV_CARDS:カテゴリ:コンポーネントID（省略可）}}指定したカテゴリのページをカード形式で表示
{{ NAV_CARDS:all:コンポーネントID（省略可）}}すべてのページをカード形式で表示
{{ NAV_CARDS:未設定:コンポーネントID（省略可）}}カテゴリのないページをカード形式で表示
{{ NAV_LINKS:カテゴリ:sort=new:limit=N }}オプション付きの一覧。sort=new・sort=old・limit=N・sep=文字列（NAV_CARDSも同じ）。詳しく
{{ NAV_LINKS:@same }}表示中のページと「_」以外のカテゴリが重なるページ（NAV_CARDSも同じ）
{{ POST_MD:ID }}指定したIDのページをMarkdownとして埋め込む
{{ EXT_MD:url }}指定したURLのMarkdownを埋め込む（Cloud版では使用不可）
{{DATA:key}}値{{/DATA}}データを定義（表示）。key（大文字小文字を区別しない）は半角英数字・アンダースコアのみ。値は日本語可。
{{DATA:key:GHOST}}値{{/DATA}}データ定義（非表示）。keyは半角英数字と「_」
{{DATAROW:rowID}} {{DATA:key}}値{{/DATA}} {{/DATAROW}}テーブル形式のデータ定義。key,rowIDは半角英数字と「_」
{{ POST_MD::key }}ページ内のデータを表示
{{ POST_MD::pageID:key }}IDページのデータを表示
{{ EXT_MD:url:key }}外部ページのデータを表示（Cloud版では使用不可）
{{ POST_MD::#rowID:key }}ページ内のテーブル形式のデータを表示
{{ POST_MD:pageID#rowID:key }}IDページのテーブル形式のデータを表示
{{ EXT_MD:url#rowID:key }}外部ページのテーブル形式のデータを表示（Cloud版では使用不可）
{{ CONTENT }}ページWrapper専用: 本文を挿入
{{ `HEAD_CSS `}}CSSを集約して挿入する任意の位置指定。最初の1つだけを使用し、残りは取り除きます。省略時は</head>直前（閉じタグがなければHTML先頭）へ自動挿入。初期設定では、_global_headコンポーネントにあらかじめ挿入されています。

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

初期コンポーネント一覧

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

IDタイプ役割・内容
_layoutページ標準的な共通レイアウト。{{COMPONENT:_global_head}} {{COMPONENT:_header}} {{CONTENT}} {{COMPONENT:_footer}} を組み合わせた基本構成です。通常のMarkdownページはこれを選択します。
_global_headパーツHTMLの<head>セクション内に挿入する共通タグ集。Google AnalyticsやWebフォントの読み込みなど、全ページ共通のheadタグをここに記述します。初期設定では、{{`HEAD_CSS`}}が配置されており、CSSの挿入位置を明示できます。CSSスコープ化は無効(グローバル)。
_headerパーツサイト共通のヘッダー。サイト名・ナビゲーションリンクを含む標準的なヘッダーコンポーネントです。ナビゲーションには {{NAV_LINKS:_nav}}（構造用カテゴリ _nav のページ）を使います。
_footerパーツサイト共通のフッター。コピーライト・フッターナビゲーション等を含む標準的なフッターコンポーネントです。
_nav_cardパーツカード型ナビゲーションでコンポーネントIDを省略した場合に使用される標準カードデザインです。サムネイル画像・タイトル・概要・日付を表示するカードを出力します。
_md_footerパーツMarkdown版の末尾コンポーネントのサンプル。{{NAV_LINKS:@same:limit=5}} で関連ページのリストを付けます。ページ編集の「Markdown版の末尾コンポーネント」で選んだときだけ使われます（既定にはしません）。
json_itemパーツJSONの目録の1件分のサンプル。{{NAV_CARDS:カテゴリ:json_item:sep=,}} で使います（目録とページ一覧）。
_ai_questionパーツ公開ページ用のAI質問ボックス。{{COMPONENT:_ai_question}} で配置し、質問、現在のページ、公式公開マニュアルを外部AIへ案内します。
_search_boxパーツ検索ボックスのデザイン。フォーム内に <input type="hidden" name="page" value="search"> が書かれているため、送信すると「search」ページ（_search_result_item を使って検索結果を表示するページ）に遷移する仕組みです。
_search_result_itemパーツ検索結果の１件ごとの表示デザイン。{{SEARCH_RESULTS:_search_result_item}} の形で検索結果ページに配置します。
DESIGN_sample.mdAI指示AIにデザインを生成・編集させる際の指示書のサンプルです。IDを DESIGN.md に変更すると有効化されます。内容はAI自身に書かせることもできます。同様の使い方ができるファイルとして、BRAND.md（ブランド情報）や CONTENTS.md（コンテンツ方針）なども考えられます。
AGENTS_sample.mdAI指示mikanBoxでのページ制作ルールをAIに渡すための指示書のサンプルです。IDを AGENTS.md に変更すると有効化されます。欄の使い分け、本文をMarkdownで書くこと、共通部分のコンポーネント化、メディアの扱い、公開設定とビルドをまとめています。

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

データの形式

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

Markdownの読み込み

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

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

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

GitHubなど、他のサイトのページをMarkdownとして読み込むことで、サイトに直接触らなくても更新できます。外部文書のHTMLは文字として表示され、mikanBoxのテンプレートタグも実行されません。

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データを変換

PHP版はサイト画面、Cloud版はデータ移行・インポート画面の「CSVインポート」で、エクセルなどのCSVデータを {{DATAROW}} の形式に変換できます。

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

content_copy 変換してコピー

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

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

ヘッドレスCMSにもなる

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

https://yoursite.com/api/pageID.json（動的表示では /api/pageID でも読めます）

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

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

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

タグ内容
{{TITLE}}ページタイトル
{{UPDATE_DATE}}更新日
{{UPDATE_DATE:JP}}更新日・日本語
{{UPDATE_DATE:SLASH}}更新日・/区切り
{{IS_NEW:30}}N日以内 new、それ以外は空
{{DESCRIPTION}}ページ概要）
{{OGP_IMAGE}}ページのOGP画像のURL
{{PAGE_URL}}ページのフルURL
{{POST_MD::name}}データの表示
{{POST_MD::date}}データの表示
{{POST_MD::#test:book}}データの表示ROW
{{IS_ACTIVE}}現在のページなら active、それ以外は空

出力形式（Markdown版・データ）

ページごとに「出力形式」を1つ選べます。既定はHTMLで、これまでのページは何も変わりません。mikanBox本体はプレーンなデータ（Markdown版・JSONなど）を出すところまでを受け持ち、見せ方はJavaScriptや外部のレンダラーに任せます。

出力形式出力主な用途
HTMLHTMLだけ（従来どおり）通常のページ
HTML + MarkdownHTMLとMarkdown版読み物のページ
MarkdownMarkdown版だけMarkdownの読者・AI向けの文書、Markdownだけのサイト
JSON・XML・CSV・テキスト・JavaScript・CSS本文をそのまま目録、カテゴリ別RSS、データの書き出し、llms.txt、サイトのJS・CSS
mikanBox DB本文の {{DATA}}・{{DATAROW}} のデータをJSONで（/api/ID.json）ページに埋め込んだデータを読ませるAPI

URLの規則

ページ /ID に対して、拡張子のあるものはすべて /ID.拡張子 になります。

種類ディレクトリ型ファイル名型
HTML/ID//ID.html
Markdown版/ID.md/ID.md
データ形式/ID.json など/ID.json など

Markdown版

出力形式が「HTML + Markdown」または「Markdown」のページは、Markdown版を /ID.md（Content-Type: text/markdown; charset=utf-8）で出します。生のMarkdownではJavaScriptは動かず、リンク先や画像の読み込み元もすべて読者に見えます。

---
title: "ページタイトル"
date: 2026-11-08
description: "ページの概要"
url: "https://example.com/page/"
categories: "coffee, tokyo"
---

本文…

（末尾コンポーネント）

Markdown版でのタグの扱い

扱いタグ
展開するNAV_LINKS・NAV_CARDS（- [タイトル](URL) のリスト。カードもリストにします。@same で2カテゴリ以上なら入れ子のリスト）、POST_MD（全形式）、EXT_MD（全形式）、{{DATA:key}}値{{/DATA}}（値だけ）、IMAGE（![](絶対URL)）、AUDIO・VIDEO（[ファイル名](絶対URL) のリンク）、CATEGORY、PAGE_URL:ID
文字に置き換えるTITLE、FULL_TITLE、UPDATE_DATE（全形式）、IS_NEW、DESCRIPTION、KEYWORDS、OGP_IMAGE、PAGE_URL、SITE_URL、SITE_NAME、SITE_DESCRIPTION、SITE_OGP_IMAGE（HTML用のエスケープはしません）
取り除くCOMPONENT（末尾コンポーネントは除く）、AI_QUESTION、SEARCH_RESULTS、CONTENT、HEAD_CSS、IS_ACTIVE、DATAROW ブロック、GHOSTデータ

コードブロック・インラインコード・HTMLコメントの中は、書いたまま出します。

リンクと画像

すべて絶対URLにします。![](ogp.jpg) や media/… はメディアの絶対URLに、[説明](about) のようなサイト内リンクは、リンク先がMarkdown版を出していれば /ID.md に、HTMLだけならHTMLのURLに直します。外部リンク・#・mailto:・tel: はそのままです。リンク先のページを照合する処理はHTML版と共通です。リンク先の出力形式を変えたら静的サイトをビルドし直すと、リンク元のMarkdown版も新しいURLになります。

末尾コンポーネント

ページごとに0個以上のコンポーネントを選び、Markdown版の最後に順番どおり付けられます（既定はなし）。中身はMarkdownで書き、上の表と同じ規則でタグを処理します。サンプルとして _md_footer を同梱しています。

## 関連ページ
{{NAV_LINKS:@same:limit=5}}

データ形式

出力形式がJSON・XML・CSV・テキスト・JavaScript・CSSのページは、本文を、ラッパーもHTMLの補完もMarkdownの変換もせず、そのまま /ID.拡張子 で出します。

形式拡張子Content-Type
JSON.jsonapplication/json; charset=utf-8
XML.xmlapplication/xml; charset=utf-8
CSV.csvtext/csv; charset=utf-8
テキスト.txttext/plain; charset=utf-8
JavaScript.jstext/javascript; charset=utf-8
CSS.csstext/css; charset=utf-8

どの形式にも X-Content-Type-Options: nosniff を付けます。

mikanBox DB

出力形式を「mikanBox DB」にすると、本文の {{DATA}}・{{DATAROW}} のデータを、決まった形のJSONにして /api/ID.json で返します。ページとしての表示（HTML・Markdown版）は出しません。2.17まで公開設定にあった「DB」を、出力形式に移したものです。

返すJSONの形は次のとおりです。fields は {{DATAROW}} の外にある {{DATA:key}}（GHOSTを含む）、rows は {{DATAROW}} の各行です。見出しや地の文など、データの外にある本文はJSONに含まれません。

{
    "id": "sample_data",
    "title": "データサンプル",
    "fields": { "BOOK_TITLE": "Macbeth", "AUTHOR": "Shakespeare" },
    "rows": [
        { "id": 1, "GOODS": "Apple", "PRICE": "300" },
        { "id": 2, "GOODS": "Banana", "PRICE": "200" }
    ]
}
形出るものURL
mikanBox DB本文の {{DATA}}・{{DATAROW}} のデータを、決まった形に変換したJSON/api/ID.json
データ形式（JSONなど）本文そのもの（自分で書いた形。タグを展開できる）/ID.拡張子

ページに埋め込んだデータをそのままAPIで読ませるなら「mikanBox DB」、出すファイルの形を自分で書くなら「JSON」などのデータ形式を選びます。

ページのURLを埋め込む {{PAGE_URL:ID}}

<link rel="stylesheet" href="{{PAGE_URL:site-style}}">
<script src="{{PAGE_URL:site}}"></script>
→ <script src="https://example.com/site.js?v=3f9a2c1b"></script>

指定したIDのページのURLを、その出力形式の拡張子付きで出します。データ形式のページには ?v= に中身のハッシュが付くので、中身が変わるとブラウザのキャッシュが自動で切り替わります。静的書き出しでは書き出した中身から（目録のように、ほかのページの変更で中身が変わるページも正しく変わります）、動的表示では本文から計算します。HTML・Markdownのページには ?v= を付けません。引数なしの {{PAGE_URL}} は、これまでどおり表示中のページのURLです。

外部ライブラリ（自分では編集しないファイル）はメディアに置き、自分のサイトのコードはJavaScript・CSS形式のページに書く、という使い分けをおすすめします。コンポーネントのJS欄は、その部品を使用するページのHTMLに埋め込まれます。

目録データとJavaScriptでページ一覧を作る

mikanBox本体には、ページャー（ページ送り）や目録ファイルの専用機能はありません。データ形式のページとJavaScriptのページを組み合わせて作ります。静的書き出しでもファイルとして出るので、PHPのないサーバーでも動きます。サンプル（sample_list・json_item・sample_pager・sample_list_page）を同梱しています。

1. 目録のページ

出力形式をJSONにしたページを作ります（ID例 news-list → /news-list.json）。

[{{NAV_CARDS:news:json_item:sort=new:sep=,}}]

項目用コンポーネント json_item には、1件分の形を書きます。

{"title":"{{TITLE}}","url":"{{PAGE_URL}}","date":"{{UPDATE_DATE}}","categories":"{{CATEGORY:all}}"}

値はJSONに合わせてエスケープされます。sep=, で項目のあいだにカンマが入り、正しいJSONの配列になります。

2. JavaScriptのページ

出力形式をJavaScriptにしたページ（ID例 pager → /pager.js）で、目録を読み込み、20件ずつ表示してページ送りを付けます。同梱の sample_pager がそのまま使えます。

3. 一覧を見せるページ

<div class="mikan-pager" data-src="{{PAGE_URL:news-list}}" data-per-page="20"></div>
<script src="{{PAGE_URL:pager}}"></script>

ポッドキャスト配信

音声を張り込んだページを作成し、カテゴリを「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を各プラットフォームに登録する
登録先：
プラットフォーム登録場所
Apple Podcastspodcastsconnect.apple.com
Spotifypodcasters.spotify.com
Google Podcastsgoogle.com/podcasts/publish
Amazon Musicmusic.amazon.com/podcasts

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

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

サイトマップ・RSS・API

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

サイトマップ

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

https://yoursite.com/sitemap.xml

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

データ形式のページはサイトマップ・RSS・Podcast RSSに含めません。Markdownだけのページは /ID.md のURLで載せます。

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}}を埋め込んだページを、出力形式「mikanBox DB」にして公開すると、外部からAPIで読み取ることができるようになります。

https://yoursite.com/api/pageID.json（動的表示では /api/pageID でも読めます）

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

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

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

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

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

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

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

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

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

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

お知らせ

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

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

https://yoshihiko.com

ライセンス

MIT License

Copyright (c) 2026 yoshihiko.com

以下に定める条件に従い、本ソフトウェアおよび関連文書のファイルを無償で利用する権利を許諾します。商用利用、修正、配布、再許諾を含みますが、これらに限定されません。

条件: 上記の著作権表示および本許諾表示を、本ソフトウェアのすべての複製または重要な部分に記載するものとします。

免責事項: 本ソフトウェアは「現状のまま」提供され、明示または黙示を問わず、いかなる保証もありません。作者または著作権者は、契約、不法行為、またはその他に起因するいかなる請求、損害、またはその他の責任についても一切の責任を負わないものとします。