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を読み込んだ状態のパターンファイル

対象OS・ブラウザ

対象OS

iOS 9系以上
Android 5系以上

対象ブラウザ

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