初心者から脱出!!コピペじゃ動かなかった時の対処方法

フリーランスの心得 ホームページ制作

実はJqueryはそこまでわかってない。
Jqueryというかjavascriptがあんまりわかってません。

といっても基礎はわかってるので、ホームページではとくに支障ない程度は使えるし、どこかのすごい人が作ったスライダーとかを動かすことは出来ます。

しかし今回の案件で、公式のどこに書いてあるわからない事があった。
まぁそれでもなんとか自分で(人様のブログ見て)解決したので、Jqueryあんまりわかってない人が解決までにすることを書いてみます。

上級者になるにあたっていろいろ壁があるんですが、JqueryとかPHP、wordpressでサイト作ってると必ずと言っていいほどぶち当たる壁があります。

第一の壁。コピペじゃ動かない・・・。

HTML勉強はじめたての人はこういうブログから解決口を見つけていくのですが、コピペで同じようにやったのに動かない時ありませんでしたか?

今回やりたかったこと

Slickスライダーで動画を再生して、切替時に動画をストップさせる

普通にスライダーの切替時に動画停めるだけじゃんって感じなんですが、標準ではこの機能ついてません!!!
標準というのはscriptの中で指定するオプションのことね。

このスクリプトは、digipressさんのこのページを参考にして解決しました。
https://digipress.digi-state.com/tech/how-to-include-youtube-vimeo-video-with-autoplay-slick-js/

ただ今回コピペだとうまく動きませんでした・・・。
コピペで動かない理由ってだいたい指定先が間違ってるか、自分で作ったコードが違うか大概はそんなことです。

今回は、指定先が間違ってました。VIDEOを指定したつもりがその上の親要素を持ってきてました。

なんでわかったかというとコンソールを見たから。

PHPでいうと、とりあえずダンプしろってやつ。
Javascriptでというとコンソールみろって感じですかね?わかんないけど。

 

始めたての人がなんでわからないのかっていうと、
呼出しデータがちゃんと取得できているかどうかをたしかめる方法を知らないから。

あとデータの見かたも知らない。

だと思います。
なので、呼び出しデータが確認できれば、初心者から一歩進むのではないでしょうか?
少なくとも僕の場合は、ダンプとかコンソール見るようになって自分で解決出来るようになりました。

まぁこれだけだとまだ出来ないことはたくさんあるんですが、JqueryとかWordpressのカスタマイズはこれが出来るだけでかなり変わると思います。

コンソールの使い方

Jqueryの場合は、console.log()
PHPの場合は、var dump()
dumpするとそのままブラウザ内にはき出されます。

カッコの中に変数とか関数とかまぁ中身が知りたいモノを入れます。
echoとかprintとはまた違って、データごと呼び出してくれます。配列にはいってれば配列ごと呼び出します。

var w = $(window).width();

たとえばこれはwindowサイズの横幅を変数wに入れました。
console.log(w)とすれば、横幅がコンソールに出てきます。

コンソールは、F12とかおせば下か右の方に出てくるので探してください。

今回参考サイトで使ったコードは以下のコード

HTML

div.slick-current > div.video > video

JS

function playPauseVideo(slick, control){
var currentSlide, slideType, startTime, player, video;

// 現在のスライドを取得
currentSlide = slick.find(".slick-current");
// 現在のスライドのclass属性に指定の値から2番目のセレクタ(スライドのタイプ)を取得
slideType = currentSlide.attr("class").split(" ")[1];
// iframeオブジェクトを取得
player = currentSlide.find("iframe").get(0);
// 再生開始位置(data-video-start)を取得(vimeoのみ)
startTime = currentSlide.data("video-start");
if (slideType === "video") {
// 現在のスライドがvideoの場合

// videoオブジェクトを取得
var video3 = $('.slick-current #video3').get(0);
if (video3 != null) {
if (control === "play"){
// 再生
video3.play();
} else {
// 一時停止
video3.pause();
}
}
}
}
$(".sp-slider").on("beforeChange", function(event, slick) {
slick = $(slick.$slider);
playPauseVideo(slick,"pause");
});

引用元:https://digipress.digi-state.com

//videoオブジェクトを取得の下の変数をちょっと変えました。
途中まではコピペでも普通に動いててコンソールでも確認してました。

if文にもある通り表示しているのがvideoであれば、下の命令をしなさいよーってなってます。

video = currentSlide.children("video").get(0);

参考サイトではこうなってます。なんで動かなかったかというと僕のコードはこうなってました。

div.slick-current > div.video > video

つまりcurrentSlide.childrenでは一個したの要素のdiv.videoを指していたので、うまく動かなかった。というわけです。
これに気づくのに何分かかったことか・・・(´・ω・`)

こういう初歩的な間違いに気づくことが出来るのはコンソールを見るか見ないかでかなり違ってきます。
そしてここでわからない人は、また検索して「動くJqueryを探す旅」へと出るのです。

さいごに

エラーを直すには1行づつ何をしているのかを知ることが大事。
コンソールを見る。

これでビギナーから一歩前進!!

気に入った記事であれば、ぽちっとお願いします<(_ _)>