機能と変換の仕組み高度な処理と機能で開発と運用を支援します。マルチデバイス・マルチOSに対応させるために必要なノウハウを自動化することで、短期間で不具合の無いスマートデバイス対応サイトの開発を実現します。コーディングする必要があります。画像についても、端末の解像度に合わせてCSSで調整したり、場合によっては解像度別にそれぞれの画像を用意する必要があり、開発には多くのノウハウと工数が必要になります。『x-fit』は、それら多くのノウハウと工数が必要となる、すべての機種で動作する動的ユーザーインターフェースの実装と画像処理を「コンポーネント」として提供しています。機種情報を基にアクセス端末を自動で判別し、それぞれの端末に最適化された「UIコンポーネント」を出力します。「UIコンポーネント」はHTML、CSS、JavaScriptで構成されており、動的な設定を行う「プロパティファイル」の設定と、アクセスのあった端末の情報に合せて動的に処理され最適なコンポーネントを端末に出力します。スマートフォンやタブレットなど、それぞれの端末による解像度の違いを吸収し、最適に画像を変換します。タブレット・スマートフォンの機種情報を保有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)を設定するだけで簡単に実装することができます。書き分ける必要がなく、標準的なWebスキルがあれば利用することができます。「UIコンポーネント」はHTMLから呼び出して利用します。基本的な実装方法としては、例えば、上記の例で示した「タブ」コンポーネントを実装する場合。実装の準備HTML内で「タブ」を実装したい箇所の「クラス(class)名」と、予め『x-fit』側に用意されている「themes.properties」(プロパティファイル)内の「タブ」の動作を設定するコードの「変換トリガークラス名」を同じ名称にします。</div>間を「タブ」コンポーネントにする準備ができました。この部分が『x-fit』を通すことで「タブ」に変換されて端末に出力されます。続いてHTMLで、「タブ」内のコンテンツを埋めていきます。</div>タグ内が「タブ」内のコンテンツになります。通常のシンプルなHTMLで実装できるので、コンテンツの量に合せて、簡単にタブの数を増やしたり減らしたりすることができます。「タブ」のデザインや装飾についても、通常のCSSで行います。『x-fit』では、ソースとなるHTMLと変換後のHTMLではソースが異なりますので、『x-fit』を通した「変換結果」を確認しながらデザインすると比較的に楽に装飾することができます。『x-fit』はこれらの情報を基に、アクセスのあった端末に最適な「UIコンポーネント」のソースを生成して出力します。『x-fit』では、さまざまな「UIコンポーネント」を組み合わせて利用することもできるので、複雑な構成をもつサイトでも、短期間で不具合の無いスマートデバイス対応サイトを作成することが可能です。「UIコンポーネント」は個別で利用できるので、サイトの大枠をレスポンシブ・ウェブ・デザインで作成して、メニューや画像の切り替えなど動的な部分を「UIコンポーネント」を利用して実装するといった使い方も可能です。デモサイトの解説ページでは、左記のデモサイトのほか、タブレット対応デモサイトの解説などもございます。デモサイトの解説お問い合せ『x-fit』(クロスフィット)に関するご質問や、[評価版]のお申込み、[資料請求]等は以下よりお問い合せください。