これは MTAppjQuery Advent Calendar 2018 16日目の記事です。
うっかり1日遅れました。。。

管理画面のヘッダー付近に固定メッセージを表示させ、開発環境を操作中だと直感的に判別できるよう user.js を定義してみます。

開発環境で調整したテンプレートを本番環境に反映するため画面を行き来している際、どの環境を操作しているのか混乱して不安になる。そんな自分のためのカスタマイズです w

user.js の調整

管理画面で読み込まれる user.js に、次のコードを定義します。

(function($){
  // 現在のホスト
  var _currentHost = location.host;
  // 開発環境のホスト
  var _developHosts = ['mt7.docker', 'mtappjquery.docker'];
  // メッセージバーの HTML
  var _warningMessageBar = '<div id="warning-bar">開発環境（' + _currentHost + '）を操作中</div>';

  // 現在のホストが開発環境のホストに含まれる場合のみ
  if($.inArray(_currentHost, _developHosts) > -1){
    // メッセージバーを追加
    $('body').append(_warningMessageBar);

    // メッセージバーのスタイルを調整
    $('#warning-bar').css({
      'color': 'white',
      'background': '#c20',
      'width': '100vw',
      'position': 'fixed',
      'top': 0,
      'left': 0,
      'text-align': 'center',
      'padding': '.75rem 1.25rem',
      'font-weight': 'bold'
    });

    // メッセージバーの高さ分、body に上余白を追加
    $('body').css({
      'padding-top': '42px'
    });
  }
})(jQuery);

開発環境のホストを配列にセットしておき、そこに現在のホストが含まれるかを $.inArray で判別。該当する場合のみ、body 直下にメッセージバーを追加しています。

適用すると管理画面のヘッダーにメッセージバーが固定表示されます。

記憶が確かなら Movable Type 6 系ではログイン画面に user.js が適用されなかったと思うのですが、Movable Type 7 だと管理画面すべてで利用できるようですね。