Forum1565: 手軽にTeamPageをカスタマイズ、具体例をご紹介

Title: 手軽にTeamPageをカスタマイズ、具体例をご紹介

最近お客様からカスタマイズに関するご質問をたくさん頂くようになりました。「◯◯の文字サイズを大きくしたい」「◯◯の部分を非表示にしたい」「◯◯の部分に利用案内を表示したい」などなど…。

これまでも、スキン設定画面のスタイルシートに CSS を記入したり埋め込みウィジェットを使って JavaScript を動作させたりすることで色々なカスタマイズが可能でしたが、設定箇所があちこちに散らばってしまい、わかりにくくなっていました。

そこで、TeamPage をお使いの管理者の皆さん自身が細かなカスタマイズを一箇所でできるように、Download2143: Proteus カスタム JavaScript & CSS プラグインという、名前からして分かりやすいプラグインを作成しました。

何ができるの？

「Proteus カスタム JavaScript & CSS」プラグインを利用すると、管理者は、プラグイン設定欄で JavaScript とスタイルシート (CSS) を設定し、ページの動作に変更を加えたり、特定の部分を隠したり、リンクやボタンなどを挿入したり、色や大きさを変えたりできます。

カスタマイズの手順

プラグインの [設定] リンクから設定画面を表示し、[JavaScript] と [CSS] 欄に記入するだけです。

カスタマイズの具体例

JavaScript (1) 旧ホスト名を新ホスト名に置き換える

社内運用でホストサーバーの引っ越しを行ったときなど、TeamPage のホスト名が変わると、http(s)://HostName/ から始まるリンクが動作しなくなってしまいます。いわゆる「リンク切れ」が発生します。

本文内に書かれたリンクから旧ホスト名を探して新ホスト名に変更する JavaScript を実行することで、リンク切れを解消できます。

次の例は、旧ホスト名「electra.local」を新ホスト名「nadia.local」に変更します。

Proteus.addHandler("load", function() {
  $('#body a').each(function() {
    var oldHref = $(this).attr('href');
    if (oldHref) {
      var newHref = oldHref.replace('electra.local','nadia.local');
      $(this).attr('href', newHref);
    }
  });
});

画像のソースも同様に変更できます。

Proteus.addHandler("load", function() {
  $('#body img').each(function() {
    var oldSrc = $(this).attr('src');
    if (oldSrc) {
      var newSrc = oldSrc.replace('electra.local','nadia.local');
      $(this).attr('src', newSrc);
    }
  });
});

JavaScript (2) タブメニューの文字を画像に置き換える

画面上部に表示される [ダッシュボード] [近況] などのタブの文字を画像（アイコン）に置き換えます。

まずは画像を用意する必要があります。ここでは Icon Archive で公開されている Small-n-Flat Icons を利用することにします。

TeamPage がインストールされている「server」フォルダ下の「images」フォルダに「small-n-flat」フォルダを作成し、ダウンロードした画像ファイルを置きます。

サーバーセットアップ > 一般 > サーバー管理ページの [キャッシュクリア] ボタンをクリックして、設置した画像ファイルを TeamPage に認識させます。

次のコードをプラグインの [JavaScript] 欄に記入します。

Proteus.addHandler("load", function() {
  $('#primary-tabs li.tab-dashboard a').html('<img src="/images/small-n-flat/dashboard-alt-icon.png" height="32" width="32" alt="ダッシュボード">');
  $('#primary-tabs li.tab-activity a').html('<img src="/images/small-n-flat/sign-down-icon.png" height="32" width="32" alt="アクティビティ">');
  $('#primary-tabs li.tab-status a').html('<img src="/images/small-n-flat/bubbles-alt-icon.png" height="32" width="32" alt="近況アップデート">');
  $('#primary-tabs li.tab-tags a').html('<img src="/images/small-n-flat/tag-icon.png" height="32" width="32" alt="タグ">');
  $('#primary-tabs li.tab-tasks a').html('<img src="/images/small-n-flat/sign-check-icon.png" height="32" width="32" alt="タスク">');
  $('#primary-tabs li.tab-cal a').html('<img src="/images/small-n-flat/calendar-icon.png" height="32" width="32" alt="カレンダー">');
  $('#primary-tabs li.tab-docs a').html('<img src="/images/small-n-flat/folder-document-icon.png" height="32" width="32" alt="共有フォルダ">');
});

画面を最読み込みすると…じゃん！この通り！

CSS 通知の未読数バッジを赤くする

画面右上に表示される通知の未読数バッジ。デフォルトで背景と同系色なので、ちょっと目立ちにくいですよね。

これを赤くしてみましょう。次の CSS を記入します。

#hd .notifications-count {
  background-color: crimson;
}

これでよく目立つようになりました。

まとめ

この他にも色々なカスタマイズ例をサポートサイトの「FAQ」スペースや「フォーラム」スペースで公開しています。

「こんなカスタマイズをしたいけど、方法がわからない」といったご質問や「こんなカスタマイズしたら便利だった」といった事例がありましたら、ぜひサポートサイトの「フォーラム」までお寄せください。

	手軽にTeamPageをカスタマイズ、具体例をご紹介 - トラクションソフトウェア tractionsoftware….

Attachments:

plugin_config.png
tabs1.png
icons.png
tabs2.png
notifications2.png
notifications1.png
wrench%2dscrewdriver%2dicon.png
wrench-screwdriver-icon.png

参照している (1)

Download2143: Proteus カスタム JavaScript & CSS プラグイン

Article: Forum1565 (permalink)
Categories: :FAQ:カスタマイズ, :FAQ:JavaScript, :FAQ:CSS
Date: 2018/06/19; 16時24分26秒 JST

Author Name: 奥津岳
Author ID: takashi