to topto bottom

モバイルファースト時代のマルチデバイス対応を確実・簡単に

高度な処理と機能で開発と運用を支援します。

マルチデバイス・マルチOSに対応させるために必要なノウハウを自動化することで、短期間で不具合の無いスマートデバイス対応サイトの開発を実現します。

機能と変換の仕組み

機能概要

スクラッチ(手組み)で、タブレットやスマートフォンへ対応したマルチデバイス・マルチOS対応のスマートデバイス向けサイトを作成する場合、タッチ操作に最適な「動的ユーザーインターフェース」を実装するには、通常のHTMLやCSSに加えて、すべての機種で動作する JavaScript をコーディングする必要があります。また画像についても、端末の解像度に合わせてCSSで調整したり、場合によっては解像度別にそれぞれの画像を用意する必要があり、開発には多くのノウハウと工数が必要になります。

『x-fit』は、それら多くのノウハウと工数が必要となる、すべての機種で動作する動的ユーザーインターフェースの実装と画像処理を「コンポーネント」として提供しています。 機種情報を基にアクセス端末を自動で判別し、それぞれの端末に最適化された「UIコンポーネント」を出力します。

自動判別で最適なソースを出力します。

「UIコンポーネント」はHTML、CSS、JavaScriptで構成されており、動的な設定を行う「プロパティファイル」の設定と、アクセスのあった端末の情報に合せて動的に処理され最適なコンポーネントを端末に出力します。

その他の主な機能

『x-fit』には「UIコンポーネント」を含め、サイト開発や運用を支援する様々な機能が実装されています。

画像最適化変換

スマートフォンやタブレットなど、それぞれの端末による解像度の違いを吸収し、最適に画像を変換します。

タブレット・スマートフォンの機種情報を保有

OSのバージョン情報や画面サイズの情報など各種端末の機種情報を実装しているので、レスポンシブ・ウェブ・デザインのように端末の画面サイズに合わせた表示が簡単にできます。

新機種・OS自動対応

発売された新機種や、アップデートされたOSの情報を自動で更新します。(更新時刻の設定や手動での更新も可能です)

UIコンポーネント

簡単に利用できる、タッチ操作に最適化されたコンポーネントです。用途に合わせた複数のUIが用意されています。

グルーピングによる振り分け機能

「OSの種類」や「バージョン」、「タブレット」と「スマートフォン」など、機種情報を基にグルーピング設定を行い振り分けることができます。

URLリライト

URLリライト設定で設定したリクエストルールに則って、Webサーバへのリクエストをリライトします。

jQuery自動ロード

指定されたjQueryを、自動で全ページに読み込むことができます。

デフォルトCSSの設定

CSSリセットなど、全ページ共通のCSSを「defaultCSS」に設定して自動で読み込むことができます。(初期設定ではbody、padding、marginのリセットが記述されています)

ログ出力機能

アクセスログを始め、コンソールログやスタッツログ(x-fitの状態ログ)など、様々なログを出力することができます。(カスタマイズも可能です)

仮想化環境へ対応

クラウド環境での運用など、ハードウェアの制約に縛られない柔軟なシステム運用に対応します。

変換の仕組み

JavaScriptに関する開発スキルがなくても実装可能

タッチ操作に最適化された「UIコンポーネント」の実装には、通常のHTMLとCSS、そしてUIの動作を定義する「プロパティファイル」(themes.properties)を設定するだけで簡単に実装することができます。

各端末やOSに合せて複雑な JavaScript を書き分ける必要がなく、標準的なWebスキルがあれば利用することができます。

端末やOSに毎にJavaScriptを書き分ける必要がありません。

UIコンポーネントの実装

「UIコンポーネント」はHTMLから呼び出して利用します。 基本的な実装方法としては、例えば、上記の例で示した「タブ」コンポーネントを実装する場合。

実装の準備

HTML内で「タブ」を実装したい箇所の「クラス(class)名」と、予め『x-fit』側に用意されている「themes.properties」(プロパティファイル)内の「タブ」の動作を設定するコードの「変換トリガークラス名」を同じ名称にします。(「変換トリガークラス名」は任意の名称を付けることが可能です)

これにより、HTML内の<div class="変換トリガークラス名"> ~ </div>間を「タブ」コンポーネントにする準備ができました。この部分が『x-fit』を通すことで「タブ」に変換されて端末に出力されます。

内容(コンテンツ)の記述

続いてHTMLで、「タブ」内のコンテンツを埋めていきます。
「タブ」コンポーネントの場合、<li> ~ </li>タグ内が「タブ」の"見出し"に、続く <div> ~ </div>タグ内が「タブ」内のコンテンツになります。
通常のシンプルなHTMLで実装できるので、コンテンツの量に合せて、簡単にタブの数を増やしたり減らしたりすることができます。

装飾方法

「タブ」のデザインや装飾についても、通常のCSSで行います。
『x-fit』では、ソースとなるHTMLと変換後のHTMLではソースが異なりますので、『x-fit』を通した「変換結果」を確認しながらデザインすると比較的に楽に装飾することができます。

『x-fit』はこれらの情報を基に、アクセスのあった端末に最適な「UIコンポーネント」のソースを生成して出力します。

UIコンポーネントの組み合わせでサイト構築

UIコンポーネントの組み合わせでサイトを構築

『x-fit』では、さまざまな「UIコンポーネント」を組み合わせて利用することもできるので、複雑な構成をもつサイトでも、短期間で不具合の無いスマートデバイス対応サイトを作成することが可能です。

また「UIコンポーネント」は個別で利用できるので、サイトの大枠をレスポンシブ・ウェブ・デザインで作成して、メニューや画像の切り替えなど動的な部分を「UIコンポーネント」を利用して実装するといった使い方も可能です。

デモサイトの解説ページでは、左記のデモサイトのほか、タブレット対応デモサイトの解説などもございます。

デモサイトの解説

お問い合せ

『x-fit』(クロスフィット)に関するご質問や、[評価版]のお申込み、[資料請求]等は以下よりお問い合せください。