ブラウザで使用できるPhotoshop Web版！登場の理由と経緯、機能やライブラリ、ベータ版のアクセス方法

Post on:2021年11月2日

はじめに

Chromeはこの3年間、ブラウザで可能なことの限界を超えるためにWebアプリを強化することに取り組んできました。その1つが、Photoshopです。

Photoshopのように複雑なソフトウェアをブラウザ上で直接実行するというアイデアは、ほんの数年前には想像もできませんでした。しかし、アドビは標準化されたさまざまな新しいWebテクノロジーを使用することで、Photoshopのパブリックベータ版をweb上で公開しました。

ブラウザで動作するPhotoshopのパブリックベータ版

この記事ではコラボレーションによってPhotoshopがどのようにWebに拡張されていくのか、その詳細を共有したいと思います。アドビが使用しているすべてのAPIやその他のAPIはあなた自身のアプリケーションでも使用できます。

Web機能に関する記事をチェックしてインスピレーションを得たり、APIトラッカーでわたし達が取り組んでいる最新かつ最高のものをチェックしてみてください。

PhotoshopがWebに登場した理由

Webが進化しても変わらないことの1つは、プラットフォーム固有のアプリケーションに比べてWebサイトやWebアプリが提供する利点です。これらの利点にはリンク可能、一時的、ユニバーサルなど、多くの独自機能が含まれますが、要約すると、シンプルなアクセス、簡単な共有、優れたコラボレーションが可能になります。

URLのシンプルな力は、誰もがクリックしてすぐにアクセスできることです。必要なのはブラウザだけです。アプリケーションをインストールしたり、どのOSで動作しているかを気にする必要はありません。Webアプリの場合はユーザーがアプリケーションにアクセスできるだけでなく、ドキュメントやコメントにもアクセスできることを意味します。これらにより、Webは理想的なコラボレーションプラットフォームであり、クリエイティブチームやマーケティングチームにとって、ますます必要不可欠なものとなっています。

Googleドキュメントは、このシンプルなアクセスのパイオニアです。ドキュメントを作成して誰かにリンクを送信すると、アプリだけでなく、特定のドキュメントやコメントにもすぐにアクセスできることは多くの人が知っているでしょう。過去に披露した多くの素晴らしいアプリケーションもこのモデルを採用しており、そして今回Photoshopもその恩恵を受けることになりました。

PhotoshopがWebに登場した経緯

Webはドキュメントにのみ適したプラットフォームとして始まりましたが、歴史を通じて劇的に成長してきました。Gmailのような初期アプリでは、より複雑な双方向性とアプリケーションが少なくとも可能であることを示しました。それ以来、Webアプリは可能性を広げ、ブラウザがそれに応えてWeb機能をさらに拡張するという素晴らしい共同開発がおこなわれてきました。この好循環の最新成果が、Web上でのPhotoshopです。

アドビはSparkとLightroomをWebで提供してきましたが、PhotoshopのWeb化についても長年関心を持っていました。しかし、JavaScriptのパフォーマンスの限界、コードの優れたコンパイルターゲットの欠如、Web機能の欠如によって阻まれていました。

これらを解決するためにChromeがブラウザに搭載した機能を紹介します。

EmscriptenによるWebAssemblyの移植

WebAssemblyとそのC++のツールチェーンであるEmscriptenは、Adobeが最初から始める必要はなくPhotoshopの既存コードをベースにできることを意味し、PhotoshopのWeb化を可能にする鍵となっています。WebAssemblyはすべてのブラウザに搭載されているポータブルなバイナリ命令セットで、プログラミング言語のコンパイル対象として設計されています。

つまり、C++で書かれたPhotoshopのようなアプリケーションをJavaScriptで書き直すことなく、直接Webに移植できます。自分で移植を始めるにはEmscriptenのドキュメントかライブラリを移植する方法をご覧ください。

EmscriptenはC++をWasmにコンパイルするのに役立つだけでなく、POSIX APIコールをWeb APIコールに変換し、OpenGLをWebGLに変換する翻訳レイヤーを提供するフル機能のツールチェーンです。たとえば、ローカルファイルシステムを参照するアプリケーションを移植しても、Emscriptenがエミュレートされたファイルシステムを提供することで、機能性を維持することができます。

EmscriptenはこれまでもPhotoshopのほとんどの部分をWebに取り込むことができましたが、必ずしも十分な速度ではありませんでした。わたし達はアドビと継続的に協力して、ボトルネックがどこにあるかを把握し、Emscriptenを改善してきました。Photoshopはマルチスレッドに依存しています。動的マルチスレッド機能をWebAssemblyに導入することは重要な要件でした。

