BROWSE MODE URL STAGE

GeneCode IDEは2つのモードと4つのステージが存在します。
まずはじめに、URL設定ステージブラウズモード)で変換対象となるページに遷移します。

BROWSE MODE URL STAGE
1 アドレスバー 変換元サイトのURLを表します。 2 ツールバー ジーンコードIDE設定やApacheの起動ができます。
3 URLリスト 変換元ページの一覧です。項目をクリックすると、過去に閲覧したページの内容が再表示されます。 4 オリジンビュー 変換元となるページです。閲覧したページはURLリストに自動的に追加されます。
5 変換ビュー 変換後の画面が表示されます。オリジンビューでページ遷移を行うと、それに伴い変換ビューも更新されます。 6 リモコン モード/ステージの切り替えが可能です。
DEVELOP MODE SERVER STAGE

サーバ変換ステージに移動し、変換元ページとプレビュー画面を見ながらテンプレートを開発します。

DEVELOP MODE SERVER STAGE
1 アドレスバー 変換元サイトのURLを表します。ブラウズモードで決定したURLが表示されます。 2 ツールバー ジーンコードIDE設定やApacheの起動ができます。
3 オリジンビュー 変換元ページが表示されます。
要素選択が可能です。
4 テンプレート
サーバJSエディタ
テンプレートやコントローラを編集するエディタです。
5 変換Halfビュー 変換後の中間画面が表示されます。ブラウザ変換ステージの結果は含まれません。 6 リモコン モード/ステージの切り替えが可能です。
DEVELOP MODE BROWSER STAGE

クライアント変換を行う場合は、必要に応じPostJSによる変換コードを開発します。
クライアントJavaScriptの出力を変換する必要がない場合は、作業不要です。

DEVELOP MODE BROWSER STAGE
1 アドレスバー 変換元サイトのURLを表します。ブラウズモードで決定したURLが表示されます。 2 ツールバー ジーンコードIDE設定やApacheの起動ができます。
3 変換Halfビュー サーバ変換ステージでの変換後の画面が表示されます。PostJSの変換結果は含まれません。 4 PostJSエディタ 実行タイミングの設定や、JavaScriptコードの編集が可能です。単体テスト機能も含まれています。
5 変換Endビュー PostJSの変換も含めた最終画面が表示されます。 6 リモコン モード/ステージの切り替えが可能です。
DEVELOP MODE DESIGN STAGE

デザイン変換ステージで、プレビュー画面を見ながらCSSを開発します。

DEVELOP MODE DESIGN STAGE
1 アドレスバー 変換元サイトのURLを表します。ブラウズモードで決定したURLが表示されます。 2 ツールバー ジーンコードIDE設定やApacheの起動ができます。
3 変換Endビュー 変換後ページが表示されます。
CSS/JSエディタで未保存の内容は含まれません。
4 CSS/JSエディタ CSSやJavaScriptを編集するコードエディタです。
5 CSSプレビュー 編集中のCSS適用後のプレビュー画面が表示されます。 CSS保存後は、変換EndビューとCSSプレビューが一致します。 6 リモコン モード/ステージの切り替えが可能です。