音楽サーバ"Mopidy"のフロントエンドを作る：10 デバイス別の表示調整

音楽サーバ"Mopidy"のフロントエンド「Mopidy.Finder」が出来るまで、第10回です。

今回はBootstrap4をベースにした、デバイスごとに表示を最適化するフローを追います。

どんなふうにする？

まず、PCブラウザサイズ。
私が最も使うはずのサイズです。
なるべく全機能を表示しておき、マウスで即座に各機能にアクセスしたいです。
f:id:try_dot_net_core:20190811095629p:plain
Icons made by Freepik from www.flaticon.com is licensed by CC 3.0 BY

次に、タブレットサイズ。
それなりのモニタサイズがありますが、常時メニューを表示しておくには小さすぎます。
サイドバーは、ハンバーガーメニューの開閉式にしておきましょう。

そして、タブレットを横にしたときは、カラムが並ぶように。
縦にしたときは、各カラムがフルスクリーン表示されるようにしたいです。
f:id:try_dot_net_core:20190811101001p:plain Icons made by Dave Gandy www.flaticon.com is licensed by CC 3.0 BY

そして、スマートフォンサイズ。
モニタサイズは小さいため、縦横ともにフルスクリーンで表示しておきたいです。
f:id:try_dot_net_core:20190811095705p:plain Icons made by Freepik from www.flaticon.com is licensed by CC 3.0 BY

モニタサイズを判定する

Bootstrapではマークアップ時に`lg'や'md'のようなサイズ閾値を織り交ぜることで、自動的にカラム表示／フルスクリーン表示を切り替えて貰えますよね。

しかし、「今現在、どのサイズ閾値を使っているのか」を取得する方法が、プレーンなBootstrapの機能の中では見つけることが出来ませんでした。

そこで、前回記事に挙げたResponsive Bootstrap Toolkitを導入して、モニタサイズがBootstrap上のどれに当たるのか、を取得するようにしました。

しかし前回記事で少し触れたように、Responsive Bootstrap ToolkitはまだBootstrap4には対応していません。

ぐぐってみると、ご本家GitHubのissueで対応方法が議論されていました。
github.com

ほうほう、useメソッドで閾値定義を渡せばよい、と。

ということで、このissueに記載があった定義を、そのままコピペで持ってきました。
src/ts/Libraries.ts:

Libraries.ResponsiveBootstrapToolkit.use('bs4', {
    'xs': Libraries.$('<div class="d-xs-block d-sm-none d-md-none d-lg-none d-xl-none"></div>'),
    'sm': Libraries.$('<div class="d-none d-sm-block d-md-none d-lg-none d-xl-none"></div>'),
    'md': Libraries.$('<div class="d-none d-md-block d-sm-none d-lg-none d-xl-none"></div>'),
    'lg': Libraries.$('<div class="d-none d-lg-block d-sm-none d-md-none d-xl-none"></div>'),
    'xl': Libraries.$('<div class="d-none d-xl-block d-sm-none d-md-none d-lg-none"></div>')
});

カラム／フルスクリーン切替の閾値をきめる

Bootstrap4のサイズは、公式ドキュメントでは下記のとおりです。

xs: 幅576px未満
sm: 幅576px以上 - 768px未満
md: 幅768px以上 - 992px未満
lg: 幅992px以上 - 1200px未満
xl: 幅1200px以上

当初はmdサイズを基準に切り替えていたのですが、これではタブレットを水平にしてもカラム表示になりませんでした。

htmlのmetaタグでviewportを指定しているため、デバイス本来の解像度よりも小さめに判定されるためです。

<meta name="viewport" content="width=device-width,initial-scale=1">

ということで、切替閾値をlgに変更しました。

閾値に合わせた表示切替ロジック

Mopidy.Finderでは、ディスプレイサイズに合わせた表示を、NavigationControllerで制御するようにしました。
コンストラクタから呼び出すInitialNavigationメソッドの中で、表示制御メソッドを実行しています。
src/ts/Controllers/NavigationController.ts: L63

private async InitialNavigation(): Promise<boolean> {
    await this._store.TryConnect();
    const updateProgress = await this._store.GetDbUpdateProgress();

    // どうも、ResponsiveToolkitの初期化後から反応が正しくなるまで
    // すこし時間がかかるっぽい。
    // Settingsクエリが終わるまで待ってからAdjustする。
    this.AdjustScreen();
    // -- 中略 --
}

Responsive Bootstrap Toolkitは、各閾値ごとに定義した要素の表示状態を見ることで現在のサイズを取得しているようです。
なので、初回描画が終わるまで、API呼び出しを挟むことで少し待たせています。

そして、表示制御メソッドの中身はこんなかんじ。 src/ts/Controllers/NavigationController.ts: L95

private AdjustScreen(): void {
    // コンテンツは、mdサイズを基点にカラム<-->フルスクリーンを切り替える。
    if (this._viewport.is('<=md')) {
        this._content.ContentToFullscreen();
    } else {
        this._content.ContentToColumn();
    }

    // サイドバーは、lgサイズを基点に常時表示<-->操作終了で非表示化を切り替える。
    if (this._viewport.is('<=lg')) {
        this._headerBar.SetSideBarClose();
    } else {
        this._headerBar.SetSideBarOpen();
    }
    // -- 中略 --
}