HCL Notes 12.0.2 アプリケーション・デザインの一括変更

HCL Notes 12.0.2 EAP (Early Access Program) 5 （ベータ版）で実装された新機能「スタイルの変更」を試用しました。
本スライドでは、アプリケーションの見た目（スタイル）を変更する機能を操作してわかったことや気になったポイントを書いています。
2022年 11月10日開催の「のの会 第45回」で使用した資料です。

Transcript

1. HCL Notes 12.0.2 EAP5
   スタイルの変更（Restyle）
   アプリケーション・デザインの一括変更
   中野晴幸 Haruyuki Nakano
   @harunakano (twitter)
   harunakano.blogspot.com (blog)
   

   View Slide

2. アプリケーションに設計者
   以上の権限が無ければ
   グレーアウトする
   

   View Slide

3. View Slide

4. View Slide

5. アプリケーションの色
   テーマの色
   影響する領域
   

   View Slide

6. ビューのアクションバー
   ビューの列のタイトル
   ビューの行
   上段フレーム内の
   フォーム or ページ
   「アプリケーションのタイトル」
   エリア
   中段フレーム内の
   フォーム or ページ
   「アウトライン」エリア
   下段フレーム内の
   フォーム or ページ
   「サーバー名」エリア
   左右2分割のフレームセット
   色付けされる範囲にあると
   想定されているもの
   

   View Slide

7. ニュートラルグレー
   クリームトープ
   シーブリーズ
   テーマの色
   

   View Slide

8. ピンク オレンジ ライム ティール 青 インディゴ 紫
   アプリケーションの色
   

   View Slide

9. マッピング
   アプリケーションの
   タイトル
   アウトライン
   サーバー名
   

   View Slide

10. ※ナビゲータは選択できない
    ※「適用外」は何も選択しない場合の選択肢
    DB内あにある設計要素のリスト
    マッピング
    

    View Slide

11. ①
    ②
    ③
    ①
    ②
    ③
    アウトラインを埋め込んだページを
    「アプリケーションのタイトル」
    に指定すると文字が読めなくなった
    マッピング
    ページの並びを替えてみると…
    after
    

    View Slide

12. ※コンポジットアプリケーションの
    場合、オプションが追加される
    テーブルの背景
    

    View Slide

13. テーブルの背景（色）
    before
    after
    after
    

    View Slide

14. テーブルの背景（イメージ）
    背景画像が消えた
    背景画像そのまま
    before
    after
    after
    

    View Slide

15. View Slide

16. フレームセットを使用した
    アプリのリスタイル（例）
    

    View Slide

17. view
    Application
    title
    Outline
    Server
    name
    フレームセットの構造
    縦に3分割のフレーム 横に2分割のフレーム
    リスタイル前
    

    View Slide

18. スタイルの変更
    

    View Slide

19. before
    after
    

    View Slide

20. フレームの高さはそのままだが
    テキストのスタイルが変わり空
    きスペースが目立つ
    表示しているビューがハイライ
    トされた
    カテゴリ列（1列目）：
    文字サイズが2列目以降と統一された
    太字だったが太字でなくなった
    2列目：ビューのプロパティで「最後の列をウィンドウ幅の最後まで広
    げる」が有効になったため列のプロパティで設定している「利用可能な
    ウィンドウ幅まで拡張して使用する」が効かず固定幅で表示された
    行の高さが変わった
    行は交互に色が付き、グリッド（行間の線）が
    引かれた
    フレーム間に引かれたラインで
    引き締まった印象になった
    before
    after
    3列目：2列目のオプションが効かな
    くなったため無駄に幅が広くなった
    【詳細は次ページ】
    

    View Slide

21. リスタイル後に有効になった
    リスタイル前に有効にしていた
    両方有効にすると列の設定が無視され、ビューの設定が効く
    ビューのプロパティ 列のプロパティ
    

    View Slide

22. アクションボタンのアイコンの上部と下
    部が表示されなくなった。（ボタン内
    マージンが追加されたことによるもの）
    表の左セルの背景色が置換されたが
    フォント色は変わらず、文字が読め
    なくなった
    before
    after
    表の右セルの背景
    色はnoneのまま
    

    View Slide

23. before
    after
    リスタイル前にビューアクションバーと列タイトル
    を変更してみたところ、リスタイルで変わった。
    

    View Slide

24. before
    表内の項目タイトルのセルの背景色は白、罫線
    はグレーで置換された
    項目タイトルの位置（左 or 上）をきちんと認識
    してて素晴らしい
    項目タイトルのセルの背景色を白に変えるなら
    テキスト色を白のままにせず変えてほしい
    リッチテキストエリアと表の間にあった水平線
    が削除された
    after
    表タイトルの位置
    

    View Slide

25. before
    after
    「アクションボタンを右に揃える」が有効
    なボタンのスタイルが左揃えのボタンと異
    なるのは既知の不具合です
    

    View Slide

26. before
    after
    名前に括弧「()」が付いた
    隠しビューもリスタイルさ
    れた
    

    View Slide

27. フォームとビューのみの
    アプリのリスタイル
    フレームセット未使用のアプリもフォームとビューのリスタイルを実行で
    きます
    

    View Slide

28. ← Restyle前
    ↓ Restyle後
    目立った変更点（ビュー）
    • 行の高さ
    • フォントが Default User
    Interface （Windowsのフォン
    ト設定と同じ）に変わった
    

    View Slide

29. ← Restyle前
    ↓ Restyle後
    目立った変更点（フォーム）
    • フォームに背景色が追加された
    • 水平線が削除された
    • フォントが変わった
    

    View Slide

30. 所感
    • 現状はメーカー提供のテンプレートによくあるフレーム構成の
    アプリ用に最適化されたツール
    • スタイルを微調整なしに揃えたい場合は便利
    ➢表を多用する場合は要注意
    ➢フォントサイズと表示位置などが細かく調整されたアプリは要注意
    

    View Slide

31. 【参考】リスタイル前後の設計要素サイズ
    設計要素 名前 リスタイル前 リスタイル後
    フォーム main 3409 3409
    ビュー
    (by author) 2770 3802
    by category 2657 3668
    created 2600 3611
    ページ
    Dbtitle 2006 2006
    menu 2256 2256
    svname 2006 2006
    フレームセット
    MainFrameset 2024 1996
    Navigator 2055 2055
    アウトライン Menu 2281 2281
    設計要素の最終更新日時は、上記のうちアウトライン以外の設計要素でリスタイル実行日時に変わった
    

    View Slide