202109テクてくLightningTalk_Frameset公開版
460 Views
May 20, 23
スライド概要
2021年9月の「テクてくLotus技術者夜会」でのスライドです。
一揃いの設計セットを用意しておけば、既存のDBアプリを簡単にスピーディーにフレームセット化できるというお話です。
今回は旧来のDBと見た目も一緒にしていますが、どうデザインするかは自由。
関連スライド
各ページのテキスト
- テクてく Lotus 技術者夜会ライトニングトーク - 2021/09/17 いまさらアプリを ざ わ ざ わ フレーム化する 公開版 阿部 覚 (tw:) @abesat
元はといえば、 2019 年に… 自分のブログに連作モノとして 2 本の作文を載せました なんの変哲も無い Notes アプリのフレームをわざわざつくる （その 1 ） https://abesat.blog.jp/archives/2849946.html （その 2 ） https://abesat.blog.jp/archives/3677534.html 3 本目を書かないまま 作文の意図も明かさないまま 2 年近く中断していたので この機会に そのつづきも加えてひとつにまとめ 完結させてしまおうという魂胆です
やること 昔ながらの フォームとビューだけで作られた という感じの シンプルな "Notes データベース " これに フレームセットを追加する
やること 個人的なこだわりで いったんは なるだけ地味にさりげなく フレームセットを 追加します
やること フレームセットを追加 と書きましたが 正確には 設計要素として 「フレームセット」 「ページ」 「アウトライン」 の 3 つを Domino Designer 上で追加します ※ 以下、画面ショットは個人環境の都合で 10.0.1 英語版のものとなります
「フレームセット」の追加 仮に「 MainFrameset 」と名づけます。 3 フレーム構成なので、作成画面でレイアウトの選択時に この形を選択する、でもよいのですが できれば…
「フレームセット」の追加 もっとこだわるなら、 2 フレームのこちらを選択の上、 上部にフレームを追加してこんな 3 フレームとします
「フレームセット」の追加 個々のフレームに名前をつける際に 下のフレーム名は必ず 「 NotesPreview 」としておきます。 （その理由は中野さんのブログをご参照） プリビューペインは名前をこうするとこうなるの https://harunakano.blogspot.com/2009/12/blog-post_07.html （さらに、 右上のフレーム名は「 NotesView 」にすべきという情報もあるのですが 詳細未確認…いちおう合わせておきます） NotesView NotesPreview
「アウトライン」の追加 適当な名前でアウトラインを作成したら、 まずは「デフォルトアウトラインの作成」をクリックします 作成済のビューやフォルダが自動的に エントリとして追加されます デフォルトアウトラインの作成 " その他”始まりのものだけ 残す でも、エントリは 「その他のビュー」「その他の個人ビュー」などの " その他 " 始まりのものだけを残して、消してしまいます
「ページ」の追加 「ページ」と、云いながら、 まだアウトラインの作成画面内です 「アウトラインの使用」ボタンを使います アウトラインの使用 現在のアウトラインを含むページが出来上がります このページにも適切な名前を設定
（各要素のプロパティを調整） このあと、 設計要素内のプロパティで デフォルト値から変更する箇所を挙げてゆきます
「フレームセット」の左フレーム 名前： （任意） タイプ： 名前付き設計要素 - ページ 値： （今回作成したページ名を指定） フレーム内リンクのデフォルトターゲット： NotesView
「フレームセット」の右上フレーム 名前： NotesView タイプ： 名前付き設計要素 - ビュー 値： 計算結果（次ページの操作により計算結果になります） 次ページ
「フレームセット」の右上フレーム 「 @ 」のボタンを押した画面で、 名前付き要素の名前の式： @ViewTitle ここは、あまり自信がないのですが、 「 @ViewTitle 」ないしは「 "" 」にしておけば、 こちらが意図した動きを阻害しないようです
「フレームセット」の右上フレーム 高さ： 100 - パーセント
「フレームセット」の下フレーム 名前： NotesPreview （ここは前述の通り） 高さ： 0 - パーセント
「ページ」の埋め込みアウトライン タイトルスタイル： シンプル 対象フレーム： NotesView アウトラインサイズ 高さ： 内容に合わせる
「ページ」の埋め込みアウトライン フォント タイトル／トップレベル／サブレベル サイズ： 9 マウス： ■（赤を選択） 共通で
「ページ」の埋め込みアウトライン 背景 トップレベル／サブレベル 選択： ■（下図の青色を選択） マウス： ■（白を選択） 共通で
「ページ」の埋め込みアウトライン レイアウト タイトル／トップレベル／サブレベル 図の値を設定 cm 単位で設定の場合 共通で インチ単位で設定の場合 （タイトルには最後のエントリイメージの指定はありません）
「ページ」の埋め込みアウトライン 余白 左： 1.905cm （インチ単位の場合は 0.75" ）
アプリケーションのプロパティを変更 起動時に作成したフレームセットを開くように指定します こうして、一通り設定を終えると…
変更前の DB アプリを開いたとき
変更後のフレームセットつき DB アプリを開いたとき
つまり、私が今回意図していたのは 変更したことが 利用者さんにほとんど気づかれないような フレーム対応 でした よく見てよく触ると細かな差異はあります あくまで私の環境での調整結果ですので もしかすると環境によって各プロパティ内の数値に 多少ずれはあるかもしれません
もう一つの特徴として フレームセットを持たない どの DB アプリに対しても適用可能だと思います というのは、今回作成した各設計要素内には ビューの名前など DB アプリ内の既存の設計要素名を 一切指定していないからです つまりスピーディにフレーム化できます
ねらい その１ フレームセットによる ユーザーインタフェースの共通化 今回は、 「フレームセットなしの従来画面に極力近づける」 というのをやりましたが、 例えば共通のフォント・色使い、 あるいは自社ロゴを入れるなど、して準備して、 DB アプリを開いたときの画面イメージを ある程度統一することもできると思います
ねらい その２ Nomad のモバイル対応（特にスマートフォン） Notes/Domino 11 以降、 フレームのプロパティにて フレームセット内のフレームの表示順を指定可能です 共通のフレームセットで表示順指定しておけば Nomad 対応もスピード化が図れる、かも ＜ご参考＞ 御代さんのブログでフレームの表示順について説明、 フレームセットを使った別の方法アプローチもあります HCL Nomad 用に Notes DB を少しだけカスタマイズする https://effect-force.co.jp/2021/03/15/nomad-20210315/
トークへのお付き合い ありがとうございました♥ ※ 公開にあたって夜会発表時の内容を少々（いや、けっこう）変更・修正させていただきました