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

2018/06/19 · · 投稿者 Takashi Okutsu

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

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

そこで、TeamPage をお使いの管理者の皆さん自身が細かなカスタマイズを一箇所でできるように、「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」スペースや「フォーラム」スペースで公開しています。

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

関連記事

バックスラッシュ記号を円記号として表示するには ... 日本語キーボードの「日本円」キーを押して入力される文字は、既定でバックスラッシュ記号として表示されます。その背景と解決方法を紹介します。

Page Top