cybozu.com : サイボウズ Office JavaScript エディター

このブログでは、サイボウズ Office on cybozu.com を JavaScript でカスタマイズする話を多く取り上げています。作成した JavaScript を読み込ませる方法はマニュアルに記載の通りです。設定画面で JavaScript ファイルをダイアログから指定して読み込ませるので、以下のようなステップになります。

1. テキストエディターで JavaScript ファイルを開く、または新規に作成する。
2. JavaScript ファイルを編集し、ローカルのPC上に保存する。
3. 設定画面で、保存した JavaScript ファイルを指定し、アップロードする。

すでに JavaScript ファイルがアップロード済みの場合は、テキストエディターで編集する前に、 ダウンロードする作業も必要となります。 （別の場所にバックアップ済みの場合は、そこから取得する方法もありますが）

頻繁に行う作業ではないので、上記の方法でもさほど問題があるわけではないのですが、 この作業をもっと効率的にするために、Webブラウザ上で直接 JavaScript を編集し、 「適用」ボタンを押下することでシステムに反映できるようなツールを作ってみました。

Chrome 拡張で実現してみました。Chrome ウェブストアからインストールすることができます。

サイボウズ Office JavaScript エディター

Chrome 拡張で実現した理由は、システム管理者が設定する機能なのでクライアントにインストールするツールにしても、また特定のブラウザに限定しても問題ない、と考えたからです。

この Chrome 拡張をインストールした後の使用方法は以下のようになります。

1. 「システム設定（詳細） > カスタマイズ > JavaScript ファイルの設定」に移動します。
2. 「JavaScript ファイル」の行にある「編集する」ボタンをクリックします。
3. 新規タブに JavaScript エディターが立ち上がるので、JavaScript を編集し「適用」ボタンをクリックします。

※ このツールはサイボウズのサポートの対象外となります。

Cybozu CrossSync v1.0.4 リリース

Cybozu CrossSync v1.0.4 をリリースしました。
今回の更新内容は以下の通りです。

• 一部の予定が同期の度に何度もコピーされ増殖する。

また、今回から GitHub に移行しました。
https://github.com/hatashinya/cybozu-crosssync

※ 過去のリリース情報

Cybozu Advance v1.1.4 リリース

Cybozu Advance v1.1.4 をリリースしました。
今回の更新内容は主に不具合改修となります。

また、今回から GitHub に移行しました。
https://github.com/hatashinya/cybozu-advance

※ 過去のリリース情報

cybozu.com : フォローに「ToDoに登録する」メニューを追加する

サイボウズ Office on cybozu.com の掲示板やメッセージには「その他の操作」から「ToDoに登録する」という機能があります。しかし、掲示板やメッセージに書き込まれた各フォローに対しては、ToDoに登録する機能がありません。

今回はフォローに「ToDoに登録する」メニューを追加するカスタマイズを紹介します。

下記に示す JavaScript を登録した後に、フォローのある掲示板またはメッセージの画面に移動してください。今回のカスタマイズにより、フォローにマウスカーソルを合わせると、「固定リンク」や「削除する」というメニューと同時に「ToDoに登録する」というメニューが表示されると思います。これをクリックすると、ToDoの登録画面に移動し、ToDo名とメモがあらかじめ入力された状態となります。ToDo名にはフォローの内容の先頭行が入り、メモには対象のフォローの固定リンクとフォローの内容のすべてが入ります。

コードを解説していきます。処理は掲示板・メッセージの画面とToDo登録の画面とに分かれます。

1. 掲示板・メッセージの画面では、まずフォローのメニューとして「ToDoに登録する」を追加します。URL には通常のToDo登録画面へのリンクと区別するために from=follow というパラメータが付きます。
2. 1. のリンクがクリックされると、ToDo登録画面に移動しますが、その際、フォローの内容とフォローの固定リンクを sessionStorage に保存します。
3. ToDo登録画面ではURLに from=follow が付き、sessoinStorage にフォロー情報が保存されている場合に、次の特別な処理を行います。
4. フォロー内容の先頭行を取得しToDoのタイトル（ToDo名）にします。先頭行が空行や引用行の場合は次の行にします。
5. フォームにタイトルを代入し、フォローの固定リンクとフォロー全文をメモ欄に代入します。

ちなみに、サイボウズ Office on cybozu.com の10月版から jQuery があらかじめ読み込まれているので、今回紹介するコードからは jQuery の読み込み部分が不要となりました。

