---
title: 202109テクてくLightningTalk_Frameset公開版
tags:  #hcl domino #dominoforever #hcl notes #テクてく #lotus notes #ずっとノーツ #hcl digital solutions #hcl technologies #notes/domino  
author: [あう゛](https://convert.docswell.com/user/abesat)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/5EGXGR52JL.jpg?width=480
description: 2021年9月の「テクてくLotus技術者夜会」でのスライドです。 一揃いの設計セットを用意しておけば、既存のDBアプリを簡単にスピーディーにフレームセット化できるというお話です。 今回は旧来のDBと見た目も一緒にしていますが、どうデザインするかは自由。
published: May 20, 23
canonical: https://convert.docswell.com/s/abesat/Z4QYPD-202109TekTech_LightningTalk_Frameset
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/5EGXGR52JL.jpg)

- テクてく Lotus 技術者夜会ライトニングトーク - 2021/09/17
いまさらアプリを
ざ
わ
ざ
わ
フレーム化する
公開版
阿部 覚
(tw:) @abesat


# Page. 2

![Page Image](https://bcdn.docswell.com/page/4JQ8XVZ97P.jpg)

元はといえば、 2019 年に…
自分のブログに連作モノとして
2 本の作文を載せました
なんの変哲も無い Notes アプリのフレームをわざわざつくる
（その 1 ） https://abesat.blog.jp/archives/2849946.html
（その 2 ） https://abesat.blog.jp/archives/3677534.html
3 本目を書かないまま
作文の意図も明かさないまま
2 年近く中断していたので
この機会に
そのつづきも加えてひとつにまとめ
完結させてしまおうという魂胆です


# Page. 3

![Page Image](https://bcdn.docswell.com/page/K7426MDRJ1.jpg)

やること
昔ながらの
フォームとビューだけで作られた
という感じの
シンプルな
&quot;Notes データベース &quot;
これに
フレームセットを追加する


# Page. 4

![Page Image](https://bcdn.docswell.com/page/LJ1MV8ZVEG.jpg)

やること
個人的なこだわりで
いったんは
なるだけ地味にさりげなく
フレームセットを
追加します


# Page. 5

![Page Image](https://bcdn.docswell.com/page/GJW3LZ93J2.jpg)

やること
フレームセットを追加
と書きましたが
正確には
設計要素として
「フレームセット」
「ページ」
「アウトライン」
の 3 つを
Domino Designer 上で追加します
※ 以下、画面ショットは個人環境の都合で 10.0.1 英語版のものとなります


# Page. 6

![Page Image](https://bcdn.docswell.com/page/4EZVM19GJ3.jpg)

「フレームセット」の追加
仮に「 MainFrameset 」と名づけます。
3 フレーム構成なので、作成画面でレイアウトの選択時に
この形を選択する、でもよいのですが
できれば…


# Page. 7

![Page Image](https://bcdn.docswell.com/page/Y765NLKQEV.jpg)

「フレームセット」の追加
もっとこだわるなら、 2 フレームのこちらを選択の上、
上部にフレームを追加してこんな 3 フレームとします


# Page. 8

![Page Image](https://bcdn.docswell.com/page/G75Y51P274.jpg)

「フレームセット」の追加
個々のフレームに名前をつける際に
下のフレーム名は必ず
「 NotesPreview 」としておきます。
（その理由は中野さんのブログをご参照）
プリビューペインは名前をこうするとこうなるの
https://harunakano.blogspot.com/2009/12/blog-post_07.html
（さらに、
右上のフレーム名は「 NotesView 」にすべきという情報もあるのですが
詳細未確認…いちおう合わせておきます）
NotesView
NotesPreview


# Page. 9

![Page Image](https://bcdn.docswell.com/page/9J2GN161JR.jpg)

「アウトライン」の追加
適当な名前でアウトラインを作成したら、
まずは「デフォルトアウトラインの作成」をクリックします
作成済のビューやフォルダが自動的に
エントリとして追加されます
デフォルトアウトラインの作成
&quot; その他”始まりのものだけ
残す
でも、エントリは
「その他のビュー」「その他の個人ビュー」などの
&quot; その他 &quot; 始まりのものだけを残して、消してしまいます


# Page. 10

![Page Image](https://bcdn.docswell.com/page/DEYVPZ94EM.jpg)

「ページ」の追加
「ページ」と、云いながら、
まだアウトラインの作成画面内です
「アウトラインの使用」ボタンを使います
アウトラインの使用
現在のアウトラインを含むページが出来上がります
このページにも適切な名前を設定


# Page. 11

![Page Image](https://bcdn.docswell.com/page/VJNM53L678.jpg)

（各要素のプロパティを調整）
このあと、
設計要素内のプロパティで
デフォルト値から変更する箇所を挙げてゆきます


# Page. 12

![Page Image](https://bcdn.docswell.com/page/YE9NY94RE3.jpg)

「フレームセット」の左フレーム
名前： （任意）
タイプ： 名前付き設計要素 - ページ
値： （今回作成したページ名を指定）
フレーム内リンクのデフォルトターゲット： NotesView


# Page. 13

![Page Image](https://bcdn.docswell.com/page/GE8K69QG7D.jpg)

「フレームセット」の右上フレーム
名前： NotesView
タイプ： 名前付き設計要素 - ビュー
値： 計算結果（次ページの操作により計算結果になります）
次ページ


# Page. 14

![Page Image](https://bcdn.docswell.com/page/LELZ9WXXJR.jpg)

「フレームセット」の右上フレーム
「 @ 」のボタンを押した画面で、
名前付き要素の名前の式： @ViewTitle
ここは、あまり自信がないのですが、
「 @ViewTitle 」ないしは「 &quot;&quot; 」にしておけば、
こちらが意図した動きを阻害しないようです


# Page. 15

![Page Image](https://bcdn.docswell.com/page/4JMVZ9L3JW.jpg)

「フレームセット」の右上フレーム
高さ： 100 - パーセント


# Page. 16

![Page Image](https://bcdn.docswell.com/page/PJR26GKRE9.jpg)

「フレームセット」の下フレーム
名前： NotesPreview （ここは前述の通り）
高さ： 0 - パーセント


# Page. 17

![Page Image](https://bcdn.docswell.com/page/PEXDMXLY7X.jpg)

「ページ」の埋め込みアウトライン
タイトルスタイル： シンプル
対象フレーム： NotesView
アウトラインサイズ 高さ： 内容に合わせる


# Page. 18

![Page Image](https://bcdn.docswell.com/page/3EKXGWL47D.jpg)

「ページ」の埋め込みアウトライン
フォント
タイトル／トップレベル／サブレベル
サイズ： 9
マウス： ■（赤を選択）
共通で


# Page. 19

![Page Image](https://bcdn.docswell.com/page/L735N13DE5.jpg)

「ページ」の埋め込みアウトライン
背景
トップレベル／サブレベル
選択： ■（下図の青色を選択）
マウス： ■（白を選択）
共通で


# Page. 20

![Page Image](https://bcdn.docswell.com/page/87DDWX427G.jpg)

「ページ」の埋め込みアウトライン
レイアウト タイトル／トップレベル／サブレベル
図の値を設定
cm 単位で設定の場合
共通で
インチ単位で設定の場合
（タイトルには最後のエントリイメージの指定はありません）


# Page. 21

![Page Image](https://bcdn.docswell.com/page/VJPX9PML78.jpg)

「ページ」の埋め込みアウトライン
余白
左： 1.905cm
（インチ単位の場合は 0.75&quot; ）


# Page. 22

![Page Image](https://bcdn.docswell.com/page/2EVLM296JQ.jpg)

アプリケーションのプロパティを変更
起動時に作成したフレームセットを開くように指定します
こうして、一通り設定を終えると…


# Page. 23

![Page Image](https://bcdn.docswell.com/page/57GXGRZ2EL.jpg)

変更前の DB アプリを開いたとき


# Page. 24

![Page Image](https://bcdn.docswell.com/page/4EQ8XVL9JP.jpg)

変更後のフレームセットつき
DB アプリを開いたとき


# Page. 25

![Page Image](https://bcdn.docswell.com/page/KJ426M5RE1.jpg)

つまり、私が今回意図していたのは
変更したことが
利用者さんにほとんど気づかれないような
フレーム対応
でした
よく見てよく触ると細かな差異はあります
あくまで私の環境での調整結果ですので
もしかすると環境によって各プロパティ内の数値に
多少ずれはあるかもしれません


# Page. 26

![Page Image](https://bcdn.docswell.com/page/LE1MV8WV7G.jpg)

もう一つの特徴として
フレームセットを持たない
どの DB アプリに対しても適用可能だと思います
というのは、今回作成した各設計要素内には
ビューの名前など
DB アプリ内の既存の設計要素名を
一切指定していないからです
つまりスピーディにフレーム化できます


# Page. 27

![Page Image](https://bcdn.docswell.com/page/GEW3LZ63E2.jpg)

ねらい
その１
フレームセットによる
ユーザーインタフェースの共通化
今回は、
「フレームセットなしの従来画面に極力近づける」
というのをやりましたが、
例えば共通のフォント・色使い、
あるいは自社ロゴを入れるなど、して準備して、
DB アプリを開いたときの画面イメージを
ある程度統一することもできると思います


# Page. 28

![Page Image](https://bcdn.docswell.com/page/47ZVM1YGE3.jpg)

ねらい
その２
Nomad のモバイル対応（特にスマートフォン）
Notes/Domino 11 以降、
フレームのプロパティにて
フレームセット内のフレームの表示順を指定可能です
共通のフレームセットで表示順指定しておけば
Nomad 対応もスピード化が図れる、かも
＜ご参考＞
御代さんのブログでフレームの表示順について説明、
フレームセットを使った別の方法アプローチもあります
HCL Nomad 用に Notes DB を少しだけカスタマイズする
https://effect-force.co.jp/2021/03/15/nomad-20210315/


# Page. 29

![Page Image](https://bcdn.docswell.com/page/YJ65NLDQ7V.jpg)

トークへのお付き合い
ありがとうございました♥
※ 公開にあたって夜会発表時の内容を少々（いや、けっこう）変更・修正させていただきました