また、例外ベースのエラー処理はC++では非常に一般的ですが、EmscriptenやWebAssemblyでは十分にサポートされていませんでした。わたし達はW3CのWebAssembly Community Groupと協力して、C++の例外処理をWebAssemblyに導入するためにWebAssembly標準とその周辺のツールを改善しました。

Emscriptenは大規模なアプリケーションで機能するだけでなく、ライブラリや小規模プロジェクトを移植することもできます! たとえば、Emscriptenを使用して人気の高いOpenCVライブラリをWebにコンパイルする方法を確認できます。

最後に、WebAssemblyはSIMD命令などの高度なパフォーマンスプリミティブを提供し、Webアプリのパフォーマンスを劇的に向上させます。たとえば、Halideはアドビのパフォーマンスに欠かせないものですが、SIMDによって平均で3～4倍、場合によっては80～160倍のスピードアップを実現しています。

WebAssemblyのデバッグ

大規模なプロジェクトを成功させるには、その作業に適したツールが必要です。そのためChromeチームはフル機能のWebAssemblyデバッグサポートを開発しました。ソースコードのステップ処理、ブレークポイントの設定、例外発生時の一時停止、豊富な型のサポートによる変数検査、さらにはデベロッパーツールのコンソールでの評価の基本的なサポートも提供されています。

Chromeのデベロッパーツール

WebAssemblyデバッグの利用方法に関する信頼できるガイドを必ず確認してください。

高性能なストレージ

Photoshopのドキュメントのサイズは非常に大きくなるため、ユーザーの操作に合わせてデータをディスク上からメモリ上に動的に移動させる機能がPhotoshopにとって重要なニーズとなります。他のプラットフォームではこの機能はmmapによるメモリマッピングで実現されていますが、Webではパフォーマンス的に実現できていませんでした。つまり、オリジン・プライベート・ファイルシステム・アクセス・ハンドルが開発され、オリジン・トライアルとして実装されるまでは、この機能は実現できてなかったのです。この新しいAPIをどのように活用するかはドキュメントをご覧ください。

キャンバスのP3色空間

歴史的に見ても、Web上の色はsRGB色空間で指定されてきました。sRGB色空間はブラウン管モニターの性能に基づいて90年代半ばに制定された規格です。しかし、この四半世紀の間にカメラやモニターは大きく進化し、より大規模で高機能な色空間が数多く標準化されてきました。その中でも最も人気のあるのがDisplay P3という色空間です。

PhotoshopではDisplay P3 Canvasを使用して、画像をブラウザ上でより正確に表示します。特に明るい白、明るい色、および影のディテールを含む画像は、Display P3データをサポートする最新のディスプレイで可能な限り最適に表示されます。Display P3 Canvas APIはハイダイナミックレンジ表示を可能にするために、さらに強化されています。

Web ComponentsとLit

Photoshopは大規模で機能豊富なアプリケーションとして知られており、何十ものワークフローをサポートする何百ものUI要素を備えています。このアプリケーションは複数のチームがさまざまなツールと開発手法を用いて構築されていますが、それらの異なるパーツをまとめて、高いパフォーマンスを発揮する必要があります。

この課題を解決するために、アドビはWeb ComponentsとLitライブラリに着目しました。PhotoshopのUI要素は、アドビのSpectrum Web Componentsライブラリを使用しています。これはアドビのデザインシステムを軽量かつ高性能に実装したもので、あらゆるフレームワークに対応しています。

さらに、Photoshopアプリ全体がLitベースのWeb Componentsで構築されています。ブラウザに組み込まれたコンポーネントモデルとShadow DOMのカプセル化を利用することで、他のアドビチームから提供されたいくつかのReactコードの島を簡単に統合することができました。

Webにおけるアドビの次の展開

Photoshopのベータ版はまだ始まったばかりです。このベータ版の後、Photoshopの完全版リリースに向けて、パフォーマンスや機能の改善がすでに進行中です。アドビはPhotoshopだけでなく、Creative CloudもWebに積極的に展開し、クリエイティブコンテンツの制作とコラボレーションのための主要なプラットフォームとすることを計画しています。これにより、何百万人ものクリエイターがWeb上で作品を発表し、革新的なワークフローの恩恵を受けることができるようになります。

アドビが可能性の限界にチャレンジし続ける中、Chromeチームはアドビと意欲に満ちたWebデベロッパーのエコシステム全体のためにWebを前進させるために、コラボレーションを継続していきます。他のブラウザもこれらの最新機能に追いついているので、アドビが自社製品を他のブラウザでも利用できるようになることを楽しみにしています。今後もWebを推進していきますので、ご期待ください。

Web上のPhotoshop（ベータ版）へのアクセスについては、Adobe Help Centerをご覧ください。

【訳者注】翻訳記事はここまでです。
以下は私によるPhotoshop Web版ベータのアクセス方法です。