これから始めるサイボウズOfficeのJavascriptカスタマイズ

サイボウズ株式会社の提供するグループウェアには、大規模組織向けの Garoon と、中・小規模組織向けのサイボウズ Office という、2 つの類似するプロダクトがあります。

※Garoon 紹介ページより抜粋

この 2 つのプロダクトの大きな違いの 1 つとして、開発を伴うカスタマイズの柔軟さがあります。

Garoon については、公式に多くの API が公開されており、外部サービスとの連携も想定されていますが、サイボウズ Office では JavaScript ファイルを 1 つ適用できるだけに留まります。

この記事では、サイボウズ Office の JavaScript カスタマイズにおける制約と、サンプルコードを使った JavaScript カスタマイズの例を紹介します。

開発における制約

サイボウズ Office に Javascript で手を加えられる範囲は、非常に限られています。

サイボウズ Office における Javascript カスタマイズの位置付けは、あくまでもフロントサイドでの簡易的な修正が許されているだけのものです。

サイボウズ株式会社の提供する、サイボウズ Office 以外のプロダクトで開発をされている方には少し勝手が違うと思いますので、その部分から説明していきます。

クロスドメイン制約

kintone や Garoon などの、サイボウズ株式会社の他プロダクトでは、プロキシ API が提供されています。

これを活用することで、外部 API を使用してデータを収集することができますが、サイボウズ Office では API は提供されていません。

サイボウズ Office から外部のデータを取得することはできませんし、外部へデータを送ることもできません。

扱えるのは DOM 要素のみ

サイボウズ Office には、グローバル変数からデータを取得するような API は用意されていないため、データを簡単には取得できません。

xml や json 形式で取得することはできませんし、DOM を操作してデータを集めても、アップデートによって全く動作しなくなってしまうケースが考えられます。

読み込める js ファイルは 1 つだけ

kintone、Garoon などの、Cybozu の他のクラウドサービスでは、API を利用して、複数の javascript ファイルを読み込むことができます。

サイボウズ Office では、読み込める js ファイルは１つに限られます。

Javascript 適用手順

前述の通り、サイボウズ Office での JavaScript カスタマイズには制約が多く存在します。

また、JavaScript 初学者であれば、機能拡張の前段階である、JavaScript そのものの仕様の部分で躓いてしまうこともあるかもしれません。

以上から、初めて JavaScript カスタマイズを行う場合、公式から提供されているモジュールにコードを付け足すやり方がお勧めです。

2022 年 8 月に確認したところ、カスタマイズマネージャーはアクセスできない状態になっていました。

そのため当サイトでは、代わりにカスタマイズの実行を容易にするモジュールを使用します。

カスタマイズの第一歩

それでは実際に、JavaScript を記述しご利用のサイボウズ Office にカスタマイズを反映しましょう。

今回はサンプルとして、Google の提供する Web フォントを適用する処理を実装します。

空のテキストファイルを作成、拡張子を.js にした上で、以下のコードをコピーしてください。

このコードは拡張を容易にするためのものなので、基本的に編集することはありません。

(() => {
  window.CybozuOffice = window.CybozuOffice ?? {
    run: (e, t) => {
      if (e) {
        if ('string' == typeof e && 'all' !== e && e !== window.CustomizeJS?.page) return;
        if (e?.length && !e?.includes('all') && !e?.includes(window.CustomizeJS?.page)) return;
      }
      t();
    },
  };
})();

上記のコードが実行されると、グローバル変数としてCybozuOfficeが定義されます。

この変数のプロパティであるCybozuOffice.runを呼び出すことで、簡単に処理を実装できます。

同一のファイルの前述したコードの後に、以下のコードを記述します。

window.addEventListener('load', () => {
  CybozuOffice.run('all', () => {
    // Webフォント読込タグ
    const font = document.createElement('link');
    font.rel = 'stylesheet';
    font.href = 'https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap';

    // フォント適用タグ
    const style = document.createElement('style');
    style.innerText = `* {font-family: "Noto Sans JP","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ヒラギノ角ゴシック","Hiragino Sans","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;}`;

    // 画面に反映
    document.head.append(font);
    document.head.append(style);
  });
});

適用結果を確認する

それぞれの方法で JavaScript ファイルを編集したら、JavaScript 設定画面よりアップロードを行い、「設定する」をクリックします。

この JavaScript 設定画面では JavaScript が適用されないようになっているため、ポータルなどに戻り動作を確認しましょう。

画面全体のフォントが変更されていれば、反映は成功です。

Javascript を反映するページを限定する

サイボウズ Office から遷移できるページには全て、URL パラメータに?page=〇〇〇とあるのが確認できるかと思います。(トップページであれば「AGIndex」など)

ブラウザのデバッグツールで確認するとわかりますが、このパラメータは、Head ノード内でも以下のようにグローバル変数が定義されています。

CustomizeJS = {
  page: 'AGIndex',
  ver: '1579326998',
};

これを活用し、作成した JavaScript に CustomizeJS の値に応じて条件分岐を設定することで、プログラムを適用させる画面を限定することが可能です。

前述したひな形を使用している場合は、コードを少し加えるだけで実行する画面を制御できるようにしています。

window.addEventListener('load', () => {
  CybozuOffice.run('AGIndex', () => {
    console.log('この処理はトップページでのみ実行されます');
  });
});

CybozuOffice.runメソッドの第一引数に限定したい画面を指定することで、その画面でだけ処理が実行されるようになります。

複数画面で処理を分ける場合

window.addEventListener('load', () => {
  CybozuOffice.run('AGIndex', () => {
    console.log('この処理はトップページでのみ実行されます');
  });
  CybozuOffice.run(['ScheduleIndex', 'ToDoIndex'], () => {
    console.log('この処理はスケジュール、ToDoで実行されます');
  });
  CybozuOffice.run('all', () => {
    console.log('この処理は全ての画面で実行されます');
  });
});

CybozuOffice.runメソッドの第一引数は、配列にも対応しています。

配列として複数指定することで、指定した全ての画面で処理が実行されます。

また、引数に"all"を指定した場合は、実行可能なあらゆる画面で処理が実行されます。