XSL

はじめに 韓国でインターネットバンキングを利用したことがあれば、各種セキュリティプログラムのインストール要求に頷くことでしょう。ActiveXは姿を消しましたが、その代わりとなった数多くのセキュリティプラグイン—AhnLab Safe Transaction、TouchEn nxKey、Veraportなど—は依然として私たちのPCへのインストールを要求しています。 TableCloth（食卓布）プロジェクトは、これらのセキュリティプログラムをWindows Sandboxという隔離された環境で実行できるようにするオープンソースツールです。TableClothカタログは、どの金融サイトでどのセキュリティプログラムが必要かを整理したデータベースの役割を果たしています。 今回のアップデート概要 TableClothカタログプロジェクトに5件のコミットが適用されました。今回のアップデートはフロントエンド、バックエンド、DevOpsの3つの領域にわたる総合的な改善です。 領域 変更内容 主要技術 フロントエンド カタログWebページの全面再設計 カードUI、カテゴリフィルター、レスポンシブレイアウト バックエンド ビルドツールアーキテクチャのリファクタリング Generic Host、依存性注入、構造化ロギング DevOps 品質管理自動化ツールの追加 画像検証、未使用リソース整理、ファビコン収集改善 各領域で何が変わったのか、なぜそのような決定を下したのか、詳しく見ていきます。 フロントエンド：テーブルからカードへ なぜUIを変更する必要があったのか？ 既存のカタログページは典型的なHTMLテーブル形式でした。カテゴリ、サービス名、必要なパッケージリストが行と列で整列された構造です。機能的には問題ありませんでしたが、いくつかの限界がありました。 まず、100を超えるサービスをスクロールしながら探す必要がありました。モバイル環境では横スクロールが発生してユーザビリティが低下し、視覚的な階層構造がないため情報の把握が困難でした。何より、カテゴリ別のフィルタリングができず、目的のサービスを素早く見つけることが難しい状況でした。 これらの問題を解決するため、カードベースのUIへの全面改編を決定しました。 XSLトランスフォームで実装したレスポンシブカードUI TableClothカタログの興味深い点は、データがXML形式で保存され、Webページが**XSLT（XSL Transformations）**を通じてレンダリングされることです。サーバーサイドのロジックなしに、ブラウザが直接XMLをHTMLに変換します。 デザイントークンシステムの導入 モダンなCSS設計の核心はデザイントークンです。色、間隔、影などをCSS変数として定義することで、一貫性のあるデザインを維持しながらメンテナンスが容易になります。 :root { /* カラーパレット */ --primary-color: #2563eb; --primary-hover: #1d4ed8; --bg-color: #f8fafc; --card-bg: #ffffff; --text-primary: #1e293b; --text-secondary: #64748b; --border-color: #e2e8f0; /* シャドウ */ --shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06); --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05); /* レイアウト */ --radius: 12px; } このカラースキームはTailwind CSSのデフォルトパレットからインスピレーションを得ています。スレート系のテキストカラーとブルー系のアクセントカラーを組み合わせることで、クリーンかつプロフェッショナルな印象を与えることができます。 ...