[サイボウズ]Office6 ユーザーを読みで並べ替える

自動でソートしてくれない

サイボウズOffice6ではユーザー登録画面に、ユーザー名や読みを入力する欄はあるものの、
表示順についてはデフォルトは追加した順番、変えたければ手動で並べ替えをしなければならず、
これが非常に手間である。
今回はこれを解決する手法についてのエントリ。

サイボウズ製品をご存知のかたは「いまさらOffice6かよ」と思われるかもしれない。
確かに今年の11月でOffice6のサポートは終了するし、すでにメジャーバージョンは8まで出ている。
が、意外にまだOffice6を使っている人が多そうだ。

カスタマイズ方法

サイボウズOfficeシリーズのユーザーカスタマイズは、htmlファイルの編集で行う以外にない。
インストールしたフォルダの cb6\cb5\page の中に「～.html」のファイルが多く保存されており、
アプリの機能ごとのファイルになっている。

今回編集を行うのは、「SystemUserReOrder.html」である。
機能としては「最初から順番を変更する」ページだ。

課題

過去にもこのページについては「<select multiple>を広げる」というテクニックが紹介されてはいるが、それでもやはり手間なのは変わらない。

なんといってもひとつずつ視認しながら読みを思い浮かべて並べ替えるのは苦痛でしかないのである。
読みでソートする機能がもともとあれば何の問題もないのに。

解決１　読みを表示してみる

この方法を思いついたのは自分ではなく当時の同僚である。
各機能のhtmlファイルにはスクリプトも書かれていて、変数さえわかれば表示も可能になる。
で、ここで使える読みを指す変数は「$formUser.Yomi」であった。

なので、176行目にある

<option value="$formUser.ID">$formUser.Name

を

<option value="$formUser.ID">$formUser.Name ($formUser.Yomi)

に書き換えると一覧したときにカッコ内に読みが追加表示できるのである。
名前→読みの変換を脳内で行わずにすむ為、作業工数（苦痛）が少し軽減できる。

解決２　読みで並べ替えてみる

人間とは欲望の塊である。「少し苦痛が軽減できた」程度ではやはり満足しない。
やはり欲しいのは自動での並べ替えである。
だが、私にはサイボウズが何で書かれていてどう書き直せばそれが実装できるかわからない。
が、我々には「Javascript」という強い味方がいた。
幸い「並べ替え」はもともとクライアントの操作が主体である。
その作業をJavascriptで実装すればよい。
並べ替えるキーは読み。その読みは変数で表示ができる。

上記で、

<option value="$formUser.ID">$formUser.Name ($formUser.Yomi)

としたところを

<option reading="$formUser.Yomi" value="$formUser.ID">$formUser.Name ($formUser.Yomi)

とHTMLに則ってない属性をつけてみる。
この属性名がいやなら他のものでもかまわないが、同姓同名の可能性を考えると「id」はふさわしくない。
これで並べ替えるためのキーができた。
あとは配列に入れて並べ替えて左側のセレクトボックスに突っ込めばよい。

が、正直それを全部書くのは面倒である。やはりここはJQueryに頼りたい。
なので、まずWebサーバー上にJQueryのjsファイルを置く。
ファイルのどこかで

<script language="javascript" type="text/javascript" src="/libs/jquery/jquery.js"></script>

などと読み込む。

右側のセレクトボックスの中身は $("select[name='CID'] > option") で取れる。
「<option ～」の文字列ごと配列に格納してしまい、.sort()でソートする。
それを今度は左側のセレクトボックスに流し込む。

for(i in obj) {
    $("select[name='UID']").append(obj[i]);
}

最後に右側からすべてのoptionを削除し、
双方に「<option value=''>　　　　　　　　　　　　　　'</option'>」という要素がひとつずつ入るように
調整する。
これはサイボウズの仕様によるもので、これがないと並べ替えが実行できないのである。

$("select[name='CID'] > option").remove();
$("select[name='CID']").append( "<option value=''>　　　　　　　　　　　　　　</option>");
$("select[name='UID'] > option[value='']").remove();
$("select[name='UID']").append( "<option value=''>　　　　　　　　　　　　　　</option>");

で、これらをひとつの関数にまとめて、それを実行するボタンを画面に配置すれば完成だ。
って実装したのが3年前。今でも無事稼動している。

読んでもよくわからなかったけどやってみたい方へ

サイボウズのソースを晒すのは気が引けるので文章主体で説明をしてみました。
よくわからなければTwitterかコメントで連絡ください。

.