【コラボフロー】CSSカスタマイズでテトリス申請がADVANCE

コラボスタイル Advent Calendar 2024の22日目の記事です。
* [コラボスタイル 1 Advent Calendar 2024 - Adventar](https://adventar.org/calendars/10411)
* [コラボスタイル 2 Advent Calendar 2024 - Adventar](https://adventar.org/calendars/10412)


[株式会社コラボスタイル](https://corp.collabo-style.co.jp/)が提供するワークフローシステム「[コラボフロー ](https://www.collabo-style.co.jp/)」の、
JavaScriptとCSSのカスタマイズについてご紹介します。

## 文書のCSSカスタマイズ

コラボフローでは文書を、CSSカスタマイズで装飾することができます！
特定項目の文字を大きくしたり、着色して強調させたり。以下は参考記事です。

* [【コラボフロー】はじめてのCSSカスタマイズ - Qiita](https://qiita.com/h-waji/items/4a431ee44bc956546aa4)
* [CSSだけで簡単にできるコラボフローカスタマイズ！ - Zenn](https://zenn.dev/collabostyle/articles/0e47277b2e7859)
* [カスタマイズ – コラボフローサポート](https://collaboflow.zendesk.com/hc/ja/categories/360000018735)

### 条件付きのCSSカスタマイズ

JavaScriptとCSSのカスタマイズを組み合わせると、
値が〇〇の場合に着色など、条件付きでCSSの装飾を付けられます。

例えば、以下のようにカスタマイズすると、
フォームパーツ「fidText」の値が「はい」の場合、赤文字で表示されます。

```javascript:JavaScriptカスタマイズ
(function () {
    'use strict';

    // 文書閲覧画面のイベントを定義
    const showEvents = [
        'request.detail.show','request.confirm.show', 'request.judgement.show'
    ];
    
    collaboflow.events.on(showEvents, (event) => {
        const value = event.parts.fidText.value;
        if (value === 'はい') {
            // fidTextパーツにCSSを設定
            const element = document.getElementById('span_fidText');
            element.classList.add('color-red');
        }
    });
})();
```

```css:CSSカスタマイズ
.color-red {
	color: red;
}
```

CSSでの色指定は`red`などカラーコードの他に、
16進数表記`#FF0000`やRGB表記`rgb(255,0,0)`でも指定可能です。

## テトリス申請のCSSカスタマイズ

一昨年に作成したテトリス“風”のゲームプレイができる申請書ですが、
今年はCSSカスタマイズでさらに進化させてみました。

* [2022年 初版](https://qiita.com/tetrer/items/bcce00b910fafd14e636)
* [2023年 リプレイ機能追加版](https://qiita.com/tetrer/items/21b5670740cb5ebd3a12)


2024年は、CSSでカラー化した<font color="#6600FF">***ADVANCE***</font>版です！！！

![scaledrone5.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2953201/68483aa9-f85b-41ac-220d-8e81ca568064.gif)

以下が昨年版からの主な改修点です。

### 【改修1】ブロックの色定義

T型ブロックは`rgb(200, 00, 00)`で表示する、
S型ブロックは`rgb(160, 160, 60)`で表示するなど、
カスタマイズ用CSSファイルで、ブロックの色を設定できるようにしました。

```css:色指定の例
.mino-t {
	color: rgb(200, 00, 00);
}

.mino-s {
	color: rgb(160, 160, 60);
}
```

### 【改修2】ブロックの配置管理

これまで盤面でのブロック有無情報を`0,1`の配列で管理していましたが、
カラー化するにあたり有無に加え、種類（色）も管理する必要がありました。

そのためブロックの配置を`0,1`ではなく文字列での管理に変更し、
ブロックの種類によりCSSを指定し、着色表示されるよう改修しました。

例えば、T型ブロック「`t`」はCSSの「`.mino-t`」を指定し赤で表示します。

```javascript:改修前のT型ブロック（0,1で管理）
minoShapes = {
    T: [
        [0, 1, 0],
        [1, 1, 1],
        [0, 0, 0],
    ]
}
```

```javascript:改修後のT型ブロック（文字列で管理）
minoShapes = {
    T: [
        ['_', 't', '_'],
        ['t', 't', 't'],
        ['_', '_', '_'],
    ]
}
```

### 【改修3】画面デザインの変更

コラボフローのExcelからフォームに変換する機能はやはり便利！
カーブの表現は難しかったですが、Excel方眼紙で<font color="#6600FF">***ADVANCE***</font>風に♪

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2953201/f91d8a4d-b18e-4083-de63-d8bcdd59d05e.png)


## おわりに

CSSカスタマイズを活用すると、優先度「高」の文書を目立たせ、
スムーズな判定操作を促したりでそうですね。

各色には意味があり、着色による視覚的な効果は大きいと思います。
白色に拘って、白200色のテトリスにしてみるのも良いかも！？


:::note info
以下手順でダウンロードしたファイルをコラボフローでインポートすると、
テトリス“風”のカスタマイズ申請書をお試しいただけます♪

1. [Box](https://app.box.com/s/ox8tjwgmlx7m452u2gr0014p5qtld2z3)からフォームと経路のzipファイルをダウンロードします
2. フォーム設定画面で、フォームのzipをインポートします
3. 経路の新規作成画面で、経路のzipをインポートします
:::