概要
GCMF.js は、パソコン ブラウザ上で変換処理を行う JavaScript ライブラリです。
変換対応ブラウザ
以下の PC ブラウザに対応しています。
- Google Chrome
- Internet Explorer 11
- Microsoft Edge
- Firefox
- Safari, モバイル Safari
変換対応デバイス
以下のデバイスに対応しています。
- デスクトップ PC
- ノートPC
- iPad
- Android タブレット
依存関係
GCMF.js は、他ライブラリとの依存関係を持ちません。
セキュリティ
GCMF.js は外部ネットワーク通信を行いません。また、変換に使用したコンテンツをローカルストレージ等に保存しません。
機能一覧
基本変換
| 機能 | 説明 |
|---|---|
| 固定幅で中央配置 | ヘッダ・フッタ・メインコンテンツを幅960pxで固定化します [ ^ 1 ] |
| カスタム CSS | パソコン向けに独立したCSSを挿入します |
| フォントサイズ変換 | フォントサイズをパソコン向けに変換・拡大します |
| 画像パス変換 | imgタグと背景画像の URL を置換します |
| viewport 変換 | コンテンツ幅に応じた viewport を出力します |
| サイドバー変換 | aside要素をサイドバーとして表示します |
ヘッダ・フッタのレイアウト
| 機能 | 説明 |
|---|---|
| 1 カラムレイアウト | ヘッダ・フッタを 1 カラムレイアウトに変更します |
| 幅の調整 | コンテンツや背景の幅を引き伸ばします |
カラムレイアウト
| 機能 | 説明 |
|---|---|
| カラムレイアウト | MF セクションを1〜3列でレイアウトします |
| 自動グリッド | セクション区切りに応じて自動で列数を調整します |
| 余白の調整 | カラム間の間隔を調整します |
| 配置方向 | セクションを「右向き」もしくは「下向き」にレイアウトします |
| 寄せ | セクションを「中央」「左」「右」に配置します |
MFセクション内のレイアウト
| 要素・コンポーネント | 機能 | 説明 |
|---|---|---|
<ul> | 横並び | リストを横並びでグリッド表示します |
| 列数の変更 | グリッド表示時の列数を変更します | |
<table> | 段組の変更 | テーブル段組数を変更します |
| フォーム | 自動2カラムレイアウト | フォームを自動的に2カラムレイアウトに変更します |
| スライダー | 表示画像数の変更 | 表示する枚数を変更します |
| タイル展開 | スライダーをタイル表示に変更します | |
| その他 | 非表示 | 指定したセクションを非表示にします |
| 無変換 | パソコン向けの変換を行いません | |
| HTML置き換え | 指定のセクションを別のHTMLに置き換えます |
モバイルコンテンツ対応機能
| 機能 | 説明 |
|---|---|
| スマートフォン固有のリンク変換 | スマートフォンサイトで使用される特殊なURLを変換します |
| タッチイベント変換 | 非タッチデバイスでもタッチイベントを処理します |
コンテンツ置換
| 機能 | 説明 |
|---|---|
| データ定義 | 外部ファイルで HTML フラグメントを定数として定義します |
| データ置換 | HTML 内の任意の場所を定義された値に置き換えます |
| データ参照タグ | HTML 内の<mf-var>タグを定義された値に置き換えます |
変換条件
- User-Agent ヘッダが PC ブラウザやタブレットの場合に変換処理を実行します。
設定ファイルの変更により、本動作を制御できます。
ローカルファイル対応
ローカル PC 上のファイルも変換します。
変換の一時的な無効化
URL のフラグメントが #noconvertに一致する場合、UserAgent ヘッダがパソコンブラウザやタブレットであっても、は変換処理をスキップします。
https://example.com/index.html#noconvert