メインコンテンツまでスキップ

WebUI の使い勝手を大きく改善しました(アップロード進捗・ノード移動の進捗バー・ファイル管理の強化など)

· 約5分
開発者

ダッシュボード全体の使い勝手を見直し、進捗表示・確認ダイアログ・通知・ファイル管理・メンバー管理をまとめて改善しました。時間のかかる操作で「今なにが起きているのか」が見えるようになっています。

ファイルアップロードの進捗が見えるようになりました

これまでファイルのアップロード中は動かないバーが表示されるだけでしたが、実際の送信状況(%・送信済み容量・何番目のどのファイルを送っているか)が表示されるようになりました。

  • アップロードは途中で中止できます。
  • 送信が終わってサーバー側で展開している間は「サーバーで展開中...」と表示されます。
  • 失敗したときは、画面右上の通知で理由をお知らせします。

また、アップロード前のチェックも追加しました。

  • 空き容量が足りない場合は、送信前にお知らせしてブロックします。(送り終わってからエラーになることがなくなります)
  • ファイル数や合計サイズが大きい場合(200ファイル超 / 100MB超)は、開始前に確認ダイアログを表示します。

アップロード中の進捗表示

ノード間移動に進捗バーが付き、途中でページを閉じても大丈夫になりました

サーバーを別ノードへ移動する際、これまでは完了までボタンが回り続けるだけでしたが、転送量つきの進捗バー(準備 → 転送 → 検証 → 仕上げ)が表示されるようになりました。

さらに、移動処理はサーバー側で実行される方式に変わったため、移動中にページを閉じたり再読み込みしても処理は継続します。ページを開き直せば進捗バーも復元され、完了すると新しいポート番号をお知らせします。

ノード間移動の進捗バー

ファイルページを大きく強化しました

  • ファイルサイズの表示: ツリーの各ファイルにサイズが表示されるようになりました。どのファイルが容量を食っているか一目でわかります。
  • ストレージ使用量の常時表示: ツリー下部に使用量バー(使用 / 上限)を追加しました。残りが少なくなると赤色になります。
  • ファイル名検索: ツリー上部の検索ボックスで絞り込めます。ヒットした場所は自動で展開されます。
  • 一括削除: ツールバーの「選択」からチェックボックスで複数のファイル・フォルダを選んで、まとめて削除できます。
  • レイアウトの見直し: ファイル名(パス)はヘッダーの2行目に全幅で表示し、長い場合は横にスクロールして読めるようになりました。スマートフォンではエディタが画面端までの横フルサイズになります。
  • エディタ設定メニュー: 保存ボタン横の「···」から、行番号の表示長い行の折り返しを切り替えたり、保存せずにファイルを閉じることができます。設定は記憶されます(行番号はスマートフォンでは初期オフ)。

ファイルページ(サイズ表示・ストレージ使用量・エディタ設定メニュー)

メンバー管理がわかりやすくなりました

  • サーバー設定のメンバー一覧が、これまで内部ID(英数字の羅列)で表示されていたのをアカウントの表示名に改善しました。ダッシュボードやサーバー詳細の「オーナー」表示も同様です。
  • メンバーの行をクリックすると展開してメールアドレス(オーナーのみ閲覧可)と削除ボタンが表示されます。削除時は確認ダイアログを挟みます。
  • 権限の表記を Owner / Member に統一しました。

メンバー一覧(クリックで展開してメールアドレスと削除ボタンを表示)

確認ダイアログと通知を刷新しました

  • サーバー削除やファイル削除などの確認が、ブラウザ標準のダイアログから専用の確認モーダルに変わりました。取り消せない操作は赤いボタンで表示され、Enter キーの連打などでうっかり実行してしまわないようになっています。
  • 操作の結果(起動・停止・削除・招待の送信・拡張機能のインストールなど)を画面右上の通知でお知らせするようになりました。拡張機能は依存関係を含めて何がインストールされたかも確認できます。

確認モーダル(取り消せない操作は赤いボタンで表示)

そのほかの改善

  • 起動中のログ表示: サーバー起動中に起動ログの末尾が表示され、進行状況がわかるようになりました。
  • 自動停止前の警告: 自動停止の10分前になると警告バナーが表示され、その場でワンクリックで稼働時間を延長できます。
  • スマートフォン表示の改善: トップページの統計(稼働中サーバー数など)が狭い画面で不自然な位置で改行されていたのを修正し、モバイルでの表示を全体的に整えました。

ご不明な点や不具合がありましたら、ヘルプページまたは Discord からお知らせください。