コラボスタイル Advent Calendar 2025の2日目の記事です。
テトリス“風”申請書の改修
コラボフロー のJavaScriptカスタマイズで、テトリス風のゲームをプレイできるようにした申請書を、毎年Advent Calendarに合わせてアップデートしています。
［対応履歴］
今年は、得点ランキング登録＆表示の機能を追加します！
そしてテーマは「WATCH」とのコラボです。
【改修1】画面デザインの変更
申請書はExcelフォームのため、先ずはExcelでレイアウトや配色を変更します。
今回はゲームウォッチ風のデザインにしました！
直線的なので、昨年のADVANCEより作成しやすかったです。
右端にはランキング表示欄を追加したので、改修4で説明します。
ちなみに好きなゲームウォッチは、
ファイアです。
【改修2】文書タイトルに得点を自動付加
経路の文書タイトル設定で、得点が自動セットされるようにします。
「文書タイトル降順＝ランキング順」で申請書が並ぶようにするためです。
タイトルのフォーマット設定：テトリス風申請 SCORE:[fidScore]
しかし、ここで問題が発生
数値の得点をそのまま付加すると、並び順が得点の先頭数字順になってしまいます。
例えば、800 → 3000 → 12000と不正な得点順に・・・
解決策として、タイトル用に文字列型得点パーツを追加し、
先頭を0埋めした得点を登録することにしました。
これで期待通り、12000 → 03000 → 00800の順に並べることができます。
if (this.titleScoreParts) {
// 桁数指定（6桁は超人）
const displayDigits = 5;
this.titleScoreParts.value = String(this.score).padStart(displayDigits, '0');
}
【改修3】検索APIで申請書を取得
申請書検索APIを使って、得点の高い順に申請書を取得する処理を追加します。
以下が参考にしたガイドです。
申請書の検索条件
-
title LIKE 'テトリス'：文書タイトルに「テトリス」を含む申請書 -
flow_status = 'decision'：決裁された申請書 -
ORDER BY title DESC：取得順は文書タイトルの降順
この処理で決裁済みの申請書を高得点順に、最大10件取得できます。
async function fetchRanking(appCd) {
return collaboflow.api.post('/v1/documents/search', {
"app_cd": appCd,
"query": "title LIKE 'テトリス' " +
"AND flow_status = 'decision' " +
"ORDER BY title DESC",
"offset": 0,
"limit": 10
})
.then(function(response) {
if(response.body.error) {
console.error('Failed to fetch ranking', response);
return null;
}
console.log('Fetched ranking', response.body.records);
return response.body.records;
})
.catch(function(error) {
console.error('Failed to fetch ranking:', error);
return null;
});
}
【改修4】ランキングを表示
申請書検索APIで取得した「得点」と「ユーザー名（申請者名）」を、
ランキング表示用パーツに値としてセットします。
得点は文書タイトルの末尾から、先頭0を除く連続した数字を抜き出します。
showRanking() {
if (!this._rankingDocuments) {
return;
}
for (let i = 0; i < this._rankingDocuments.length; i++) {
const document = this._rankingDocuments[i];
// 文書タイトルから、正規表現で連続した数字を抽出（先頭の0は含めない）
let score = document.title?.match(/[1-9]\d*$/)?.[0];
if (!score) {
break;
}
// カンマを付加して、得点をセット
score = Number(score).toLocaleString();
if (this._rankingScorePartsId) {
this.tableParts[i][this._rankingScorePartsId].value = score;
}
// 申請者名をユーザー名としてセット
const userName = document.request_user?.name || 'Unknown';
if (this._rankingNamePartsId) {
this.tableParts[i][this._rankingNamePartsId].value = userName;
}
}
}
以上で改修完了
おわりに
これでプレイ後、申請書が決裁されてランキング登録されるか、
ウキウキWATCHINGできるようになりました！
現状、申請書検索APIは監査権限が必要なため、
一般ユーザーではランキング情報を取得できないのが惜しいです
一般権限でも申請書検索APIが利用できると活用の幅がグッと広がると思いますが、
今のところコラボフローご利用者からの改善要望は少ないようです。。
最後まで読んでいただき、ありがとうございました！
明日以降のAdvent Calendarも見てくれるかな？
以下手順でダウンロードしたファイルをコラボフローでインポートすると、
テトリス"風"申請をお試しいただけます。
- Boxからフォームと経路のzipファイルをダウンロードします
- フォーム設定画面で、フォームのzipをインポートします
- 経路の新規作成画面で、経路のzipをインポートします