スマホ閲覧時、画面を下へスクロールすると、スライドイン(ライト)が浮き上がってしまいます

Simplicityの特徴 フォーラム 不具合報告 スマホ閲覧時、画面を下へスクロールすると、スライドイン(ライト)が浮き上がってしまいます

46件の返信スレッドを表示中
  • 投稿者
    投稿
    • #26934
      ikeda
      ゲスト

      わいひらさん、こんにちは。
      素敵なテンプレートを利用させて頂き、ありがとうございます。

      不具合としてご報告して良いのか迷いましたが、ユーザビリティの観点からとても気になってしまいましたので、ご報告させて頂きます。

      スライドイン(ライト)を選択しているのですが、このスライドバーが、画面を下にスクロールした際に上に浮き上がってしまいます。
      上にスライドさせると、下に下がります。
      ブログの文章を読んでいただく際に、集中しにくい印象です。

      画面下に固定されると良いなあ、と感じました。

      キャッシュ系プラグイン停止、mod_pagespeed OFF、ブラウザキャッシュで確認済みです。

      アンドロイド4.1.2のブラウザと、ihpne6のSafariの実機で不具合を確認しています。
      (ihpne6のChromeでは不具合がでませんでした)

      確認用:
      http://tsuwari.around35.com/

      お時間がある時にでもご確認いただけましたら幸いです。
      (cssをかなりいじっているため、私の不注意が生んだ不具合でないか気を付けてチェックしましたが、もし私の不注意だったら本当にごめんなさい。反省して滝に打たれて来ます)

    • #26936
      ikeda
      ゲスト

      何度も申し訳ありません…

      ブラウザキャッシュで確認済みです⇒ブラウザキャッシュクリアで確認済みです、の間違いです。
      iPhoneの綴り間違いも失礼しました><;

    • #26937
      がちょぴん
      ゲスト

      ikedaさん初めまして。

      スマホ端末がないのでどうなっているのか分かりませんが、
      不具合部分をスクショして添付すると、わいひらさんも把握できるかもしれません。
      画像アップロードの手順については、下記のページにてご確認してみてください。
      ちなみに、合わせてこちらのページにある内容もチェックして確認してみてください。

      URL:http://goo.gl/QgHxIa
      URL:http://goo.gl/jYUa8s

    • #26947
      アバター画像わいひら
      キーマスター

      ikedaさんのサイトの不具合はAndroidエミュレーターのAndroidブラウザで確認しました。
      スライドイン用のボタン群が上下するということですよね?
      ただ、現在このSimplicityサイトも、「スライドイン(ライト)」にしているのですが、不具合を確認できませんでした。
      一度、このサイトのスライドインボタンを確認してもらってよろしいでしょうか?

    • #26951
      hidekichi
      ゲスト

      >わいひらさん

      メニューとかを出した時に、スクロールしていくとメニュー部分含め画面下の閉じるボタン等が上にせり上がるってことではないでしょうか?
      一番下までスクロールした時、上に上がると言うか。

      たぶん、スライダー等を挿入している部分の問題でしょうか?

    • #26959
      ikeda
      ゲスト

      がちょぴんさん、hidekichiさん、コメントありがとうございます!
      そしてわいひらさん、迅速なご確認とご対応ありがとうございます!!

      がちょぴんさん、ご案内頂きました2つ目URL先は確認済みです。
      初めに申し上げておけばよかったです、言葉足らずでお手数をおかけしました@@;
      ご親切にありがとうございました。

      Simplicityブログさんのスライダーを確認させて頂きましたが、同様の症状が出ています。
      念のため相方のアイフォン6でも確認しましたが、やはり当サイト、Simplicityサイトさん共に同じ状態です。

      がちょぴんさんにアップロード先をご案内頂きましたが、動画の方がご確認頂きやすいと思いまして動画で作成しました。そうしたらば容量が大きすぎて、当ブログサーバーにアップさせて頂きました。
      (軽量化のスキルが無く申し訳ないです…)

      http://tsuwari.around35.com/0523/01.MOV

      ご面倒をおかけしますが、よろしくお願いいたします。

    • #26974
      アバター画像わいひら
      キーマスター

      ikedaさん、動画ありがとうございます。
      iPhoneで、スライドインボタンのその動作に関する見解は、以前書いたので以下のトピックを参照してください。
      トピック: モバイルメニューをスライドインにして、iPhone5で閲覧してみると、メニューが浮いて見える?

      Simplicityの既知の不具合と対応策まとめに書いた「スライドインメニューボタンの閉じるボタンが下に消えてしまう」の不具合に対応するため、ブラウザの高さからボタンの高さを引くという形でスライドインボタンの位置を決めているのが原因です。
      iPhoneの、下の方にボタンがあるので、そのせいで位置がずれるのではないかと考えています。
      実装部分は、buttons-footer-mobile.phpの以下の部分です。

      //一部ブラウザでスライドインメニューボタンを押すと「閉じる」ボタンが消えてしまう不具合対策
      function adjustSlideInButtons() {
        var windowHeight = jQuery(window).height();
        var windowWidth = jQuery(window).width();
        var buttonsHeight = jQuery('#footer-mobile-buttons').height();
        jQuery('#footer-mobile-buttons').css({
          'top': windowHeight - buttonsHeight + 'px',
          'width': windowWidth + 'px',
        });
      }
      //画面サイズリサイズ時
      jQuery(window).resize(function() {
        adjustSlideInButtons();
      });
      //ドキュメント読み込み時
      jQuery(document).ready(function() {
        adjustSlideInButtons();
      });

      hidekichiさん、何か良い解決方法などありますでしょうか?

    • #26983
      アバター画像わいひら
      キーマスター

      iPhoneは持っていないので、実機での動作確認はしていませんが、ちょっと解決方法が思いついたので当サイトに実装してみました。
      どなたか、iPhone実機を持っている方は、このSimplicityサイトのスライドインメニューボタンの動作を確認していただけると助かります。
      ブラウザキャッシュを設定している場合は、キャッシュが残っている場合もあるので、リロードするか、キャッシュを削除するか、ブラウザのシークレットモードで確認する必要があるかもしれません。

      これでダメなら、ちょっとどうしたらいいかわからないかも。
      iPhoneのボトムに出るボタンの表示、非表示時とかのイベントをJavaScript(jQuery)とかで取得できるのなら何とかできるのかもしれませんが。

    • #26989
      ikeda
      ゲスト

      わいひらさん、ご尽力ありがとうございます。
      ブラウザキャッシュクリア後に再度確認してみましたが、スライダーが浮く状態に変化は見られませんでした。
      また、アンドロイド4.1.2上でメニューボタン、スライドボタンをそれぞれ押してみたのですが、「×」を押した後の画面がおかしな表示になっておりまして、念のためこちらも連携させて頂きます。

      ■menuを押して、メニュー画面が現れた時のバーがこのような表示に

      http://netakiri.net/uploader/src/up0107.jpg

      ■menu→×の後、このような表示に

      http://netakiri.net/uploader/src/up0108.jpg

      ■sideber→×の後、このような表示に

      http://netakiri.net/uploader/src/up0109.jpg

      ―――

      実は以前、http://nelog.jp/wordpress-mobile-slide-in-menu →こちらの記事を参考に、当方の別のブログ(他者作テンプレート使用)でスライダーを反映させましたら、やはり同じような状態に悩まされまして、あれこれ苦戦の末に、アイフォンからもアンドロイド4.1.2からも実機で問題なく見られる状況にはなっています。
      ただ、本当に私は基本知識がなく、10時間以上かけていじりまくった末なので、どこをどうしたのが良かったから現状の状態になっているのがわかりません…

      関係ありそうなphpやcssファイルなどをアップしましたので、使えそうであれば使って頂けたらと思います。
      (当方本当に素人で、色々おかしかったり、汚かったりしそうで恥ずかしいですが…><)
      http://tsuwari.around35.com/0523/sidrtmp.zip

    • #26991
      がちょぴん
      ゲスト

      得意の情報収集で解決方法発見しました。

      「Sidr」最新版(1.2.1)利用していると、Androidでは非常に相性悪いそうです。
      旧バージョン(1.1.1)にあるjQuery コードを「sidr-package-1.2.1」に上書きする事で改善できるそうです。

      URL:http://goo.gl/AazuBT

    • #26994
      アバター画像わいひら
      キーマスター

      #26989
      あらら、以前より悪くなってしまいましたね。
      元に戻そうと思います。
      やはり、iPhoneはその下のボタンが鬼門です。いずれ既知の不具合で公開でもしとこうかと思います。
      上でアップされた、動画をYouTubeにアップして埋め込めるようにして利用して良いですか?不具合をわかりやすく説明するために。

      Androidは、僕のテスト環境では、正常動作しているので、もしかしたらブラウザキャッシュが原因だったということも考えられるかもしれません。わからないですけど。

      #26991
      そんな相性問題が。明日試してみます。

    • #26997
      アバター画像わいひら
      キーマスター

      ikedaさん

      出来れば、スクロールの動きを見たいので、もう一度、#26959みたいな動画をアップしてもらってもよろしいでしょうか?
      iPhoneの下に出るボタンと、新しく試したコードのスクロールとの兼ね合いを見てみたくて。
      もし、よろしかったらよろしくお願いします。

    • #26999
      ikeda
      ゲスト

      わいひらさん、動画がお役に立てば光栄です、お好きにお使いくださいませ。

      がちょぴんさん、私が他テンプレートでスライダーが問題なく動作出来るようになった際も、Sidr旧バージョンに書き換えてだったと思うのですが、確かそれだけではやっぱりだめだった気がします。
      他の部分でもいくつか何かやって使えるようになった気がします。
      他のテンプレートでの利用でしたので、不確かすぎる情報で恐縮ですが…

      今、別の人のアンドロイド携帯で確認したのですが、やはり写真のようなおかしな表示になりました。
      それに加えて、menuを押すとなぜか違うページに飛ばされる更に不可思議な現象が…
      スライダーの後ろにあるテキストのリンクを押してしまったというわけでもないようです。

    • #27001
      アバター画像わいひら
      キーマスター

      #26997にも書いたのですが
      現在の、Simplicityサイトのスライドインボタンで#26959の動画内で行っている動作の動画のアップは無理でしょうか?(メニューなどを表示させないで上下にスクロールするだけのやつ)
      やっぱり、上下にスクロールさせても、前回の動画とと全く同じ動作ですか?(←menuボタン動作とかよりそれが一番知りたかったので)

      Androidは、ブラウザと端末は何でしょうか?
      僕の環境では、Chromeと、Androidブラウザでいけたのですが。

    • #27002
      ikeda
      ゲスト

      更新ボタンを押さずにコメントを打ったため、送信時点で最後のコメントを拝見しておらず、質問を無視する形になってごめんなさい。

      アイフォン6のSafari での動作は、トピックを立てた時点から変化ない状態です。浮いています。

      Chromeはアイフォン6・アンドロイド共に問題なく正常動作しています。

      アンドロイド携帯でのブラウザでの一連の流れを映しました。
      手が足りず、横向き撮影となってしまいました、ご了承願います。

      http://tsuwari.around35.com/0523/20150525.MOV

      端末は、ギャラクシー(4.1.1)とF03E(4.1.2)です、どちらも結構古いです、すいません。

    • #27003
      ikeda
      ゲスト

      大事な点が抜けました。
      動画で撮影しましたが、アンドロイドブラウザでは、スライダーが浮いていたのが浮かなくなりました。

    • #27019
      アバター画像わいひら
      キーマスター

      アイフォン6のSafari での動作は、トピックを立てた時点から変化ない状態です。浮いています。

      ありがとうございます!
      おかげで問題が明確になりました。
      現在、スクロールする事に、高さをアジャストする処理にしているのですが、それで合わないということは、iPhoneで浮いてしまうのはどうしようもないのかもしれません。
      何か別の表示方法を考えた方がいいのかもしれません。
      とは言っても、上部に表示すると邪魔そうですし、どうしたらよいものか。

      それにしても、機種によっては、違うものですね。
      動画参考になりました。ありがとうございます!

    • #27021
      アバター画像わいひら
      キーマスター

      ちょっと、当サイトのスライドインボタンを上に表示するようにしてみました。
      多分これなら(見た目は抜きとして)動作的には、問題なくなるかと思います。
      問題なようなら、上部表示も検討したいと思います。

    • #27028
      hidekichi
      ゲスト

      closeボタンをパネル下に入れてrightにマイナスpx入れたら必ずパネルの下部にくっつくと思うんですけれども、僕個人的には、それよりもパネル開いたまま下にスクロールしていくとパネルが上にせり上がってパネルの高さ(100vhでスマホ縦幅)ぐらいのスペースが開くほうが気になったり。
      ん?その話なんですかね(笑)

      sidrのissueにも同じようなの(Scroll overflow problem #253)があったんですが、コレとは別の話なのかな?

    • #27030
      アバター画像わいひら
      キーマスター

      closeボタンをパネル下に入れて

      パネルというのは、スライドインしてくるエリアのことでしょうか?

      せり上がってパネルの高さ(100vhでスマホ縦幅)ぐらいのスペースが開く

      動作環境はなんでしょうか?

      追記:いろいろ操作して意味がわかりました。PCのブラウザで不具合が再現できない以上、こればっかりは、Sidr側に何とかしてもらわないと僕にはどうにもできないです。

    • #27034
      hidekichi
      ゲスト

      >>わいひらさん

      >パネルというのは、スライドインしてくるエリアのことでしょうか?

      そうです。一般的にパネルだと思ってたんですが…(汗)
      jQuery mobileでもパネルウィジェットですし…ん?うーん、たぶんそうだった記憶があります…そうだったような…改めて言われると自身が無かったり(震え声

      動作環境は、PC版 chrome デベロッパーツールの iphone5とgalaxy s4、その他諸々スマホあたりなら大抵なるのではないかと思ったり。
      パネルを開いた状態で#container部分をスクロールさせて、だいたい画面縦幅ぐらい残したあたりまで来たらパネル自体はそのままあったり、上にせり上がったりですけれども(端末osにより違うのかな)、中身(グローバルメニュー部分)がせり上がるのはアレかなぁと思ったりするわけです。#27028のリンク先の画像とだいたい同じ感じです。

      ※ いじくったりした後の感想も含まれているかも知れません(笑)

      もしかすると、メニュー数が少ないからなのかもと思ったりもします。これこそスクロールに追従させて無理やりもってけばいいんですけどね(笑)

      ちょっといじくった後なので違うかも知れませんが、パネルを開いた時に#containerの部分がパネル内上部のcloseボタンの高さぐらい下がるように思うんですけれども、closeボタンのwidthがパネルからはみ出しているからですかね?
      はみ出すのはうちの環境だけかもしれません。

      後、まぁ次のはcssでなんとでもなる所ですが、パネルを閉じている状態(いわゆるページにアクセスした直後の画面)で、そのままスクロールして画面下部に到達すると、コピーライトにスマホのメニュー(sidrやら検索やらの#footer-mobile-buttonsだったかな)がかぶるのでメニューの高さ分はpadding(marginかな?)を下げた(あけた)ほうが良いかも知れませんね。

    • #27036
      アバター画像わいひら
      キーマスター

      僕のChromeデベロッパーツールでは、再現できないです。
      AndroidエミュレーターのChromeでならなるんですけど。

      ちょっといじくった後なので違うかも知れませんが、パネルを開いた時に#containerの部分がパネル内上部のcloseボタンの高さぐらい下がるように思うんですけれども、closeボタンのwidthがパネルからはみ出しているからですかね?

      ちょっと、どういった動作のことか文字だけでは想像できないです。申し訳ないです。

      padding(marginかな?)を下げた(あけた)ほうが良いかも知れませんね。

      これはそうなんですが、もうメニューボタンは上にしてしまおうかと思っています。
      下にすると、環境によっては、チョロチョロ動いて邪魔なような気がして。
      当サイトも今そのようになっています。

    • #27044
      ikeda
      ゲスト

      こんばんは、取り急ぎでごめんなさい、スライダー上にご変更頂いてからの、実機で確認した状況についてご連携しますね。

      ■アイフォン6 Chrome 

      全く問題なく動作しています。スライダーの浮き沈みなし、menu、sideber共に×印も出ます。

      ■アイフォン6 Safari 

      スライダーの浮き沈みなし、menuは×印は記事上部では出現しますが、下部では出現しません。
      記事の途中で開くと出現する面積がどんどん減って行って、記事後半あたりから出現しなくなります。

      http://netakiri.net/uploader/src/up0111.png
      http://netakiri.net/uploader/src/up0112.png
      http://netakiri.net/uploader/src/up0113.png
      http://netakiri.net/uploader/src/up0114.png

      動画でお見せするとわかりやすいのですが、ちょっと時間が作れずごめんなさい。
      必要でしたら改めて明日以降動画にします。

      sideberは問題ありません。

      ■アンドロイド4.1.2 Chrome

      ちょっと、動作が危うい瞬間がありますが(バーが一部だけしか表示されなかったり)、スクロールしているうちに通常表示に戻る感じです。
      問題ない、と言える程度かもしれません。

      ■アンドロイド4.1.2 ブラウザ
      menu,sideber共に、×印がでません。
      バーの位置が下から上に変わった他は、最後に連携した動画の状態とほぼ変わりない動作です。

    • #27051
      Ozk
      ゲスト

      今実機iPhoneで確認したら、しっかり下に張り付いて浮き上がることは無くなっていました。「×」ボタンが隠れたりはありますが、かなりいい感じに動作しています。

      ただ、iPhone の Safari では、スライドインのボタンをタップすると最初に Safari のボタンが下から出てくるように表示されるので、1回目のタップは無視されることになり、メニュー等を表示させるには最低2回のタップが必要になりますので、スライドインのボタン類は上に表示する方が操作性が良いかと思います。

      好みの問題もありますので、設定で上にするか下にするか選択できるとありがたいですね。

    • #27057
      アバター画像わいひら
      キーマスター

      ikedaさん
      詳細な報告ありがとうございます。
      すごくわかりやすいです。
      今実は、ボタン動作の仕様を変更していて、スライドインボタン部分の×印はでないようにしています。
      その代わり、スライドインメニューや、スライドインサイドバーを開いたときに、本文部分をクリックすれば、スライドインエリアが閉じるようになっています。
      これまでの、「ボタンが横にずれるタイプ」の場合、PCブラウザでは、問題なく動作するのですが、スマホは、機種やブラウザによって、おかしな動作になるので、使用を変更した次第です。
      何度直しても、「こっちのスマホブラウザでは動作するけど、もう一方のスマホブラウザでは不具合が出る」みたいなことが頻発するので、動作自体を変更しました。

      今は、スマホのブラウザにキャッシュが残っているので、以前のボタンが表示されているのだと思います。
      ページを、リロードするか、ブラウザのキャッシュを削除することによって、新しいリソースが読み込まれ、新しい動作になると思います。

    • #27058
      アバター画像わいひら
      キーマスター

      Ozkさん

      今実機iPhoneで確認したら、しっかり下に張り付いて浮き上がることは無くなっていました。「×」ボタンが隠れたりはありますが、かなりいい感じに動作しています。

      隠れるのは、新しい仕様です。本文部分を、タップするとスライドエリアが戻るように変更しました。

      ただ、iPhone の Safari では、スライドインのボタンをタップすると

      iPhoneのSafariは、どういったものなのかみたことがないので、ちょっと想像がつかないです申しわけありません。
      よかったら、以下にあるアップローダーに画像をアップして、ここに貼り付けてもらえると嬉しいです。

      好みの問題もありますので、設定で上にするか下にするか選択できるとありがたいですね。

      今は、上か下かで、すごく悩んでいます。
      機能で、どちらかにできるのは、確かにいいかもしれません。
      もし、他のスマホユーザーの方が見ておられましたら、上と下、どちらが良いかアドバイスいただけると嬉しいです。
      とりあえず上1票ですね。

    • #27062
      がちょぴん
      ゲスト

      情報収集したらやっぱりAndroidだと動作相性悪いみたいです。
      新しい仕様にしても利用者から動作おかしい等の投稿来たら、
      わいひらさん含め利用者もお手上げ状態になるのかなと思い、
      代わり(Sidr)になるサイドメニューを探してきました。

      上記にあるように、Androidが問題に改善しない限り、
      どのサイドメニューも動作相性悪いかもしれませんが、
      そこは試さないと分からないと思うので、探したサイドメニュー提示します。

      mmenu:http://goo.gl/TzbwA
      参考:http://goo.gl/NWcsTC

    • #27065
      Ozk
      ゲスト

      読み込んだ直後の表示では、画面の一番下にスライドインのボタンがあります。

      この中のボタンをどれかタップすると、下からSafari(iPhoneの標準ブラウザ)のコントロールボタン(前後ページへの移動やブックマークなど)が出てきます。

      iOS の Safari では、画面の下部をタップすると必ずこのコントロール部が出てくる仕様になっています。タップしたものがリンクであっても、広告であっても、です。

      今回の場合、スライドインのボタン類が画面下部に表示されていますので、どれかをタップすると必ず最初の1回目はSafariのコントロールを呼び出す動作になってしまいます。これが出た後は、スライドインのボタン類を操作することができるようになります。

      目的の操作のためにタップする回数が一回増えるだけではありますが、ユーザーが意図していない動作が最初に来ると、一瞬「ん?」と戸惑ってしまいますね。

    • #27066
      アバター画像わいひら
      キーマスター

      現在、当サイトで、以下のようにテスト動作させています。

      固定ページ:上にボタンを配置
      http://wp-simplicity.com/downloads/

      固定ページ以外:下にボタンを配置
      http://wp-simplicity.com/simplicity1-6-8/

      いろいろ試していただけると幸いです。

      現在、Androidブラウザだけ、ちょっとした動作不良をしています。
      以前も、出ていた、Androidブラウザで、メニューボタンなどを押すと、画面が遷移するというやつです。
      これはどうやら、Androidブラウザの「Menu」ボタンを押すと、スライドインしてきた「クローバーナビのメニュー」にまで、クリック動作が伝わるからと思われます。

      メニューボタンが押されると、

      グローバルナビのメニューのところまでクリックされてしまう。

      なんか良い方法はないものか。
      #26991のがちょぴんさんの方法だと、コンテンツをクリックするとスライドエリアが閉じる新機能が使えなくなってしまいますし。
      スマホブラウザの、仕様の違いはかなり厄介ですね。

    • #27068
      アバター画像わいひら
      キーマスター

      #27062
      今から、新しいプラグインを使うのは、実装からテストから何からまですべて最初からやり直しになってしまうので、ちょっとやりたくありません。
      新しいものもうまくいく保証はないので、もう出来ればこんな大変な実装は、控えたいです。
      せっかく探していただいたのに、申し訳ないです。

    • #27069
      アバター画像わいひら
      キーマスター

      #27065
      画像と、詳しい説明ありがとうございます。
      よくわかりました。
      iPhoneのSafariだとページの下の部分をタップすると、必ずそのボタンが出ちゃうんですね。
      ということで、#27051に書かれているように、上が良いということなんですね。

    • #27070
      がちょぴん
      ゲスト

      いえいえ大丈夫です。

      Ozkさんの投稿(#27065)・わいひらさんの投稿(#27066)見て、
      問題現象等把握する事ができましたので大丈夫です。

      ちなみに私個人の意見として、上設置するのに1票です。
      Ozkさんの投稿見て、会社で使用したiPhone操作した時、
      コントロール部が出ていた事を今更思い出して気付きました。

    • #27071
      アバター画像わいひら
      キーマスター

      スマホは、ブラウザの違いでここまで違うものかと絶賛困惑中です。
      PCだと、IEだったとしてもここまでの動作の違いはないような気がします。
      これで、上が2票ですね。確かに、下だと、ややこしいボタンと競合したりするので、上が無難なような気がしますね。

    • #27072
      アバター画像わいひら
      キーマスター

      とりあえず、SidrにおけるAndroidブラウザの、クリックの不具合は修正できたかも。
      以下の方法で。
      1.1.1 Perfect. 1.2.1 Broken in android ・ Issue #144 ・ artberri/sidr ・ GitHub

      当サイトもにも適用しておきました。
      ただ、Androidブラウザでちゃんと動作させる場合、設定からキャッシュを削除した後、サイトを表示させて再リロードする必要があります。

      これで、スライドインボタンを上にするか、下にするか以外は、やりたいことはほぼできたかも。
      何か、おかしなところがありましたら、是非教えてください。

      スライドインボタン上サンプル
      http://wp-simplicity.com/downloads/

      スライドインボタン下サンプル
      http://wp-simplicity.com/simplicity1-6-8/

    • #27073
      アバター画像わいひら
      キーマスター

      #27062
      がちょぴんさんの紹介してくれたjQueryプラグインを今じっくり見ているんですけど、こちらもかなりよさそうですね。
      既に、Wordpressのプラグインにもなっているんですね。
      jQuery.mmenu WordPress plugin demo
      デフォルトのデザインは、こちらの方がおしゃれかも。

    • #27083
      Ozk
      ゲスト

      iPhoneの実機で色々操作してみました。
      スライドインボタンが下でも、スクロールでずれなくなっていますので、表示の問題はありません。
      ただ、検索ボタンをタップしたときに検索ボックスが出るところまでは良いのですが、ボックスをタップしてキーボードが表示されると検索ボックスがキーボードの背後に隠れてしまいます。画面をスクロールすると見えるようになりました。
      隠れたままでも入力は可能ですが、ちょっと戸惑いますね。

      スライドインボタンが上の方では、全て正常に動いている様です。

    • #27085
      ikeda
      ゲスト

      実機検証報告です。

      ■アイフォン6 Chrome 

      スライダーが上の時も下のときも、問題なく固定されています!
      動作におかしなところは見られませんでした。

      ■アイフォン6 Safari 

      上に同じです!

      ■アンドロイド4.1.2 Chrome

      上に同じです!

      ■アンドロイド4.1.2 ブラウザ

      バーが上にある時のみ、

      menuボタン押す→上の「×」を押すとその真後ろにあるseachボタンが反応して検索窓が開きます。

      sideberボタン押す→上の「×」を押すとその真後ろにある「↑TOP」ボタンが反応して記事真上に強制連行
      されます。

      最近のアンドロイド機種でも同様の症状が出てしまうなら、下に配置したほうが良いのかな、なんて思いました。

      ―――
      あと、全ての機種で感じたことなのですが、スライダーバーのsearchを押すと出現する検索窓が心なしか以前より狭くなっている気がしました。
      でも気のせいかもです…変わりなかったらごめんなさい。

    • #27087
      アバター画像わいひら
      キーマスター

      Ozkさん

      報告ありがとうございます。
      キーボードは、HTML要素ではないので、もしかしたらどうしようもないかもしれません。
      もしよかったらで良いので、イメージを掴むため、またキャプチャをもらってよろしいでしょうか?

    • #27088
      アバター画像わいひら
      キーマスター

      ikedaさん

      報告ありがとうございます。

      menuボタン押す→上の「×」を押すとその真後ろにあるseachボタンが反応して検索窓が開きます。

      sideberボタン押す→上の「×」を押すとその真後ろにある「↑TOP」ボタンが反応して記事真上に強制連行
      されます。

      おそらくですが、ブラウザのキャッシュが残っているのではないかと思います。
      設定の、「プライバシーとセキュリティ」のところからキャッシュを削除してリロードしてみてください。
      こちらの、エミュレーターのAndroidブラウザでもそうしないと、以前のスクリプトが残ります。(個別機種の問題という可能性もないわけじゃないけど)

      あと、全ての機種で感じたことなのですが、スライダーバーのsearchを押すと出現する検索窓が心なしか以前より狭くなっている気がしました。

      僕も、さっき気づいて、既に修正してあります。スマホブラウザをリロードしたら、多分改善されていると思います。

    • #27089
      アバター画像わいひら
      キーマスター

      あと、今回の修正で、暗転効果もつけておきました。
      Androidブラウザでは、ぼかし効果にまだ対応していないようなので。

      それと、コンテンツをクリックしてスライドエリアをもとに戻す際にアドセンスが絶対に誤クリックされない仕掛けも組み込んでおきました。

      これで、かなり理想に近いものができたと思います。(キーボードに検索入力エリアが隠れるというのはまだあるけど)

    • #27095
      Ozk
      ゲスト

      検索ボックスの動作です。

      ページのトップで検索ボタンをタップします。

      検索ボックスが表示されます。

      一番下までスクロールして検索ボックスが表示されますが、直後に下から出てきたキーボードで隠れます。

      ちょっとスクロールすると検索ボックスが見えます。

    • #27097
      hidekichi
      ゲスト

      今日現在、見た感じこれまで不具合かな?と思っていた部分は全て解消されているみたいです。
      linuxでchromeですけれども、特に不具合は感じられませんでした。

      で、plugin利用で大変な作業になったと言うのを聞いて、パネルを出すのってそんなに大変だったっけ?と昨日テストサイトを作ってみました。と、言ってもfiddleでですけどね。しかも(完全ではないですけど)レスポンシブ!!(笑)

      動作サンプル

      cssは色々とやらないとアレですけど、jQueryだけだと10数行で実現できるんですよね…全く同じ動作というわけではないんですけれども。
      左右のパネルの操作があるので10数行なんですが、左だけなら5行ぐらいと言う(笑)
      jQuey mobileだったらもっと簡単にタグにroleやらを入れるだけでいけるはずです(汗)
      「だけ」と言うのは言い過ぎかも知れませんが一応参考までに。

      参考サイト: jQuery Mobile panelウィジェットを左右からスライド表示するには | jQuery Mobile逆引きリファレンス

      せっかくここまでやって問題改善され、ほぼ完璧に動作しているので、後は上下どちらかのアンケート次第で完成ですな。

      僕個人で何かしら作るとしたらメニュー自体をひとまとめにして、必要な時だけメニュー項目を表示するようにします。
      例えばこういうの→ http://www.materialup.com/posts/floating-action-button-and-morphing-with-css3

      上記の例で言えば左側にメニュー発火ボタンがあるなら、パネルは自ずと右側からのスライドインだけで良いわけですし、パネルの中身だけ書き換えていけばよいだけですから操作が一貫して使いやすいかも知れません。
      メニューの発火ボタンが右上なら、パネルは自ずと左になるでしょうしデザインしやすいと思います。

      現状のデザインではメニューが横置きなので画面の上下どちらかの選択しか出せないわけですけれども、縦置き(並び)ならメニューが出現する方向は上下で変わりますが、各コーナーに配置可能というのもメリットがあるかも知れません。

      僕が最近思う、「あ、これいいな」と言う発火ギミック: http://www.materialup.com/posts/kickmaterial-category-transitions

      こういうのを集めてる http://www.materialup.com/ はとても参考になります。

      と、まぁ個人の意見はさておき、アンケートとしては僕はiphoneで問題が無いようであれば下に置くのが良いと思います。けどまぁどうなんでしょ、スマホでページをスクロールさせる時って画面真ん中よりやや下辺りから画面操作すると思うんですよね。あんまり上の方で操作しないと思うので。
      そうすると上のほうが邪魔にならないのかなぁ。

      最初はボトムに配置で、画面真ん中越したらトップとかもアリですかねぇ・・・現在どのあたりを読んでいるかをかなり大雑把かつ、相対的な感覚で感じられるかも。鬱陶しいだけだったりして(笑)

    • #27109
      ikeda
      ゲスト

      わいひらさんありがとうございます!
      アンドロイドブラウザの動作、問題ありませんでした!キャッシュクリア忘れですね、本当にすいませんでした@@;

      スライダーの位置についてのアンケートですが、女性としての意見かもしれませんが、上にあると片手の操作が困難になります。私は女性の中でも手が大きい方ですが、それでも指がmenuボタンに届きません。

      下にあると、ギリギリ片手で全部タップ出来る感じです。
      (手のサイズによってはmenu押した後に上に出てくる×印が厳しいかもですが)

      両手使えば良いじゃん、って話なんですけれども、スマホってなんとなく片手操作で完結できるツールって印象がありまして(私だけ?)、そういった意味では下設置が良いなあと思いました。

    • #27128
      アバター画像わいひら
      キーマスター

      >Ozkさん
      キャプチャーありがとうございます。
      おかげで、どういう状態になっているのかがよくわかりました。
      根本的な解決の仕方は、ちょっと今のところ思いつかないですが、カスタマイザー機能で、ボタンを上下選択できるようにしました。

      >hidekichiさん
      僕レベル程度のjQuery能力だと、コードを見ると「なるほどこうするのか!」となりますけど、1から実装を考えるとなると、何日もかかるかもしれません。それに加えて、各スマホブラウザで、動作確認をするとなると、ちょっとすすんでやりたくないですね^^;
      それだけのコードで実装出来るんですね。教えていただいたサイトも含めて、いずれ何かの参考にさせてもらおうと思います。

      >ikedaさん
      キャッシュクリアで、直ったようでホッとしました。
      それで直らなかったら、多分お手上げだったので。

      スライダーの位置についてのアンケートですが、女性としての意見かもしれませんが、上にあると片手の操作が困難になります。私は女性の中でも手が大きい方ですが、それでも指がmenuボタンに届きません。

      なるほど。女性だとそういうこともありますね。
      そういった視点で、スマホサイトデザインを考えた事がありませんでした。すごく参考になります。
      なので、女性の多いサイトでは、ボタンを下にできるように、カスタマイザーで設定できるようにしました。

      手のサイズによってはmenu押した後に上に出てくる×印が厳しいかもですが

      一見わかりづらいのですが、閉じるときは、コンテンツ部分タップで一応できます。でも、案内がないので、やっぱり×を押したくなりますよね。ここら辺はまだ課題かも。

      新バージョンはこちらです。
      http://wp-simplicity.com/simplicity1-6-9/

    • #27131
      Ozk
      ゲスト

      最新版の公開ありがとうございます。
      さっそく使わせて頂いてますが、かなりいい感じになりました。

    • #27136
      ikeda
      ゲスト

      ありがとうございました!動作正常化に加え、バックがぼやける効果もとっても素敵で感激です。
      早速適用させて頂きました。

      我がままなお願いですが、寝ログサイトさんの方に、以前Sidrについて書いていただいた記事
      (http://nelog.jp/wordpress-mobile-slide-in-menu)のような感じで、今回の仕様を他のテンプレでも利用できるような案内の記事を書いていただけたら、物凄く嬉しいです。
      (お忙しいと思いますし、そんな要望がある、位に受け止めて頂ければ…)

      いつもお世話になっているお礼と言うのはおこがましいですが、今後、アイフォンと古いアンドロイドで実機確認が必要な際、(可能な範囲でとはなりますが)協力できたらと思っていますので、お声掛けくださいませ。

      ありがとうございました!

    • #27143
      アバター画像わいひら
      キーマスター

      みなさん、デバッグにお付き合いいただきありがとうございました。

      Sidrプラグインの不具合を直す必要があったりするので、記事として書くのは、かなり大変なのでちょっと無理かもしれません。
      書くことがなくなって、やる気があるときにもしかしたら書くかもしれないけど、先のことはちょっとわからないです。

46件の返信スレッドを表示中
  • トピック「スマホ閲覧時、画面を下へスクロールすると、スライドイン(ライト)が浮き上がってしまいます」には新しい返信をつけることはできません。
スポンサーリンク
アドセンス(大)
アドセンス(大)