前回からの続き

　前回までは、PC用、スマホ用に作成したフレームセットを切り替えるという話でした。今回は、ウィンドウ幅に応じて、ビュー列の表示・非表示を切り替えるというお話です。

　どんなシーンで有効か？と言うと、PC、タブレット、スマホで同じビューを共有したい場合です。ビューを作る際は、左から一番知りたい情報、キーとなる情報を並べ、右に行くに従って補足的な情報や毎回は見なくてもよい情報を並べていきます。タブレット、スマホでは画面幅が狭いので、重要な列のみ残し、たまにしか見ない情報は、フォームを開いてみて下さいという運用にすることで、見やすいビューを実装することができます。

【実装イメージ】

列の非表示式を実装する

　実装は簡単です。非表示にする列を選択し「式が真のときに列を非表示」にチェックをつけ、「@ResolutionWidth < 1000」のようにウィンドウ幅を取得する関数と、非表示にしたいピクセル数を指定します。下記のように指定した場合、Notesクライアントのウィンドウサイズが999以下になると、該当列が非表示になります。

【DominoDesigner－非表示式】

　実はこれだけでは、ウィンドウサイズの変化に応じて非表示式は実行されません。ビューのプロパティにあるonSizeイベントに「@Command([RelayoutWindow])」を追加する必要があります。こちらもV12で新しく追加された関数です。

【DominoDesigner－onSizeイベント】

【@式－onSizeイベント】

REM {ウィンドウサイズ変更時にレイアウト変更を実行。(1行目の@StatusBarはデバッグ用なので本来不要です。)};
@StatusBar(@Text(@ResolutionWidth) + " : " + @Text(@ResolutionHeight));
@Command([RelayoutWindow])

【実行結果－PC】

本当に必要なのはスマホごとの解像度違いへの対応

　PCでNotesクライアントのウィンドウサイズに応じてビュー列を省略することはほぼないと思いますが、最近のスマホは画面サイズ、縦横比率が様々ですので、ある端末ではバッチリ画面に入っているのに、別の端末では右側に余白が生まれて間延びした感じになってしまうことがあります。

　このような場合には、今回紹介した@ResolutionWidthを有効活用するか？以前からある「利用可能なウィンドウ幅まで拡張して使用する」を活用すると良いと思います。

最後に

　4回に渡って続けてきた「Notes、Nomadで作るレスポンシブアプリ」の記事は今回で一旦終了になります。工夫次第でNotes、Nomadアプリが使いやすく、今までできないと思ってたことができる可能性を感じていただけたのではないかと思います。

　「Notesはこれができない」と言われたり、思っている方は、一度他の開発環境、プラットフォームを学んだ後、再度、NotesDesignerを開いてみてはどうでしょうか？

　他のプラットフォームを触ってみて初めてわかるNotesの良さ、足りない分、自社がやりたいことが見えてくるかもしれません。