自分達のサイボウズ Office を開発しよう

自分達のサイボウズ Office を開発しよう
～JavaScript によるカスタマイズ
サイボウズ株式会社
畑慎也

 はじめに
 カスタマイズが必要な理由
 カスタマイズ機能の概要
 JavaScript によるカスタマイズ
 カスタマイズ例の紹介
 さいごに
Agenda

 サイボウズ Office on cybozu.com の6月版で、
JavaScript ファイルの読み込みが可能となりま
した。
 つまり、cybozu.com のユーザー自身が、
JavaScript を使って、サイボウズ Office をカ
スタマイズできるようになったということです。
はじめに

カスタマイズが必要な理由

 本来、情報システムとは
 会社の業務のあり方と密接に関わります。
 情報システムの良さが競争力につながります。
 サイボウズ Office のカスタマイズ
 情報システムの一翼を担うサイボウズ Office
 自社の業務に最適となるようにカスタマイズ
できればGood
情報システムとサイボウズ Office

 これまでも、Firefox の GreaseMonkey という拡張機能を使えば、
任意のWebページに対しカスタマイズを行なえました。
 エンドユーザーが自分のブラウザ上で設定する必要があります。
 つまり、システム管理者がエンドユーザーに対してスクリプト
ファイルを配布する必要があります。
 サイボウズ Office on cybozu.com の JavaScript 読み込み機能で
は、システム管理者が設定画面上で設定すれば、全エンドユーザー
にカスタマイズを適用できます。
全エンドユーザーへのカスタマイズ

 システム管理者にとって
 システム管理者のみが設定可能
 カスタマイズ（プログラミング）は楽しい！
 良いカスタマイズを行うと、エンドユーザー
に喜ばれる！
 注意事項
 「あれもして、これもして」と言われるかも
しれません。
システム管理者にとって

カスタマイズ機能の概要

 システム設定（詳細）> カスタマイズ > JavaScript ファイルの設定
設定場所

 システム設定画面
 個人設定画面
 運用管理画面
 カスタマイズの不具合により、設定できなく
なっては大変なので
 これら以外の画面はカスタマイズ可能
カスタマイズできない画面

 以下から適用する対象を選べます。
 すべてのユーザー
 システム管理者
 適用しない
 「システム管理者に適用」
 エンドユーザーに適用する前に動作を確認するような場合
 「適用しない」
 読み込ませたJavaScriptファイルを削除はしないが、適用を一時
的に停止したいような場合
カスタマイズを適用する対象

JavaScript によるカスタマイズ

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

 DOMについて
 ページ内の情報を表すDOM(Document Object
Model)と呼ばれるものに JavaScript からアクセスで
きます。
 このDOMを操作することによってページの内容を書き
換えることができます。
 例：
var user = document.getElementById('user');
user.innerHTML = '<b>HATA</b>';
DOM操作によるカスタマイズ

 jQueryライブラリについて
 DOM操作を容易にする JavaScript ライブラリ
 10月版のサイボウズ Office on cybozu.com から、カ
スタマイズ可能な画面では、あらかじめ読み込まれて
います。
 これから紹介するカスタマイズ例では jQuery を使い
ます。
 例：
$('#user').html('<b>HATA</b>');
jQuery ライブラリについて

カスタマイズ例の紹介

 問題：
 ワークフローを承認・決裁する際、却下するつもりが
誤って承認・決裁してしまう場合がある。
 解決方法：
 承認・決裁のボタンをクリックした後、念押しとして
確認ダイアログを表示し、キャンセルできるようにす
る。
ワークフローの承認の前に確認ダイアログを表示

$(document).ready(function () {
switch(CustomizeJS.page) { // 現在表示中のページ名
case 'WorkFlowHandle':
$('input[name="Approve"]').click(function () {
var caption = $(this).val();
if (caption.indexOf('決裁') >= 0) {
return confirm('決裁します。よろしいですか？');
} else {
return confirm('承認します。よろしいですか？');
}
});
break;
}
});
ワークフローの承認の前に確認ダイアログを表示

 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">...

 問題：
 サイボウズ Office 内へのリンクを本文やフォローに貼り付ける
ことはよくあると思います。
 パッケージ版のサイボウズ Office から cybozu.com に移行した
場合、移行前に掲示板やメッセージの本文やフォローに書かれた
Office 内へのリンクがリンク切れとなる。
 例：http://example.jp/scripts/cb8/ag.exe?...
 解決方法：
 http://example.jp/scripts/cb8/ag.exe で始まるURLを
