【 グルージェントフロー 】Excelで作った申請書をAIで綺麗に！HTMLレイアウトエディター活用術
- グルージェントフロー
グルージェントフロー (Gluegent Flow)で自由なレイアウトの入力フォームを作成する際、非常に便利なのが「HTMLレイアウトエディター」です。
使い慣れたExcelで申請書のフォーマットを作成し、必要な範囲をコピーしてそのままエディターにペースト（貼り付け）して使っている、という管理者様も多いのではないでしょうか。
直感的に操作できてとても手軽な反面、実はこの「Excelからの直接コピペ」には、長年皆さんを悩ませる「ある問題」が潜んでいます。
今回は、生成AIを活用してその問題をサクッと解決し、メンテナンスしやすい綺麗な申請書フォームを作る方法をご紹介します。
1. ExcelからExcelからコピーして貼り付けした裏側で起きている「悩ましい問題」
Excelの表をコピーしてHTMLレイアウトエディターに貼り付けると、見た目はそのまま綺麗に再現されます。しかし、「ソース」アイコンをクリックして裏側のコードを覗いてみると、以下のような問題が発生しています。
- メンテナンスが困難
不要なタグが多すぎるため、後から「ここの項目名を少し直したい」「入力欄を広げたい」と思った時に、HTMLソースを見てもどこを修正すればいいのか解読が困難になります。 - ソースコードの肥大化による容量オーバー
Excel特有のVMLタグや、大量のクラス定義（class）が自動的に付与されるため、データ容量が極端に大きくなります。最悪の場合、Gluegent Flowのモデル1点に対するソースコード容量制限(500KB)に引っかかって保存できなくなることも……。
2. 生成AIでソースコードを「浄化」しよう！
これらの問題を解決するには、不要なタグやクラスを削除し、必要なスタイルだけを残す「ソースコードの最適化（リファクタリング）」が必要です。
しかし、ぐちゃぐちゃになったコードを手作業で整理するのは気が遠くなる作業ですよね。
そこで、ChatGPTやGeminiなどの生成AIの出番です！以下のプロンプト（指示文）と一緒にコピペしたHTMLのソースをAIに渡すだけで、軽量でレイアウト崩れのない、ピカピカのHTMLコードに変換してくれます。
AIに渡すプロンプト
以下のテキストをコピーして、お使いの生成AIに貼り付けてご使用ください。
# 依頼
提供されたHTMLコードを、「HTMLレイアウトエディター」で利用可能な、軽量かつレイアウト崩れの少ないHTMLにリファクタリングしてください。
# 前提課題
Excelから生成されたHTMLには、以下の問題があります。これらを完全に解消してください。
1. `td {border: 1px solid #cccccc;}` などのデフォルトスタイルが勝手に枠線を表示させてしまう。
2. VMLタグや大量のクラス定義による肥大化。
3. 単純化しすぎると列幅や明細行が失われる。
# 変換ルール（厳守）
1. スタイルの浄化（最優先）:
* <style>タグは中身ごと完全に削除してください。（Excel由来のデフォルトスタイル `#cccccc` 等を無効化するため）
* class属性はすべて削除し、必要なスタイル（背景色や文字配置）はタグ内の style="..." に直接記述してください。
* フォントは 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif を指定してください。
2. グリッド構造の完全維持:
* <colgroup> と <col width="..."> のピクセル値は絶対に削除せず、維持してください。
* テーブル全体には style="border-collapse: collapse; table-layout: fixed; width: [合計px]px;" を適用してください。
3. 行とセルの完全維持:
* 「明細行」や「繰り返し行」は、決して省略・削除・統合しないでください。元の行数分だけ必ず <tr> タグを出力してください。
* 結合セル（rowspan）がある場合、その期間の他の列の行構造も正確に出力してください。
4. 不要タグの除去と置換:
* v:group, v:shape などのVMLタグ、<img> タグは削除してください。
* 「No.」欄などがVMLの場合、そのセル（td）に border を設定してCSSで再現してください。
* mso- 系の属性（mso-data-placement等）はすべて削除してください。
5. 外観の再現:
* 全体を <div style="background-color: white; width: [テーブル幅]px; margin: 0 auto; box-sizing: border-box;"> で囲んでください。
* 枠線は、Excel上で明示的に引かれている線のみを border: 1px solid black; 等で再現し、デフォルトのグレーの枠線は排除してください。
6. 出力形式:
* <html>, <head>, <body> タグは出力せず、<div> から始まるコードのみを出力してください。
* ファイルとしての生成は不要です。必ずこのチャット画面上に「コードブロック」として記述してください。
* コードが長すぎて一度に出力できない場合は、適切な場所で分割し、「続き」として複数回に分けて出力してください。
# 入力ソース
（※ここにHTMLレイアウトエディターからコピーしたソースを貼り付けてください）
3. 具体的な手順
1. Excelで作成した申請書を開き、使いたい表の範囲を選択してコピーします。
2. Gluegent Flowの「HTMLレイアウトエディター」を開き、そのままペースト（貼り付け）します。
3. エディター上部の「ソース」アイコン（ ）をクリックし、表示されたごちゃごちゃのHTMLソースコードをすべてコピーします。
4. 生成AIを開き、上記のプロンプトの「入力ソース」の下に、手順3でコピーしたコードを貼り付けて送信します。
5. AIが出力してくれた綺麗なHTMLコードをコピーし、HTMLレイアウトエディターのソース画面に貼り付けて（元のコードと置き換えて）完了です！
AIを活用する際の注意点
ここで一つ、重要な注意点があります。
生成AIは非常に頼もしいアシスタントですが、「絶対に完璧な結果を出してくれるわけではない」ということを忘れないでください。
- 指示を無視してしまうことがある: 明細行を勝手に省略してしまったり、フォントの指定を忘れてしまったりと、AIの機嫌（？）によってはプロンプトのルールを守らないことがあります。
- もっともらしい嘘（ハルシネーション）をつく: 元のExcelには存在しない項目を勝手に作り出したり、不要なタグを独自の解釈で追加してしまうこともゼロではありません。
AIが出力したソースコードをHTMLレイアウトエディターに貼り付けた後は、AI任せにせず、必ずプレビュー画面やテスト申請で「レイアウト崩れがないか」「項目が消えていないか」をご自身の目で最終チェックしてください。「AIの作業を人間が確認する」という二人三脚の意識が成功のコツです！
さいごに
いかがでしたか。
AIを活用することで、これまでネックだった「ソースの肥大化」と「メンテナンス性の悪さ」を一気に解消できます。
コードがすっきりすると、後から入力フォーム（プレースホルダー）を配置する作業も格段に楽になりますよ。
HTMLレイアウトエディターの基本的な使い方については、以下のサポート記事も併せてご覧ください。
参考記事（クラウドコンシェルジュ）：
ぜひ、このAIプロンプトを活用して、使いやすくメンテナンスしやすい申請書を作成してみてくださいね！
（suto）
