メインコンテンツへスキップ

HTMLデザインでページを作成する

更新

機能の概要

HTMLでページを作成するための機能です。
かんたん作成からページを設定するよりも、自由度の高いページを作成することができます。
ページを細部まで作りこむ際にご利用ください。
 

注意事項

  • 「HTMLを生成する」ボタンを押した場合には、かんたん作成でのページ作成ができなくなります。
  • 下記のコードが、「サンプルページ1」という名称のページタイトルでHTMLを生成した直後のコードになります。こちらから、利用用途に合わせたカスタムを開始して下さい。
    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="UTF-8">
    <title>サンプルページ1</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    %%.html.csp%%
    <style>
    body{
    color:#000000;
    background-color:#FFFFFF;
    none
    background-repeat:no-repeat;
    background-size:cover;
    background-attachment:fixed;
    }
    h1{color:#000000;}
    </style>


    <link rel="stylesheet" href="https://%%.html.domain%%/form/assets/v1/global.css">
    <link rel="stylesheet" href="https://%%.html.domain%%/form/assets/v1/bundle.css">


    <script type="text/javascript" src="https://%%.html.domain%%/form/assets/v1/bundle.js" defer></script>

    </head>
    <body>
    <h1></h1>
    <!-- システムメッセージ出力 開始 -->
    %%.html.messages | custom_html_list "system error"%%
    <!-- システムメッセージ出力 終了 -->
    <form method="post">

    <!-- システム必須項目は削除しないでください -->
    <!-- システム必須項目 開始 -->
    <input type="hidden" id="__node_id" name="__node_id" value="%%.html.node_id%%" />
    <input type="hidden" id="__token" name="__token" value="%%.html.token%%" />
    <input type="hidden" id="__session_id" name="__session_id" value="%%.system.session%%" />
    <input type="hidden" id="__upload_api" name="__upload_api" value="%%.html.upload_api%%">
    <input type="hidden" id="__tenant_id" name="__tenant_id" value="%%.system.tenant_id%%">
    <input type="hidden" id="__flow_id" name="__flow_id" value="%%.system.flow_id%%">
    <div class="button-container">%%.html.prev%%%%.html.next%%</div>
    <!-- システム必須項目 終了 -->
    </form>
    </body>
    </html>
 

操作手順

各タブでの操作は次の通りです。
コードでの作成がまだ難しい方は、かんたん作成をご利用ください。
かんたん作成はこちら
 

使用中の項目

かんたん作成と同様にデータ項目を使用することができます。
項目をHTML内で使用する時には、専用の記号（差し込み記号）が表示されます。
設定可能なページ項目はこちら
設定方法は次の通りです。
  1. 「使用中の項目」タブをクリックします。
  2. 用途に合わせたデータ項目をドラッグし、ページ構成の「使用中の項目」タブのグレーエリアにドロップすることでデータ項目を配置します。
  3. ドロップしたデータ項目の「編集（鉛筆マーク）」をクリックします。
  4. データ項目の設定を実施し、「保存する」ボタンを押すことで完了です。
    ページ項目の概要と入力制限はこちら
  5. エディタにカーソルを合わせ、対象のデータ項目の「追加（差し込みマーク）」をクリックすることで差し込み完了です。

アセット

グローバル・スペースアセットを利用する時に使用します。
CSSや、JavaScriptファイルの適用等を行う際に使用します。
設定方法は次の通りです。
  1. 「アセット」タブをクリックします。
  2. エディタにカーソルを合わせ、対象のアセットの「追加（差し込みマーク）」をクリックすることで差し込み完了です。

共通変数

グローバル・スペース共通変数を利用する時に使用します。
設定方法は次の通りです。
  1. 「共通変数」タブをクリックします。
  2. エディタにカーソルを合わせ、対象の共通変数の「追加（差し込みマーク）」をクリックすることで差し込み完了です。

注意事項

CSS ファイルを差し込む場合には、headタグ内に記述して下さい。
JavaScript ファイルを差し込む場合は、bodyタグ内の最下段に記述して下さい。
 

システム

form spice でプロジェクトを公開する時に必要な設定や、プロジェクト情報などを差し込む時に使用します。
中には、デフォルトで記載されているものもあります。
一部でも記述が欠けたり、改変をしたりすると正常に機能しない恐れがあるため、編集はお控えください。
差し込むことが出来る記述については次の通りです。
  • システム必須項目
    • HTMLソースで、ページを作成する時に必須の記述です。
  • システムメッセージ出力
    • 公開プロジェクト上でのシステムエラーを表示するために必要な記述です。
  • フォームURL
    • 現在編集しているページのURLです。
  • アップロードAPIエンドポイント
    • フォーム内でファイルのデータ項目を用いるときにのみ使用します。
      差し込む場合には、formタグ内の最下段に記述してください。
  • スペースID
    • 公開プロジェクトが所属するスペースのスペースIDです。
  • パスエイリアス
    • 「プロジェクト詳細」で設定した「パスエイリアス」です。
  • CSP許可リスト
    • 「プロジェクト詳細」で設定した「アクセスを許可するドメイン」です。
      差し込む場合には、headタグ内に記述してください。
設定方法は次の通りです。
  1. 「システム」タブをクリックします。
  2. エディタにカーソルを合わせ、対象の「追加（差し込みマーク）」をクリックすることで差し込み完了です。
以上の項目を使い、エディタ内で用途に合わせたページを作成して下さい。

関連記事

Powered by Zendesk