https://example.cybozu.com/o/ag.cgi?... に置換する。
cybozu.com 移行前の Office へのリンクを置換

$(document).ready(function () {
$('a[href^="http://example.jp/scripts/cb8/ag.exe"]')
.each(function () {
this.href = this.href.replace(
'http://example.jp/scripts/cb8/ag.exe',
'https://example.cybozu.com/o/ag.cgi');
});
});
cybozu.com 移行前の Office へのリンクを置換
• $('a[href^="URL"']) で URL で始まる全てのリンクを取得します。
• .each(function () {...}) で、取得した全てのリンクに対する処
理を記述できます。
• this.href = this.href.replace() でURLを置換しています。

 問題：
 cybozu.com ではユーザー情報にプロフィール画像を
登録できる。
 しかし、掲示板やメッセージで表示されるプロフィー
ル画像は小さくて見えずらい。
 解決方法：
 表示されているプロフィール画像(20x20)を32x32に
拡大する。
プロフィール画像を拡大

:
case 'BulletinView':
case 'MyFolderMessageView':
$('img.profileImage[src*="20x20"]').each(function () {
var src = $(this).attr('src')
.replace('20x20', '32x32')
.replace('Width=20', 'Width=32')
.replace('Height=20', 'Height=32');
$(this).attr('src',src)
.css('width', '32px').css('height', '32px');
});
break;
}

 プロフィール画像のリンクには class="profileImage" 属性がつい
ているため、$('img.profileImage[src*="20x20"]') で取得できま
す。
 掲示板・メッセージの画面で表示されているプロフィール画像の
URL
 ag.cgi/20x20.png?page=UserImageDownload&notimecard
=1&id=156&ct=1&v=1347517804&Width=20&Height=20
&ext=.png
 画像サイズを指定している「20」を「32」に置換すれば、
32x32のプロフィール画像に置き換わります。

 要望：
 掲示板やメッセージの本文やフォローに YouTube の
動画へのリンクがあるとき、インライン表示して、画
面遷移せずに動画を再生させたい。
YouTube の動画をインライン表示

:
case 'BulletinView':
case 'MyFolderMessageView':
$('tt').find('a[href^="http://www.youtube.com/watch?v="],a[href^="
https://www.youtube.com/watch?v="]')
.each(function () {
var html = '<div><iframe width="420" height="315" src="'
+ htmlEscape(this.href)
.replace('http://', 'https://')
.replace('watch?v=', 'embed/')
+ '" frameborder="0" alllowfullscreen></iframe></div>';
$(this).after(html);
});
break;
}

 $('tt') で本文やフォローの要素を取得します。
 .find('a[href^="http://www.youtube.com/watch?v="],
a[href^="https://www.youtube.com/watch?v="]') で
YouTube へのリンクを絞り込みます。
 $(this).after(html) でリンク直下に YouTube の動画
を IFRAME で埋め込みます。

 要望：
 社内にある別のシステムの個人ページへのリンクを、
cybozu.com のヘッダの個人メニューに追加したい。
ヘッダの個人メニューにリンクを追加

var html =
'<li class="yuimenuitem"><a class="yuimenuitemlabel"'
+ ' href="http://example.jp/user">個人情報</a></li>';
$('.vr_headerPersonalSettings').parent().after(html);
ヘッダの個人メニューにリンクを追加
 $('.vr_headerPersonalSettings') で「個人設定」リンクを取
得します。
 .parent() で「個人設定」の親となる LI 要素を取得します。
 この要素の直後に LI 要素で囲ったリンクを追加します。

 要望：
 cybozu.com のヘッダの「メニュー」とヘッダ直下の
アプリケーションメニューの内容が同じなので、「メ
ニュー」の方を非表示にしたい。
ヘッダの「メニュー」を非表示

$('#header-menu-application').hide();
ヘッダの「メニュー」を非表示
 $('#header-menu-application') で「メニュー」要素を
取得します。
 .hide() を呼んで非表示にします。

ソースコードのシンタックスハイライト

カスタマイズ設定ダイアログ

 ブログ：コード置場
http://hatashinya.blogspot.com/
にてカスタマイズ例を公開しています。
 本日紹介したコードは 10月版に対応しています。
6月版に対応させる場合、別途 jQuery を読み込
む必要があります。
さいごに

自分達のサイボウズ Office を開発しよう

More Related Content

What's hot (6)

Viewers also liked (20)

Similar to 自分達のサイボウズ Office を開発しよう (20)

Recently uploaded (7)

自分達のサイボウズ Office を開発しよう