cybozu.com カンファレンスII での発表

本日、cybozu.com カンファレンスII で「自分達のサイボウズ Office を開発しよう ～JavaScriptによるカスタマイズ」と題して発表してきました。発表に使用した資料になります。

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

cybozu.com : ブックマークレットでリンク集に登録する

サイボウズ Office on cybozu.com にはリンク集という機能があるのですが、 リンクを登録する際は、ブラウザのアドレスバーからURLをコピーし登録フォームに貼りつけ、 さらにリンクのタイトルを入力する必要があります。

今回はこの一連の作業をブックマークレットを使って、より簡単に行うためのカスタマイズを紹介します。

下記に示す JavaScript を登録した後に、まず「リンクの追加」画面に移動してください。 今回のカスタマイズにより「☆ブックマークレット」というリンクが表示されていると思いますので、 このリンクをブックマークレットとしてブラウザの「お気に入り」や「ブックマーク」に登録してください。 このブックマークレットには JavaScript が含まれているため、登録の際に警告が表示される場合があります。

そして、リンク集に登録したい外部のWebページを表示した際に、このブックマークレットを選んでください。 すると、別ウィンドウ（タブ）で「リンクの追加」画面が開き、 タイトルとURLがあらかじめ入力された状態になると思います。 後は「追加する」ボタンをクリックするだけでリンクが登録されます。

仕組みは次のようになります。 ブックマークレットを選んだ際に、表示中のWebページのタイトルとURLを JavaScript で取得して、 それぞれ titite, url というURL引数として「リンクの追加」画面に渡します。 「リンクの追加」画面では今回のカスタマイズにより、URL引数の title と url を読み取り、 タイトルおよびURLのフィールドに代入します。

cybozu.com : Twitter のつぶやきをインライン表示する

サイボウズ Office on cybozu.com の掲示板やメッセージに Twitter へのリンクをはりつけたとき、 リンクの直下にその内容をインライン表示してくれるカスタマイズを行ってみました。

前回のYouTubeのときは IFRMAE を挿入することで実現しましたが、今回は Twitter の JSONP API を呼び出して実現してみました。

• Embedded Tweets
• jsonp callbacks for the REST API

このような表示となります。

ソースコードを以下に示します。

cybozu.com : YouTube の動画をインライン表示する

サイボウズ Office on cybozu.com の掲示板やメッセージに YouTube 動画へのリンクをはりつけたとき、 リンクの直下に動画をインライン表示してくれるカスタマイズを行ってみました。

ソースコードを以下に示します。

cybozu.com : 設定ダイアログを使う JavaScript カスタマイズ

サイボウズ Office on cybozu.com での JavaScript によるカスタマイズでは、 JavaScript をアップロードする画面において、 適用する対象として「すべてのユーザー」「システム管理者のみ」を選ぶことができます。 しかし、この画面ではエンドユーザーごとにカスタマイズの適用の可否を設定することはできません。

そこで、エンドユーザーが各カスタマイズの適用の可否を設定できる仕組みを考えてみたいと思います。 今回紹介する方法では、前回までに紹介した ユーザーのアイコンを32x32で表示 および ワークフローの承認の際に確認ダイアログを表示 の各カスタマイズを例にします。

全ての画面の上部に表示される cybozu.com ヘッダの個人メニューに「カスタマイズ」というメニューを挿入し、 このメニューをクリックすると設定ダイアログがポップアップするようにします。 設定ダイアログでは、チェックボックスで各カスタマイズのオン/オフを切り替えます。 設定した内容はブラウザの localStorage に保存します。 したがって、厳密にはエンドユーザーごとではなく、ブラウザごとにカスタマイズの適用の可否を設定することになります。 ソースコードを以下に示します。各処理の説明はコメントを参照してください。

* 今回からソースコードの表示に SyntaxHighlighter ではなく、gist.github.com を使ってみました。

サイボウズ Office 自身へのリンクを cybozu.com への移行に際して、JSで変換してみる。

掲示板やメッセージにおいて本文やフォローにURLを記述してリンクさせることがあると思います。 しかし、オンプレミスのサイボウズ Office からクラウド版のサイボウズ Office on cybozu.com へ移行した場合、 サイボウズ Office へのリンクのURLは変更されるので、過去に記述したリンクは、 オンプレミス時に使用していた環境を参照用として残していない限り、リンク切れとなってしまいます。

