| | DesignOps - 開発者向けガイド | |
デザインファイルをインポートしてアプリケーションを開発する開発者向けのガイドを示します。ヒントとベストプラクティスも紹介します。
デザインファイルからアプリケーションの開発を始める場合の開発ワークフローを図 1 に示します。最初に、デザイナーから受け取ったファイルをインポートします。デザイナーはデザイナー向けガイド、表記規則、ベストプラクティスの記事に従い、優れたデザインのアプリケーションを GeneXus 用に作成します。開発者は生成されたオブジェクトをチェックし、実行環境でのアプリケーションの表示をチェックするサイクルを開始します。このとき、UI の修正は開発者の責任なのか (デザインファイルに複雑なコントロールが含まれる場合など)、デザイナーの責任なのかの判断が求められます。このサイクルは、ビジネスロジック開発の前に、開発者とデザイナーが連携し、並行して進めます。
 |
| 図 1: GeneXus における DesignOps のワークフロー |
DesignOps サイクルの初期の段階では、パネルを 1 つずつデザインし、インポートすることをお勧めします。こうすることで、開発者とデザイナーがお互いから学べるだけでなく、アプリケーションがどのようにできあがっていくのかを確認することができます。開発者がコードの記述に着手したら、デザイナーは次の新しいパネルの描画を始めます。このサイクルを、完全に機能するアプリケーションが完成するまで繰り返します。
開発者には、UI を実行環境で確認できる強力なツールがあります: ライブ編集です。このツールにより、不適切なデザインを発見し、容易に修正できるため、優れたデザインのアプリケーションを作成できます。モバイルデザインをインポートする場合は「ネイティブ モバイル アプリケーションのプロトタイプ」を参照してください。
Stencil オブジェクトは、デザイナーが定義するシンボルから生成されます。
このオブジェクトは、複数のパネルで再利用することを目的とするため、アプリケーション内で再利用したほうがいいコンポーネントがあるかどうかを確認し、デザイナーに新しいシンボルの作成を依頼します。また、インスタンスが正しく適用されているかどうかも確認します (値のオーバーライド、テーマクラスの適用など)。インスタンスはターゲットステンシルの参照を確認することで見つけることができます。
Panel オブジェクトまたは Web Panel オブジェクトは、[ Web パネルとしてインポート ] オプションをチェックしたかどうかに応じて、デザイナーが定義するアートボードから生成されます。
これらのオブジェクトの [ レイアウト ] タブは、デザイナーが定義したグループから生成され、コントロールは、適用された表記規則を通じて生成されます。各テーブルでは、セルサイズ (幅/高さ、絶対または相対) と位置が、デザイナーが定義するサイズ変更の制約から生成されます。適切な結果を得るためのルールをデザイナーがデザインに適用し忘れた場合のために、インポート時にはこのことを考慮に入れるようにします。また、デザイナーがアートボードをリンクした場合は、 [ コード ] タブに対応する Call イベントがあります。デザイナーがアニメーションを含めた場合は、フォームの [ Enter Effect ] / [ Exit Effect ] トランジションが適用されます。
Image オブジェクトは、デザインに含まれる画像から、またエクスポート可能とマークされているレイヤーから生成されます (デザイナーが描画したロゴなど)。こうした画像がターゲットプラットフォームで正しく表示されるためには、デザイナーが正しい密度 (1x、2x、3x など) でエクスポートしている必要があります。正しくなかった場合、プレースホルダーとして黒い画像が表示されます。
デザインファイル内のすべての組み込みフォントに対して、一連の File オブジェクト (.otf、.ttf) が生成されます。これらのファイルは Theme オブジェクトに追加されます。最後に、対応するテーマクラスで設定を行います (ターゲットコントロールの [ Class ] プロパティの値)。
[ テーマに追加 ] オプションで指定する Theme オブジェクトに一連のテーマクラスが生成されます。デザイナーがスタイルを定義していない限り、すべてのコントロールに独自のテーマクラスが設定されます。デザインファイルを再インポートすると、手動で変更したプロパティがオーバーライドされることに注意してください。
各テーマクラスは、接頭語「Sketch」が付いた親から継承されます。たとえば、GeneXus が変数のテーマクラスを推測する場合、「SketchAttribute」クラスから継承する Attribute クラスのテーマクラスを生成します (ほかのテーマクラスカテゴリと同様)。
Color Palette オブジェクトが生成され、対応する Theme オブジェクトと同じ名前が付けられ、デザイナーがスタイル、特に塗りつぶし、境界線、またはテキストのスタイルとして定義した色が含まれます (すべての色にこの 3 つのカテゴリのいずれかの接尾辞が付加されます)。また、デザインで色変数として定義されているすべての色が含まれます。
このセクションは、GeneXus 17 以降に適用されます。
|
|
|
|
|