baserCMS admin-third 管理テーマレスポンシブ化 プラグインを作ってみました。

以前の「baserCMS admin-third なんちゃってスマホ対応のためのアジャストCSS ほか」の記事でadmin-third管理テーマのレスポンシブ化について取り上げましたが、今回、一念発起、勉強も兼ねてちょっと本気でプラグイン化に挑戦しました。

本気と言っても、プラグイン化に際し、なんちゃってレスポンシブ化では手をつけずにいた、表示エリアからオーバーフローしてしまっていた横長のリスト表示のあるページをひとまずページ内横スクロールするようにしたり、各種ダイアログを見切れてしまわないようにしたり、といった実に地道なチャレンジでございます。

それより、いろいろ考えを巡らせて苦心したのは、実はレスポンシブ化の本題とはあまり関係のないcssアニメーションを使ったトグルのメニュー表示/非表示の部分だったり。 ことの発端は、スライドして（0,0）座標の外に出したはずのサイドメニューのheightがフッター固定用に利用している以下のmin-height: calc(100vh - 40px);の「100vh」に影響して、意図しない縦スクロールが発生することが発覚。

@media screen and (max-width: 768px) {
/* flexレイアウトに変更。オーバーフローの横方向スクロールを実現するためgridレイアウトを中止 */
.bca-app {
  display: flex;
  flex-flow: column;
  min-height: calc(100vh - 40px);
} 
.bca-container {
  flex: 1;
}

なんとかそれをリセットするために苦心して考えたのがスライドアニメーションの後で、サイドメニューの存在をこっそりと亡きものにするため、display:none;を仕込んだクラスを追加しようという以下のアイデア。

const hidden = document.querySelector('.bca-nav');
//hiddenアニメーションが完了したらbodyからcloseクラスを削除する
//サイドバーのheightが、フッター下部固定レイアウト用の100%vhに影響してしまうため
hidden.addEventListener('animationend', function() {
$body.removeClass('close');
});

当初、cssのスライドアニメーション自体をtransitionで書いていたため、transitionendを使って同様の試みをしたところ、なぜか何度も発火してトラフィックジャム状態に。最終的には今のanimationendを使用することで意図した動きが実現できました。animationendとtransitionendの挙動の違いは、ほんと悩みました。 そもそも、レスポンシブ化とはあまり関係のないこういったところに、気になり始めるとどっぷりハマってしまうのが悪い癖で、ついついあれこれと試行錯誤をすることに。。。 ま、しかし、そういうことがスキルに繋がるんだと信じて（ひとりでぶつぶつ呪文のように唱えて）、研鑽を積む毎日でございます。

とはいえ、近く5系のリリースを控えたこの時期に、まことに後進的でお恥ずかしい限りですが。。。

話をプラグインに戻します。 さて、細かいことは、GitHubのREADME.mdをご覧いただくとして、くれぐれも最近のバージョン（4.5.0以降）でのレスポンシブ化（表示）のみの対応ですのでご注意ください。 本プラグインは、4.2.0（管理テーマ切り替え機能が初めて実装された）以降に対応しています。

また、あくまで、今回のレスポンシブ化は、デフォルトのstyle.cssのブレークポイントを利用して、以下のような考え方で行なっていますので、

• タブレット対応 max-width:768px（既存のブレークポイント）
• スマホ対応 max-width:499px を追加。レイアウトが崩れない下限の表示幅を350pxとして設計。

つまり、768px表示以上については、本プラグインの範囲外になっています。

といいながら、どうしても気になる部分だけは、addstyle_3rd.cssの冒頭に以下のように記載しています。

/* 意図しないオーバーフローを調整、等（768px以上を意図する） */
body {
  min-width: initial;
  -webkit-text-size-adjust: 100%;
}
.bca-app {
  min-height: calc(100vh - 40px) !important;
}

/* ダッシュボードパネルのレイアウト調整、等（768px以上を意図する） */
.bca-panel {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 20px;
}
.bca-panel > * {
  width: 100%;
  max-width: 450px;
  min-width: calc(100% / 3 - 20px);
}

/* アップローダーパネルのレイアウト崩れ修正（768px以上を含む） */
#DivPanelList .file-list-body .selectable-file {
  height: auto !important; 
}

/* バルーンチップのウィンドウ幅調整（768px以上を含む） */
.bt-content {
  max-width: 400px;
}

/* 基本カラーの変更に備えてログインボタンのボーダーをキャンセル（768px以上を含む） */
.bca-btn-icon[data-bca-btn-type=login],
.bca-btn-icon-text[data-bca-btn-type=login],
.bca-btn[data-bca-btn-type=login] {
  border: none;
}
.bca-btn-icon[data-bca-btn-type=login]:hover,
.bca-btn-icon[data-bca-btn-type=login]:focus,
.bca-btn-icon-text[data-bca-btn-type=login]:hover,
.bca-btn-icon-text[data-bca-btn-type=login]:focus,
.bca-btn[data-bca-btn-type=login]:hover,
.bca-btn[data-bca-btn-type=login]:focus {
  transition: none;
}

また、admin-secondをお使いで、かつ、本家「adminGoResponsiveプラグイン」を使っているという方の場合、どうしても、表示が衝突してしまう部分があったので、思い切って、Daruma&Namio(tsukurun)さん製作の「adminGoResponsiveプラグイン」を内包する格好で、admin-secondおよびadmin-thirdの両管理テーマ対応版という位置付けにさせていただきました。

MITライセンスということなので問題はないかと思っていますが、もし、ライセンス上問題あり！ということであれば、どなた様でもご指摘いただけると助かります。

そもそもDaruma&Namio(tsukurun)さん製作の「adminGoResponsiveプラグイン」がなければ、このプラグイン製作自体に取り組むこともなかったように思います、あらためて感謝申し上げます。

ちなみに、レスポンシブ化プラグインを作っておきながら、スマホ（Android）を使ったことがありません。。。w スマホ（Android）ユーザーの方で、何か、不具合があるようでしたらコンタクトフォームからコメントいただけると嬉しいです。