2012年9月26日水曜日
cybozu.com カンファレンスII での発表
2012年7月18日水曜日
cybozu.com : ブックマークレットでリンク集に登録する
サイボウズ Office on cybozu.com にはリンク集という機能があるのですが、 リンクを登録する際は、ブラウザのアドレスバーからURLをコピーし登録フォームに貼りつけ、 さらにリンクのタイトルを入力する必要があります。
今回はこの一連の作業をブックマークレットを使って、より簡単に行うためのカスタマイズを紹介します。
下記に示す JavaScript を登録した後に、まず「リンクの追加」画面に移動してください。 今回のカスタマイズにより「☆ブックマークレット」というリンクが表示されていると思いますので、 このリンクをブックマークレットとしてブラウザの「お気に入り」や「ブックマーク」に登録してください。 このブックマークレットには JavaScript が含まれているため、登録の際に警告が表示される場合があります。
そして、リンク集に登録したい外部のWebページを表示した際に、このブックマークレットを選んでください。 すると、別ウィンドウ（タブ）で「リンクの追加」画面が開き、 タイトルとURLがあらかじめ入力された状態になると思います。 後は「追加する」ボタンをクリックするだけでリンクが登録されます。
仕組みは次のようになります。 ブックマークレットを選んだ際に、表示中のWebページのタイトルとURLを JavaScript で取得して、 それぞれ titite, url というURL引数として「リンクの追加」画面に渡します。 「リンクの追加」画面では今回のカスタマイズにより、URL引数の title と url を読み取り、 タイトルおよびURLのフィールドに代入します。
2012年7月6日金曜日
cybozu.com : Twitter のつぶやきをインライン表示する
サイボウズ Office on cybozu.com の掲示板やメッセージに Twitter へのリンクをはりつけたとき、 リンクの直下にその内容をインライン表示してくれるカスタマイズを行ってみました。
前回のYouTubeのときは IFRMAE を挿入することで実現しましたが、今回は Twitter の JSONP API を呼び出して実現してみました。
このような表示となります。
ソースコードを以下に示します。
2012年6月29日金曜日
cybozu.com : YouTube の動画をインライン表示する
サイボウズ Office on cybozu.com の掲示板やメッセージに YouTube 動画へのリンクをはりつけたとき、 リンクの直下に動画をインライン表示してくれるカスタマイズを行ってみました。
ソースコードを以下に示します。
2012年6月22日金曜日
cybozu.com : 設定ダイアログを使う JavaScript カスタマイズ
サイボウズ Office on cybozu.com での JavaScript によるカスタマイズでは、 JavaScript をアップロードする画面において、 適用する対象として「すべてのユーザー」「システム管理者のみ」を選ぶことができます。 しかし、この画面ではエンドユーザーごとにカスタマイズの適用の可否を設定することはできません。
そこで、エンドユーザーが各カスタマイズの適用の可否を設定できる仕組みを考えてみたいと思います。 今回紹介する方法では、前回までに紹介した ユーザーのアイコンを32x32で表示 および ワークフローの承認の際に確認ダイアログを表示 の各カスタマイズを例にします。
全ての画面の上部に表示される cybozu.com ヘッダの個人メニューに「カスタマイズ」というメニューを挿入し、 このメニューをクリックすると設定ダイアログがポップアップするようにします。 設定ダイアログでは、チェックボックスで各カスタマイズのオン/オフを切り替えます。 設定した内容はブラウザの localStorage に保存します。 したがって、厳密にはエンドユーザーごとではなく、ブラウザごとにカスタマイズの適用の可否を設定することになります。 ソースコードを以下に示します。各処理の説明はコメントを参照してください。
* 今回からソースコードの表示に SyntaxHighlighter ではなく、gist.github.com を使ってみました。
2012年6月13日水曜日
サイボウズ 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 をチェックして、変換させたい画面のみ対応させることもできます。
2012年6月7日木曜日
cybozu.com のヘッダの個人メニューにリンクを追加する方法
サイボウズ Office on cybozu.com では、cybozu.com 上の Garoon や kintone と共通のヘッダが表示されます。 このヘッダの右側にはユーザー名が表示され、それをクリックすると「個人設定」などが含まれるメニューが表示されます。 サイボウズ Office on cybozu.com にはユーザー名の左側に「リンク」というプルダウンメニューがありますが、 今回はあえてユーザー名のプルダウンメニューにリンクを追加する方法を紹介します。
例によってJSによるカスタマイズ(*1)で行います。前回と同様の方法で jQuery を使用したいと思います。 「個人設定」のリンクには vr_headerPersonalSettings という class 属性がついているので、 この要素を jQuery で取得し、その後にリンクに追加します。 例として、このブログへのリンクを追加してみます。 JSのコードは以下のようになります。