アドビ製品の開発思想を体現するCMSツール
開発者体験の観点から見ると、大企業のエンタープライズシステムは歴史が長い分、レガシーになりがちで、関わる部署も多く、ストレスフルなものになりがちだ。前時代的な開発環境に加え、面倒な手続きが多く、古いシステムのお守りで精一杯という企業も少なくない。当然ながら開発者のモチベーションが下がってしまう可能性が高い。
そこでアドビでは、そうしたエンタープライズシステムの開発者体験を向上するべく、デベロッパープラットフォームを進化させてきた。アドビ自体も40年という歴史をもつ会社であるが、ほとんどが完全なクラウドネイティブに切り替わっている。
また、マイクロサービス化が図られており、大きな修正を加えて一気にデプロイするのではなく、小さく作って組み合わせられるようになっている。そして、エンタープライズに多い独自の言語やフレームワークなどは回避され、当然ながらオープンテクノロジーが採用されている。純粋なJavaScriptやCSSなどで作ることもでき、Reactなどお気に入りのフレームワークを持ち込むことも可能だ。他にもコミットしたらすぐに環境反映できる「Lead time for change」、APIファーストで柔軟な組み合わせができる「Headless」、リアルタイム性の高い「Event Driven」などの開発思想を取り入れている。
こうした製品思想のもと、具体的にどのようなことが実現できるのか。宮田氏はまずCMSツール「Adobe Experience Manager」の新機能「Edge Delivery Services」を用いて「WordドキュメントでWebサイトを更新する」というデモンストレーションを行った。ビジネスユーザーにはWordなら使えるという人が多い。そうした人にもWebサイト制作に直接参加してもらうための機能というわけだ。デモンストレーションでは、Wordドキュメント上で修正を行い、それを本番環境に戻すという作業が実際に行われた。
そしてもう一つ、ブランドサイトで開発者がデザイナーから「ボタンのデザインを変えてほしい」というリクエストを受けたという設定でデモンストレーションが行われた。ローカル環境をどうつくるのか、データのインポートは必要なのか、どんなフレームワークなのか、デプロイは時間がかかるのか、デザイナーに確認してもらうほうがいいのかなど、気になることは多いだろう。しかし、そうしたことを全てクリアしてくれる。
「Adobe Experience Manager」の新機能「Edge Delivery Services」では、ローカル開発環境の構築も非常に簡単で、npmコマンド一発でプレビュー確認用のプロキシサーバーがローカルにインストールされる。このプロキシサーバーをコマンドで起動することで、本番サイトに対して開発者が加えた変更点をブラウザで簡単にすぐにプレビュー確認することが可能となる。
そして当該の修正すべき「ボタン」については設計書の参照でもよいが、直接DOM操作でCSSのclass 属性を確認してもよいだろう。そのVSCode側でフォルダの中から該当するCSSに手を入れ、プレビュー画面を見ながら調整していく。スピーディに修正でき、次のステップではGitHubにソースコードをプッシュし、ボタンを変えるプルリクエストをあげるというわけだ。
この「Edge Delivery Services」では、全てのブランチに対して環境が自動生成される仕組みになっている。そのため、メインブランチはメインブランチの環境、フィーチャーブランチはそれに対応する環境が自動生成されて、ドメインが自動的に割り当てられる。デザイナーの確認がほしい時も簡便に依頼でき、数秒でデプロイされるので、スピーディに進めていくことができる。
宮田氏は「ソースベースの修正から、他者のレビューを経て、メインブランチにマージすれば本番に反映される。慣れ親しんだVSコードとCSSでスムーズに業務を進めることができる」と改めて、開発者体験の4つのポイントへの効果を強調した。
