コラボスタイル Advent Calendar 2024の22日目の記事です。
株式会社コラボスタイルが提供するワークフローシステム「コラボフロー 」の、
JavaScriptとCSSのカスタマイズについてご紹介します。
文書のCSSカスタマイズ
コラボフローでは文書を、CSSカスタマイズで装飾することができます！
特定項目の文字を大きくしたり、着色して強調させたり。以下は参考記事です。
条件付きのCSSカスタマイズ
JavaScriptとCSSのカスタマイズを組み合わせると、
値が〇〇の場合に着色など、条件付きでCSSの装飾を付けられます。
例えば、以下のようにカスタマイズすると、
フォームパーツ「fidText」の値が「はい」の場合、赤文字で表示されます。
(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');
}
});
})();
.color-red {
color: red;
}
CSSでの色指定はredなどカラーコードの他に、
16進数表記#FF0000やRGB表記rgb(255,0,0)でも指定可能です。
テトリス申請のCSSカスタマイズ
一昨年に作成したテトリス“風”のゲームプレイができる申請書ですが、
今年はCSSカスタマイズでさらに進化させてみました。
2024年は、CSSでカラー化したADVANCE版です！！！
以下が昨年版からの主な改修点です。
【改修1】ブロックの色定義
T型ブロックはrgb(200, 00, 00)で表示する、
S型ブロックはrgb(160, 160, 60)で表示するなど、
カスタマイズ用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」を指定し赤で表示します。
minoShapes = {
T: [
[0, 1, 0],
[1, 1, 1],
[0, 0, 0],
]
}
minoShapes = {
T: [
['_', 't', '_'],
['t', 't', 't'],
['_', '_', '_'],
]
}
【改修3】画面デザインの変更
コラボフローのExcelからフォームに変換する機能はやはり便利！
カーブの表現は難しかったですが、Excel方眼紙でADVANCE風に♪
おわりに
CSSカスタマイズを活用すると、優先度「高」の文書を目立たせ、
スムーズな判定操作を促したりでそうですね。
各色には意味があり、着色による視覚的な効果は大きいと思います。
白色に拘って、白200色のテトリスにしてみるのも良いかも！？
以下手順でダウンロードしたファイルをコラボフローでインポートすると、
テトリス“風”のカスタマイズ申請書をお試しいただけます♪
- Boxからフォームと経路のzipファイルをダウンロードします
- フォーム設定画面で、フォームのzipをインポートします
- 経路の新規作成画面で、経路のzipをインポートします