JavaScriptファイルを使ったカスタマイズ

作成したJavaScriptファイルを、サイボウズ Officeに読み込んで画面をカスタマイズできます。
次の用途に利用できます。

  • 画面の表示のカスタマイズ
  • お客様が独自に利用する画面の作成

ただし、次の画面にはJavaScriptファイルは適用されません。

  • システム設定画面
  • 個人設定画面
  • 運用管理画面
  • モバイル版アプリ「サイボウズ Office」などのスマートフォンの画面

画面の表示をカスタマイズする

JavaScriptファイルを使って、サイボウズ Officeの画面の表示をカスタマイズできます。
たとえば、ボタンの色を変更したり、ドロップダウンメニューに表示する項目を追加したりできます。

  1. JavaScriptファイルを用意します。

    お客様自身で準備します。

  2. ヘッダーの右側の歯車アイコンをクリックします。

  3. [サイボウズ Officeシステム設定]をクリックします。
    スクリーンショット：ヘッダー

  4. [+]詳細設定を開くをクリックします。

  5. 「カスタマイズ」セクションの JavaScriptファイルの設定をクリックします。

  6. JavaScriptファイルを選択します。

    読み込めるファイル形式はjsのみです。

  7. JavaScriptファイルの設定を適用する対象を選択します。

    • すべてのユーザー
    • システム管理者のみ
    • 適用しない
      読み込んでいるJavaScriptファイルの適用を一時的に無効にします。

  8. 注意事項を確認し、設定するをクリックします。

独自に利用する画面を作成する

サイボウズ Officeが用意している空ページ（CustomSpace）に、JavaScriptファイルを適用し、お客様が独自に利用する画面を作成できます。

  1. 空ページに適用するJavaScriptファイルを用意します。

    お客様自身で準備します。

    • 空ページのアクセスURL：
      https://（サブドメイン名）.cybozu.com/o/ag.cgi?page=CustomSpace
    • 空ページにHello Worldを追加するサンプルプログラム例：
    $(document).ready(function() {  
  if (CustomizeJS.page === 'CustomSpace') {  
    $('#customizeMain').append($('<p>Hello World</p>'));  
  }
});

  2. ヘッダーの右側の歯車アイコンをクリックします。

  3. [サイボウズ Officeシステム設定]をクリックします。
    スクリーンショット：ヘッダー

  4. [+]詳細設定を開くをクリックします。

  5. 「カスタマイズ」セクションの JavaScriptファイルの設定をクリックします。

  6. 空ページに適用するJavaScriptファイルを選択します。

    読み込めるファイル形式はjsのみです。

  7. JavaScriptファイルを適用する対象に「システム管理者」を選択します。

  8. 注意事項を確認し、設定するをクリックします。

  9. 空ページにアクセスし、JavaScriptファイルが適用されていることを確認します。

    表示に問題があれば、JavaScriptファイルを修正します。

  10. ユーザーに、どの画面表示のURLを案内するかを選択します。

    「&mode=1」や「&mode=2」をアクセスURLにつけると、表示項目を変更できます。

    空ページのアクセスURL 表示されるパーツ
    https://（サブドメイン名）.cybozu.com/o/ag.cgi?page=CustomSpace
    • ヘッダー
    • アプリケーションメニュー
    • フッター
    https://（サブドメイン名）.cybozu.com/o/ag.cgi?page=CustomSpace&mode=1
    • ヘッダー
    • フッター
    https://（サブドメイン名）.cybozu.com/o/ag.cgi?page=CustomSpace&mode=2
    • フッター

  11. 「システム設定」画面で、 JavaScriptファイルの設定をクリックします。

  12. JavaScriptファイルの設定を適用する対象に「すべてのユーザー」を選択します。

  13. 注意事項を確認し、設定するをクリックします。

  14. 手順10で選択したアクセスURLをユーザーに連絡します。

適用中のファイルを取得する

サイボウズ Officeに読み込んでいるJavaScriptファイルをダウンロードします。

  1. ヘッダーの右側の歯車アイコンをクリックします。

  2. [サイボウズ Officeシステム設定]をクリックします。
    スクリーンショット：ヘッダー

  3. [+]詳細設定を開くをクリックします。

  4. 「カスタマイズ」セクションの JavaScriptファイルの設定をクリックします。

  5. JavaScriptファイル名をクリックします。

  6. Webブラウザーの機能を使用して、ファイルを保存します。

適用中のファイルを削除する

サイボウズ Officeに読み込んでいるJavaScriptファイルを削除し、カスタマイズ前の画面に戻します。

  1. ヘッダーの右側の歯車アイコンをクリックします。

  2. [サイボウズ Officeシステム設定]をクリックします。
    スクリーンショット：ヘッダー

  3. [+]詳細設定を開くをクリックします。

  4. 「カスタマイズ」セクションの JavaScriptファイルの設定をクリックします。

  5. 削除するJavaScriptファイル名の下の「削除する」を選択し、設定するをクリックします。

    スクリーンショット：ファイルを削除している