詳細に述べると、ag.exe?... で開始するリンクについては、cybozu.com へ移行すると、 自動的に ag.cgi?... となり、引き続き有効です。 しかし、例えば http://sub.company.co.jp/scripts/cb8/ag.exe?... で開始するリンクについては、 自動的には変換してくれません。 理由は、cybozu.com 側が各社ごとの http://sub.comany.co.jp/scripts/cb8/ というパスを知る由がないからです。

そこで今回はサイボウズ Office on cybozu.com のJSカスタマイズ機能を使って、上記の問題を解決してみたいと思います。 URLが http://sub.company.co.jp で始まるリンクについて、href 属性を置換します。 JSのコードは以下のようになります。

• /cbmw/ および mw.exe はメールワイズも cybozu.com に移行した場合用になります。
• Linux 環境でオンプレミスを使用していた場合は ag.exe および mw.exe の変換は不要になります。

全ての画面について上記のカスタマイズを行うとパフォーマンス的に気になるという場合は、 JavaScript の変数 CustomizeJS.page をチェックして、変換させたい画面のみ対応させることもできます。

cybozu.com のヘッダの個人メニューにリンクを追加する方法

サイボウズ Office on cybozu.com では、cybozu.com 上の Garoon や kintone と共通のヘッダが表示されます。 このヘッダの右側にはユーザー名が表示され、それをクリックすると「個人設定」などが含まれるメニューが表示されます。 サイボウズ Office on cybozu.com にはユーザー名の左側に「リンク」というプルダウンメニューがありますが、 今回はあえてユーザー名のプルダウンメニューにリンクを追加する方法を紹介します。

例によってJSによるカスタマイズ(*1)で行います。前回と同様の方法で jQuery を使用したいと思います。 「個人設定」のリンクには vr_headerPersonalSettings という class 属性がついているので、 この要素を jQuery で取得し、その後にリンクに追加します。 例として、このブログへのリンクを追加してみます。 JSのコードは以下のようになります。

*1 「システム設定（詳細） > カスタマイズ > JavaScript ファイルの設定」

cybozu.com のJSカスタマイズで jQuery を使う方法

前回の記事でサイボウズ Office on cybozu.com のJSカスタマイズ機能を使った事例を紹介しました。 その際 jQuery を使用したわけですが、jQuery を使用したわりには、$(document).ready(function () {}) を使わずに、 addEvent 関数を定義しそれを使用していました。

その理由としては、document.write() で JavaScript を読み込んだ場合、必ずしもその直後で $ や jQuery が使用できるわけではないからです。使用できるブラウザもあります。使用できない場合はどのような過程をふむかというと、document.write() で JavaScript を読み込んだ場合、読み込み元のJSファイルの実行がすべて完了した後に、読み込み先のJSファイル（jQuery のファイル)が実行され、$ や jQuery が使用できるようになります。

そこで、JSカスタマイズ機能に使用するJSファイルで jQuery の読み込みと $(document).ready(function () {}) を同時に記述する方法を考えていました。詳しくはソースコードのコメントで解説します。カスタマイズ内容のサンプルとして、ワークフローの承認・決裁の際にボタン押下の後、確認ダイアログをポップアップすることを行ってみます。

setInterval() などを使用して、時間差で window.jQuery をチェックする方法もあると思います。 今回は setInterval() を使わない方法を考えてみました。

cybozu.com で掲示板・メッセージのプロフィール画像を大きくする方法

サイボウズ Office on cybozu.com（クラウド版） では、ユーザーのプロフィールを編集する際に、画像を設定することができます。 この画像は掲示板やメッセージの画面において、本文の差出人やフォローした人のユーザー名の隣に表示されます。

ところで、サイボウズ Office on cybozu.com（クラウド版）の6月版では、JavaScriptの読み込みが可能となりました。 そこで、この機能を使って、掲示板およびメッセージの画面をカスタマイズすることにより、プロフィール画像を大きくしてみたいと思います。

以下の JavaScript コードを「システム設定（詳細） > カスタマイズ > JavaScript ファイルの設定」からアップロードしてみてください。JavaScript ファイルをアップロードできるのはシステム管理者のみとなります。

いかがでしょうか。うまくいきましたでしょうか。 JavaScript により行っていることは、CSS のクラスが profileimage となっている画像に対して、画像のサイズ情報を書き換えることによってカスタマイズを行っています。

JavaScript のコードにおいて、$ を使わずに jQuery を使用しているのは、サイボウズ Office 内の他の JavaScript での $ の定義とバッティングする場合を考慮しているためです。