【コピペで分かる】サイボウズOfficeのJavascriptカスタマイズ

この記事は、これからサイボウズ Office を javascript でカスタマイズしようとされている方向けに書いています。

1 から Javascript ファイルを作成する方法と、JS カスタマイズマネージャーから出力したファイルに手を加えて実装する方法、どちらもご紹介いたします。

ですが、おすすめは JS カスタマイズマネージャーを使う方法です。理由は後述いたします。

他クラウドサービスとの連携は、基本的にはできないと考えた方が良いです。詳細とサンプルコードを説明していきます。

開発における制約

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

サイボウズ Office における Javascript カスタマイズの位置付けは、あくまでもフロントサイドでの簡易的な修正が許されているだけのものです。言い換えると、全てデータが揃った後に、付け足す形で修正することのみを想定されています。ですので、他の Cybozu クラウドサービスにて開発をされている方には、少し勝手が違うと思いますので、その部分から説明していきます。

クロスドメイン制約

kintone や Garoon などの、Cybozu の他クラウドサービスでは、プロキシ API が提供されています。これを活用することで、外部 API を使用してデータを収集することができますが、サイボウズ Office では API は提供されていません。ですので、サイボウズ Office から外部のデータを取得することはできませんし、外部へデータを送ることもできません。

扱えるのは DOM 要素のみ

サイボウズ Office には、グローバル変数からデータを取得するようなファンクションは用意されていないため、データを簡単には取得できません。
xml や json 形式で取得することはできませんし、DOM を操作してデータを集めても、アップデートによって全く動作しなくなってしまうケースが考えられます。

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

kintone、Garoon などの、Cybozu の他のクラウドサービスでは、api を利用して、複数の javascript ファイルを読み込むことができます。ですが、サイボウズ Office では、読み込める js ファイルは１つに限られます。

Javascript 適用手順

上記で説明した通り、サイボウズ Office での Javascript カスタマイズは制約が多いです。その範囲内で開発をするには、提供されているモジュールにコードを付け足すやり方がお勧めです。

以下の記事から、サイボウズ Office JS カスタマイズマネージャーにアクセスし、ベースとなる js ファイルを取得してください。

JavaScript カスタマイズについて - サイボウズ Office ユーザー様向けサイト

ファイルを取得することができたら、一度そのファイルをダウンロードしてください。
開いて表示されるコードの 10 行目辺りに、
Ginger.categories = [
と続くコードがあるので、それより下に、以下のコードを付け足してください。

1 から導入する場合は、代わりに空のテキストファイルを用意してください。

モジュールを流用する場合

__modules.push({
  name: 'OtherWebFont',
  desc: 'Webフォントの適用',
  func: () => {

    // Webフォントの読み込み
    $('head').append('<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap" rel="stylesheet">');

    $('head').append($('<style></style>').text(`
			* {font-family: "Noto Sans JP","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ヒラギノ角ゴシック","Hiragino Sans","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;}
		`));
  }
});

1からの開発の場合

$(document).ready(() => {
	// Webフォントの読み込み
	$('head').append('<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap" rel="stylesheet">');

	$('head').append($('<style></style>').text(`
		* {font-family: "Noto Sans JP","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ヒラギノ角ゴシック","Hiragino Sans","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;}
	`));
})

上記を追加し再度アップロードして「設定する」をクリックしてください。

1 からの場合は即座に反映され、モジュールの場合は、アカウント設定に「カスタマイズ」が追加されているはずです。

「その他」のタブに、今回追加した「Web フォントの適用」があるはずなので、クリックして保存しましょう。画面全体のフォントが変更されていれば、反映は成功です。

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

サイボウズ Office から遷移できるページには全て、URL パラメータに?page=〇〇〇とあるのが確認できるかと思います。(トップページであれば「AGIndex」など)
ブラウザのデバッグツールで確認するとわかりますが、このパラメータは、Head ノード内でも以下のようにグローバル変数が定義されています。

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

ですので、読み込む Javascript に、この CustomizeJS.page の値によって条件分岐を設定することで、反映する画面を限定させることができます。

1画面のみで実行する場合

$(document).ready(() => {
	// トップページ以外では実行しません
	if (CustomizeJS.page === 'AGIndex') {
		return;
	}

	// ----------------------------------------
	// ここにトップページで実行する処理を書く
	// ----------------------------------------
})

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

$(document).ready(() => {

	switch (CustomizeJS.page) {
		// -----------------------------------
		// トップページで実行する処理
		// -----------------------------------
		case 'AGIndex':
			break;

		// -----------------------------------
		// スケジュールで実行する処理
		// -----------------------------------
		case 'ScheduleIndex':
			break;
		default:
	}
})

その他のカスタマイズサンプル

アプリメニューのカスタマイズ

ページのヘッダー部分にある、アプリアイコンの一覧をマテリアルデザイン風に変更し、カーソルを乗せた際にアニメーションさせます。

https://localbias.work/823