HTMLタグビルダー

最近になって、Webサイトに計算フォームを設置したいというご依頼をいただくことが多くなりました。計算フォームは<div>や<p>などのHTMLタグを入力したファイルを、ブラウザで読み込んで想定した画面表示になっているかを確認します。

場合によっては微調整を複数回にわたって繰り返すことがあり、想定よりも時間がかかることがあります。そこで、この作業を簡易化するため、WordPressのブロックエディターのようにパーツを組み合わせることでフォームを作成することにしました。

当初は既存のツールの利用を検討しましたが、要望にマッチしたツールが存在しなかったため、自分で作成することにしました。

ツールについて
画面構成
使用方法
ツールについて：制作環境

ツールについて

ツール名：KCN-HTMLビルダー
URL:https://kcn-html-builder.こはる分室.jp/

HTMLタグをドラッグアンドドロップで作成することを目的としたツールです。WordPressのブロックエディターをイメージして作成しています。

本ツールはマウスを使用したデスクトップ端末での利用を想定しています。スマホ等のタッチパネルでは動作しない可能性があります。

※本ツールはテストバージョンです。不具合により作成したデータが失われる可能性があります。このツールにより何らかの損害が発生した場合でも責任を負いかねます。ご了承ください。

画面構成

左サイドパネル開閉ボタンパネル
左サイドパネル
キャンバス操作ボタン
ツールボタン
キャンバス
要素設定パネル
階層表示パネル

使用方法

①左サイドパネル開閉ボタンパネル/②左サイドパネル

左サイドパネル開閉ボタンパネルは左サイドパネルの開閉を行います。

左サイドパネルは四種類あり、左から「設定」「要素追加」「階層」「追加CSS」パネルを開閉します。

設定パネル

左サイドパネル開閉ボタンパネル内の設定ボタンを押すと、設定メニューが表示されます。
一部の設定を除き変更した内容がブラウザに自動保存され、次回利用時に読み込まれます。

グループ	機能名	自動保存	内容
エディター設定	キャンバス幅	〇	キャンバスの幅を変更します。「指定する」にチェックを入れると幅を指定できます。
	拡大/縮小	〇	キャンバスの拡大率を指定します。
	アウトライン	〇	キャンバス上のタグ要素のボーダー枠を表示するかどうかを指定します。チェックを入れると、各要素のボーダー設定を無視して、ボーダーを表示します。
	Tailwind CSS	×	「CDNから読み込む」を押すと、Tailwind CSSをCDNから読み込みます。 Tailwind CSSを読み込むことで、Tailwind CSSのクラス名を利用できるようになります。この設定は自動保存されません。次回利用時にTailwind CSSを使用するときは再度、「CDNから読み込む」を押します。
	自動保存	〇	キャンバスの自動保存機能の設定をおこないます。キャンバス操作を、ここで設定した回数おこなったとき、その時点の内容を一時保存します。一時保存した内容は次回起動時に自動で読み込まれます。 ※ツールボタンのブラウザ保存機能とは異なるデータとして扱われます。 ※ブラウザ側の制限で一定期間経過後に削除される可能性があります。
コード出力設定	スタイル	〇	「インライン出力する」にチェックを入れると、ツールボタンのコード表示機能で出力されるHTMLコードで、各タグのスタイル属性をインライン（style=”…”)で表示します。
	閉じタグがないタグ	〇	「/> を出力する」にチェックを入れると、ツールボタンのコード表示機能で出力されるHTMLコードで、<br>等のペアとなる閉じタグが無いタグを<br />の形式で表示します。
テキストエディタ設定	文字エディタ選択色	〇	テキスト編集エディタの文字色および背景色の選択候補を設定します。
	太字タグ	〇	テキスト編集エディタで太字指定された文字のタグを設定します。
	斜体タグ	〇	テキスト編集エディタで斜体指定された文字のタグを設定します。
	下線タグ	〇	テキスト編集エディタで下線指定された文字のタグを設定します。

要素追加パネル

要素追加パネルは、タグ名をキャンバスにドラッグアンドドロップすることで、キャンバスにタグ要素を追加できます。

「検索」タブは、定義済みのタグを検索して表示します。

「独自タグ」タブは、「タグ一覧」タブで定義されていないタグを追加できます。

階層パネル

階層パネルは、キャンバス上の要素を階層表示します。

階層パネル上で要素の移動、選択変更等を行うことができます。

追加CSSパネル

追加CSSパネルは、キャンバスで使用するcssを設定できます。

変更した内容は「適用」ボタンを押した時点で、キャンバスに追加されます。

※追加CSSは、キャンバスデータ内に保存されます。

③キャンバス操作ボタン

キャンバス操作ボタンは、キャンバスで選択されている要素を操作します。

機能	複数選択	内容
元に戻す（Undo）	–	ひとつ前の状態に戻します
やり直し（Redo）	–	元に戻す（Undo）で戻した状態を、復元します
複製	×	選択されている要素を複製し、要素の直後に挿入します。
削除	〇	選択されている要素を削除します。
前に移動	×	選択されている要素と、その要素の前方にある要素を入れ替えます。前方に要素が無いときは、親要素の前方に移動します。
後ろに移動	×	選択されている要素と、その要素の後方にある要素を入れ替えます。後方に要素が無いときは、親要素の後方に移動します。
コピー	〇	選択されている要素をコピーします。
置き換え/前方に挿入/後方に挿入/中に挿入 ※サブメニュー表示	×	選択されている要素に、コピーした要素を選択したサブメニューに従って処理します。

④ツールボタン

ツールボタンは、キャンバスの保存等をおこないます。

機能	内容
プレビュー	キャンバスからコードを取得して、新しいタブでプレビュー表示します。
コード表示	キャンバスからコードを取得して、取得したコードを表示します。
ブラウザに保存	キャンバスの内容をブラウザに上書き保存します。 ※自動保存データとは異なるデータとして扱われます。 ※ブラウザ側の制限で一定期間経過後に削除される可能性があります。
保存データ読み込み	ブラウザに保存したキャンバスデータを読み込みます。
データダウンロード	キャンバスの内容をダウンロードしてパソコンに保存します。
データ読み込み	ダウンロードしたキャンバスデータを読み込みます
キャンバスをクリア	キャンバスの内容を破棄します。