Zittme は、従来の PC / モバイルの2系統にレスポンシブを加えました。この文書では2つのことを扱います。サイトが画面幅によって動作を切り替えるレスポンシブビューと、制作者が自分のスキン・レイアウトがレスポンシブであることを示すレスポンシブ表示です。

レスポンシブビューとは

従来のエンジンは端末の種類（スマートフォンかどうか）で PC/モバイルを判別していました。レスポンシブビューは代わりに画面幅を基準に判別します。

• 1つのスキン（PC 用マークアップ）をそのまま使いながら、
• 画面幅が768px以下に狭くなると、エンジンがモバイル側の設定値を適用します。エディター設定、一覧の件数、ページネーションの数、ヘッダー/フッターの文言です。

つまり、モバイルスキンを別に作らなくても、狭い画面に合った設定が適用されます。実験的な機能で、既定値はオフです。

判別の基準幅は768pxです（Mobile::NARROW_BREAKPOINT、common/js/responsive-view.js の BREAKPOINT）。スキンが別のブレークポイントを使うのは自由ですが、この境界でエンジンの設定値が切り替わることは把握しておく必要があります。

レスポンシブ表示：スキン・レイアウト制作者向け

なぜ表示が必要なのか

従来はフォルダーがそのまま区分でした。skins/ は PC 用、m.skins/ はモバイル専用です。しかし、レスポンシブスキンは PC スキンと別物ではなく、「そのスキンが狭い画面まで対応する」という性質です。そのため、フォルダーではなくメタデータに記述します。

表示方法

スキンは skin.xml、レイアウトは conf/info.xml の先頭に1行入れます。

<?xml version="1.0" encoding="UTF-8"?>
<skin version="0.2">
	<responsive>true</responsive>
	<title xml:lang="ko">내 스킨</title>
	...
</skin>

<?xml version="1.0" encoding="UTF-8"?>
<layout version="0.2">
	<responsive>true</responsive>
	<title xml:lang="ko">내 레이아웃</title>
	...
</layout>

true、y、1 のいずれかであればレスポンシブとみなします（大文字・小文字は区別しません）。値がないか、別の値であればレスポンシブではありません。

既定値は「レスポンシブではない」

表示のない既存スキンは、すべてレスポンシブではないものとみなします。すでにレスポンシブで作られたスキンであれば <responsive>true</responsive> の1行を追加するだけでよく、それ以外に修正するものはありません。

true と宣言することの意味

• 1つのマークアップ・CSS で広い画面と狭い画面の両方に対応します。狭い画面で横スクロールが発生したり、要素が切れたりしてはいけません。
• 狭い画面ではモバイルの設定値（エディター・一覧件数・ページネーション・ヘッダー/フッター）が適用されうることを前提に作る必要があります。
• レイアウトであれば、狭い画面でメニューが折りたたまれるなど、形が対応している必要があります。

エンジンがこの値を使う場所

• スキン・レイアウトの選択画面：レスポンシブのものにバッジを付けます。
• ビュー方式の変更：レスポンシブビューに切り替えようとしたとき、選んだスキンがレスポンシブでなければ警告します。ブロックはしません。
• テーマパッケージの検証：レスポンシブを宣言したテーマは、構成要素のスキン・レイアウトがすべてレスポンシブである必要があります。（テーマパッケージを作るを参照）

コードで確認する

$skin_info = ModuleModel::loadSkinInfo($module_path, $skin_name);
if ($skin_info->responsive)
{
    // 반응형 스킨
}

互換性

• 既存のスキンはそのまま動作します。値がなければ false になるだけで、何も壊れません。
• <responsive> があるスキンを Rhymix にインストールしても問題ありません。エンジンは知らない要素を無視します。
• この表示は Zittme 独自のもので、アップストリームの Rhymix にはありません。