STPファイルビューアの新機能と拡張機能の追跡
重大なインポートと測定の問題を修正し、ファイル読み込みのパフォーマンスを最大95%最適化
2025/09/02
プラットフォームの安定性達成 - 最終的な統合の問題を解決し、注目すべきパフォーマンスの向上を実現：
このリリースは、ユーザーエクスペリエンスに大きな影響を与えていたいくつかの重大な問題に対処しています：
解決された問題: 「初回は動作するが、その後失敗する」という問題を完全に解決
window.OV オブジェクトがコンポーネントのクリーンアップ中に不適切にクリアされていた解決された問題: 3Dモデルに測定マーカーが表示されない
window.OV グローバルオブジェクトを使用した直接的な公式APIコールを実装解決された問題: フルスクリーンモードでモバイルデバイスのMoreメニューボタンが反応しない
デバッグ戦略の改善:
開発のベストプラクティス:
ファイル読み込みで著しい性能改善を達成：
結果: すべてのファイルサイズで60-95%のパフォーマンス改善
| ファイルサイズ | 以前 | 現在 | 改善率 |
|---|---|---|---|
| 1MB | 840ms | 39ms | 95.4%高速 |
| 10MB | 1,380ms | 255ms | 81.5%高速 |
| 100MB | 6,780ms | 2,415ms | 64.4%高速 |
背景: ユーザーニーズに基づき左側に浮動シェアツールバーを設立し、三バージョンにわたる重要なアーキテクチャ進化を経験
デザイン決定プロセス:
lg:block)/モバイル非表示 - デザイントレードオフ技術実装の課題:
/* 固定位置決めとレイヤー管理 */
.floating-share-bar {
position: fixed;
left: 1rem;
top: 50%;
transform: translateY(-50%);
z-index: 40; /* 重要なレイヤー設計 */
}主要技術決定:
scale(1.1) インタラクティブフィードバック設計ユーザーニーズ駆動:
技術実装の複雑性:
// 状態管理の課題
const [showMoreDialog, setShowMoreDialog] = useState(false);
// Moreボタンの特別処理
const platforms = [
// ... 既存7プラットフォーム
{
name: 'More',
isMore: true,
onClick: () => setShowMoreDialog(true)
}
];統合の課題:
問題診断プロセス:
問題症状: FloatingShareBarがメインページに表示されない
アーキテクチャ分析: FloatingShareBarがViewerView内部に配置されている
状態依存: ViewerViewはloading/viewing状態でのみレンダリング
メインページ状態: STPViewerのデフォルトはupload状態、UploadViewを表示
根本原因: FloatingShareBarが間違ったコンポーネントレイヤーにある現在のアーキテクチャ問題:
メインページ → HeroSection → HeroStpViewer → STPViewer
├── upload状態 → UploadView（FloatingShareBarなし）❌
├── loading状態 → ViewerView（FloatingShareBarあり）✅
└── viewing状態 → ViewerView（FloatingShareBarあり）✅解決アーキテクチャ:
STPViewer（新しいFloatingShareBarレイヤー）
├── upload状態 → UploadView + FloatingShareBar ✅
├── loading状態 → ViewerView + FloatingShareBar ✅
└── viewing状態 → ViewerView + FloatingShareBar ✅重要なコード修正:
// src/components/stp-viewer/stp-viewer.tsx
return (
<div className={cn('stp-viewer-container', className)}>
{/* 状態関連のメインコンテンツ */}
{renderContent()}
{/* グローバル浮動シェアツールバー */}
<FloatingShareBar file={viewerState.file} />
</div>
);比較分析手法: メインページモード vs フルスクリーンモードの系統的比較により機能不一致を発見:
| 機能 | メインページモード | フルスクリーンモード | ステータス |
|---|---|---|---|
| New File | ✅ | ✅ | 一貫 |
| Screenshot | ✅ | ✅ | 一貫 |
| Share | ❌ 欠落 | ✅ | 不一致 |
コードレベル分析:
// viewer-view.tsx:730-766 - メインページツールバー
const toolbarButtons: ToolbarButton[] = [
{ id: 'new-file', /* ... */ },
{ id: 'screenshot', /* ... */ },
// ❌ Shareボタンが欠落
];
// FullscreenToolbar.tsx:132-139 - フルスクリーンモードツールバー
const secondaryTools: ToolbarButton[] = [
{
id: 'share',
label: t('toolbar.share'),
// ✅ 存在するが機能未実装
},
];技術限界の深い発見:
// ✅ React-Share実際の能力
- リンクシェア: 全プラットフォームがURL共有をサポート
- テキストコンテンツ: タイトル、説明等のテキストパラメータをサポート
- ソーシャルプラットフォームリダイレクト: プラットフォームの公式シェアページを開く
- ゼロ外部依存: サードパーティSDK読み込み不要
// ❌ React-Share技術限界
- ローカルファイル共有サポートなし: スクリーンショット、文書を直接共有できない
- 画像アップロードサポートなし: メインストリームプラットフォームは直接画像アップロードを不サポート
- パブリック画像URLのみサポート: 少数プラットフォームがパブリックアクセス可能な画像リンクを要求
- バックエンド機能なし: ファイルアップロード、短縮URL生成を処理できない開発計画のリアリスティック調整:
コンポーネント戦略:
src/components/stp-viewer/
├── shared/
│ └── SimpleShareDialog.tsx # 統一シェアダイアログ（唯一のコンポーネント）
├── viewer-view.tsx # Shareボタン追加
└── fullscreen/
└── FullscreenToolbar.tsx # 実際のシェア機能接続設計原則の実践:
問題1: disabledボタンロジックエラー
// エラーロジック
{
id: 'share',
disabled: !isViewerReady, // ❌ ページリンクシェアはモデル読み込み待機不要
}
// 正しいロジック
{
id: 'share',
disabled: false, // ✅ ページシェア機能は常に利用可能であるべき
}根本原因分析:
isViewerReadyがfalse問題2: 不十分なプラットフォームサポートへの高速対応
第一段階: 基本修正（15分）
// src/components/stp-viewer/viewer-view.tsx:754
- disabled: !isViewerReady,
+ disabled: false,第二段階: プラットフォーム拡張（20分）
// 6つの新メインストリームプラットフォーム追加
const newPlatforms = [
'WhatsApp', // 世界最大のインスタントメッセージングアプリ
'Telegram', // 技術ユーザーグループに好まれる
'Reddit', // 技術コミュニティの主要シェアプラットフォーム
'Pinterest', // ビジュアルコンテンツシェア、3Dモデルに適合
'Weibo', // 中国ユーザーの主要ソーシャルプラットフォーム
'Line', // アジア地域で人気のコミュニケーションアプリ
];第三段階: 体験最適化（10分）
アーキテクチャ進化の重要性:
リアリスティック技術選択:
高速対応開発能力:
このシェア機能開発履歴はアーキテクチャ進化から技術選択まで、問題診断から高速修復までの完全な開発知恵を示し、チームにとって貴重な実践経験を蓄積した。
主要なコードクリーンアップとパフォーマンス改善、18秒の読み込み性能を維持
2025/08/28
長期的な安定性のための基盤の強化 - 包括的な機能セットを最適化:
包括的なクリーンアップと最適化による保守性とパフォーマンスの向上:
不要なコードの排除
リソース管理の最適化
状態管理の再設計
プロフェッショナルなモデルツリーナビゲーションと、デバイス固有の操作ガイド
2025/08/27
複雑なSTEPアセンブリを管理可能で、ナビゲート可能なコンポーネントに変換する、階層的モデルナビゲーションの革命。
インテリジェントなデバイス認識インターフェースで、状況に応じた操作ガイドを提供：
useResponsive フックによるデバイス検出（以下略）
長いファイル名圧縮の問題を修正し、モバイルレイアウトを改善
2025/08/27
タッチデバイスでの高度な機能を完璧に動作させるためのプロフェッショナルなモバイル体験の最適化:
長いファイル名によりツールボタンが圧縮される問題を解決:
動的スペース配分
インテリジェント情報表示
パフォーマンス最適化
17のインポート/10のエクスポート形式による普遍的なファイル変換と高度なマテリアル編集
2025/08/26
最も包括的なオンライン3Dファイルコンバーターを確立する革新的なファイル形式サポート。
CAD形式: STEP, IGES, BREP, OCCT
メッシュ形式: STL, OBJ, OFF, PLY, 3DS
モダン形式: GLTF/GLB, FBX, DAE, 3DM
業界形式: IFC, BIM, FCStd, SVG
プロフェッショナルなマテリアル編集と可視化機能：
重要なユーザーエクスペリエンスの問題を解決：
（以下略）
革新的なフルスクリーンモードフレームワーク - STP Viewerをプロ向け3D CADプラットフォームに変革
2025/08/25
このマイルストーンは、STP Viewerを単純なファイル閲覧ツールからプロフェッショナル級の3D CAD可視化プラットフォームへと変革する出発点です。オンライン上で最も包括的なSTEPファイル表示体験を作り上げました。
プログレッシブ機能戦略：2層の体験設計
// 新しいコンポーネント構造
src/components/stp-viewer/
├── fullscreen/ # プロ向けツール（遅延読み込み）
├── panels/ # 折りたたみ可能なナビゲーションパネル
└── hooks/ # 3Dビューアー統合用カスタムフック（以下略）
革新的な精密測定ツール - 距離、角度、平行面の測定
2025/08/20
業界水準の測定機能を導入し、STP ビューアを精密分析ツールに変革。このリリースは、ブラウザベースの3D可視化に業界標準のCAD測定精度をもたらします。
測定システムに沿った焦点を絞った改善:
（以下略）
革新的な3Dナビゲーション - 6つのプリセット視点、投影モード、30%高速読み込み
2025/08/15
3Dナビゲーションを基本的なパンとズームから、プロ向けCADレベルの視点制御に変革します。このリリースは、デスクトップCADアプリケーションに匹敵する業界標準の視点管理機能を提供します。
透視投影（デフォルト）
正投影（プロフェッショナル）
（以下略）
STEPフォーマット3Dプレビュー機能を持つオンラインSTPファイルビューアーの最初のバージョン
2025/08/01
以下のコア機能を持つSTP Viewerの最初のバージョンをリリースできることを嬉しく思います：