ページビューの合計

ラベル UI の投稿を表示しています。 すべての投稿を表示
ラベル UI の投稿を表示しています。 すべての投稿を表示

2026年3月24日火曜日

#リスタイル ( #Restyle )用テンプレート

Traditional app development versus development using Restyle.

With UI design in mind, I explored which approach to app development would be best for our company.


みなさま、こんにちは。
本業に追われ、Dominoを触れない日が続いております💦
そんな中ではございますが、新規のDominoアプリ作成案件が発生しました。
普段なら自社用のテンプレートのパーツをコピーして作るのですが、リスタイルを使ったほうが楽なのではないかと思いつきました。

ご存じの方も多いかとは思いますが、Dominoアプリのリスタイルとは、HCL様のサイトでは、

「Domino Restyle は、アプリケーションの UI 要素を、色調整されたクリーンな外観と操作性で更新します。」

と紹介されています。

以下はリスタイルウィザードの1画面目になります。


V12でリリースされたものですが、V14になりさらに洗練されております。

そこで今回は簡単な掲示板ベースになりますが、Domino Designerの作業を最小限に絞り、UIは Domino Restyleに全面的に依存した内容について報告致します。


それではベースのアプリを作りますが、ここで細かく説明することは避けますが、作成済のテンプレートを公開してありますので、必要な方は以下よりダウンロードして利用ください。

https://app.box.com/s/i6yzmsjn8ljwuw43wybot12mxwv7itos

こちらのテンプレートには以下内容を作成してあります。

・フォーム(MainForm|Main)
・ビュー(byCategory|byCategory、byCreator|byCreator、byDate|byDate)
・アウトライン(Menu|Menu)
・ページ(Menu|Menu)
・フレームセット(MainFlameSet|MainFlameSet)
・共有アクション(Delete、Edit、Exit、New、Save)


以上で仕上がった見た目は以下になります。

アプリケーションアイコン

起動時のフレームセット(左がページ Menu、右がビュー byDate)

フォーム(新規作成)




それではいよいよリスタイルです。
手順はHCL様サイトに細かく紹介されていますので、そちらに従って実行します。

Notes アプリケーション用の Domino Restyle

今回は一例として各画面は以下のように設定してみました。

①対象のアプリを右クリックして、[アプリケーション]-[スタイルの変更(Y)]をクリックします。


②まずはテーマを設定します。色やアクションバー、アウトラインのデザインを設定します。
自由に選んでいただいていいのですが、今回は以下内容で進めています。

テーマの色:シーブリーズ
アプリケーションの色:青
カラフルなアクションバー(C)


③続いてマッピングの確認です。どの設計要素に先のデザインを適用するかを設定します。
今回は以下のように設定します。

アプリケーションのタイトル:フォーム(MainForm)
アウトライン:ページ(Menu)
サーバー名:フォーム(MainForm)
標準化されたフレームセットに変換:はい(推奨)(Y)


④次に設定の確認です。ここでは書体やスタイルを変更する要素を選択します。
今回は以下の画像のように設定しました。


⑤最後はアプリケーションアイコンです。
今回は以下のように設定してみました。

新規アイコンの作成(C)
形状の選択:正方形
影の選択:フラット
アイコンの選択:データ(データベース)


設定は以上で完了です。
「スタイルの変更(R)」をクリックして実行しますと、ほどなく完了します。



このままオープンしてもいいのですが、一旦完了してみますと、まずアイコンが変わっていることが確認できます。


それではいよいよアプリを開いてみます。


いかがでしょう。
スッキリした見た目になったかと思います。

フォームも


このように統一感のある仕上がりになっていました。


もっとも多少手を加えたいと思うことはあるかと思います。

ということで、Designerではどのようになっているのか確認してみます。


見た限りすべての設計要素が上書き(最終更新日時)されていました。結果をまとめると、

フォーム:上書き
ビュー:上書き
フレームセット:上書き+$付が2個追加
ページ:上書き+$付が3個追加
アウトライン:上書き+$付が1個追加

そのほかにイメージリソースにリスタイル用の画像が大量に保存されていました。

それではリスタイル後のカスタマイズを実施してみます。
例えばフォームのタイトルの文字サイズを大きくして、青字に変更してみます。


当たり前ですが、


デザインが変わりました。


以上、今まではデザイン(UI)を意識しながらアプリを作成(パーツコピー)していたのですが、リスタイルを利用することで統一感のあるアプリが簡単にできることは理解いただけたかと思います。
結論としては基本デザインはリスタイルに任せて、必要なパーツは従来通りコピペで作ることになりそうです。

ただそんな中ではありますが、ちょうど先週V14.5.1がリリースされました。
リリースノートはこちら

この中で"ユーザーインターフェイスの強化"という項目がありますので、今後は比較しながら最適なUIを提供していきたいと思います。