はじめに
こんにちは!! GeneXus開発者の佐藤と酒井です。
今回のブログは、「WorkWithPlusDSのデザイントークンの使い方」です。
環境：GeneXus18、WorkWithPlus（WWP）、Tomcat 10.1使用
デザインシステムのトークンとは
佐藤
酒井さん、今回はデザインシステムのトークンについての説明ですよ！まず、トークンとは何か知っていますか？
酒井
はいはい、少し調べてみました。
トークンは、デザインシステム内で使用される視覚的な要素を
抽象化したものだと理解しています。
色やフォント、サイズなどの基本的なデザイン要素を表現するものですよね。
佐藤
その通りです。GeneXusのWorkWithPlusDSでは、トークンを使ってデザインの一貫性を保ちやすくしています。具体的には、色やタイポグラフィ、スペーシングなどの基本的なデザイン要素をトークンとして定義しています。
酒井
なるほど。では、これらのトークンを使うことで、どのようなメリットがあるのでしょうか？
佐藤
主なメリットは2つあります。
- デザインの一貫性を保ちやすくなる
- デザインの変更が容易になる
酒井
具体的にはどういうことですか？
佐藤
例えば、プライマリーカラーを変更したい場合、トークンを使っていれば、一箇所の変更で全体に反映させることができます。また、「メインの見出し」や「ボタンの余白」といった具体的な要素名でトークンを定義できるので、保守性が上がります。
トークンの基本的な使い方
酒井
なるほど！トークンの重要性がわかりました。
では、実際にトークンを使う方法を教えていただけますか？
佐藤
いいですとも！GeneXusでのトークンの使い方を順を追って説明しますね。
1.WorkWithPlusDSオブジェクトを開く
酒井
WorkWithPlusDSオブジェクトは、カスタマイズ用のデザインシステムでしたよね。
佐藤
その通りです。GeneXus上のエクスプローラーから選択できます。では次に、「Tokens」タブを選択してみましょう。
2. 「Tokens」タブを選択
佐藤
ここで様々なトークンを定義できます。例えば、色のトークンを定義する場合は「Color」セクションで行います。新しく追加したい場合は、「Add Token」をクリックしてトークンを追加できます。同様に、フォントサイズやスペーシングなども定義できます。
3.実際のコンポーネントやスタイルで使用する
佐藤
実際に適用してみましょう。今回は、アプリケーションのボタンのカラーを変更してみます。まずは、「Tokens」タブの中に#colorを定義していきましょう。
酒井
直接記述することもできるんですね。
佐藤
できますよ。これが変更前の画面です。
4.WorkWithPlusDSオブジェクトの「Tokens」タブで、Colorのトークンを修正
佐藤
ここでは、「BaseColor」という名前のカラートークンの値を「#5CB85C」から「#1900ff」に変更します。この実装のまま変更を保存すると、このトークンを使用しているすべての箇所が自動的に更新されるため、ユーザーがどの色を選択しても、上書きされてしまうことに注意してください。
佐藤
変更してみました。実行してみましょう。
佐藤
そうするとこれが。
佐藤
こう。
酒井
すごい！とても効率的ですね！
トークンを使うことで、デザインの一貫性を保ちながら、効率的に変更ができるんですね。
佐藤
その通りです。これがトークンの大きな利点です。使ってみたくなりますよね。
Tips
- トークン名は明確で理解しやすいものにすると、保守性がアップ！
- カラーパレット、ブレークポイント、アニメーションの持続時間やイージングもトークンとして管理できる！
よろしければこちらもご参照ください！
参考ブログ
WorkWithPlusDSを用いたデザインの変更【基本編】
WorkWithPlusDSを用いたデザインの変更【応用編】
おわりに
今回は、GeneXusのデザインシステムにおけるトークンの使い方について解説しました。
トークンを効果的に活用することで、デザインの一貫性を保ちながら、効率的な開発が可能になります。
ぜひ、実際のプロジェクトでトークンを活用し、その便利さを体験してみてくださいね。
最後までお読みいただき、ありがとうございました！