レスポンシブデザインとは？

　ホームページやWebアプリケーションの世界では、PC、タブレット、スマホなど複数の環境、画面解像度で動くことが当たり前になりました。
　例えば、CSSフレームワークのBootstrapを使ったWebアプリケーションではウィンドウサイズの変化に応じて、段階的に画面レイアウトが変化する実装が可能です。このようなウインドウサイズに応じてレイアウトが変化する実装をレスポンシブデザインと言います。
※もちろん、レスポンシブデザインを想定した実装が必要です。

【Bootstrapによるレスポンシブデザインイメージ】

　今回はこれに近い動作をNotes、Nomadを使って実現できないか？を検討してみます。今回のシリーズで使用するクライアントバージョンは下記の通りです。

PC用、スマホ用の画面を作る

　まず、PC用、スマホ用のフレームセット、フォームを作成します。スマホ用設計には先頭にmを付けるなど命名規則を付けると管理しやすくなります。
※今回はフレームセット内のフォーム、ビューなどのコンテンツの作り方は解説しません。

【PC用フレームセット－fsMain】

【スマホ用フレームセット－mfsMain】

デフォルトページを作ってPostOpenイベントでOSを判定し、開くフレームセットを切り替える

　データベースを開いた際にPC、スマホを判定して、それぞれのフレームセットを開きたいので、まず考えられるのはページを作成し、オープン時のイベントでOSを判定し、それぞれのフレームセットを開く方法です。なぜページかというと、データベースオープン時にデフォルトで開くことができる設計要素だからです。

【実行イメージ】

【デフォルトオープン用ページ－pgDefault】

【LotusScript】

Sub Postopen(Source As Notesuidocument)
	'プラットフォームによってFrameSetを切り替え
	
	'クラス宣言、変数宣言
	Dim ws			As New NotesUIWorkspace
	Dim session	As New NotesSession
	Dim sPlatform	As String
	
	'クラス、変数セット
	sPlatform		= session.Platform
	
	'OSを判定し、FrameSetを開く
	If sPlatform = "iOS" Or sPlatform = "Android" Then
		Call ws.OpenFrameSet("mfsMain")
	Else
		Call ws.OpenFrameSet("fsMain")
	End If
	
	'ページを閉じる
	Call Source.Close()
End Sub

【実行結果－PC】

【実行結果－Nomad(Android)】

正常に動作しないケース

@式での実装

　@式で書けるか？実装してみましょう。@式に書き換えると下記のような実装が考えられます。別の案ですと、先にフレームセットを開き、再度ページを開いた後、ページをFileCloseWindowで閉じるという実装も考えられますが、PostOpenイベントのループになってしまいます。

【＠式】

@If(@Platform = "iOS" | @Platform = "Android";
	@Do(
  		@Command([FileCloseWindow]);
  		@PostedCommand([OpenFrameset]; "mfsMain")
	);
	@Do(
  		@Command([FileCloseWindow]);
  		@PostedCommand([OpenFrameset]; "fsMain")
	)
)

【実行結果】
　実行結果としては、「判定用ページが開いたまま残ってしまい、実用的ではない。」となります。

QueryOpenで実行すれば、ページを開く前なのでページを閉じる処理が不要にできるか？

　@式で書いた場合は、先ほどの結果と同じく、ページが残ってしまいます。LotusScriptのQueryOpenであれば、引数のContinueを使ってページを開かず、実装出来るかもしれません。

【LotusScript】

Sub Queryopen(Source As Notesuidocument, Mode As Integer, Isnewdoc As Variant, Continue As Variant)
	'プラットフォームによってFrameSetを切り替え
	
	'クラス宣言、変数宣言
	Dim ws			As New NotesUIWorkspace
	Dim session	As New NotesSession
	Dim sPlatform	As String
	
	'クラス、変数セット
	sPlatform		= session.Platform
	
	'OSを判定し、FrameSetを開く
	If sPlatform = "iOS" Or sPlatform = "Android" Then
		Call ws.OpenFrameSet("mfsMain")
	Else
		Call ws.OpenFrameSet("fsMain")
	End If
	
	'ページを開かない
	Continue = False
End Sub

【実行結果】

　実行結果は下記の通り、QueryOpenイベントではNotesUIWorkspaceのOpenFrameSetが使えないエラーが発生します。

次回予告

　今回はV9でも動く実装を行いましたが、次回以降はV12で追加された＠式、イベントを使ってWebアプリに近いレスポンシブ画面を作っていきます。