1. HOME
  2. 【第二回】自分達のサイボウズOfficeを開発しよう - カスタマイズの手順と具体例

【第二回】自分達のサイボウズOfficeを開発しよう - カスタマイズの手順と具体例

「サイボウズ Office」の生みの親、現サイボウズ・ラボ株式会社代表取締役、畑慎也が、JavaScript を使った「サイボウズ Office on cybozu.com」カスタマイズの具体例などを解説するシリーズ。今回は手順と具体例をご紹介します。

第一回の記事はこちら


※ 掲載している画面キャプチャは、2012年11月時点のものとなっております。ご注意ください。

 

カスタマイズの手順と具体例

【1】JavaScriptファイルの設定

【1】JavaScriptファイルの設定を選択

【2】JavaScriptファイルの設定

【2】この画面からJavaScriptファイルを読み込む

さて、今回は JavaScript によるカスタマイズを 6 例紹介していきます。その前に、カスタマイズを行うための設定方法を説明しましょう。

まず、設定を行うためには、
「サイボウズ 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」の2012年10月版からは、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>

 


●カスタマイズの例1  ワークフローの承認の前に確認ダイアログを表示


ワークフローで承認・決裁を求められる役職の方が、ときどきやってしまうのが「却下するつもりだったのに、誤って承認・決裁してしまう」というもの。承認・決裁を行う機会の方が多いため、ついつい習慣的に承認や決裁のボタンを押してしまうというものです。

そこで、承認・決裁のボタンをクリックした後、念押しとして確認ダイアログを表示し、必要に応じてキャンセルできるようにする例を紹介しましょう。

承認・決裁のボタンをクリックした後の確認ダイアログ

承認・決裁のボタンをクリックした後の確認ダイアログ

$(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;

}

});

 


●カスタマイズの例2 cybozu.com 移行前の Office へのリンクを置換


次の例は、パッケージ版の「サイボウズ Office」から、「サイボウズ Office on cybozu.com」(クラウド版) へと移行したユーザーにとって便利なカスタマイズです。

「サイボウズ Office」内へのリンクを本文やフォローに貼り付けることはよくあると思いますが、パッケージ版からクラウド版に移行した場合、移行前に掲示板やメッセージの本文やフォローに書かれた「Office」内へのリンクがリンク切れとなってしまいます。

例:http://example.jp/scripts/cb8/ag.exe?…

そこで...

「http://example.jp/scripts/cb8/ag.exe」で始まるURLを
「https://example.cybozu.com/o/ag.cgi?…」

に置換することで、リンク切れを解消できるようになります。

$(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‘);

});

});

$(‘a[href^="URL"']) 」で URL で始まる全てのリンクを取得し、
.each(function () {})」で、取得した全てのリンクに対する処理を記述できるようになり、
this.href = this.href.replace()」でURLを置換しているのです。


●カスタマイズの例3 プロフィール画像を拡大


「cybozu.com」ではユーザー情報にプロフィール画像を登録できます。しかし、最近では各種SNSで、もっと大きい画像を見慣れているだけに、表示されているプロフィール画像(20×20)では、物足りない...と思うユーザーもいるかもしれません。そこで、表示されているプロフィール画像(20×20)を32×32に拡大するというカスタマイズを行ってみます。

拡大前

拡大前

 

拡大後

拡大後(32×32)

switch(CustomizeJS.page) { // 現在表示中のページ名:  case ‘BulletinView’:  case ‘MyFolderMessageView‘:

$(‘img.profileImage[src*="20x20"]‘).each(function () {

    var src = $(this).attr(‘src’)

.replace(’20×20′, ’32×32′)

.replace(‘Width=20′, ‘Width=32′)

.replace(‘Height=20′, ‘Height=32′);

$(this).attr(‘src’,src)

.css(‘width’, ’32px’).css(‘height’, ’32px’);

});

   break;

}

プロフィール画像のリンクには 属性がついているため、「$(‘img.profileImage[src*="20x20"]‘)」で取得できます。

掲示板・メッセージの画面で表示されているプロフィール画像のURL
ag.cgi/20×20.png?page=UserImageDownload&notimecard=1&id=156&ct=1&v=1347517804&Width=20&Height=20&ext=.png

で画像サイズを指定している「20」を「32」に置換すれば、32×32のプロフィール画像に置き換わります。


●カスタマイズの例4 YouTube の動画をインライン表示


YouTubeでは、限定したユーザーのみが閲覧できる「非公開」での画像アップロードができるため、社内に限定した動画公開を行うことができます。

そのURLをサイボウズ Office 上に貼った場合、別ウィンドウでYouTubeが立ち上がることになりますが、掲示板やメッセージの本文やフォローに YouTube の動画へのリンクがあるとき、インライン表示して、画面遷移せずに動画を再生させる...というカスタマイズも可能です。

Youtubeの埋め込み例

Youtubeの埋め込み例

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=”‘

+ 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 で埋め込むことで、インラインでの表示が可能になります。


●カスタマイズの例5 ヘッダの個人メニューにリンクを追加


社内にある別のシステムの個人ページへのリンクを、cybozu.com のヘッダの個人メニューに追加したい...という要望に応えるためのカスタマイズです。

cybozu.comヘッダの個人メニュー

ユーザー名をクリックしてプルダウンで表示される、cybozu.comヘッダの個人メニュー

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 要素で囲ったリンクを追加することでカスタマイズできます。


●カスタマイズの例6 ヘッダの「メニュー」を非表示


現状、cybozu.com のヘッダの「メニュー」とヘッダ直下のアプリケーションメニューでは、同じ内容が表示されています。そこで、「メニュー」の方を非表示にするカスタマイズです。

cybozu.comヘッダのメニュー

cybozu.comヘッダのメニュー

「メニュー」を非表示にする

「メニュー」を非表示にする

$(‘#header-menu-application’).hide();

$(‘#header-menu-application’) 」で「メニュー」要素を取得し、
.hide()」を呼んで非表示にします。

ユーザー同士のクチコミでの広がりにも期待

今回紹介したカスタマイズ例の一部は、ブログ「コード置き場」で公開しています。

▼ コード置き場
http://hatashinya.blogspot.com/

今後も、順次情報を公開していく予定ですが、冒頭で紹介したとおり業種や業務により「いいね!」という機能は変わってきます。「こんなカスタマイズをしたら便利だった」という成功例は、ぜひぜひシステム管理者のみなさんがtwitterやブログなどで公開していただければ幸いです。

(編集:Koichiro Tanaka)

タグ: , , , , , , , , ,

  • サイボウズ Office 9
  • サイボウズ Officeを今すぐ使ってみる
  • サイボウズ Office 価格シミュレーション