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

いやぁ、これはなかなか大変でした。思ったようには動かないもので、現在もまだfooterが画面上部に行ってしまうという状態になっていますが、先日話していたフリップで画面を切り替えというのに一歩近づきました。
諸々の事情と、まだ作っている段階というのもあり当初の仕様とは若干違いますがそのあたりは臨機応変に。

ちなみにスクロールしている最中に時折フッタがチラホラ見えることがありますが現在の仕様です。ウイルスやその他に感染したとかそういうことはありません。

またモバイル端末でも1280pxの横幅を表示できるものはクラウドさんが邪魔だと思うので縦に画面を回転させられるのであればそれで見て下さい。

Simplicityを少し改造してみた 番外編3 スペースの有効利用のアイデアみたいなの
PC画面だけを想定しての話です。モバイルだとこの手法よりも左右にスワイプさせた方がいいだろうと思うのですが、デザイン次第だとできなくもないの...

試作3号

いきなり3号になっていますが、そのあたりは気にしないように。

jsFiddleでやっている間はそんなに大変じゃなかったわけです。ボタンを押せばくるりとフリップするだけですから。ついでにクラウドさんが右向いたり左向いたりするようにもしましたけど、そういうのは極簡単な話です。

さぁできた、いざ実際にWordpressの方へ搭載してみようとすると困ったことがいくつかありまして、例えば現在もまだ修正しきれていない、

  • フッターが画面上部に逃げてしまっていて見えない(position:fixedでは見える)。
  • Simplicityの構成もあって無駄なタグを入れると画面が崩れてしまう。
  • ChromeとFirefoxしか試していない(これは仕様です(笑)linux上での最新版で試してます)
    • Chromium 38.0.2125.111、 Firefox 33
  • せっかくフリップしてコメントが入るようになっているにも関わらず、コメント欄までスクロールに追従させていない

など、まだまだできてないことが多いわけです。ただまぁ可能性みたいなものは見えてきたようにも思います。

さて、内容ですが、ちょっと前に「Topへ戻るボタンをjQueryだけで場所を変える」というのをやりました。

Simplicityを少し改造してみた 番外編1
現在テストで、できるかどうかも含めてTopへ戻るボタンの位置をjQueryのみで移動させています。できるかどうかで言うとできるのですがテスト...

今回のテストで、番外編1のトップページへ戻るは一時停止して通常の動作をする右下のボタンになっていますが、それを利用しています。

コメント欄は #comment-area と言うIDでそれをクローンしてフリップするウラ面に配置しています。そのため、コメント欄が2つある感じになります。記事下のコメント欄を取り除くことも可能です。フッターが画面上部に消えてしまった件もあって現在は2つ存在する仕様になっていたりします。

方法的にはどうすればよいかというと、

jQuery部分

このような感じ。

フッターの件でわかったことはコメント欄が記事下にあってもなかってもフッターは消えてしまうと言うことです。おそらくフリップさせる前面、後面を position:absoluteで絶対指定してあるからだと思います。なので #body-in やサイドバーあたりの関係性をもう少し調べてみないと解決できないようにも思います。上にも書きましたがfooterは存在しており画面上部に飛んでいってるだけなので、違う方法で表示させることは可能でしょうが何かしらの解決策を考えてみたい所。

jQueryのスクリプト自体は簡単な仕様になっています。ただ、元々ある構成をいじるための処理がしてあって、

このような感じになっています。前回書いたデータURLスキームの部分はCSSに移して、background-imageで表示しています。TopボタンをjQueryのみで移動させる手法と同じく左側にマージンを入れて現在の位置に表示してあるので、画面が広くなっても狭くなっていっても現在の位置でおそらくついてくるだろうと思います(ただし表示画面が1150px以上の場合)。

Simplicityを少し改造してみた 番外編3 スペースの有効利用のアイデアみたいなの
PC画面だけを想定しての話です。モバイルだとこの手法よりも左右にスワイプさせた方がいいだろうと思うのですが、デザイン次第だとできなくもないの...

まず、クラウドさんを#mainのタグの前に入れます。#mainにcssで新たに新設したclass.frontを追加して、#mainの下に#main2を新設します。#main2にはclass.backを追加します。この時、divができるだけですからフリップした時に背面が表示される処理がしてあっても画面上は何も変わりません。なので#main2に#mainと同じ高さと幅、パディング等を追加します。
すでに#main2はできているので、コメント欄を#main2にクローンします。

