この記事では、claude code などで作成した HTML を Free-CMS で公開する方法を解説しています。

１．ページ内に埋め込む方法

HTML アプリを記事内に埋め込む際は、エディタの「＋追加・挿入」からファイルライブラリを選択します。

「ファイルをサーバーにアップロード」を選択してアップロードします。

アップロードした html ファイルには、記事内に埋め込む選択肢が出てきます。

これを押すと、以下のように記事内に HTML が埋め込まれます。

埋め込む領域の高さは自由に調整できるので、埋め込んだHTMLに合うように調整して下さい。

２．ページそのものを任意の HTML として公開する方法

右上の編集モード切替から「自由 HTML 」を選択します

「このページを自由HTMLモードにする」にチェックを入れて「一時保存する」を押してから元の画面に戻って記事を公開すると、その記事のリンクに入力したHTMLのページがそのまま表示されます。

HTML ファイルをローカルから選んで使用することも出来ます。

３．おすすめの使い方

ブラウザアプリを公開するならページ内に埋め込む形式の方がおすすめです。理由は以下。

・アプリしか存在しないページよりもアプリの使い方説明を含んだページの方がユーザーに親切

・Google はテキストが無いページを評価しないのでアプリ単体のページは検索結果に表示されにくい

・HTMLのサイズが大きくなるとページの表示が遅くなる（埋め込みHTMLは遅延取得される仕様なので表示速度に影響しない）

逆に以下のようなケースでは直接HTMLを公開した方がいいです。

・ランディングページなどおしゃれなデザインのページを公開したい時

・一つのページとして機能するアプリを公開する時