自分達のサイボウズ office-を開発しよう
TRANSCRIPT
![Page 1: 自分達のサイボウズ office-を開発しよう](https://reader033.vdocuments.net/reader033/viewer/2022052413/5598b8fa1a28abb74a8b4576/html5/thumbnails/1.jpg)
自分達のサイボウズ Office を開発しよう~JavaScript によるカスタマイズ
サイボウズ株式会社畑 慎也
![Page 2: 自分達のサイボウズ office-を開発しよう](https://reader033.vdocuments.net/reader033/viewer/2022052413/5598b8fa1a28abb74a8b4576/html5/thumbnails/2.jpg)
はじめに
カスタマイズが必要な理由
カスタマイズ機能の概要
JavaScript によるカスタマイズ
カスタマイズ例の紹介
さいごに
Agenda
![Page 3: 自分達のサイボウズ office-を開発しよう](https://reader033.vdocuments.net/reader033/viewer/2022052413/5598b8fa1a28abb74a8b4576/html5/thumbnails/3.jpg)
サイボウズ Office on cybozu.com の6月版で、
JavaScript ファイルの読み込みが可能となりま
した。
つまり、cybozu.com のユーザー自身が、
JavaScript を使って、サイボウズ Office をカ
スタマイズできるようになったということです。
はじめに
![Page 4: 自分達のサイボウズ office-を開発しよう](https://reader033.vdocuments.net/reader033/viewer/2022052413/5598b8fa1a28abb74a8b4576/html5/thumbnails/4.jpg)
カスタマイズが必要な理由
![Page 5: 自分達のサイボウズ office-を開発しよう](https://reader033.vdocuments.net/reader033/viewer/2022052413/5598b8fa1a28abb74a8b4576/html5/thumbnails/5.jpg)
本来、情報システムとは
会社の業務のあり方と密接に関わります。
情報システムの良さが競争力につながります。
サイボウズ Office のカスタマイズ
情報システムの一翼を担うサイボウズ Office
自社の業務に最適となるようにカスタマイズ
できればGood
情報システムとサイボウズ Office
![Page 6: 自分達のサイボウズ office-を開発しよう](https://reader033.vdocuments.net/reader033/viewer/2022052413/5598b8fa1a28abb74a8b4576/html5/thumbnails/6.jpg)
これまでも、Firefox の GreaseMonkey という拡張機能を使えば、
任意のWebページに対しカスタマイズを行なえました。
エンドユーザーが自分のブラウザ上で設定する必要があります。
つまり、システム管理者がエンドユーザーに対してスクリプト
ファイルを配布する必要があります。
サイボウズ Office on cybozu.com の JavaScript 読み込み機能で
は、システム管理者が設定画面上で設定すれば、全エンドユーザー
にカスタマイズを適用できます。
全エンドユーザーへのカスタマイズ
![Page 7: 自分達のサイボウズ office-を開発しよう](https://reader033.vdocuments.net/reader033/viewer/2022052413/5598b8fa1a28abb74a8b4576/html5/thumbnails/7.jpg)
システム管理者にとって
システム管理者のみが設定可能
カスタマイズ(プログラミング)は楽しい!
良いカスタマイズを行うと、エンドユーザー
に喜ばれる!
注意事項
「あれもして、これもして」と言われるかも
しれません。
システム管理者にとって
![Page 8: 自分達のサイボウズ office-を開発しよう](https://reader033.vdocuments.net/reader033/viewer/2022052413/5598b8fa1a28abb74a8b4576/html5/thumbnails/8.jpg)
カスタマイズ機能の概要
![Page 9: 自分達のサイボウズ office-を開発しよう](https://reader033.vdocuments.net/reader033/viewer/2022052413/5598b8fa1a28abb74a8b4576/html5/thumbnails/9.jpg)
システム設定(詳細)> カスタマイズ > JavaScript ファイルの設定
設定場所
![Page 10: 自分達のサイボウズ office-を開発しよう](https://reader033.vdocuments.net/reader033/viewer/2022052413/5598b8fa1a28abb74a8b4576/html5/thumbnails/10.jpg)
設定画面
![Page 11: 自分達のサイボウズ office-を開発しよう](https://reader033.vdocuments.net/reader033/viewer/2022052413/5598b8fa1a28abb74a8b4576/html5/thumbnails/11.jpg)
システム設定画面
個人設定画面
運用管理画面
カスタマイズの不具合により、設定できなく
なっては大変なので
これら以外の画面はカスタマイズ可能
カスタマイズできない画面
![Page 12: 自分達のサイボウズ office-を開発しよう](https://reader033.vdocuments.net/reader033/viewer/2022052413/5598b8fa1a28abb74a8b4576/html5/thumbnails/12.jpg)
以下から適用する対象を選べます。
すべてのユーザー
システム管理者
適用しない
「システム管理者に適用」
エンドユーザーに適用する前に動作を確認するような場合
「適用しない」
読み込ませたJavaScriptファイルを削除はしないが、適用を一時
的に停止したいような場合
カスタマイズを適用する対象
![Page 13: 自分達のサイボウズ office-を開発しよう](https://reader033.vdocuments.net/reader033/viewer/2022052413/5598b8fa1a28abb74a8b4576/html5/thumbnails/13.jpg)
JavaScript によるカスタマイズ
![Page 14: 自分達のサイボウズ office-を開発しよう](https://reader033.vdocuments.net/reader033/viewer/2022052413/5598b8fa1a28abb74a8b4576/html5/thumbnails/14.jpg)
前提として
HTML を理解している。
ブラウザの JavaScript を理解している。
JavaScript でコードを書いたことがある。
できれば
DOM操作を理解している。
jQuery ライブラリを使ったことがある。
話の前提
![Page 15: 自分達のサイボウズ office-を開発しよう](https://reader033.vdocuments.net/reader033/viewer/2022052413/5598b8fa1a28abb74a8b4576/html5/thumbnails/15.jpg)
DOMについて
ページ内の情報を表すDOM(Document Object
Model)と呼ばれるものに JavaScript からアクセスで
きます。
このDOMを操作することによってページの内容を書き
換えることができます。
例:
var user = document.getElementById('user');
user.innerHTML = '<b>HATA</b>';
DOM操作によるカスタマイズ
![Page 16: 自分達のサイボウズ office-を開発しよう](https://reader033.vdocuments.net/reader033/viewer/2022052413/5598b8fa1a28abb74a8b4576/html5/thumbnails/16.jpg)
jQueryライブラリについて
DOM操作を容易にする JavaScript ライブラリ
10月版のサイボウズ Office on cybozu.com から、カ
スタマイズ可能な画面では、あらかじめ読み込まれて
います。
これから紹介するカスタマイズ例では jQuery を使い
ます。
例:
$('#user').html('<b>HATA</b>');
jQuery ライブラリについて
![Page 17: 自分達のサイボウズ office-を開発しよう](https://reader033.vdocuments.net/reader033/viewer/2022052413/5598b8fa1a28abb74a8b4576/html5/thumbnails/17.jpg)
カスタマイズ例の紹介
![Page 18: 自分達のサイボウズ office-を開発しよう](https://reader033.vdocuments.net/reader033/viewer/2022052413/5598b8fa1a28abb74a8b4576/html5/thumbnails/18.jpg)
問題:
ワークフローを承認・決裁する際、却下するつもりが
誤って承認・決裁してしまう場合がある。
解決方法:
承認・決裁のボタンをクリックした後、念押しとして
確認ダイアログを表示し、キャンセルできるようにす
る。
ワークフローの承認の前に確認ダイアログを表示
![Page 19: 自分達のサイボウズ office-を開発しよう](https://reader033.vdocuments.net/reader033/viewer/2022052413/5598b8fa1a28abb74a8b4576/html5/thumbnails/19.jpg)
$(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;
}});
ワークフローの承認の前に確認ダイアログを表示
![Page 20: 自分達のサイボウズ office-を開発しよう](https://reader033.vdocuments.net/reader033/viewer/2022052413/5598b8fa1a28abb74a8b4576/html5/thumbnails/20.jpg)
jQuery を使う場合 $(document).ready(function () {...}) に記述
した内容が、ページを読み込んだ後に実行されます。
CustomizeJS.page という変数に現在表示中のページ名が格納され
ています。
ブラウザで「ページのソースを表示」して確認できます。
カスタマイズに際して
<script>CustomizeJS = {page: 'WorkFlowHandle',ver: '1347960687'};
</script><script src="ag.cgi/script.js?page=OfficeJSDownload¬imecard=1&ct=1&_v=1347960687">...
![Page 21: 自分達のサイボウズ office-を開発しよう](https://reader033.vdocuments.net/reader033/viewer/2022052413/5598b8fa1a28abb74a8b4576/html5/thumbnails/21.jpg)
問題:
サイボウズ 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 へのリンクを置換
![Page 22: 自分達のサイボウズ office-を開発しよう](https://reader033.vdocuments.net/reader033/viewer/2022052413/5598b8fa1a28abb74a8b4576/html5/thumbnails/22.jpg)
$(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を置換しています。
![Page 23: 自分達のサイボウズ office-を開発しよう](https://reader033.vdocuments.net/reader033/viewer/2022052413/5598b8fa1a28abb74a8b4576/html5/thumbnails/23.jpg)
問題:
cybozu.com ではユーザー情報にプロフィール画像を
登録できる。
しかし、掲示板やメッセージで表示されるプロフィー
ル画像は小さくて見えずらい。
解決方法:
表示されているプロフィール画像(20x20)を32x32に
拡大する。
プロフィール画像を拡大
![Page 24: 自分達のサイボウズ office-を開発しよう](https://reader033.vdocuments.net/reader033/viewer/2022052413/5598b8fa1a28abb74a8b4576/html5/thumbnails/24.jpg)
switch(CustomizeJS.page) { // 現在表示中のページ名:
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;
}
プロフィール画像を拡大
![Page 25: 自分達のサイボウズ office-を開発しよう](https://reader033.vdocuments.net/reader033/viewer/2022052413/5598b8fa1a28abb74a8b4576/html5/thumbnails/25.jpg)
プロフィール画像のリンクには class="profileImage" 属性がつい
ているため、$('img.profileImage[src*="20x20"]') で取得できま
す。
掲示板・メッセージの画面で表示されているプロフィール画像の
URL
ag.cgi/20x20.png?page=UserImageDownload¬imecard
=1&id=156&ct=1&v=1347517804&Width=20&Height=20
&ext=.png
画像サイズを指定している「20」を「32」に置換すれば、
32x32のプロフィール画像に置き換わります。
プロフィール画像を拡大
![Page 26: 自分達のサイボウズ office-を開発しよう](https://reader033.vdocuments.net/reader033/viewer/2022052413/5598b8fa1a28abb74a8b4576/html5/thumbnails/26.jpg)
要望:
掲示板やメッセージの本文やフォローに YouTube の
動画へのリンクがあるとき、インライン表示して、画
面遷移せずに動画を再生させたい。
YouTube の動画をインライン表示
![Page 27: 自分達のサイボウズ office-を開発しよう](https://reader033.vdocuments.net/reader033/viewer/2022052413/5598b8fa1a28abb74a8b4576/html5/thumbnails/27.jpg)
switch(CustomizeJS.page) { // 現在表示中のページ名:
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;
}
YouTube の動画をインライン表示
![Page 28: 自分達のサイボウズ office-を開発しよう](https://reader033.vdocuments.net/reader033/viewer/2022052413/5598b8fa1a28abb74a8b4576/html5/thumbnails/28.jpg)
$('tt') で本文やフォローの要素を取得します。
.find('a[href^="http://www.youtube.com/watch?v="],
a[href^="https://www.youtube.com/watch?v="]') で
YouTube へのリンクを絞り込みます。
$(this).after(html) でリンク直下に YouTube の動画
を IFRAME で埋め込みます。
YouTube の動画をインライン表示
![Page 29: 自分達のサイボウズ office-を開発しよう](https://reader033.vdocuments.net/reader033/viewer/2022052413/5598b8fa1a28abb74a8b4576/html5/thumbnails/29.jpg)
要望:
社内にある別のシステムの個人ページへのリンクを、
cybozu.com のヘッダの個人メニューに追加したい。
ヘッダの個人メニューにリンクを追加
![Page 30: 自分達のサイボウズ office-を開発しよう](https://reader033.vdocuments.net/reader033/viewer/2022052413/5598b8fa1a28abb74a8b4576/html5/thumbnails/30.jpg)
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 要素で囲ったリンクを追加します。
![Page 31: 自分達のサイボウズ office-を開発しよう](https://reader033.vdocuments.net/reader033/viewer/2022052413/5598b8fa1a28abb74a8b4576/html5/thumbnails/31.jpg)
要望:
cybozu.com のヘッダの「メニュー」とヘッダ直下の
アプリケーションメニューの内容が同じなので、「メ
ニュー」の方を非表示にしたい。
ヘッダの「メニュー」を非表示
![Page 32: 自分達のサイボウズ office-を開発しよう](https://reader033.vdocuments.net/reader033/viewer/2022052413/5598b8fa1a28abb74a8b4576/html5/thumbnails/32.jpg)
$('#header-menu-application').hide();
ヘッダの「メニュー」を非表示
$('#header-menu-application') で「メニュー」要素を
取得します。
.hide() を呼んで非表示にします。
![Page 33: 自分達のサイボウズ office-を開発しよう](https://reader033.vdocuments.net/reader033/viewer/2022052413/5598b8fa1a28abb74a8b4576/html5/thumbnails/33.jpg)
ソースコードのシンタックスハイライト
![Page 34: 自分達のサイボウズ office-を開発しよう](https://reader033.vdocuments.net/reader033/viewer/2022052413/5598b8fa1a28abb74a8b4576/html5/thumbnails/34.jpg)
カスタマイズ設定ダイアログ
![Page 35: 自分達のサイボウズ office-を開発しよう](https://reader033.vdocuments.net/reader033/viewer/2022052413/5598b8fa1a28abb74a8b4576/html5/thumbnails/35.jpg)
ブログ:コード置場
http://hatashinya.blogspot.com/
にてカスタマイズ例を公開しています。
本日紹介したコードは 10月版に対応しています。
6月版に対応させる場合、別途 jQuery を読み込
む必要があります。
さいごに