JavaScriptカスタマイズについて

「サイボウズ Office on cybozu.com」における、JavaScriptを利用したカスタマイズとは

「サイボウズ Office on cybozu.com」では、JavaScriptを利用したカスタマイズを行えるようになっています。本サイトで紹介しているカスタマイズには、「サイボウズ Office カスタマイズマネージャ(※1)」で提供しているもののほか、これまでに別のサイトでご紹介していたカスタマイズとコードを紹介しているものがあります。

利用できるユーザー

JavaScriptによるカスタマイズが可能なのは、システム管理者のみです。そして、システム管理者であっても、次のようなスキルや経験を持っていることが前提になります。システム管理者の権限を持っているからといって、すべての管理者が自由なカスタマイズが可能になるというわけではありません。

  • HTML を理解している
  • ブラウザの JavaScript を理解している
  • JavaScript でコードを書いたことがある
  • (できれば)DOM操作を理解している
  • (できれば)jQuery ライブラリを使ったことがある

なお、「サイボウズ Office JS カスタマイズマネージャー(※1)」を使用し、マネージャ内に用意されたスクリプトを組み合わせてそのまま適用することは、JavaScript の知識等がなくても可能です。

カスタマイズの対象

カスタマイズの対象は、「システム設定画面」「個人設定画面」「運用管理画面」を除くすべてのページです。この3つの画面に関しては、カスタマイズの不具合により、設定できなくなるなどのリスクを考え、対象外となっています。

カスタマイズが適用される対象は、以下の3つの中から選択できます。

  1. すべてのユーザー
  2. システム管理者(エンドユーザーに適用する前に動作を確認するような場合)
  3. 適用しない(読み込ませたJavaScriptファイルを削除はしないが、適用を一時的に停止したいような場合)

カスタマイズの手順

JavaScriptによるカスタマイズを行うためには、「サイボウズ Office システム設定(詳細タブ)」> 「カスタマイズ」内の「JavaScript ファイルの設定」で設定画面を開きます。

この設定画面で、カスタマイズのための JavaScript ファイルをアップロードし、適用する対象を選ぶだけでカスタマイズが完了するようになっています。

JavaScript による画面の書き換えについては、DOM操作による作業を行います。ページ内の情報を表す「DOM(Document Object Model)」と呼ばれるものに JavaScript からアクセスし、「DOM」を操作することによってページの内容を書き換えます。

【例】
var user = document.getElementById('user');
user.innerHTML = '<b>HATA</b>';

「サイボウズ Office on cybozu.com」では、DOM操作を容易にするために、カスタマイズ可能な画面にjQuery ライブラリがあらかじめ読み込まれています。

jQuery を使う場合「$(document).ready(function () {})」に記述した内容が、ページを読み込んだ後に実行されます。

「CustomizeJS.page」という変数に現在表示中のページ名が格納されていますが、ブラウザで「ページのソースを表示」して確認できます。

<script>
CustomizeJS = {
page: 'WorkFlowHandle',
ver: '1347960687′
};
</script>
<script src="ag.cgi/script.js?page=OfficeJSDownload&notimecard=1&ct=1&_v=1347960687">
</script>

ご利用上の注意

「サイボウズ Office」で行うカスタマイズについては、下記のページもご参照ください。

 ▼リンク/資料

※1「サイボウズ Office JS カスタマイズマネージャー」とは

「サイボウズ Office JS カスタマイズマネージャー」とは、「Office on cybozu.com」にカスタマイズを加えるためのツールで JavaScript の知識がない場合でも、ご利用中の既存のコードを利用してカスタマイズを手軽に反映させることができます。

「サイボウズ Office JS カスタマイズマネージャー」は、サイボウズ・ラボ が提供する、Web ブラウザ「Chrome」の拡張機能です。「Chrome」にて、拡張機能を追加することで、どなたでもご利用いただけます。 本サイトで紹介している javaScriptsを利用したカスタマイズ方法で「カスタマイズマネージャ」で提供しているものには記事の冒頭に「カスタマイズマネージャ」の表記をしています。

「サイボウズ Office JS カスタマイズマネージャー」の入手方法

「サイボウズ Office JS カスタマイズマネージャー」はChromeの拡張機能です。

下記より、Chrome ウェブ ストアにアクセスし、ご利用のChromeに追加してください。

「サイボウズ Office JS カスタマイズマネージャー」

  • この Chrome 拡張はサイボウズのサポートの対象外となります。あらかじめご了承ください。
  • JavaScriptによるカスタマイズ用ファイルの機能は、パッケージ版「サイボウズ Office 」には未搭載です。本機能はクラウド版のみの提供です。あらかじめご了承ください。
  • その他「ご利用上の注意」ページをお読みなり、すべての項目においてご了承の上ご利用ください。

「サイボウズ Office JS カスタマイズマネージャー」の利用方法

※ 下記に掲示している画面は2013年1月の段階のものです。今後のアップデートにより変更となる場合があります。

  1. 「サイボウズ Office JS カスタマイズマネージャー」を追加したChromeで、「Office on cybozu.com」の「サイボウズ Office システム設定(詳細タブ)」> 「カスタマイズ」内の「JavaScript ファイルの設定」で設定画面を開くと、下記のような表示になります。
    of_js_settei1
  2. 「カスタマイズマネージャー」のボタンをクリックするとリポジトリの確認を求められますが、あらかじめ入力してあります。OKを押します。
    customaize011
  3. 用意されているカスタマイズの一覧が表示されます。
    customaize031
  4. 適用したい機能の右側のプルダウンで、適用の対象を選択します。上部にある「すべてを(プルダウンメニュー)に[あわせる]」の箇所で、すべての機能を適用することもできます。
    pull-down1
  5. 「ユーザーが選択可能」を選択した場合、ユーザーここで適用する/しないを設定することができます。
    画面最上部にあるツールバー内の、ユーザー名をクリックしたメニューに、「カスタマイズ」の項目が表示されます。
    user_customaize011適用されている機能が表示されるので、各ユーザーが適用したい機能にチェックを入れれば適用されます。
    user_customaize021
ページトップへ