概要

MicrosoftのAccessでレスポンシブなSPAを表現する場合の押さえどころについて、
チャット風のサンプルアプリを作成した。

メインの画面

よくある構成として、画面左側がサイドメニュー、右側がメインコンテンツになっている。
サイドメニューとメインコンテンツは帳票フォームのサブフォームになっている。

サイドメニューはトークルームレコードを、メインコンテンツはトークルームごとの会話レコードを、
それぞれのテーブルから表示している。

画面の動き

Point1

トークルームはメニューから選択し、画面内で切り替える。

Point2

ウィンドウサイズに追従して高さと幅を最大に保つ。
サイドメニューは固定幅、コンテンツ部が残りすべて、となる。

Point3

ウィンドウ幅を一定以下まで縮めるとサイドメニューが自動的に閉じ、
コンパクトに使用可能となる。

実装のポイント

メインフォームの Form_Resize に以下のコードを記載するだけで一応の要件は満たせる。
この考え方で大体の画面構成には応用が効くはず。

Option Compare Database
Option Explicit

Private Const SIDE_MENU_WIDTH As Long = "3221"

Private Sub Form_Resize()
    With Me

        '幅が9600twip以下の場合はサイドメニューを閉じる
        If .WindowWidth < 9600 Then
            .SIDE_MENU.Width = 0
            .CONTENT.Left = 0
        Else
            .SIDE_MENU.Width = SIDE_MENU_WIDTH
            .CONTENT.Left = SIDE_MENU_WIDTH
        End If

        '高さはどちらも常にフル
        .SIDE_MENU.Height = .WindowHeight
        .CONTENT.Height = .WindowHeight

        If .WindowWidth - .SIDE_MENU.Width >= 0 Then

            '幅はコンテンツ側が可変なので (ウィンドウ幅 - サイドメニュー幅)で
            .CONTENT.Width = .WindowWidth - .SIDE_MENU.Width

            '各コントロールの調整
            .CONTENT.Controls("TALK_CONTENT").Width = .CONTENT.Width - .CONTENT.Controls("TALK_CONTENT").Left * 2 - 300
            .CONTENT.Controls("Btn_Dummy").Width = .CONTENT.Width - .CONTENT.Controls("Btn_Dummy").Left * 2 - 300
            .CONTENT.Controls("Input_Message").Width = .CONTENT.Width - .CONTENT.Controls("Input_Message").Left * 2 - 300
            .CONTENT.Controls("Btn_Submit").Left = .CONTENT.Width - .CONTENT.Controls("Btn_Submit").Width - 460
        End If
    End With

End Sub

余談

トークルーム内はLINEのように、自分が左側、相手が右側で分けたくて
レコードセットのユーザー名をキーに振り分ければ余裕だろうと考えていたが不可能だった。
展開されたコントロールはクローンのような状態なので個別に操作ができなかった。
サイドメニューでやっているようにクリックされたレコードはどれか、などは判別できる

近い機能で条件付き書式があるが、こちらもコントロール自体の操作は不可。
擬似的にそれっぽくは…がんばれば出来なくはないのかな、

そもそも論、Accessでチャットアプリを作り込む意義などはなかった…

【Access】MicrosoftAccessでレスポンシブなSPAを表現する

概要