DesignOps - 例 - Travel Agency のモバイルフロントエンド

ここでは、Sketch デザインツールで作成され、GxDesignOps プラグインを使用して .gxsketch 形式でエクスポートされた、Travel Agency のモバイルフロントエンドのデザインファイルについて説明します。

サンプルのダウンロード

gxsketch ファイルの確認

任意の ZIP ファイル解凍ソフトウェアで .gxsketch ファイルのコンテンツを確認できます。ここでは 7zip ファイルアーカイバーを使用します。.gxsketch ファイルには、.sketch ファイルのほかに、gx-preview、フォント、画像という必須アセットが含まれた 3 つのフォルダがあります。

想定したとおりにレンダリングされないコントロールがある場合は、それらのリソースを確認し (画像がない、フォントファイルがパッケージ化されていないなど)、不足しているものがある場合はデザイナーに報告します。
.gxsketch ファイルを解凍し、.sketch ファイルを (すべてのフォントをインストールした) Mac 上の Sketch で開くと、次のように表示されます:

gxsketch ファイルのインポート

基本的には、[ Sketch インポート ] オプションの説明に従う必要があります。
ファイルシステムから .gxsketch ファイルを選択すると、 [ Sketch のインポート先 ] ダイアログが表示されます:

左側のツリーに表示されるノードを確認します。各ノードのコンテキスト情報が表示されます。たとえば、パネルの場合はプレビュー (画像およびレイアウトツリー) と GXML コード、テーマの場合はテーマクラスのプロパティを説明する GXML コード、画像やフォントの場合はプレビューが表示されます。また、インポートするノードの選択、インポートしないノードの選択解除ができます。

警告: ノードの選択/選択解除では、ノード間の依存関係は確認されません。そのため、ノードを選択解除する場合は、ほかのノードとの依存関係 (パネルで使用される画像など) がないか確認してください。そうしないと、インポートエラーが発生する可能性があります。

デザインファイルをインポートする必要がある場合は [ OK ] ボタンをクリックします。 [ 出力 ] ダイアログ ( [ 一般 ] タブ) にインポートの進捗状況が表示されます。

インポートが完了したら、生成されたパネルを確認します。また、インポートされたテーマクラス、画像オブジェクト、ファイルオブジェクト (フォント) も確認します。

最後に、自分でこれらのパネルをデザインし、必要な画像やフォントをインポートし、すべてのテーマクラスを作成すると、どれくらいの時間がかかるか考えてみてください。
間違いなく、多くの手間が省けます。

実行時

最後に、生成されたメインメニューオブジェクトを実行して、生成されたパネルを確認します。

注意: 完全なものは期待しないでください。デザインファイルや生成されたオブジェクト (抽象レイアウトまたはテーマクラス) に何らかの修正が必要になる可能性が高いです。

次に、全 4 つのパネルのプレビューを、設計時の状態 (アートボードの列) と、変更を加えていない実行時の状態 (Android/iOS の列) で示します。

デザイナー		開発者
Sketch	アートボード	GeneXus	Android	iOS
ホーム		ViewHome
観光名所		ViewAttractions
観光名所の情報		ViewAttractionAbout
観光名所への行き方		ViewAttractionDirections