Simplicityを少し改造してみた 番外編3-3 スペースの有効利用のアイデアみたいなのの続き2

まだ完全に出来上がっているわけではないんですが、経過報告と新規に追加した内容で書いてみようと思います。
色々考えながら現在まで思いつく方法でなんとか#containerに高さを持たせるために四苦八苦していました。それはどういうことかと言いますと、divAで囲まれた子要素divBがあって、もしdivBがfloatされていた場合divAの高さは無くなってしまうんです。floatと言うように、浮かせているわけですから子要素の高さはもちろん実在しているものの、divAからしてみればその高さがわからないわけです。

Simplicityでもそれは起こっておりまして、本来#containerが#footerを下に広げてくれれば特にあれこれしなくても良いと思いながら、しっかりと仕組みを理解しているわけではないので、もう#mainの高さをそれらを囲んだ#flipに入れてしまえばいいだろうとやってみました。
現在は、色々と調整中で#bodyの下の#body-inに高さを渡しています。

ただこの高さが正しく取れないんですよ。理由としては極簡単でコメントがjetpackプラグインのコメント機能によって後から書き変えられるのかどうなのかその仕組みはわかりませんが、それが理由で高さが変わるわけです。コメント欄の高さが変わればそれを囲んでいる#mainの高さも変わります。
別に変わっても良いのですが、問題はその変わっている高さのどの段階でjQueryが高さを取りに行っているのか、おそらくこのあたりにあると思います。あるページではフッターの上にあるマージンがかなりとられたりしました。で、別のページに行くと今度は高さが低い、また元のページに戻ってくるとさっき広かったマージンが狭くなったりと色々。

後で説明しますが、遅延読み込みをさせることでなんとかイケてるような感じにはなりました。

方法的にはプラグインを利用するという手もあります。jQuery ex.resize(gitHub) ちょっと古めのプラグインなのでQiitaのこちらの記事を参考にゴニョゴニョする必要があるかも知れません。

現在の進捗状況ですが、進捗と言ってもゴールを決めてないのでまったり進行でやっててひとまずできた部分をお知らせします。


まず、その前にSimplicityのSNSカウントでajaxを利用してカウントを書き変えている部分なんですけれども、自分が気にし過ぎかも知れませんがadsenseらの読み込みとバッティングしているような感じがしませんか?不具合が起きているとかではなく、読み込みの順序が同時発信でゴチャっとしているような感じがするんです。

ページの読み込みで言うとアドセンスは案外遅いですよね。それに拍車をかけているのではないかと思ったりもします。いやいや、それはとても些細なことで気にするほどではないよと言うことであればよいのですが、自分的には以下のようにしてみてはどうかと思ったり。

親テーマ/header-javascript.php 35行目あたり

つまり何をしているかというと、SNSのボタンのajaxが動くのをページが読み込まれて5秒待ってからにしているわけです(5000ms = 5秒)。この秒数は別にどれだけでもよいのですが、まぁ5秒あれば大抵の表示はイケてると思うのでその後で各SNSのAPIにアクセスしに行ってもいいんじゃないかなぁと。
APIからの返事をそのまま数字で書き出しているだけなのでSNSのカウント取得自体は凄く速いはず。なので、後回しにしても良いのではないかと。むしろ読み込みが遅いadsenseを優先してあげた方が結果的に速くなるのでは?と淡い期待などもしつつ、ちょっとだけ。

本題

今回の進み具合としては、まず先にも書いたようにフッターの位置取得関係と、ちょっとしたギミックの追加になります。
前回までで、#mainをフリップさせることはできるようになりました。ただある程度スクロールした上でクラウドさんをクリックして裏返したとしてもコメント欄はずっと上にあるわけで、またスクロールで戻らねばならない。これを改善したいと考えました。

また、もう一度表に返した時にクラウドさんがコメント欄の位置にあるということは、途中まで読んだ部分の続きまでスクロールせねばならず、もう少しスクロールすれば下のコメント欄と言う位置ならいいですがとても面倒です。なので、ひとまず今回はコメントをしていない状態での(コメントするとページがリロードされるので最初の位置に戻ります)、スクロール移動ができるかどうかを考えた次第です。

つまり、ページの途中までスクロールさせた時にクラウドさんをクリックするとメインが裏返り、スクロールでウラ面のコメント欄に行きます。再度クラウドさんをクリックすると表に返って元のクラウドさんがいた位置までスクロールします。こういうことです。

