【ITニュース解説】How to clone a Canva page with animations? Need help with JavaScript/CSS extraction

ある開発者が、Canvaで作成したWebページを、そのアニメーションやインタラクティブな要素を含めて自身のWebサイトに完全に複製し、表示させたいという悩みを投稿した。この問題は、システムエンジニアを目指す初心者にとって、Web開発の基本的な仕組みと、それに伴うセキュリティ上の課題を理解する上で非常に良い学びとなる。

まず、Canvaのようなツールは、専門的なコーディング知識がなくても、視覚的に魅力的なWebページを簡単に作成できる。しかし、その裏側では、Webページの骨格を作るHTML、見た目を整えるCSS、そして動きやユーザーとの対話を制御するJavaScriptといった、Webの基本的な技術が複雑に組み合わされている。

この開発者は、Canvaのページを複製するためにいくつかの方法を試みたが、いずれもうまくいかなかった。 一つは、ブラウザ拡張機能やスクリーンショットツールを使う方法だ。これらのツールは、Webページを「見たまま」の状態、つまり静的な画像として取得することがほとんどだ。Webページのアニメーションや、ボタンをクリックした時に何か変化が起きるインタラクティブな要素は、裏側でJavaScriptのプログラムが実行されることで実現されている。見た目だけを捉えるツールでは、その動きの源となるコードまでは取得できないため、アニメーションが失われたり、単なる静止画になったりするのは当然の結果となる。

次に試したのは、iframeというHTMLの機能を使って、Canvaのページを自身のWebサイト内に埋め込む方法だ。iframeは、Webページの中に別のWebページを組み込むことができる機能で、手軽にコンテンツを再利用できる手段に見える。しかし、この方法では「CORS（Cross-Origin Resource Sharing）」というセキュリティ上の問題に直面した。CORSとは、Webブラウザに組み込まれたセキュリティ機能の一つで、異なるドメイン（Webサイトのアドレス、例えばexample.comとanother-site.com）間で、プログラムがデータにアクセスする際に、そのアクセスを制限するものだ。これは、悪意のあるWebサイトが、ユーザーがアクセスしている別のサイトの情報を不正に読み取ったり、操作したりすることを防ぐための非常に重要な仕組みである。Canvaのページを自身のWebサイトに埋め込もうとした際、Canva側がこの埋め込みを許可していなかったため、ブラウザがCORSの制限に従って表示をブロックしたと考えられる。

さらに、手動でHTMLやCSSのコードをコピーしようと試みたが、アニメーションは機能しなかったという。Canvaで作成されたページは、単純な一つのHTMLファイルやCSSファイルだけで構成されているわけではない。多くの場合、複数のCSSファイル、JavaScriptファイル、そして画像やフォントファイルなど、たくさんのリソースが複雑に連携して一つのページとして機能している。特にCSSアニメーションは、@keyframesという特別なルールを使って定義されるが、これが正しく機能するには、関連するすべてのCSSルールと、アニメーションが適用されるHTML要素が適切に存在し、さらにJavaScriptがそのアニメーションの再生を動的に制御している場合もある。必要なコードをすべて正確に特定し、コピーし、自身のWebサイトの環境で再現することは、極めて困難な作業だ。一つでもファイルが欠けていたり、ファイルへのパス（場所を示す情報）が間違っていたりすると、期待通りには動作しない。

この開発者のページは、CSSのキーフレームアニメーションを使用し、JavaScriptでインタラクションが制御されており、カスタムフォントや画像も含まれているという。これらすべての要素を正確に抽出して複製することは、多くの技術的な知識と経験を必要とする。

では、このような複雑なWebページを複製するにはどうすれば良いのだろうか。 まず、Canvaのページからすべてのリソース（CSS、JavaScript、画像、フォントなど）を漏れなく抽出する方法についてだが、これは「ウェブスクレイピング」という技術に分類される。ウェブスクレイピングとは、プログラムを使ってWebサイトから情報を自動的に収集する技術のことだ。専用のツールや、自分で記述したスクリプト（簡易的なプログラム）を使って、ページのHTML構造を解析し、そこにリンクされているCSSやJavaScriptファイル、画像のURLなどを探し出してダウンロードする。しかし、多くのWebサイトはスクレイピングを許可していないことがあり、また、JavaScriptによって動的に生成されるコンテンツ（ページが表示された後にJavaScriptによって読み込まれる情報など）を完全に取得することは非常に難しい。Canvaのような高度なツールが生成するコードは、人間が読みやすい形ではなく、ツールの内部的な連携や効率性を優先した、非常に複雑で難解なものになっていることが多い。そのため、すべてのリソースを完璧に抽出し、それらの間の依存関係（どのファイルがどのファイルを利用しているか、といった関連性）を理解して再構築するのは、Web開発の上級者にとっても大きな挑戦となる。

CORS制限の回避についても質問があったが、これは通常、コンテンツを提供するWebサーバー側で設定を変更するか、プロキシサーバー（間に挟まるサーバー）を経由してアクセスする方法が考えられる。しかし、Canvaのコンテンツを自身のサイトで利用する場合、Canva側が明確にその埋め込みを許可しない限り、セキュリティ上の理由から回避は難しい。もしCanvaがAPI（プログラムからサービスを利用するための窓口）を提供していれば、それを利用してコンテンツを動的に取得できる可能性もあるが、一般的にデザインツールのコンテンツは、外部で自由にホストされることを想定して作られていない。

自動化ツールやスクリプトについては、一般的なウェブスクレイピングツールや、Webブラウザの「開発者ツール」などを使って、ある程度の情報を収集することは可能だ。しかし、アニメーションやインタラクティブ要素を完全に再現するには、単にコードを取得するだけでなく、取得したコードを解析し、不足している部分を補い、自分のWebサイトの環境に合わせて手作業で調整する作業が不可欠になるだろう。これは単なるファイルのコピー＆ペーストでは解決しない。

アニメーションを維持するための最善のアプローチは、結局のところ、元のページがどのように構築されているかを深く理解し、そのロジック（仕組み）を自身のWebサイト上でゼロから再構築することかもしれない。Canvaが生成したコードをそのまま利用するのではなく、Canvaで作成した「デザイン」や「動き」の概念だけを参考に、手書きのHTML、CSS、JavaScriptで同じものを再現するというアプローチだ。これは手間がかかるが、Web開発の基礎を学び、実践する上では非常に価値のある経験となる。

今回の開発者のように、自分が作成したコンテンツであっても、それを元のツールから完全に切り離して複製し、別の環境で動かすことは、Web開発の奥深さと難しさを教えてくれる。Webページは単なる静的な情報ではなく、HTML、CSS、JavaScript、そしてサーバーやネットワークの仕組みが複雑に絡み合った動的なシステムであるということを、この問題は明確に示している。システムエンジニアを目指す初心者にとって、このような課題に直面し、その解決策を考えることは、Web開発の全体像を理解し、さまざまな技術がどのように連携しているかを学ぶための貴重な機会となるだろう。