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

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

オープンソースWebDB「プリザンター」のブログです。 機能の紹介や実例を交え、わかりやすく解説していきます。

全画面に反映できる拡張スタイル、拡張スクリプトとは?

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

先週土曜日に会社のバーベキューがありました。家族参加がOKだったので、ご家族で参加した人も多かったです。子供も10人ぐらいいましたが、お互い最初は人見知りしていましたが、時間がたつにつれてワイワイとしゃべったり、ゲームしたり、折り紙したりで楽しんでいました。来年もぜひ参加したいと思います。

さて、今回はプリザンターをカスタマイズするためのJavaScriptとCSSの設定について、拡張スタイル、拡張スクリプトを中心にまとめてみたいと思います。

 管理画面でスタイルとスクリプトを制御する

プリザンターでは、管理画面でJavaScritとCSSを設定して修正することが可能です。これは以前にも本ブログでまとめています。なおタイトルが「拡張スタイル・スクリプト」とありますが、内容は管理画面から設定できるスクリプト、スタイルとなっています。 

pleasanter.hatenablog.jp

 

以前もまとめていますが、あらためて。メニュー右上の「管理」→「テーブルの管理」を表示すると、スクリプトとスタイルというタブがあります。

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

 

上記画面では、スタイルを選択しています。詳細は先ほどのリンクを確認いただければと思いますが、すべてのサイトの画面、もしくは、個別のサイトの画面に設定することが可能です(フォルダはフォルダ画面のみ)。

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

 

拡張スタイル、拡張スクリプトとは?

管理画面で設定するスタイル、スクリプトだと、例えば全画面で共通に利用するスクリプトの読み込みや、CSSでの制御(画面右上に固定のリンクを設定するなど)をそれぞれの画面で行わなければなりません。

また、ログイン画面や管理画面などサイトで設定できる画面以外はカスタマイズすることができません。

そんな時に、全画面共通でスクリプトファイル(jsファイル)やスタイルファイル(cssファイル)を読み込むことができる機能が「拡張スタイル」「拡張スクリプト」です。

ただし、1点注意があります。本機能は、プリザンターがインストールさせれたサーバー上のファイルを修正しIISを再起動することが必要となりますので、pleasanter.netやサーバにアクセスできない、IISを管理していない環境では利用できません。ご注意ください。

 

設定してみる。

それでは、設定してみましょう。プリザンターをインストールしたフォルダを「C:\inetpub\wwwroot\pleasanter」とすると、その配下のフォルダ「App_Data\Parameters」(フルパスでは「C:\inetpub\wwwroot\pleasanter\App_Data\Parameters」)に移動すると、「ExtendedScript」と「ExtendedStyle」というフォルダがあります。前者がスクリプトファイル、後者がスタイルシートを配置するフォルダとなります。

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

 

スクリプトとスタイルシートを該当するフォルダに配置し、IISを再起動すればOKです。ここでは、試しに下記のようなファイルを置いて、IISを再起動してみます。

test.css

body{
    background-color:deepskyblue;
}

 

test.js

$("body").css("color","red");

 

再起動後、ログイン画面を表示すると、上記で設定した色が表示されていると思います。ログイン画面で、というのがミソです。

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

 

まとめ

今回は、拡張スタイル、拡張スクリプトについてまとめてみました。全画面で共通の設定をまとめておくにはもってこいな機能です。ぜひ試してみてください。

この機能を使って、簡単に設定できて移動時間を有効的に効率よく利用できる機能を開発中です!近々発表できるかもしれません。

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