STORY

2022.08.22

公式サイトリニューアル秘話#3〜コーディング編〜

こんにちはタロウです。
サイトリニューアル秘話第3回は僕からお送りします！

第１回：企画編
第２回：デザイン編
第３回：コーディング編

コーディングの一部、稼働環境は当時同じPJだった箱崎・苅田・永坂・大野が担当しました！

弊社の強みでもある全員がNuxtJSを触ることができるメリットを活かしきれる構成で構築しています！

構成を検討

旧コーポレートサイトはWordPressで動いていましたが、
真っ先にそのままWordPressで作り直すのは普通すぎるかなぁ・・と意見が上がりました。

全員NuxtJS触れる → どのメンバーでも修正なり手直しがしやすい
WordPressをヘッドレス化 → 旧サイトからデータ移行がスムーズ
Amplify Console使えばSSGで静的配信できる

という理由から、
NuxtJS + WP Rest APIをAmplify Consoleでデプロイする構成で作ることにしました！

▲アーキテクトはこんな感じです。

ヘッドレス化したWordPressは少し苦戦

ヘッドレス化するためにいくつかやることがありました。

テーマページにはアクセスできないようにする
カスタムフィールドを返却できるようにfunctions.phpを拡張
関連記事やランキングを返却するようにAPIを自作
画像はXserver上ではなくCloudFront+S3で配信するため自動アップロードさせる

また、現行サイトのWP REST APIを使って使うにも、
カテゴリを振り直したかったり、ドメインを移管しなければいけなかったりと
課題がいくつかあり・・ヘッドレス用に作り直すことにしました。

コーディング開始！

WP REST APIの準備と同時進行で、サイトのコーディングを開始しました。

基本的にはなかやん、サポートでハコちゃんがコーディングを行い、
記事移行やアニメーション、お問い合わせフォームなどは他メンバーが行いました。

コンポーネント設計

前に勉強会で使用したコンポーネント設計の中から、
3度目(2度目)の法則に従い、コンポーネントを切り出すことにしました。

APIアクセス

Repositoryパターンを使用して管理することにしました。

エンドポイントごとにRepositoryを作成し、各ページからはRepositoryを使用してアクセスします。

API側の実装と同時進行の場合、ひとまずRepository内でスタブ化したjsonを返却することで
フロントエンドの開発に影響を出さずに進めることができるメリットがあります。

分担して進めることができるメリットを最大限に有効活用できるよう
都度工夫を行い、コーディングを進めることができました！

gsapアニメーションが意外と大変だった

NuxtJS + GSAPのアニメーションは結構大変でした。

アニメーション指示も、「えっ、これどうやってやるん・・本当にやるん・・？(困惑)」の声が飛び交いましたが、なんとか実現することができました。

ページ遷移時のカーテンアニメーション

これにはハコちゃんが大苦戦してました。

マスクがかかりながらロゴが出現/消えてゆく
カーテンを二重にし、なめらかさを表現
遷移先のDOM生成が完了してからカーテンを解除

最初の実装から3回ほど改善を加え、なんとか完成しました！

オオカミが走り出す

クリックすると徐々にスピードをあげて走り出します。

クリックした瞬間、走っているgifに切り替え
徐々にスピードを上げて画面外まで移動
移動後に画面外から元の位置に戻す

目的地までのアニメーション速度が、画面外の位置で若干変わってくるので
調子がとても大変でした。

また、走る演出もどうやったら自然に見えるか何度も速度を調整して実現しました！

スペースシャトルを飛ばしながらページトップへスクロール

フッター付近にあるページトップを押すと、
スペースシャトルが飛びながらページがスクロールします。

クリックした瞬間にスムーススクロールを実行
fixedにしたスペースシャトル要素をスクロール秒数に合わせて画面外まで飛ばす

最初はスクロール距離を計算して実装していましたが、
スクロールとスペースシャトル速度が合わず、一瞬でどこかにスペースシャトルが飛んでいってしまったり・・

スクロールと、スペースシャトルのアニメーションを別々で動作させて実現できました！

スクロール時のフェードイン

タイトルの文字がパラパラと出てくるアニメーションや、
各コンテンツが順番に出てくるアニメーションをGSAPのScrollTriggerを使用して実現しました。

アニメーション開始のスクロール位置調整
リロード後にアニメーション未実行状態へ戻す
SP時はフェードインの順番を入れ替える

など、結構細かな調整をしています。

フェードインは各画面で使われるのでjsファイルにカスタムディレクティブで定義し、
必要な箇所で使えるようにしました！

GSAP以外の少し大変だったアニメーション

バーコードを押すと目からビーム

オオカミの目からビームが出ます。
ビームの半透明画像、数字の画像をそれぞれクリックアクションでDOMが出現するようにv-ifで切り替えています。

オオカミや岩の画像がそれぞれ、マウスの動きに合わせてパララックス効果を演出しているので、
そこにビームをつけるのがとても難しく・・
data–depthでオオカミと同じ動きに近づくよう調整して実現しました！

そんなアニメーションですが、
普段バックエンドを専門にやっているメンバーも一緒になって実装しました。
（ﾌﾛﾝﾄｴﾝﾄﾞｾｲｶｲｲﾁﾑｽﾞｶｼｲ）

大量の修正対応が発生

リンクを押しても何も起きない。チラつく。アニメーションが心地良くない。
いろんな修正内容が発生しました。

大量に発生するので、issue管理からNotionでの管理へ移行し対応を進めていきました。
(修正事項を出し切ったと思ったらまた増える。あるあるですよね。きっと。)

完成！！

3度に及びレビュー＆修正を行い、ようやく社長のOKが出て完成しました。
IT企業っぽくないのがまた目を引くインパクトの強いコーポレートサイトになりました！

プレゼント企画も行いました

合わせてプレゼント企画も行います！

・シェアして頂いた中から抽選で新しい「ステッカー」をプレゼント
・シェアした際に「3つのし掛け」をコメント付きリツイートをしてくれた方で抽選で「キーホルダー」をプレゼント pic.twitter.com/bczxQ33dmx
— 竹部裕介🐺オオカミで有名な会社のCEO (@yusuket1120) June 21, 2022