AEM とエッジデリバリーサービス:Web をルーツに戻す

少し前までは、Webサイトの構築は、1つのテキストファイルと夢のような非常に単純なものでした。HTMLを少し書いて、CSSを散りばめたり、その日おもしろい気分だったら、普通のJavaScriptを少し入れたかもしれません。ブラウザはその役目を果たし、そしてブームになりました。ウェブサイトができたのです。それだけだった。その必要がありました。56k接続で処理できるのはそれだけでした。

その後、高速インターネットとV8が登場しました。フレームワーク、ビルドツール、ライブラリ、そして無限の抽象化レイヤーがすべて始まりました。バンドル、トランスパイル、ポリフィリングの旋風の中で、インターネットは本来のシンプルさから離れ、プレーンなHTML、CSS、そして普通のJavaScriptがどれほど強力であるかを忘れてしまいました。

しかし最近、 アドビのエッジ配信サービスとドキュメントオーサリングで作業しているときに 、ダイヤルアップからの象徴的な握手の音など、なじみのある何かを感じました。EDSのおかげで、ウェブのルーツに戻りました。まずコンテンツはHTMLで、スタイルはCSSで、デフォルトでは高速です。

この投稿は、ウェブがどのように構築されるかを思い出すという、その気持ちについて書かれています。なぜ?なぜなら、フロントエンドが肥大化し、スタックが複雑すぎる世界では、シンプルさがこれまで以上に重要になっているからです。

初期のウェブ：わかりやすく、正直で、速い

初期のウェブがいかに単純であったかには美しさがありました。テキストエディターを開き、HTML を書き、インライン CSS を少し追加しました。インタラクティブ機能が必要な場合は、普通の JS を含む script タグを追加したかもしれません。それがワークフローでした。ビルド手順はありません。デプロイメントはありません。依存関係はありません。サーバーに FTP で送信したら問題ありません。

うまくいった。速かったです。誰でもアクセスできました。遅いマシンでも壊れたり、段落をレンダリングするためだけに3MBの圧縮されたJavaScriptを読み込んだりすることはありませんでした。「ソースを表示」して、実際に何かを学ぶことができます。それは生々しいものでした。あなたが書いたものがレンダリングされたのです。魔法はありません。当て推しに頼る必要はありません。

開発者が完全に制御でき、参入障壁も低かった。CSの学位や、フレームワークのライフサイクルメソッドに関する20部構成のコースは必要ありませんでした。必要なのは、ブラウザ、テキストエディタ、そしてアイデアだけです。

ウェブが太くなったとき

その後、ChromeのV8エンジンが登場しました。それに伴い、現代のJavaScriptルネッサンスが実現しました。突然、JSはただのおもちゃではなくなりました。速く、パワフルで、どこにでもありました。最初は魔法のように感じました... でも実際には、パンドラの箱を開けたばかりです。

私たちはモグラの丘から山を作り始めました。以前はいくつかの静的ファイルだったサイトが、「Hello World」を吐き出すためだけに、依存関係のスタック、バンドラー、コンパイラ、そして半分のRAMが必要になりました。npm installは習慣になり、スキンケアのルーチンとは違いました。あなたとビルドを壊す悪魔を召喚するようなものです。

レイヤーの上にレイヤーを構築しました。ツールを管理するためのツール。そもそも複雑ではなかったものの抽象化。フロントエンドの世界は、ドキュメントではなく「アプリ」に夢中になりました。そして、混乱のどこかで、基本を見失ってしまいました。構造はHTML、スタイルはCSS、挙動はJSです。

アドビドキュメントオーサリングへ：コンテンツだけ

アドビのドキュメントオーサリング-正直なところ？新鮮な空気を吸い込んでください。一見すると、単に Word 文書を編集しているように見えます。だって... あんたはたいていそうだからコラボレーション向けに構築されており、使いやすく、習得も簡単です。誰でも簡単に投稿できるクリーンなコンテンツだけです。

編集中のドキュメントは、WordPressにコピー＆ペーストされるのを待っているだけではありません。ページになります。そこで書いたものはウェブに配信されるものです。ヘッドレス・カオスはなく、React to JSON を何かのパイプラインにマークダウンすることもありません。

