PlayCanvasエディタの新しいUI

こちらは、2020年5月14日に公開された以下のドキュメントを翻訳したものとなります。
A New UI for the PlayCanvas Editor

PlayCanvasエディタが登場したのは2011年です。当時はPlayCanvas Designerという名称で
SenchaのExtJSフロントエンドフレームワーク上に構築されており、以下のような外観でした：

ご覧のとおり、Windows XPアプリケーションに似ています。古風だと思ったかもしれませんが、当時もすでに古めかしい印象でした！ただ、よく見ていただければPlayCanvasだと分かるはずです。ここに表示されているPack Explorerは、現在では左側に表示されているヒエラルキーパネルです。Attribute Editorは、現在のインスペクターです。右下には「誰がオンラインか」を示すバーがあり、これは現在のバージョンでも表示されています。この後すぐ、2013年9月に弊社はWindows XPのような外観を脱し、もっと暗い色のテーマを採用することにしました：

この更新により大幅な改良がもたらされ、またDesignerが独自の個性を持つことになりました。しかし、この後弊社はすぐに改良を繰り返そうと必死になりました。結果的に、ExtJSベースのDesignerアプリケーションをすべて放棄し、秀逸なVanilla JSフレームワークを使って一から書き直す、という非常に難しい決断をしました。こうして、2015年初めにPlayCanvasエディタが生まれたのです：

この初期バージョンは、前述のエディタよりもかなり現在のバージョンに近づいています。ツールバーとパネルの場所は現在と同じです。ただし、現在のエディタには多くの機能が追加され、はるかに高性能となっています。

エディタは当初、古いものではIE11などのブラウザで作動するよう、ES5とCSSのサブセットで書かれていました。そこで、以下を実現するため弊社は昨年末にエディタの全面的な見直しに着手しました。

• 構造化され、かつ洗練された下層レベルエディタAPIを作成（この点については、今後さらに実施します）
• ES6を適用（時流に乗り遅れないようにしましょう！）
• エディタのレイアウト管理を容易にするため、CSSグリッドを適用
• フロントエンドデザインの刷新と調整

ここ数か月間で、弊社は徐々にではありますが、新しいフロントエンドを段階的に導入しています。まずは更新されたヒエラルキーパネルの展開、続いて新しいインスペクターパネルの導入です。そして本日、リリースの最後のステップを発表いたしますー新しいアセットパネルです：

エンドユーザーにとって、もっとも顕著な変更はアセットパネルへの詳細ビューの追加でしょう。サムネイルに代わるものとして、アセットが一覧表示されているのが確認できます。また、これらのアセットはサイズや種類ごとにソートできます。

弊社は多くのPlayCanvasディベロッパーにとって、これが早くデフォルトのビューとなるよう願っています。長いファイル名を読むのに、マウスをホバリングさせる必要はもうありません！

さて、次は何でしょうか？抜本的に再構築されたこのエディタのフロントエンドは、革新的な洗練されたオブジェクト指向のAPIで構築されていると、上記で述べました。準備ができ次第、弊社はこのAPIを公開する予定です。これによりディベロッパーの皆様は、完全なプラグイン方式でエディタの拡張機能やカスタマイズ機能を書くことが可能になります。詳細については、改めてお知らせいたしますのでご期待ください。これまで実施してきたUIの改善について、ぜひフォーラムにレビューをお寄せくださいますようお願いいたします！