業務システムなどでは情報をいかに分かりやすい整理できるかが作業効率化の肝になります。しかし担当する業務であったり、作業によって必要な幅は違ったりします。 そうした時にユーザ毎に好きな配置に変更できる仕組みは便利です。使えるライブラリはPhosphor Float Areaです。

Phosphor Float Areaの使い方

最初の配置です。

幅をドラッグで変更できます。

高さも自由です。

さらにフローティングとして切り離すこともできます。

上に配置。自由度が高いです。

パネルの入れ替えもできます。

実際にドラッグしているところです。

Phosphor Float Areaを使うとダイナミックにレイアウトが変更できるようになります。この変更した情報はCookieに保存しておいて、表示時に再現するようにすればユーザ毎の異なる表示が簡単に実現できるでしょう。

Phosphor Float AreaはHTML5/TypeScript製のオープンソース・ソフトウェア(MIT License)です。

phosphor-float-area charto/phosphor-float-area: Draggable Dockable Resizable Floating Tabbed HTML5 dialogs!