冒険島MAGAZINEを開発していて苦戦したこと　前編

2022.5.29Writer: haseComment: 0

5/11に冒険島MAGAZINEを改修リリースしました！
4月の中旬ぐらいから着手し、フロント系及びアニメーション未経験の中で作成しました！
大学時代や以前の会社でAIや組み込み,Java系のシステムなどをやっていたのでフロントはほぼ未経験ですね笑
今回冒険島MAGAZINEを開発していて苦戦したことや技術的なことについてまとめていこうかと思います。

グローバルで全ページに適用されているCSS

①フロントエンジニアとしては、基礎中の基礎ですね。笑
改修前にあったコードは、すでにCSSがグローバルに適用されていました。
そのため、親要素に対して、つけたくない場所にもmarginがついていたり
したため、SP、PCでの影響箇所全て確認しました！
影響箇所確認するのってなんだかんだ時間かかりますよね。。笑

②こちらもフロントエンジニアでは、よくあることですが、
キャッシュが残っている関係でCSSが反映されずデザインが変わってない！などもありました笑

【原因】

①トップページ、記事詳細などで同じクラス名が使われていたことなどが原因で、
ページ全てに影響していました。

②Webページを更新しても、キャッシュが残っている関係で、cssを更新したとしても同じファイルと判定され、反映されないことがあります。
そのため、キャッシュを飛ばす必要があります。

【解決策】

①該当箇所のmarginなどを無効化し、新たにdivタグで該当箇所を囲い、親要素に付け直し、CSSに記載

②style.cssを読み込んでいる箇所にwordpress関数のwp_date()をパラメータとしてつけることで、WEBページ読み込み毎にキャッシュを破棄して読み込ませる。
wp_dateは、日付や時間を動的に取得できる関数です。
こちらをcssの後ろにパラメータとして記載することで、自動でキャッシュを破棄してくれます。
wp_date('YmdHis’)の意味としてはこちらになります。

Y:年 4桁(2000,2022など)
m:月 先頭に0がつく場合もあり(01-12)
d:日 先頭に0がつく場合もあり(01-31)
H:時 先頭に0がつく場合もあり 24時間単位(00-23)
i:分 先頭に0がつく場合もあり(00-59)
s:秒 先頭に0がつく場合もあり(00-59)

Y:年 4桁(2000,2022など)

m:月先頭に0がつく場合もあり(01-12)

d:日先頭に0がつく場合もあり(01-31)

H:時先頭に0がつく場合もあり 24時間単位(00-23)

i:分先頭に0がつく場合もあり(00-59)

s:秒先頭に0がつく場合もあり(00-59)

具体的なコードの例としてはこちらになります。

<link rel="stylesheet" type="text/css" href="<?php echo home_url()."/wp-content/themes/envy-blog/style.css?".wp_date('YmdHis')?>">

1	<link rel="stylesheet" type="text/css" href="<?php echo home_url()."/wp-content/themes/envy-blog/style.css?".wp_date('YmdHis')?>">

波のアニメーション

サイトサクセス時の波のアニメーションは、最初の案では、波の画像を下から上に移動させてフェードアウトで切り替えて表示するというものでしたが、開発を進めていくうちにjQeryのアニメーションが理解ができ、波を動的に表現できるものにアレンジを加えようと思いました。
使用したのはwavifyというjQeryプラグインで、JQeryと以下のjsファイルを読み込めば使用できます！

【実装方法】

wavifyはこちらからダウンロードできます。
jquery.wavify.jsとwavify.jsをダウンロードしたら自分のローカルパスに入れます。

wavify

https://github.com/peacepostman/wavify

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>
<script src="(ローカルパス)/jquery.wavify.js"></script>
<script src="(ローカルパス)/wavify.js"></script>

使い方は、以下をhtmlやphp内に入れます。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"><path id="wave" d=""/></svg>

1	<svg version="1.1" xmlns="http://www.w3.org/2000/svg"><path id="wave" d=""/></svg>

var wave1 = $('#wave').wavify({
  height: 70,
  bones: 3,
  amplitude: 70,
  color: 'blue',
  speed: .40
});

var wave1 = $('#wave').wavify({

height: 70,

bones: 3,

amplitude: 70,

color: 'blue',

speed: .40

});

こんな感じで表示されます！

今回波のアニメーションで苦戦した部分がこちらです。

【問題点】

①IOSのChromeでのみ、波が最初に表示されてしまう不具合
なぜかIOSのChromeでのみ、波が一瞬だけ表示されてしまう不具合がありました。
Safariでは出てこなかったので、ブラウザごとで環境依存しないか考えるのって大事ですね。

②フェードアウトで切り替わる瞬間不自然に表示される
こちらは、フェードアウト時に要素を重ねているものの表示を入れ替えるイメージですね。
黒背景白ロゴを波がきて重なった瞬間に白背景黒ロゴに切り替える感じです。

【解決策】

①アニメーションの親要素にz-index:9999をつけており、子要素にz-index:9998をつけたことで、レイヤーが下になったことで表示されないよう対応
波が最初に表示されてしまうなら、いっそz-indexで表示位置を変えてしまえば？と思い、子要素にz-index:9998にしたところ上手くいきました

②keyframeで0-100%で細かく移動スピードを調整することで、不自然にならないように対応
こちらは、試行錯誤あるのみでした。笑
keyframeで0-100%の中で、transformyのタイミングを調整して今の感じになりました！

今回はここまで！
次回スライダーやページネーションなどについて話します！
よろしくお願いします！