MFEdit - レイアウトオプションファイル

概要

GCMF.jsのレイアウトオプションファイル (gcmf-config.js) では、以下の項目を指定できます。

• サイト共通・ページレベルのレイアウトオプション
• ヘッダー・フッター・MFセクショングループ・MFセクションに対するレイアウトオプション
• MFセクショングループおよびMFセクションの外部定義
• データ定義
• ベース URL およびベースディレクトリ

また、個別のレイアウトオプションについては、特定の URL に対する設定をまとめて記述できます。

レイアウトオプションも合わせて参照ください。

レイアウトオプションファイルのファイル名

デフォルトのファイル名はgcmf-config.jsです。

ファイル名は自由に変更でき、その場合は合わせて、HTML の script の参照先を変更してください。

レイアウトオプションファイルの編集

レイアウトオプションファイルは、MFEditで編集します。

デバイスグループ

レイアウトオプションファイルでは、設定対象となるブラウザをデバイスグループを指定します。デバイスグループは以下のように定義されており、ルールの適用条件などで利用されます。

MFセクショングループ、およびMFセクションの指定

レイアウトオプション設定の対象となるMFセクショングループやMFセクションは、以下のいずれかの方法で指定します。

• HTML ドキュメント内における、<hr class="mf-hr">タグや<section>タグの出現順番 (インデックス)
• CSS セレクタ

URLマッピング

レイアウトオプションは、URL、およびデバイスグループ毎に指定できます。ただし、サイト共通設定は、GCMF.jsが読み込まれているすべてのページで適用されます。

URLマッピングでは、変換対象のURLを指定します。

また、URLパスにはワイルドカードが使用できるので、たとえば https://example.com/news/123 と https://example.com/news/456 で同一の変換設定を共有できます。

詳しくは、URLパスの書式 - オプショントップ を参照してください。

ファイルの構文

レイアウトオプションファイルでは、グローバル変数 mf.config をセットアップします。

以下の例では、全ページに対してカラム余白を16に指定しています。

window.mf = window.mf || {}; mf.config = {
    version: "1.2",
    rules: [
        {
            urls: ["/**"],
            deviceGroup: "pc",
            columnGap: 16
        }
    ]
};

mf.config.rules[n] オブジェクトでは、主に以下のようなレイアウトオプションが指定できま す。