【開発日誌 #3】Nuxt.js × fullPage.jsでリッチなアニメーションページを構築（1）Web Font 編

初めまして。フロントエンドエンジニアの田中です！

先日、某大手ファストフード店のキャンペーンページの開発に携わらせていただきました。

開発の「概要」と「苦労した点」を下記しますので、よかったらご参考にしてみてください。

《主な構築要件》

SSG（Static Site Generation）
画面いっぱいのコンテンツを、マウスホイール／タッチパッドでスクロールして表示を切り替える(fullPage.js)
表示が切り替わるごとに、コンテンツに合わせてアニメーションをする

《主な使用技術》

▷Nuxt.js (https://ja.nuxtjs.org/)

▷fullPage.js (https://alvarotrigo.com/fullPage/)

▷FONTPLUS (https://fontplus.jp/)

《苦労した点》Webフォント編

まず初めに苦労したのは、SPAで構築されたページでのWebフォントの適用です。

ある程度構築したタイミングでサーバーにアップして表示を確認したところ、全然フォントが適用されておらずゾッとしました…。

原因を探ってみたところ、Webフォントが適用されるタイミングに要素のレンダリングが完了していないことが原因のようでした。

つまり「要素のレンダリング完了 → Webフォントを適用」の順番が実現できれば上手くいきそうですね。

結果、

Vue.jsのライフサイクルメソッド（https://jp.vuejs.org/v2/guide/instance.html）
FONTPLUSのJavaScript APIのメソッド（https://fontplus.jp/usage/javascript-api/method）

を組み合わせて、下記のように記述することでフォントを適用することができました。

<script>
export default {
  created() {           // インスタンスが生成され､データが初期化された後に実行
    FONTPLUS.async()    // FONTPLUSの処理を一時停止
  }, 
  mounted() {           // インスタンスが DOM 要素にマウントされた後に実行
    FONTPLUS.start()    // FONTPLUSの処理を開始
  },
}
</script>

・・・以上、「構築で苦労した点：Webフォント編」でした。

次回は「苦労した点：Nuxt.js × fullPage.js × IEブラウザ対応編」を記事にしたいと思います。