モバイルにも雪を!

前回の「クリスマス’17始めました」では雪が降るのはPCのみでモバイルでは降りませんと宣言しましたがほとんどのアクセスがモバイルからなのでやっぱり雪が降った方がいいなぁと思いちょっと調べてみました。まずは「Snow Flurry」の公式サポートサイト、どうやら昔のスマホではパフォーマンスに問題があったようでモバイルでは降らせないの一点張りw しょうがないので勝手にソースを改変。あくまでも個人の責任ですからね。

修正するのは以下の2箇所のみ、まずは設定から。オリジナルでは「wp-snow-flurry-js.php」の61行目で以下の指定をしています。

                                        wp_enqueue_script('h5ab-snow-flurry-script', H5AB_SNOW_FLURRY_URL . 'js/h5ab-snow-flurry.min.js', array('jquery'), '', true);

ミニマイズした「.min.js」を指定していますが、簡単に変更を加えられるのは「.js」ファイルの方なのでここの指定を以下のように変更します。ミニマイズしない.jsファイルはパフォーマンスの劣化を招く事があるのであくまでも個人の責任において変更を行ってください。

                                        wp_enqueue_script('h5ab-snow-flurry-script', H5AB_SNOW_FLURRY_URL . 'js/h5ab-snow-flurry.js', array('jquery'), '', true);

こうする事で「h5ab-snow-flurry.js」と言う人間の目で見てわかるファイルの変更で修正を適用可能になります。その修正箇所は以下の通りです。まずはオリジナルのコードから。117行目付近です。「モバイルとタブレットの場合は何もしない、デスクトップ(PC)の場合はアニメーションを起動する」感じの指定です。

       if (device.mobile() || device.tablet() || $('html').hasClass('no-csstransitions')) {} else if (device.desktop()) {
            activateAnim();

これを、モバイルやタブレットでもデスクトップ(PC)と同じ条件に持っていけば、どのデバイスからでも雪を降らせることが可能です。ここの修正方法は自由です。要はモバイルやタブレット、デスクトップの区別を一緒にすれば良いと言う事です。

/*        if (device.mobile() || device.tablet() || $('html').hasClass('no-csstransitions')) {} else */if (device.mobile() || device.tablet() || device.desktop()) {
            activateAnim();

公式サポートが言うように、モバイルでは動作が緩慢になる可能性もありますが期間限定であるので当面はモバイルやタブレットでも雪を降らせる設定で行こうと思います。iOS系でしかテストできないので、万が一、Androidでは動作がおかしいようなことがあればご連絡下さい。

最終更新日: 2017年11月20日