あくまでもコメント欄は例として置いてあるだけで、ウラ面に入れるものは他のものでも大丈夫です。前にもちょろっと書きましたが参照したページや各SNSのウィジェットその他諸々、それを読み込むための準備も別に必要ですが書き込めます。例えば、方法的にいけるかどうかあるいはどうすればできるかはわかりませんけども、more以降を裏に入れるということも可能だと思います。


ひとまず、今の所のスクリプトなどを。

画面を作って、クラウドさんを配置し、スクロールに追従させるまでの部分。ここらは前回やった内容をちょっと改造した部分です。
#mainの中にあるコメント欄はjetpackで書き変えられてしまうので、その際にコメント欄の高さが変わります。どのタイミングで処理するかで#mainの高さが変わってしまうので、setTimeout等を利用して、また$(window).on(“load”,)を使ってページが読込された後、更に1秒待って#mainの高さが変わっていればその高さに合わせるというような処理をしています。
負荷であったり、ページの読み込み速度に影響がないのであればsetIntervalで数秒おきにチェックした方が良いのかも知れません。

また最初のHTMLを作る部分での事を書きますと、#mainをコピーしてidを変えてから#mainの下に#main2を作るというようなことをしています。そして、それらを子要素にするflipをwrapAllと言うので親にしています。

$(“囲みたい要素A,囲みたい要素B”).wrapAll(“#囲む親のセレクタ名”)

こうすることで、

5359_howto_1こういう構造ができます。前回もチラリと書きましたが、この#flipは無くても表にしたり裏にしたりすることはできます。ただ、この親#flipにperspective:1000pxと言う感じで入れておくと、フリップが水平で行われるようになります。これは数値が低くなると奥行きが出てくるという感じです。例えば、200pxぐらいにするとファイナルファンタジーでいうなら飛空艇で飛んでる時のマップのような感じになります。

続いてボタンクリックでスクロールする部分。

ここは前回とほぼ同じです。おさらいしておきますと、最初クラウドさんはclass.flipedを持っていないので必ずelseから処理が行われます。つまりは裏返すと言うことです。その時、今回新たに追加した var originalPointにクラウドさんの位置を入れます。それから1秒後に(だいたいカードが裏返ったのを見計らってから)スクロールが開始されます。これで裏返ってコメント欄まで行けるようになりました。

今度はもう一度クリックした時にクラウドさんがcalss.flipedを持っているのでifの下の処理がされます。今度は表に返す時ですね。その際、すでにクラウドさんにoriginalPointの位置が入っていれば、そこまでスクロールして戻ると言うようなことをしています。

originalPointの位置は $(document).scrollTop()で取得しています。

もしフリップさせてコメントを入れてしまった場合は、コメントの処理でページの書き換えが起こるのでクラウドさんはオリジナルの位置を失ってしまいます。つまりは初期位置に戻ります。これの対応としては位置情報のCookieなどを発行するかコメントの書き換え処理等はajaxでwordpressに送って返ってきたものを書き換えるという感じでページの遷移が無いようにしてやるしか無いかと思います。

CSSに関しては、特別今回は何もしてませんが、オリジナルの#mainからfloatは取りました。

さて、困ったことに今回、このスクリプトはひとまずこの状態で動くようにはなったのですが、サイドバーがちょっと動作しないようになりました。できたらサイドバーも従来の動作をして欲しいところなので、そこらをちょっと見て行きたいなと思います。

ちょっと話は戻り、この何かしらのきっかけでスクロールをしたけれども元に戻りたいって時ありますよね。マウスのホィールをくりくりしていると腱鞘炎にもなりますよね。なので自分的にはこのあたりのギミックは必要かと思いました。今回やっているのはボタン(クラウドさん)をクリックするとフリップすると言うことだったので、フリップ前と後の処理でいいわけですが、こういうのをうまく利用すれば、記事途中に書いた、何かしらの参考サイトや資料などがあった時、フリップしてウラ面に書いてあるであろう場所までスクロールして、理解した後もう一度クラウドさんを押せば、メイン記事の続きから読めると言うのは他でも使えそうだなと思ったりもしました。

結局、自分が面倒臭いんで自動化しているだけなんですけどね(笑)

というわけで、今回はこのあたりで。

スポンサーリンク

シェアする

フォローする