#mainと#main2をwrapAllで囲みます。idはflipと付けて親にします。これをつけておかないと水平反転してくれなかったので急遽今しがた付けました。

これで動作させる下準備ができたので、後はアクションを追加していきます。

jQueryではIDセレクタで走査した方が速いのですが、ひとまずクラウドさんをcloudと言う変数にしておきます。

$(cloud).on(“click”,function (e) {} クラウドさんをクリックしたら{}中の処理と言う感じです。
if (cloud.hasClass(“fliped”)){} は、最初はfliped(スペルが正しいかどうかは別として)を持っていないので必ず elseの中が実行されます。つまり、クラウドさんをクリックしたらclass.frontを持ってる要素は水平方向にローテートして、class.backの要素は0つまり普通の状態(正面)になり、かつクラウドさんにclass.flipedを追加します。すると、今度クリックした時にはクラウドさんはflipedを持っているので持っている所の処理になります。
ここで裏表をローテートさせる処理をしているわけです。

さてこれでjQueryの部分としてはフリップさせることができるようになりました。後は利便性を考えてスクロールした時にクラウドさんがスクロールに追従してくれると嬉しいのでその処理を書きます。

まぁよく見るスクロール追従のスクリプトです。1点あまり見かけない方法としては、setTimeoutを利用しているところかも知れません。$(window).scroll(function(){});の中でconsole.logを入れてスクロールの値を拾ってみるとChromeとFirefoxでは値が違うようですし、ここらはブラウザでいじれる部分です。ただその値のログを見るとあまりにもたくさんの値がズラリと並ぶのが見えると思います。

常に値を取る必要がある場合であればそれは正しいだろうと思います。ただ今回のようにスクロールに追従するだけであればスクロールが終わった時の値だけが見つかれば良いので、スクロールが終わって0.3秒(?)たてば処理をすると言うようなことをしています。たしか1000で1秒だったと思うので0.3秒かな。

なのでクラウドさんもスクロールから若干遅れてついてくると思います。
jQueryの処理的にはこれだけです。

次にCSS。

CSS

今回追加したCSSはこのようになっています。jQueryも含めそんなに大げさな内容では無いというのが見ていただけると思います。大げさになるのは今後だろうと思うんですが(謎

フリップさせる部分のcssはどこまで対応しているのかわからないので一応ChromeとFirefoxはプレフィックス入れておきました。クラウドさんのデータスキームは書き出すとエライことになるので省略してます。

クラウドさんの所に z-index:10 とかと入れてありますが、たぶん何でも良いと思います。1より大きければ#mainにはz-indexが入ってなかったように思うので。.frontの所に1行分開いてますが、ここにはz-index:1が入れてありました。その効果があるのかどうかわからないぐらいだったので消しました。

フリップさせるような処理は普段あまり書かないので見慣れない奴もチラホラ出てきましたが、基本的にそんなに難しいトリックやハックを使っているような箇所はないので、おそらく「ふーん」と言うぐらいのものだろうと思います。

さて、この後は、コメント欄の追従もそうですが、ウラ面に何を入れるかとかも考えないといけません。ajaxでphpを操作すればwordpressの関数の値は拾えると思うので色々できそうなんですけれども、ウラ面のスペースをどう活かすかは案外考えどころです。
何かを抽出できるようにした場合、コメント欄を追従させるためにはもうひと工夫がいるかも知れませんし、もうひとつクラウドさんと違う何かしらを設置してそこをクリックすればコメント欄に行けるとした方が良いようにも思いますし、そうなるとウラ面を何かしらの役目を持たせてチラ裏見たらちょっと得したぐらいのワンポイントが欲しい所です。

何かふと思ったことがだいそれた事になってきたような感じがしますが、まぁマッタリと行こうかなと思ったり。

スポンサーリンク

シェアする

フォローする

コメント

  1. Hidekichi より:

    footerが画面外に消えていたようになってたのはcontainerの中身がfloatで回りこんでいるため高さを持たない状態になっておりそれが原因でfooterが下に追いやられないのが判明。
    container自体じゃなくても、その中身がcontainerを押し広げてくれればいいんだけれど、どうもうまく行かない。
    力技でChromeの方はそれらしい形に移動できたけどFirefoxがダメだ。

  2. Hidekichi より:

    コメントテスト。
    フリップさせてコメントできるかのテスト