[サイボウズ]ガルーン2,3 のファイル管理でサムネイル表示

久々のサイボウズ関連エントリ。というか自炊関係じゃないエントリ。

2010/11/20 ガルーン3の場合の変更する行数も追記しました。

サイボウズコミュニティにこんな書き込みがあった。

ファイル管理で一覧を画像表示したい
ファイル管理に画像（jpg、gif）を追加して、その表示をファイル名ではなく、
追加した画像で表示できればいいなと思っております。
上記のような使い方はできるでしょうか。
イメージとしては、yahooオークションの画像で表示されたような感じです。

該当エントリ

この質問者が使用しているのはプロフィールを見る限りガルーン2だ。
この質問に対して早々にコメントがあり、「無理みたい」とのこと。
自分も少し探ってみたけどやっぱりそんな設定は見当たらなかった。

カスタマイズしよう

そんなときは自分でなんとかできるのがサイボウズガルーン2のよいところだ。
(ガルーン2でユーザーが独自のカスタマイズをするのが一般的かどうかは知らないけど。)

今回のカスタマイズは「ファイル管理で画像はサムネイル表示する」というところを到達点として、
以下のような検討をしてみた。

・ガルーン2なので Smarty のtplファイルのカスタマイズが有効だろう。
・できれば1ファイルの修正だけで済ませたい。
・サムネイルなのでIMGタグの生成が必要になるが、画像以外のファイルではサムネイルはできない。(スキル的な意味で)
・一覧の中に画像ファイルがなければサムネイルの列を表示するのはダサイので避けよう。

というわけで完成したのでソースを公開。

なお、カスタマイズは自己責任のもと行うこと。
私はこのブログの内容によって発生したいかなる損失も補償できない。

編集する準備

今回tplファイルの中身の編集を行うのだが、そのためにはUTF-8対応のテキストエディタが必要になる。
Windowsなら簡単に入手できるものとしては terapad あたりが有名だ。
インストール不要のアプリでお手軽なので他にお持ちでなければこれをダウンロードしておくのをお勧めする。
メモ帳はLFだけだと改行表示してくれないので今回は使いづらい。というか使えない。
（Linuxの方はそんなことで困ることはないと思うので省略。）

カスタマイズするファイルを探す

まずサイボウズのCGIディレクトリ（grn.exe または grn.cgiがインストールされている）を探す。
Windows版ならデフォルトは「C:¥Program Files¥Cybozu¥Apache2.2¥cgi-bin\cbgrn」
Linux版ならデフォルトは「/var/www/cgi-bin/cbgrn」
インストールの過程で変更しているならその場所を探して欲しい。

そのディレクトリからさらに深くもぐる。
ガルーン2の場合 ./page/cabinet
ガルーン3の場合 ./page/ja/cabinet

このディレクトリに「_file_list.tpl」という名前のファイルがある。
これが今回変更を加える唯一のファイルだ。

なお、カスタマイズなどで中身を書き換える場合は、必ずもとのファイルのバックアップと取っておくこと。
いざというときに戻せるようにしておく必要がある。

変更箇所

ファイルを先ほどのテキストエディタで開く。
今回は都合4箇所の書き換え（というか追記）を行う。
上から説明してゆくと行数が変わってしまうのでファイルの下側から追記する内容を紹介しよう。

ガルーン2の場合 138行目と139行目の間に
ガルーン3の場合 192行目と193行目の間に 以下のコードを追記。

{* カスタマイズ ↓ *}
{* サムネイルのimgタグ追加 *}
{if $custom_has_image}
 <td>
 {if $file.custom_is_image}
 
 {/if}
 </td>
{/if}
{* カスタマイズ ↑ *}

ガルーン2の場合 64行目と66行目の間に
ガルーン3の場合 111行目と112行目の間に 以下のコードを追記

{* カスタマイズ ↓ *}
{* サムネイル列のthタグ追加 *}
{if $custom_has_image}
<th>サムネイル</th>
{/if}
{* カスタマイズ ↑ *}

ガルーン2の場合 51行目と52行目の間に
ガルーン3の場合 94行目と95行目の間に 以下のコードを追記

{* カスタマイズ ↓ *}
{* サムネイル列のcolタグ追加 *}
{if $custom_has_image}
<col>
{/if}
{* カスタマイズ ↑ *}

ガルーン2、ガルーン3共通で、ファイルの先頭（1行目より上）に以下のコードを挿入

{* カスタマイズ ↓ *}
{* ファイルの拡張子から画像ファイルかどうかを配列に追加 *}
{php}
//サムネイルの高さ
$image_height = '100px';
$this->assign('custom_image_height', $image_height);

//ファイルの拡張子から画像ファイルかどうかを配列に追加する
// ついでに画像ファイルがあるかどうかを取得
$files = $this->get_template_vars('files');
$has_image = false;
$image_extensions_array = array(
    'gif'  => true
    ,'png' => true
    ,'jpg' => true
    ,'jpeg'=> true
    ,'bmp' => true
);
foreach($files as $key=>$val)
{
    $extension = pathinfo($val['filename'], PATHINFO_EXTENSION);
    if(array_key_exists($extension, $image_extensions_array))
    {
        $files[$key]['custom_is_image'] = true;
        $has_image = true;
    } else {
        $files[$key]['custom_is_image'] = false;
    }
}
//値を追加した配列を$filesに戻す
$this->assign('files', $files);
//画像ファイルがあるかどうかの変数をセット
$this->assign('custom_has_image', $has_image);
{/php}
{* カスタマイズ ↑ *}

追記は以上である。

表示のリセット

追記しただけではダメで、SmartyのCompiledファイルを削除しないと表示に反映されない。
追記が終わったら先ほどのCGIディレクトリから ./smarty/compiled とたどる。
中にあるフォルダをすべて削除する。（フォルダ名は「%%～」になっている。）

これでカスタマイズは完了である。
あとは実際表示を試してもらいたい。

2010/11/17 追記しました
うまくいけばこんな感じになるはず。

簡単な追加カスタマイズポイント

・サムネイルの大きさは5行目の'100px'を書き換えれば変更可能。

---

「うまくいかない」「ここが変だ」「コードがダサイ」などのご意見ご感想クレームはコメントやらtwitterのmentionなどでいただければと思います。
繰り返しますが、
・いじる前にバックアップを取りましょう。
・カスタマイズは自己責任で。責任は負えません。損失の補償もしません。

---