可能な限り最善の方法でコンテンツファーストです。自分で書き方を工作する必要はありません。ただ書くだけで、その変化だけでも大きなものになります。つまり、システムをつなぎ合わせるのに費やす時間が減り、実際に重要なこと、つまりメッセージに集中できる時間が増えます。

EDSの実際とは何か、そしてなぜそれが機能するのか

Adobe Edge Delivery Services（略してEDS、Project HelixやAdobe Franklin）は、静かな革命のように感じられます。紙の上では、ほとんどシンプルすぎるように思えます。Adobe DA文書（またはWord、SharePoint、Google Docs）のコンテンツを表と見出しで構成し、バニラJSとCSSのブロックを使用してWebに配信します。ビルドツールはありません。デプロイスクリプトはありません。複雑な CMS 統合はありません。書いて、保存して、発送するだけです。

そして、どういうわけか... それがポイントです。

このようなセットアップでは、立ち止まって「待って、なぜこれを複雑にしたの？」と尋ねるようなものです。

EDSは、すべてをアプリに変える代わりに、文書をウェブサイトに変えます。これはインターネットが元々機能していた方法です。この文書は内容に焦点を当てています。レイアウトやインタラクティブ性が必要な場合は、ブロックを使用します。各ブロックは、ドキュメントの構造を解釈してクリーンで効率的なHTMLに変換する方法を知っているロジックの集まり（Content + CSS + JS）にすぎません。Google ドキュメントを読んで表を調べることができれば、ブロックの仕組みを理解できます。

さらに良いことに、コードはすべて GitHub でオープンソースであり、開発ワークフローは Git ベースであり、AEM Sidekickなどのブラウザー拡張機能を使用すると、どのブロックが何をしているのかをリアルタイムで確認できます。重要な点はすべてモダンで、そうでないものすべてに悩まされることはありません。

これが実際に重要な理由

このシンプルさはすべてノスタルジックなだけでなく、実用的です。ノイズを取り除き、少しの CSS と JS を使用して実際の HTML を配信することに集中すると、すべてが良くなります。

EDSサイトは高速です（100Lighthouseのスコアが速い）。なぜなら、物事を圧迫する肥大化したJSフレームワークがないからです。あなたは猫の写真を表示するためだけにアプリをブートストラップするのではなく、HTMLを出荷しているのです。

アクセシビリティとSEO？そこにあります。クリーンな HTML は、スクリーンリーダーと検索エンジンが実際にコンテンツを理解することを意味します。ハックもフープもありません。

開発経験は？私は大学を中退しました。チェーンの奥深くで一部のパッケージが横ばいになったため、午前2時に構成を争ったり、壊れたビルドをデバッグしたりすることはありません。ブロックを作成します。スタイルを決めてください。あなたは草に触れます。

コンテンツワークフロー?彼らに料理させてください。ライターや編集者は、Google ドキュメント、Word、SharePoint など、使い慣れたツールを使って作業し、その更新内容を公開します。ゲートキーピングはありません。「その文にスペースを追加してもらえますか？」のJiraチケットはありません

つまり、ビルドが速く、保守が容易で、開発者から作成者、ユーザーまで、関係者全員にとってよりアクセスしやすいということです。

バック・トゥ・ザ・フューチャー

進歩とは、より多くのツール、より多くのレイヤー、より多くの抽象化を追加することを意味すると考えがちです。しかし、場合によっては、すべてを元に戻して、そもそもウェブが優れたものになった理由を思い出すのが最善の方法です。

アドビのドキュメントオーサリングとEDSは、物事を簡単にするだけではありません。物事をより明確にします。開発者とコンテンツ制作者に再び共通言語を提供します。HTML、CSS、JS（基本的な部分）が今でも信じられないほど強力であることを思い出させてくれます。

多分それはウェブを再発明することではないでしょう。多分それは邪魔にならないようにすることだ

エッジデリバリーサービスをさらに詳しく知りたいですか？
エッジ配信のためのドキュメント作成に関するブログをご覧になるか、YouTube でポッドキャストでディスカッションをお聞きになり 、コンテンツ配信がどのように変化するかをご覧ください 。

著者について

ポッドキャストエピソード & ブログ投稿