自分達のサイボウズ 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-を開発しよう

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (8)

Similar to 自分達のサイボウズ office-を開発しよう

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

More from Cybozucommunity

More from Cybozucommunity (20)

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