2013年6月28日金曜日

cybozu.com : サイボウズ Office Bootstrap

サイボウズ Office on cybozu.comTwitter Bootstrap 風のデザインにする Chrome 拡張を作ってみました。Chrome ウェブストアからインストールすることができます。

サイボウズ Office Bootstrap

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

  1. 「個人設定 > デザイン」に移動します。
  2. 「青(標準)」を選択し、「変更する」ボタンをクリックします。

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

2013年2月27日水曜日

cybozu.com : サイボウズ Office JSカスタマイズマネージャー

以前、サイボウズ Office JavaScript エディターという、システム管理者がJavaScriptを編集し、システムにアップロードするためのChrome拡張を紹介しました。それに続き今回は、何とJavaScriptを記述せずともJavaScriptでシステムをカスタマイズすることができるChrome拡張を紹介します。

サイボウズ Office JSカスタマイズマネージャー

Chrome 拡張で実現した理由は、システム管理者が設定する機能なのでクライアントにインストールするツールにしても、また特定のブラウザに限定しても問題ない、と考えたからです。また、システム管理者以外のユーザーはこのChrome拡張をインストールする必要はありません。カスタマイズ実施後は他のユーザーもその恩恵にあずかれます。

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

  1. 「システム設定(詳細) > カスタマイズ > JavaScript ファイルの設定」に移動します。
  2. 「JavaScript ファイル」の行にある「カスタマイズマネージャー」ボタンをクリックします。
  3. 新規タブにJSカスタマイズマネージャーが立ち上がります。
  4. 最初にカスタマイズモジュールのリポジトリの確認が求められるので、デフォルトの状態で「OK」をクリックします。
  5. 適用したいカスタマイズ項目を選択・設定し「JavaScriptを生成してアップロード」ボタンをクリックします。

サイボウズ Office on cybozu.com JavaScriptカスタマイズサイトも開設されているので、詳しくはこちらもご覧頂ければと思います。

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

2013年1月23日水曜日

cybozu.com : サイボウズ Office フォームデザイナー

サイボウズ Office on cybozu.com のプレミアムコースでは「カスタムアプリ」機能が利用できます。 「カスタムアプリ」とは、業務に合わせたツールを作成する簡易的なデータベース機能のことです。

今回紹介するツールは、このカスタムアプリのフォームをドラッグ&ドロップで設計するための「サイボウズ Office フォームデザイナー」というツールです。

前回紹介した「サイボウズ Office JavaScript エディター」と同様、Chrome拡張で実現してみました。 Chrome ウェブストアからインストールすることができます。

サイボウズ Office フォームデザイナー

Chrome 拡張で実現した理由は、カスタムアプリのフォームを設計するのはそのアプリの運用管理者なので、つまり特定のユーザーがフォームを設計するので、クライアントにインストールするツールにしても、また特定のブラウザに限定しても問題ない、と考えたからです。

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

  1. カスタムアプリのレコード一覧画面を開きます。
  2. 運用管理権限がある場合「運用管理」リンクの右側に「フォームデザイナー」ボタンが表示されます。このボタンをクリックします。
  3. 新規ウィンドウにフォームデザイナーが立ち上がるので、ドラッグ&ドロップでフォームを設計します。

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

2012年11月30日金曜日

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 を編集し「適用」ボタンをクリックします。

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

2012年11月16日金曜日

2012年10月16日火曜日

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 の読み込み部分が不要となりました