先日着ぐるみさんをお迎えさせていただいたOsumi Akariです。さて私は着ぐるみさんとしての私を紹介するサイトOsumi Akari as a Kigを作成しました。そこまで大したものではありませんが、どういった背景で作成されたのかについて簡単に紹介させていただこうかと思います。
結論
- 無計画による適当なサイト作成
- Astro、かなり爆速で使える
No plan
着ぐるみさんは日本郵便のゆうパックで私の手元に運ばれてきたのですが、ゆうパックの追跡サービスを眺めてみるとどうやら思ったよりも早く私の下にたどり着くことが明らかとなりました。別に遅くなったり変に遠回りされたりするよりよっぽどいいのですが、あまりに早かったので準備という準備がほとんどできていませんでした。まあこれは私が無計画なことに由来するのですが。
前々から考えていたものの実行に移せていなかったものとして、この www.osumiakari.jp の内部か少なくとも osumiakari.jp 上に簡潔に私を紹介する簡単なランディングページ的なものを作成することがあります。そのようなページを作成することにより、自己紹介をすることになった際「続きはこちら！」的な行為が可能となるため、自分を理解していただく助けになると考えていたからです。
しかしながら具体的な行動を一切行っていなかったため、手元にたどり着くことを知ってしまい慌てて準備することになってしまいました。そのため高速でサイトを作る必要が出てきてしまいました。
Astro
順当に考えればこのサイト内の、例えば https://www.osumiakari.jp/about/kig/ にページを置くのが妥当と考えられます。しかしながらせっかく osumiakari.jp というドメインを持っているので、これのサブドメイン空間を活用したいという気持ちがありました。また現状このサイトではNuxt2を用いているため、若干の技術的負債が存在してしまっていることから、このサイトに新たな機能をあまりつけたくない（もし着ぐるみさんとしての紹介ページに機能を付けたい際に面倒になってしまう）と思っていました。
そのためkigというサブドメインの割り当てを行い、そこにサイトを置くことと決めました。サイトの構築にはsou.da.nameをNuxt3から置き換えた際に用いたAstroを使用することにしました。これは経験があるのと同時に、簡単なサイトを設置するのであれば素早く設置できること、またフレームワークの構造がシンプルであるため、今後別のフレームワークに移行しようと考えた際にその負担が軽減されうることがメリットであると考えたことが理由です。
Astroの常道通りに構築したのでソースコードを見て頂ければ、どんな感じで書かせていただいたのかを理解していただけると思います。特筆することは無いですが、若干公開している点としてはヒーロー画面の背景画像に使用しているJPEG画像に最適化をあまり加えられていないことでしょうか。高速なネットワークをお使いの方はそこまで気には留めないかと思われますが、ページの一番上に174キロバイトの画像を置いているため、低速なネットワーク環境ですとロードに若干の時間がかかってしまうという問題点があります。Astroの<Image />コンポーネントを直接用いることが出来なかったことから、直接CSSのbackground-image:でJPEG画像を表示しているためこのような事態になってしまいました。優先順位はそこまで高くはありませんが、将来的にgetImage()関数を用いた置き換え等を検討していこうかなと思っています。
関連リンク
最後に
私がいかに怠慢なのかを説明してしまっただけのような気がしますが、何とかサイトを作ることだけは出来て良かったです。ちょっとずつコンテンツを追加していこうかと思うので、今後ともよろしくお願いいたします。
