ノーコードのWeb制作ツールであるSTUDIOでは、多彩なアニメーションをかんたんに実装することができます。 スライドショーブロックを利用すればスライドショー・カルーセルも実装可能なのですが、そのスライドショーを「自動再生」させるには標準では不可で、実装するにはGTM(Google Tag Manager)を利用した工夫が必要です。
STUDIOのアニメーションについて参考: STUDIOで基本となる2種類のアニメーション。実装・設定方法を公式動画から解説 | 魔法使いのWebマーケティング
そこで、STUDIO専門の制作プランを立ち上げている有名なWebデザインファームのgaz様の記事「STUDIOのCMSカルーセルで自動再生させる方法」を参考に、STUDIOにおけるカルーセル（スライドショー）mの自動再生を試みました。
おおよその設定自体は上記gaz様の記事に沿って実施すると完了しますが、実際の挙動をみると上手くカルーセルが自動で動いてくれません。
そこで、上記記事を補足する形で「STUDIOのカルーセル・スライドショー自動再生における注意点」をお伝えいたします。
基本的な設置方法・カルーセル設置方法については上記gaz様の記事をご参照ください。
目次:
STUDIOで自動カルーセル・スライドショーを実装する仕組み
まず、紹介されている方法の流れについておさらい。
Google Tag Manager（GTM）を設置し、GTMでJavaScriptタグを設置。 JavaScriptによるブラウザ挙動でカルーセルの送りボタンを一定間隔でクリックさせる。
このJavaScriptで送りボタンを自動クリックさせることにより、あたかも自動的にカルーセルがスライドしているような挙動を実装します。
上記が上手くいくかどうかは以下の点がポイントとなります。
- GTMタグが正しく設置され、発火しているか
- JavaScriptによる挙動でクリック可能なデザイン状態となっているか
以下よりそれぞれ詳細を述べていきます。
Google Tag Managerが正しく設置され、発火しているか
ScriptタグとしてカスタムHTMLに記述する
STUDIOのCMSカルーセルで自動再生させる方法 | 株式会社gaz の記事では、クリックさせるスクリプトが紹介されています。下記コードをGTMにおけるカスタムHTMLとして記述。
window.onload = function(){
//秒毎に関数「ClickSlide()」を呼び出す
setInterval("ClickSlide()", 1000);
}
//クリックする関数
function ClickSlide(){
var element = document.getElementById( "right-btn" ) ;
element.click() ;
}カスタムHTMLは、bodyタグ内の最下部(</body>の直前)に記載したHTMLを埋め込むGTMの機能です。
したがって、当然ではありますがHTMLとして記載されるため、上記コードをJavaScriptとして認識させるには<script>タグを最初と最後に記載する必要があります。
<script> // script開始タグを追加
window.onload = function(){
setInterval("ClickSlide()", 1000);
}
function ClickSlide(){
var element = document.getElementById( "right-btn" ) ;
element.click() ;
}
// script閉じタグを追加
</script> タグを正しく発火させるために、トリガーの種類を変更する
次に、GTMタグを正しく発火させる方法。
まずは、GTMタグを初めGAタグなどの各種タグが正しく設置・発火しているかを判定してくれる Google Tag Assistant を活用して発火確認をしてみましょう。
私は今やレガシー版となっているChrome拡張機能のTag Assistant Legacy (by Google) でデバッグを行いました。
エラーを吐いてくれるので、何が問題で上手くタグが動作していないのか？を知ることができます。
上記Tag Assistantで設置が確認できるのに、発火が確認できないという場合には「トリガー」を疑う必要があります。
トリガーとは、タグが発動する「条件」のようなもの。
gazさんの記事ではトリガー: 「ページビュー > ページビュー」を指定されていたようですが、ページビューをトリガーにした場合では上手く発動しないことがあるようです。
本記事では「DOM Ready」をトリガーとして、下記要領によって実装します。
トリガーの新規作成: DOM Ready
デフォルトで用意されているタイプ以外のトリガーを新規作成します。
左メニュー: トリガー > 新規をクリック。
続く画面で「ページビュー > DOM Ready」を選択し、DOMが準備された段階で確実に動作するように設定しましょう。
任意の名前をつけて、保存をクリックすると新規のトリガーが作成されます。
タグに作成したトリガーを紐付け、タグ詳細設定も変更
作成したトリガーを、カスタムHTMLタイプのタグに紐付けます。
ここは動作に関係あるか不明ですが、「タグの詳細設定」にも変更を加えておきましょう。
タグ詳細設定は下記の通り変更しました。
- タグ配信の優先度 : 10
- タグ呼び出しオプション : 無制限
- 同意設定: 追加同意は不要
以上でGTM設定は完了です。
STUDIOデザインエディタ上の注意点
次に、STUDIOデザインエディタ上での注意点です。
STUDIOにおける自動カルーセルは、GTMタグに埋められたJavaScriptによって、ブラウザ挙動でカルーセルの送りボタンを一定間隔でクリック。あたかも自動的にカルーセルがスライドしているような挙動を実装するのでした。
ここで、JavaScriptによってきちんと要素をクリックすることができるか？に注意する必要があります。
具体的には、STUDIOデザインエディタでは下記の点に気をつけましょう。
- right-btnのIDを設定したボタン要素が「表示」となっているか？
- 親のdiv要素については隠れていても、right-btnの要素が表示設定となっていればJSはボタンをクリックできるようです。
- right-btnのボタン要素に他の要素が重なっていないか？
- right-btnの重なりポジションを5にする（重なりを上にする）
- 他のdiv, p要素などがright-btnに被っていないか確認する
以上に注意すれば、自動カルーセル（スライドショー）を実装できることでしょう。
文字は固定、カルーセル写真のみスライドさせるには「絶対位置」でボックス位置を指定
STUDIOが用意したカルーセル（あるいはCMSブロック）内に文字を記述してしまうと、文字ごと写真と一緒にスライドしてしまいます。
よく見る「文字は固定、背景の写真だけスライドさせる」という実装を行いたい場合には、カルーセルブロックのテキストをすべて削除したうえ、文字部分のブロックを相対配置ではなく「絶対配置」(position-absolute)にして親要素からの絶対位置指定を行いましょう。
絶対配置にした場合には、特にレスポンシブのモバイル表示などでright-btn要素とテキスト要素が被ってしまいがちです。ご注意ください。
参考までに、私がSTUDIOで制作させていただいたクライアント様のWebサイトを掲載させていただきます。
ファーストビューでの自動カルーセル（スライドショー）をご希望だったため、本記事の方法にしたがって実装、テキストは固定のうえ画像のみ自動スライドとするようにしました。
本記事の方法に沿えば、自動カルーセルを実装できることと思います。
もし今後STUDIOやGTMの仕様などが変更された場合には、前述したGoogle Tag Assistantなどでデバックを行い、エラー箇所を突き止めるようにしましょう。
この記事の気になった箇所を読み返す:
Category: