サイボウズ Office on cybozu.com の掲示板やメッセージに YouTube 動画へのリンクをはりつけたとき、 リンクの直下に動画をインライン表示してくれるカスタマイズを行ってみました。
ソースコードを以下に示します。
サイボウズ Office on cybozu.com の掲示板やメッセージに YouTube 動画へのリンクをはりつけたとき、 リンクの直下に動画をインライン表示してくれるカスタマイズを行ってみました。
ソースコードを以下に示します。
サイボウズ Office on cybozu.com での JavaScript によるカスタマイズでは、 JavaScript をアップロードする画面において、 適用する対象として「すべてのユーザー」「システム管理者のみ」を選ぶことができます。 しかし、この画面ではエンドユーザーごとにカスタマイズの適用の可否を設定することはできません。
そこで、エンドユーザーが各カスタマイズの適用の可否を設定できる仕組みを考えてみたいと思います。 今回紹介する方法では、前回までに紹介した ユーザーのアイコンを32x32で表示 および ワークフローの承認の際に確認ダイアログを表示 の各カスタマイズを例にします。
全ての画面の上部に表示される cybozu.com ヘッダの個人メニューに「カスタマイズ」というメニューを挿入し、 このメニューをクリックすると設定ダイアログがポップアップするようにします。 設定ダイアログでは、チェックボックスで各カスタマイズのオン/オフを切り替えます。 設定した内容はブラウザの localStorage に保存します。 したがって、厳密にはエンドユーザーごとではなく、ブラウザごとにカスタマイズの適用の可否を設定することになります。 ソースコードを以下に示します。各処理の説明はコメントを参照してください。
* 今回からソースコードの表示に SyntaxHighlighter ではなく、gist.github.com を使ってみました。
掲示板やメッセージにおいて本文やフォローに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のコードは以下のようになります。
全ての画面について上記のカスタマイズを行うとパフォーマンス的に気になるという場合は、 JavaScript の変数 CustomizeJS.page をチェックして、変換させたい画面のみ対応させることもできます。
サイボウズ Office on cybozu.com では、cybozu.com 上の Garoon や kintone と共通のヘッダが表示されます。 このヘッダの右側にはユーザー名が表示され、それをクリックすると「個人設定」などが含まれるメニューが表示されます。 サイボウズ Office on cybozu.com にはユーザー名の左側に「リンク」というプルダウンメニューがありますが、 今回はあえてユーザー名のプルダウンメニューにリンクを追加する方法を紹介します。
例によってJSによるカスタマイズ(*1)で行います。前回と同様の方法で jQuery を使用したいと思います。 「個人設定」のリンクには vr_headerPersonalSettings という class 属性がついているので、 この要素を jQuery で取得し、その後にリンクに追加します。 例として、このブログへのリンクを追加してみます。 JSのコードは以下のようになります。
前回の記事でサイボウズ 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() を使わない方法を考えてみました。
サイボウズ Office on cybozu.com(クラウド版) では、ユーザーのプロフィールを編集する際に、画像を設定することができます。 この画像は掲示板やメッセージの画面において、本文の差出人やフォローした人のユーザー名の隣に表示されます。
ところで、サイボウズ Office on cybozu.com(クラウド版)の6月版では、JavaScriptの読み込みが可能となりました。 そこで、この機能を使って、掲示板およびメッセージの画面をカスタマイズすることにより、プロフィール画像を大きくしてみたいと思います。
以下の JavaScript コードを「システム設定(詳細) > カスタマイズ > JavaScript ファイルの設定」からアップロードしてみてください。JavaScript ファイルをアップロードできるのはシステム管理者のみとなります。
いかがでしょうか。うまくいきましたでしょうか。 JavaScript により行っていることは、CSS のクラスが profileimage となっている画像に対して、画像のサイズ情報を書き換えることによってカスタマイズを行っています。
JavaScript のコードにおいて、$ を使わずに jQuery を使用しているのは、サイボウズ Office 内の他の JavaScript での $ の定義とバッティングする場合を考慮しているためです。