Fess アーカイブ - 2ページ目 (100ページ中)

FessのAIモードUIをAtlassian Design Systemで調整

Fess 15.5に向けて、AIモード（チャット画面）のUIをAtlassian Design System（ADS）のパターンに従って全面的に調整しました。

変更の概要

今回のUI改善は、モダンなデザインシステムに沿った統一的な見た目と操作性の向上を目指しています。主な変更点は以下の通りです。

ステータスロゼンジ

ヘッダーのステータス表示を、ADSのLozenge（バッジ）パターンに変更しました。状態に応じて色が変わり、処理中はパルスアニメーションで視覚的にフィードバックします。

Ready: グレー背景
Thinking: ブルー背景（パルスアニメーション付き）
Error: レッド背景
Success: グリーン背景

ステッパーコンポーネント

検索処理の進行状況を可視化するステッパーを新規追加しました。以下の5つのフェーズをアイコン付きで表示します。

Analyze – 意図分析
Search – 検索実行
Evaluate – 結果評価
Retrieve – ドキュメント取得
Answer – 回答生成

各ステップは、待機中・実行中・完了の3状態を持ち、実行中のステップにはパルスアニメーションが付きます。

ウェルカム画面

チャット開始前の空の状態に、ADSのEmpty Stateパターンに従ったウェルカム画面を表示するようにしました。以前のハードコードされたサジェスチョンチップスは削除しています。

メッセージUI

メッセージ表示も改善しています。

フェードインアニメーションの追加
タイムスタンプ表示
ホバー時のコピーボタン表示
ソースリンクのカード形式での表示
アバターのグラデーション化

エラーバナー

エラー発生時にリトライ・閉じるボタン付きのバナーを表示するようにしました。

入力エリア

文字数カウンター（0 / 4000）の表示
キーボードショートカットのヒント表示（Enter送信、Shift+Enter改行）
ARIAラベルによるアクセシビリティ改善

ダークモード対応

全コンポーネントに対してダークモードのスタイルを追加しました。prefers-color-scheme: darkに対応しています。

16言語対応

新しいUI要素のラベルを16言語分追加しています。ステッパーのフェーズ名、ウェルカムメッセージ、入力ヒント、コピー通知など、すべての新規テキストが多言語対応済みです。

カラーパレット

ADSのカラートークンに合わせて、以下のような色使いに統一しています。

用途	カラーコード
プライマリ	#0052CC
テキスト（メイン）	#172B4D
テキスト（サブ）	#6B778C
ボーダー	#DFE1E6
背景（サブ）	#F4F5F7
成功	#00875A
エラー	#DE350B

まとめ

15.5ではこのデザインをベースにAIモードのUIを仕上げていく予定です。ADSパターンに従うことで、一貫性のあるモダンなUIを実現しています。

Fessの管理画面でファイルアップロードができない問題の修正

Docker環境などでFessの管理画面から画像ファイルなどをアップロードできなくなっていた問題を修正しました。

原因

管理画面でファイルをアップロードする際、FessAdminActionのvalidateFilePathメソッドでファイルパスのバリデーションが行われます。このバリデーションでは、アップロード先のパスが許可されたディレクトリ配下にあるかをチェックしていますが、従来はfess.var.pathのみを許可ディレクトリとして参照していました。

Docker環境では、アップロードされたファイルの保存先がfess.webapp.pathやfess.conf.path配下になるケースがあり、これらのパスが許可されていなかったためアップロードに失敗していました。

修正内容

validateFilePathメソッドを修正し、以下の3つのシステムプロパティすべてを許可ディレクトリとしてチェックするようにしました。

fess.var.path
fess.webapp.path
fess.conf.path

ファイルパスがこれらのいずれかのディレクトリ配下にあれば、バリデーションを通過するようになります。また、バリデーション失敗時のエラーメッセージも改善され、すべての許可パスが表示されるようになりました。

この修正はFess 15.5.0に含まれる予定です。詳細はPR #3028を参照してください。

Fessのドキュメントをエクスポートする機能を追加

Fessでクロールしてインデックスに保存されたドキュメントを、HTMLファイルとしてエクスポートする機能を追加しました。検索インデックスに格納されているテキスト情報をファイルとして取り出せるようになります。将来的にはJSON形式などへの対応も検討しています。

概要

新しいスケジュールジョブ IndexExportJob を追加しました。このジョブはOpenSearchのインデックスからドキュメントをスクロール検索で取得し、各ドキュメントをHTMLファイルとしてファイルシステムに書き出します。ドキュメントのURLのパス構造がそのままディレクトリ構造に反映されます。

設定

fess_config.properties に以下の設定項目が追加されています。

プロパティ	デフォルト値	説明
`index.export.path`	`/var/lib/fess/export`	エクスポート先のベースディレクトリ
`index.export.exclude.fields`	`cache`	エクスポートから除外するフィールド（カンマ区切り）
`index.export.scroll.size`	`100`	スクロール検索のバッチサイズ

エクスポートされるHTMLの構造

各ドキュメントは以下のような構造のHTMLファイルとして保存されます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ドキュメントのタイトル</title>
<meta name="fess:url" content="https://example.com/page">
<meta name="fess:host" content="example.com">
<meta name="fess:last_modified" content="2025-01-01T00:00:00">
<!-- その他のメタ情報 -->
</head>
<body>
ドキュメントのテキスト内容
</body>
</html>

title、content、lang はHTML要素として直接使用され、それ以外のフィールドは fess: プレフィックス付きのmetaタグとして出力されます。exclude.fields で指定したフィールド（デフォルトでは cache）はエクスポートから除外されます。

ファイルの保存先

ドキュメントのURLに基づいてディレクトリ構造が決定されます。

https://example.com/docs/guide.html → example.com/docs/guide.html
https://example.com/docs/ → example.com/docs/index.html
https://example.com/docs/page → example.com/docs/page.html

パスコンポーネントに含まれるファイルシステムで使用できない文字はアンダースコアに置換されます。また、URLのパースに失敗した場合は _invalid/ ディレクトリにSHA-256ハッシュ名で保存されます。

使い方

管理画面のスケジューラーに「Index Exporter」ジョブが登録されています（デフォルトでは無効）。ジョブを有効にしてcron式を設定するか、手動で実行できます。

ジョブのスクリプトは以下の通りです。

return new org.codelibs.fess.job.IndexExportJob()
    .query(org.opensearch.index.query.QueryBuilders.matchAllQuery())
    .execute()

query() メソッドでエクスポート対象のドキュメントをフィルタリングすることもできます。

まとめ

この機能により、Fessのインデックスに保存されているドキュメント情報をHTMLファイルとして取り出すことができます。バックアップやデータ移行、他のシステムとの連携などに活用できます。

カテゴリー: Fess