オープンソースWebDBのプリザンター(pleasanter)ブログ

オープンソースのWebDBのプリザンター(pleasanter)のブログとサービス情報サイトです

株式会社リーデックスのオープンソースWebDB「プリザンター」ブログです。

管理画面の背景色を変えるスクリプト(トレーニングでのご質問)

こんにちは。
リーデックス小川です。

先日、誕生日を迎えました。誕生日には、家族からプレゼントをもらえるのですが、今年は名刺入れをもらいました。少し古くなったと話していたので、気を使って用意してくれました。いくつになっても、プレゼントはうれしいものです。本厄も終わったので、これから徐々にエンジンをかけていこうと思っています。

さて、今回は、プリザンターのトレーニングでいただいたご質問について、回答します。実際に動くスクリプトを作ってみました。

 ご質問内容

あるお客様にトレーニングにお伺いしたところ「通常の画面と管理画面の区別がつきにくいので、入力画面と管理画面を区別できないか?」とご質問を受けました。確かに、管理者権限のユーザの場合は、入力画面も管理画面も同じような画面のため、よくわからなくなります。そこで、管理画面の場合は背景色に色を付けるようなスクリプトを作ってみました。

詳細は後述しますが、本スクリプトは拡張スクリプトを利用するため、オンプレ版のみの対応となりますので、ご注意ください。

 

管理画面を定義する

次に、どの画面を管理画面とするかを定義します。今回は管理者権限で表示されるメニューを管理画面と定義しました。

  • サイト(フォルダ、テーブル、wiki)のテーブル作成
  • サイト(フォルダ、テーブル、wiki)のテーブル管理
  • テナントの管理
  • 組織の管理
  • グループの管理(一般ユーザでも表示されますが、管理画面としました)
  • ユーザの管理
  • ゴミ箱の管理

 

スクリプトを作成する

上記画面の場合は、背景色を変更するスクリプトを作成してみました。

$(function(){

    // テーブルを新規作成する画面
    $p.events.after_set_Templates = function(){
        convAdminScreen();
    }

    // テーブルを作成した後の画面
    $p.events.after_send_CreateByTemplate = function(){
        retNormalScreen();
    } 

    // 管理画面の場合は、画面を変更する
    if (isAdminScreen()){
        convAdminScreen();
    }

    // 管理画面かどうかを判別する
    function isAdminScreen(){
        
        var ItemId = $p.id();
        var SiteId = $('#SiteId').val();
        var pathname = location.pathname;

            // ログイン画面の場合は終了
        if (pathname.lastIndexOf("/users/login")>-1){
            return false;
        }

        if ($('#ReferenceType').val() == "Wikis"){
            if (ItemId==SiteId && pathname.lastIndexOf("edit")>-1){
                return true;
            }
        }
        else{
            if (ItemId==SiteId && pathname.lastIndexOf("edit")>-1){
                return true;
            }else if(pathname.lastIndexOf("/tenants/edit")>-1){
                return true;
            }else if(pathname.lastIndexOf("/depts")>-1){
                return true;
            }else if(pathname.lastIndexOf("/groups")>-1){
                return true;
            }else if(pathname.lastIndexOf("/users")>-1){
                return true;
            }else if(pathname.lastIndexOf("/trashbox")>-1){
                return true;
            }else if(pathname.lastIndexOf("/admins")>-1){
                return true;
            }
        }

        return false;
    }

    // 管理画面用の変更
    function convAdminScreen(){
        $('body').css("background-color","lightpink");
    }

    // 管理画面用の変更をもとに戻す
    function retNormalScreen(){
        $('body').css("background-color","white");
    }
}); 

スクリプトを配置する

作成したスクリプトを配置します。上記をファイルに保存し、「拡張スクリプト」を設定してください。「拡張スクリプト」の詳細と配置方法については、下記記事をご覧ください。 

pleasanter.hatenablog.jp

 

今回は対象外となっていますが、各画面の「スクリプト」については、下記を参照ください。 

pleasanter.hatenablog.jp

 

注意点

最初にもお伝えしましたが、今回のスクリプトは、全画面で呼び出す必要があるため、「拡張スクリプト」を利用しています。各画面にある「スクリプト」では、管理画面やログイン画面などで読み込むことができないため、「拡張スクリプト」が必要です。

 

実際の画面を確認してみる

それでは、画面をいくつか確認してみましょう。

 非管理画面

f:id:h-ogawa-reedex-co-jp:20200212211443p:plain

f:id:h-ogawa-reedex-co-jp:20200212211124p:plain

f:id:h-ogawa-reedex-co-jp:20200212211342p:plain

管理画面

f:id:h-ogawa-reedex-co-jp:20200212211530p:plain

f:id:h-ogawa-reedex-co-jp:20200212211700p:plain

f:id:h-ogawa-reedex-co-jp:20200212211750p:plain

 

管理画面にはちゃんと背景色が設定されていますね。

まとめ

今回は、管理画面の背景色を変えるスクリプトについて書いてみました。いろいろと応用ができるスクリプトとなっていますので、ぜひ試してみてください。

また、このようなスクリプトを弊社で作成できますので、ぜひご相談ください。詳細は弊社スクリプトサービスをご覧ください。

それでは、今回はこの辺で。
最後までご覧いただきありがとうございました。