JavaScript│グラビカ学習帳～ホームページ制作会社 gravity works（グラビティ・ワークス）の備忘録と知識の共有と蓄積

2024.04.23

common.js など、すべてのページで読み込まれるスクリプトに特定のJSライブラリ独自のメソッドを記述してしまうと、そのJSライブラリを読み込んでいないページではエラーが出てしまいます。

以下はよく使用する Slick.js での例です。
Slick.js を読み込んでいないページではエラーが出てしまいますが、下の例のようにすることでエラーを回避することができます。

●例）slick.js の場合


$(function() {
  $(".target").slick();
});

↓


$(function() {
  if (typeof $.fn.slick == 'undefined') {
    return;
  }
  $(".target").slick();
});

個別ページ | コメント(0)

JS：Gifアニメを最初からリスタートする

2024.01.22

JavaScriptを使ってGifアニメを最初からリスタートする方法です。

●html

<img src="heart.gif" alt="" class="img">
<button class="btn">最初からリスタート</button>

●JS

var target_Img = $(".img");
target_Img.attr("rel", target_Img.attr("src"));

$(".btn").on("click",function(){
  target_Img.attr("src", "empty.gif").attr("src", target_Img.attr("rel"));
});

"empty.gif" は透明なダミー画像になります。
このEmpty.gifに一瞬差し替えてから元の画像に戻すことで、Gifが最初から再生されます。

個別ページ | コメント(0)

文節で改行してくれるJS「BudouX」

2023.12.18

先日当社で少し話題になった文章をいい感じのところで改行してくれるCSS「word-break: auto-phrase;」ですが、2023年12月現在では Google Chrome と Microsoft Edge のみ対応のようです。

しかし、まったく同じ仕様かはわかりませんが JavaScript を使って文章を改行する BudouX というライブラリを Google が公開してくれています。

BudouX: 読みやすい改行のための軽量な分かち書き器

使い方は簡単で、<head>内にJSを読み込み、
改行を適用させたい箇所をタグで囲むだけ。


<head>
<script src="https://unpkg.com/budoux/bundle/budoux-ja.min.js"></script>
</head>

<body>
<budoux-ja>文章の折返しのサンプルです。ここにテキストが入ります。</budoux-ja>
</body>

気軽に実装できるので見出しなどに取り入れても良さそうです。

個別ページ | コメント(0)

slickのスライド切り替えに合わせてCSSアニメーションさせる際、1枚目のアニメーションが動かない対策

2023.07.20

スライドショーを簡単に実装できる slick ですが、ある実装でハマったので対策をメモしておきます。

●やろうとしたこと
スライドの切り替わりに合わせて、スライド内の要素をCSSでアニメーションさせる

slickでは表示中のスライドに「slick-current」というクラスが付与されます。
そこで「slick-current」のありなしでスタイルを変更し、CSS の transition でアニメーションさせるという実装をしました。
しかし、この方法だと一番最初に表示されるスライドで初回のみアニメーションが行われませんでした。

●回避方法
最初に表示させるスライドを1枚目以外にし、スライドショーが準備できたタイミングで（少し遅らせて）1枚目に切り替える、という方法にしました。


// スライドショーが準備できたタイミングで、スライドを1枚目に変更
$(".your-slider").on("init", function(slick){
  setTimeout(function(){
    $(".your-slider").slick("slickGoTo", 0, true);
  }, 100);
});

// スライドショーの設定
$(".your-slider").slick({
  initialSlide: 1, // 開始時は1枚目以外のスライドに設定
  fade: true,
  autoplay: true
});

やや力技ですが、無事に1枚目のアニメーションが実行されました。

●ポイント
・setTimeout で少し送らせないと切り替わらない
・slickGoTo に true を設定すると slick の切り替えアニメーションなしでスライドが切り替わる
・init メソッドはスライドショーの設定よりも前に記述しないと動作しない

以上です。

個別ページ | コメント(0)

iOS：JavaScript の .click() が1回目タップ時に効かない

2023.02.20

iPhone端末でデバッグしていたところ、ボタンをタップしても1回ではJavaScriptが動作せず、2回目のタップで動作するという現象に遭遇しました。
記述の問題かと思いましたがどうやらclickイベント自体発火していないようで、困っていたところ以下の記事を見つけました（ありがとうございます！）。

【iOS】リンクをタップしても1回では挙動しない原因とは？
https://on-ze.com/archives/3066

CSSで:hoverの設定をしていると起こるようです。

スマホ用のスタイルで打ち消しても解決しない場合があり、メディアクエリでPCのみ:hoverを当てるようにして解決しました。

これまで同様の現象に出会ったことはなかったのですが、条件としてはレアケースでもないと思うので気をつけたいところです。

※当社の環境では「iPhoneSE（iOS15.5）のSafari」にて確認。

個別ページ | コメント(0)