サイボウズガルーン2 書式編集で等幅フォントを使いたい

表題の内容の書き込みがサイボウズコミュニティにあった。

サイボウズコミュニティ Q&A 「文字の位置あわせ」
http://cybozu.kanshin.jp/keyword/749529


サイボウズの機能の社内メールや掲示板などの本文やコメントを書く際、
簡易的なWYSIWYGを利用することができるようになっているが、
これを使うと勝手にプロポーショナルフォントになってしまい、
スペースで位置あわせができないというお悩み。

「EXCELで表示を整えて貼り付けたら？」と提案するも、
それでは都合が悪いらしい。


ということで今回も無理やり考えてみた。
題して「苦労して書式編集で等幅フォントを使う」

内容は「サイボウズガルーン２」と最近でた「ガルーン３」についてである。
なお、これを調べたのは書き込みをした人のためではなく、あくまで興味本位である。
書き込みをした人の要求に合っているかどうかはわかっていない。

ディレクトリ配置

今回はガルーンのtplファイルおよびcssファイルを直接編集することになるので、
まずは以下のディレクトリについて知っておく必要がある。
なお、デフォルトはWindowsの場合である。

「サイボウズ アプリケーションのディレクトリ」
　Apache2.2やMySQL5.0のインストール先
　デフォルト　C:\Program Files\Cybozu
「WebサーバーのCGIディレクトリ」
　実行ファイル(grn.exe)のほかphp、tplファイルなどサーバーサイドスクリプトが保存される
　デフォルト　C:\Program Files\Cybozu\Apache2.2\cgi-bin\cbgrn
「Webサーバーのドキュメントルートディレクトリ」
　cssやjsファイルが格納される
　デフォルト　C:\Program Files\Cybozu\Apache2.2\htdocs\cbgrn

これらの呼称はサイボウズガルーンのインストール時に使われる名称であり、
ガルーン２でもガルーン３でも変わらない。と思う。

これをあまり考えずに決めるとあとで痛い目にあう。と思う。
今回はガルーンの仕組みについて詳しく解説するのが目的ではないので、
さらっと先に進もう。

リッチエディタ

記事書き込みは「テキスト」と「書式編集」とが選択でき、
「書式編集」を選ぶとリッチテキストエディタのようなUIになる。
これをサーバー上のtplファイルで探してみたところ、それらしきファイルがあった。
ガルーン２の場合「WebサーバーのCGIディレクトリ」\page\grn\richeditor.tpl
ガルーン３の場合「WebサーバーのCGIディレクトリ」\page\ja\grn\richeditor.tpl

{grn_richeditor toggleName=$switch_name
                 name=$name
                 height=$smarty.capture.pixel_height
                 width=$smarty.capture.pixel_width
                 value=$data
                 show_toolbars=$toolbars
                 snippets=$snippets
                 pageMode=$page_mode
                 defaultFontFamily=$default_font_family
                 absolutePath=false
                 brOnEnter=true
                 textareaMode=$text_mode}

$default_font_family はPHPの変数だがPHPのソースはさわれない。
（さわれない理由は今度また）
もちろんtpl上でassignすることも可能だろうが、他にどんな影響がでるかわからないので危険。
ただ、とりあえずあたりはつけられそうだ。ここはまたあとでふれる。


さて、実際表示したときのHTMLソースを見てみると、

/* copyright            
            Rich Editor, Version 2.0
            Copyright (c) 2002-2004 V. Smolin All rights reserved.
            http://www.richarea.com
            re@richarea.com
            copyright */

と書いてある。
つまるところこのWYSIWYGは「Rich Editor」という名前のライブラリらしい。
サイトのデモ http://www.richarea.com/demo/ を見てみると、機能としてはFONT選択の機能がある。
それであちこちひっくり返してみたが、それを設定しているjsファイルは見当たらない。
どうやらFONT選択を有効にするためにはPHPのコードの編集が必要のようだ。
しかもFONT選択出来たところでFONTの情報を格納したり表示に反映したりしてくれるかどうかも疑問である。

スタイルシート

ちなみに表示している範囲のスタイル指定を見ると
記事、コメントは div.margin_vert で囲まれ、
テキストで書き込んだときはその内側で div.format_contents に囲まれる。

そのclass指定のcssを探してみる。
ガルーン２の場合「Webサーバーのドキュメントルートディレクトリ」\grn\html\std.css
ガルーン３の場合「Webサーバーのドキュメントルートディレクトリ」\grn\html\font-ja.css

BODY {
/* 2 */
    font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック',sans-serif;
/* 3 */
    font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS PGothic", "ＭＳ Ｐゴシック", sans-serif;
}

.format_contents {
/* 2 */
    font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ ゴシック',sans-serif;
/* 3 */
    font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Gothic", "ＭＳ ゴシック", monospace;
}

となっている。つまり
テキストで書き込んだときは div.format_contents に囲まれ等幅フォントになるが、
書式編集で書き込んだときはそれ以上のスタイル指定がなく、Ｐゴシが適用される。

改修方針

・書式編集の書き込みはFONT選択できないから最初から等幅フォントにする
・表示時にプロポーショナルフォントになっては意味がないので表示もすべて等幅フォントにする。
・ただ、記事やコメント以外すべての表示を等幅フォントにするとちょっと残念になるので影響範囲は絞る。
という方向でやってみる。

■入力画面■
ガルーン２の場合「WebサーバーのCGIディレクトリ」\page\grn\richeditor.tpl
ガルーン３の場合「WebサーバーのCGIディレクトリ」\page\ja\grn\richeditor.tpl
の49行目を

defaultFontFamily=$default_font_family

から

defaultFontFamily='MS Gothic'

に変更する。
これで書式編集の画面で入力中もMS Gothicになる。

■表示画面■
すべての書き込みは div.margin_vert に収められているようであるから、
読み込んでいるCSS
ガルーン２の場合「Webサーバーのドキュメントルートディレクトリ」\grn\html\std.css
ガルーン３の場合「Webサーバーのドキュメントルートディレクトリ」\grn\html\font-ja.css
に

.margin_vert {
    font-family:'Osaka-mono','MS Gothic';
}

を追記する。
※CSSはあまり詳しくないんで自信ゼロ。Macは持ってないので未検証。
　Linuxは製品の動作環境としてサポートされていないので考慮していない。

■設定のリセット■
変更しただけではダメで、SmartyのCompiledファイルを削除しないと表示に反映されない。

「WebサーバーのCGIディレクトリ」\smarty\compiled
のフォルダの中にあるフォルダをすべて削除する。（フォルダ名は「%%～」になっているはず。）

設定は以上。

制限事項

・Windows上での入力に限られる。（入力画面で'MS Gothic'を指定しているから）
　　※複数指定ができるか不明。なんといってもMacを持っていな（略
・フォントは選べない。
　　※既存のコンテンツの表示が変わってしまう。
・ソースをいじることになるのでサイボウズ社のサポートは受けられない。
　　※すべて自己責任で！