jQueryが思い通りに動かない時は読み込みの順番を遅らせてみよう。Twitterの優しさに号泣した話。
基本的に悩み事のない毎日を送っております。PITE.（@infoNumber333)です。
と言っても靴下がいつも片方無いとか、ちょっとしたことで筋肉痛になったとか、友達がガチでハゲてきたとかとか細かい悩みはあるものです。
そして、ここ最近はこのブログのサイドバーに設置した、”スクロールしても着いてくる”jQueryがうまく動かないということにずっと頭を悩ましていました。色々な人に聞いてみても原因がわからない。正常に動かない。その不可解なサイドバーの動きに追い詰められ、毎晩僕の枕元にサイドバーが立っている夢すら見る始末。あぁ、このままでは僕はサイドバーに追い殺されてしまうよ…
そんなギリギリの精神状態の中、藁にもすがる思いでTwitterにこんな投稿を投げかけてみました。
誰かjQueryに詳しい方で相談にのってやってもいいよっていう北海道の大地のような寛大な心を持ち合わせた紳士はおりませんでしょうか？
— Pite@Number333管理人さん (@infoNumber333) 2013年6月10日
この1つのつぶやきからこんなドラマが始まるとは思いもよらなかったのです。ええ、この時は。
現れた救世主・さいたさん。
— Ⓡⓨⓞⓤⓗⓔⓘ Ⓢⓐⓘⓣⓐさん (@saita_ryouhei) 2013年6月10日
さきほどのツイートから間もなく、おしゃれなハットのアイコンが目印で北海道の大地のような寛大な心を持ち合わせた紳士の「さいたさん(@saita_ryuhei)」が助けの手を差し伸べてくれるという奇跡が。なんということでしょう。
@infonumber333 分かる範囲でならm(_ _)m
— Ⓡⓨⓞⓤⓗⓔⓘ Ⓢⓐⓘⓣⓐさん (@saita_ryouhei) 2013年6月10日
ここぞとばかりにご好意に甘えることに。
サイドバーが「びゅんっ！」ってなる問題。
@infonumber333 途中から固定されるようにはなってましたが、ある程度までスクロールするといきなり「ぴゅんっ！」って固定されるサイドバーが表示されました。
— Ⓡⓨⓞⓤⓗⓔⓘ Ⓢⓐⓘⓣⓐさん (@saita_ryouhei) 2013年6月10日
僕が悩んでいたのは「jQueryでサイドバーをスクロールに合わせてついて来させるはずが、指定していた部分よりもかなり手前で表示されてしまいサイドバーの要素が重なる」という不具合でした。これによって今までサイドバーの一部がクリックできないという状態でした。これは良くありませんね。サイドバーを設置している意味が半減です。
このjQueryの実装はOZPAさんのこちらの記事を参考に行いました。
@infonumber333 ん～。間違ってないようにみえるのですがなんでなんでしょうね。。。。ozpa氏のBlogも同じ事でいますが、きちんと動いてますもんね。
— Ⓡⓨⓞⓤⓗⓔⓘ Ⓢⓐⓘⓣⓐさん (@saita_ryouhei) 2013年6月10日
@infonumber333 ん～。なるほど。因みozpa氏のブログで使っているJSで該当箇所の処理を見てみると「.top-40」なる処理があるみたいです。 ozpa-h4.com/wp-content/the…
— Ⓡⓨⓞⓤⓗⓔⓘ Ⓢⓐⓘⓣⓐさん (@saita_ryouhei) 2013年6月10日
色々知恵を絞ってくれるも、中々答えは見つかりません。
@infonumber333 謎ですね・・・
— Ⓡⓨⓞⓤⓗⓔⓘ Ⓢⓐⓘⓣⓐさん (@saita_ryouhei) 2013年6月10日
結局おしゃれハットのさいたさんの力を持ってしても謎は解けませんでした…。もうこれは迷宮入りするしかないのか。紳士でもダメなのか。飼い犬のようについてくるサイドバーと青空の下の草原を駆けまわるという夢はもう、叶わないのか…。
遅れてきた、ヒーロー！
@infonumber333 解決しましたか?10分くらいやったんですが一応解決しましたよー。
— マツオカソウヤさん (@mtoksuy) 2013年6月10日
あきらめて別の道を探そうとしていたその時、まさかの第二の救世主が現れました！
その名も「マツオカソウヤ(@mtoksuy)」さん！颯爽と答えを携えての登場。てか10分て。
@infonumber333 えっとー。簡単に言いますとdivの中にimgが入っているのですが読み込む前に高さを計算しちゃってるんですよね。ちょっとコード書いてきます。
— マツオカソウヤさん (@mtoksuy) 2013年6月10日
アドバイスを求めると、「ちょっとジュース買ってきます」ぐらいの軽さでコードを書いていくれるというマツオカさん。何なの神様なの？
@infonumber333 色々してみましたが一番簡単な方法は $(function($) { これをこいつに変更→ $(window).load(function() {でちゃんと動くと思いますよー。
— マツオカソウヤさん (@mtoksuy) 2013年6月10日
その後超簡単な解決策を提示してくれました。不具合の詳細に関しては後で解説します。
@infonumber333 最後に、記事も見つけてきましたー。 web.mrevi.net/web/windowload… これを読めばなんとなく理解できると思いますよー。ふう。達成感!!
— マツオカソウヤさん (@mtoksuy) 2013年6月10日
さらに今回の原因を説明した記事まで見つけてきてくれるという始末。
ほぼ初絡みなのにここまで親切にしてくれるなんて…なんて良い人なんだ(꒦ິ⌑꒦ີ)。
母さん…日本は、大丈夫です。
jQueryの読み込みの順番が原因
僕が説明するまでもなく、マツオカさんが教えてくれたページ読み込み後にjavascript(jQuery)を実行する方法という記事を読んでもらえれば話は早いのですが、一応説明しておくと今回の不具合はjQueryの読み込む順番に原因がありました。
具体的に言いますと、サイドバーに設置していた画像よりもjQueryの方が先に読み込まれてしまうために発動のキーにしていた高さが画像の分計算されず、予定よりも高い位置でjQueryが発動してしまったということです。
これを解決するには
$(function($) {
という部分を、
$(window).load(function() {
とするだけ。
後者は「画面が完全にロードされたら発動」という意味のコードです。HTMLやCSSを全て読み込んだ後に飾りとしてのjQueryを読み込むので不具合が起きづらいと先ほどの記事の著者は書いていました。
僕と同じようにjQueryでてこずっているブロガーは多いと思うので、悩んでいる方は一度お試し下さい！こっちのほうが安定感があって良さ気。
おわりに
今回はさいたさん(@saita_ryouhei)とマツオカソウヤ(@mtoksuy)の二人のおかげで念願だった「ついてくるサイドバー」をやっと実装することができました。これで今日から快眠できそうです。
この一件でjQueryの勉強になったと同時に人の暖かさ、Twitterの面白さを再認識できた気がします。せっかくブログもチューニングできたのでバリバリブログ書くぞー！！うぉぉぉお！！
PITE.（@infoNumber333)
