GCUIとは

GCUIはスマートフォン向けのCSSライブラリです。

テキストボックスやボタンなどの入力フォームや見出しといったコンポーネントを用意しています。

GeneCodeを使用したプロジェクトではGCパーツを使用してカルーセルやアコーディオンなどスマートフォンでよくあるUIに変換しますが、GCUIではGCパーツでカバーしきれないより細かな単位でのコンポーネントを定義しています。

GCUIを導入するメリット

GeneCodeではPCサイトのHTML構造を変換するという特性上、どうしてもスマートフォン用のCSSを新しく用意する必要がありますが、

あらかじめスマートフォン用のCSSが用意されているので、GCUIで用意されているコンポーネントは一からスマートフォン用のCSSを実装する必要がなくなります。

また、GCUIで定義したコンポーネントはGCUIの共通CSSファイルで一元管理することができます。

GCUIを構成するファイル

GCUIはGeneCodeサーバ上で動作する共通関数、コンポーネントごとに定義した共通CSS、各コンポーネントが使用する画像リソースで構成されています。

主要なファイル

共通関数	appjs/gcui.js	GeneCodeサーバ上で動作するGCUI用の変換処理を記述したjavascriptファイルです。GCUIコンポーネント毎に関数が用意されています。
共通CSS	template/css/gcui.css	GCUI用のCSSを記述したCSSファイルです。
画像リソース	template/img/gcui/	各コンポーネントが使用するSVG形式の画像ファイルです。

ダウンロード

こちらからGCUIの共通関数ファイル、共通CSSファイル、画像リソースをダウンロードしてください。

ディレクトリ構造

以下のように各ファイルを配置してください。

project_folder/
├── appjs/
│      └── gcui.js
└── template/
     ├── css/
     │      └── common/
     │               └── gcui.css
     └── img/
             └── gcui/

ファイルの読み込み方法

テンプレート上でgcui.jsとgcui.cssを以下の様に読み込んでください。

使用方法

GeneCodeサーバでの変換処理でHTML要素にGCUI用のclass属性を付与することで、スマートフォン用に最適化されたCSSが適用されます。テキストボックスやセレクトボックスといった一部の入力コンポーネントはGCUIのCSSを読み込んだだけでスマートフォン用のCSSが適用されます。

各GCUIコンポーネントの詳細はコンポーネントページで説明しています。

パターンファイル

GCUIを読み込んだ状態のパターンファイル

<%-- 2.1.0 --%>
<!DOCTYPE html>
<gc-script>gcruntime.loadJs('/gcutils.js');</gc-script>
<%--  GCUI用の共通関数ファイルを読み込みます --%>
<gc-script>gcruntime.loadJs('/gcui.js');</gc-script>
<html>
<head>
	<meta charset="UTF-8" />
	<gc-script>gcutil.writeViewport();</gc-script>
	<meta http-equiv="X-UA-Compatible" content="IE=9" />
	<gc-script>gcutil.toHtml($('title'));</gc-script>
	<gc-script>
		var $headScript = $("head > script");
		var jqueryIndex = -1;
		$headScript.each(function(index, element) {
			var $e = $(element);
			var src = $e.attr("src");
			if (src && src.match(/jquery(-[0-9]+\.[0-9]+\.[0-9]+)?(\.min)?\.js/)) {
				jqueryIndex = index;
			}
		});
		if (jqueryIndex >= 0) {
			gcutil.toHtml($headScript.slice(0, jqueryIndex + 1));
		} else {
	</gc-script>
			<script src="/template/gcparts/js/jquery-1.8.0.min.js" type="text/javascript"></script>
	<gc-script>
		}
	</gc-script>
	<script src="/template/gcparts/js/gcparts-2.1.0.js" type="text/javascript"></script>
	<script src="/template/js/postjs-1.0.1.js" type="text/javascript"></script>
	<gc-postJsHead />
	<gc-script>
		gcutil.toHtml($headScript.slice(jqueryIndex + 1));
	</gc-script>
	<link href="/template/gcparts/css/gcparts-2.1.0.css" type="text/css" rel="stylesheet">
	<link href="/template/css/gcreset.css" type="text/css" rel="stylesheet">
	<link href="/template/css/gccommon.css" type="text/css" rel="stylesheet">
	// GCUI用のCSSファイルを読み込みます
	<link href="/template/css/common/gcui.css" rel="stylesheet" type="text/css" />
	<gc-script>gcutil.writeCanonical();</gc-script>
</head>
<body>

<gc-script>
	gcutil.toHtml($("body script"));
</gc-script>
<gc-postJsBody />

</body>
</html>

対象OS・ブラウザ

対象OS

iOS	9系以上
Android	5系以上

対象ブラウザ

	Safari	Chrome	標準ブラウザ
iOS	対象	対象
Android		対象	対象