Astro + Adobe Animateで自己紹介ページを作った

Astroで自己紹介ページを作ったので、その振り返りです。
完成したサイト

パフォーマンス

Astroを使用したウェブサイトは、静的なHTML、CSS、およびJavaScriptファイルにコンパイルされます。これにより、ウェブサイトの読み込み時間が大幅に短縮され、ユーザーの体験が改善されます。また、Astroは、ウェブサイトの表示速度を改善するために、画像の最適化やJavaScriptのバンドル、圧縮などの機能を提供しています。

SP

PC

create.jsを読み込んでアニメーションを描画しています。
FCPがパフォーマンスの足を引っ張っていますが、SEOは良好です。

Astroを選ぶ理由

Astroを選ぶ理由として、以下のような点が挙げられます。

技術的な柔軟性

Astroは、様々な言語やフレームワークを使用して構成できるため、開発者が自由に技術を選択できます。
今回はフレームワークは使っていません。

高速なビルドとパフォーマンス

Astroは、高速なビルドとパフォーマンスを実現しており、ウェブサイトの読み込み速度を向上させることができます。

Astroのデプロイについて

Astroで作成したウェブサイトをデプロイするには、以下の手順が必要です。

ビルド

Astroでウェブサイトをビルドします。ビルドには、Astroのコマンドラインツールを使用します。

ホスティング

ビルドされたファイルを静的ファイルホスティングサービスにアップロードします。代表的なホスティングサービスには、NetlifyやVercelなどがあります。

カスタムドメインの設定

カスタムドメインを設定することで、ウェブサイトを自分のドメインで公開することができます。静的ファイルホスティングサービスの管理画面から、ドメインの設定を行います。

SSL証明書の設定

ウェブサイトをHTTPSで公開するために、SSL証明書を設定する必要があります。多くの静的ファイルホスティングサービスは、無料でSSL証明書を提供しています。

デプロイ

静的ファイルホスティングサービスの管理画面から、ビルドされたファイルをアップロードし、ウェブサイトを公開します。

以上の手順に従って、Astroで作成したウェブサイトをデプロイすることができます。静的ファイルホスティングサービスの利用により、コストを抑えつつ、高速かつ安定したウェブサイトを公開することができます。

アニメーションの読み込み

Adobe Animateで制作したアニメーションをAstroに埋め込むためには、以下の手順が必要です。

Adobe Animateでアニメーションを作成します。アニメーションは、HTML5 Canvas形式で書き出します。

Astroプロジェクトのpublicフォルダーに、アニメーションを含むフォルダーを作成します。例えば、"animation"という名前のフォルダーを作成します。

Adobe Animateで書き出したHTML5ファイル（.html）とJavaScriptファイル（.js）を、"animation"フォルダーにコピーします。

Astroのページで、アニメーションを表示したい場所に、以下のコードを記述します。

<div>
  <canvas id="canvas" width="400" height="400"></canvas>
</div>

JavaScriptを使用して、アニメーションを表示します。
以下は、アニメーションを表示するためのJavaScriptコードの例です。

const canvas = document.getElementById('canvas');
const stage = new createjs.Stage(canvas);

const manifest = [
  { src: 'animation.js' },
  { src: 'animation.html' }
];

const loader = new createjs.LoadQueue();
loader.loadManifest(manifest, true);
loader.addEventListener('complete', handleComplete);

function handleComplete() {
  const animContainer = new createjs.DOMElement(document.getElementById('animation'));
  stage.addChild(animContainer);
  stage.update();
}

JavaScriptコードの中で、createjs.LoadQueue()を使用して、アニメーションのファイルを読み込みます。そして、createjs.DOMElement()を使用して、HTML5ファイルをDOM要素に変換し、createjs.Stage()に追加します。

以上の手順に従って、Adobe Animateで制作したアニメーションをAstroに埋め込むことができます。JavaScriptコードの一部は、アニメーションに合わせてカスタマイズする必要がありますが、基本的な手順は上記の通りです。