- このトピックには23件の返信、2人の参加者があり、最後に
により10年、 4ヶ月前に更新されました。
-
投稿
-
-
タイトル通り、iOS8.4.1で2クリックしないとリンクが飛べない問題が話題となっています。simplicityもSNSのシェアボタンとフォローボタンが、2回クリックしないと機能しません。
iOS8.4.1で2クリックしないとリンクが飛べない問題のとりあえずの解決策 【WordPress用】
上記の方法を試してみましたが、解決しませんでした。自力でテーマをいじって解決しても良いのですが、全ユーザーに影響がある大きな問題だと思うので、開発者側からのスマートな解決方法の提示を望みます。
ちなみに、当方はsimplicity1.8安定版×WordPress 4.1.7を利用しています！
-
私のブログはわかったブログです。今回初めて利用させていただきました。素晴らしいテーマですね。
よろしくお願いします。
-
iOSってiphoneやらipadやらのOSですよね？
そりゃどうやってhoverするんだよって話なので、動作的には当たり前なようにも思います。
画面からセンサーが出ていて空中の指先の位置を把握できるぐらいまで進化すればアレなんですけどね(笑)
Googleはすでにそのデバイスを開発してます。実用化はされてないと思うんですけど。
参考: https://www.youtube.com/watch?v=0QNiZfSsPc0jQueryだと、次のように書けます。
イベントの”click”を予め、window(あるいはdocument)でタッチイベントが発生できるかどうかを調べて、変数にtouchstartかclickかとを割り当てます。
で、通常リンクをクリックしたらページが移動するのは当たり前なのでその処理を書きます。もし例外にaタグがページ移動でない場合は、jQueryの.not()や:not()セレクタなどを利用して、onの第2引数の”a”部分を変えれば例外のaを作れます。
まぁiOSでこれらがイケるかどうかは試してないのと実機がないのでわかりませんけど、まぁイケルんじゃないかなと。touchstartがマズイ場合はtouchendもあります。
以下埋め込めるかテスト
<p data-height=”266″ data-theme-id=”17478″ data-slug-hash=”RWwgdL” data-default-tab=”result” data-user=”Hidekichi” class=’codepen’>See the Pen RWwgdL by Hidekichi (@Hidekichi) on CodePen.</p>
<script async src=”//assets.codepen.io/assets/embed/ei.js”></script> -
はい、埋め込めませんでした(笑)
-
ご報告ありがとうございます。
iOS 8.4.1の:hover問題 – to-R
これですよね。
とりあえず、怪しいと思えるところは以下のファイルで修正してみました。
http://wp-simplicity.com/wp-content/uploads/2015/09/simplicity.zip
ただ、僕自身はiOS環境を持っていないので、動作確認はできないでいます。
もしよろしかったら、動作確認したいただければ幸いです。
ブラウザキャッシュを設定しておられる場合は、一度ページをリロードする必要があるかもしれません。 -
あ、上のファイルは、シェアボタンはまだ修正してませんでした。
ただ、どなたか、iOS8.4.1を持っている方がおられましたら、以下のファイルのフォローボタンがワンクリックで動作するかだけでも教えていただけると助かります。
http://wp-simplicity.com/wp-content/uploads/2015/09/simplicity.zip上記の修正で問題ないようなら、シェアボタンにも適用させたいと思います。（シェアボタンは、変更箇所が沢山あるので。）
-
ありがとうございます。
当方、自力で解決しました。方法をブログ記事にまとめましたので、リンクをしておきます。
iOS8.4.1で2クリックしないとリンクが飛べない問題 Simplicity1.8で解決
対応していただいたファイルですが、当方はすでに新テーマで運用中で、テストすることはできません。すみません！
本サイト(http://wp-simplicity.com) に当ててみるのが一番早いかと思います。
-
ちなみに #31675 のスクリプトをテストしてもらえるiPhoneユーザーはおりませぬか？
今回の問題点は、hoverが仕込んであるリンクにopacityが設定してあると一発でページ移動ができないって話だったんですが、僕の理屈的には、hoverもopacityも問題ではなく、pcの時にはPCの挙動、スマホの時にはスマホの挙動で解決しようよって内容です。
もちろん、スマホはhoverはできませんから、hoverが仕込んである場合は無視されます。というよりタッチしかできませんしね。反応をどちらでするかが僕の一番危惧している所です。
どちらというのは、つまり、touchstart:触った時なのか、touchend:離した時なのかです。じゃ触って移動(touchmove)の時はどうする？って話になる場合もあるかも知れません。
なので、サンプルのaタグに例えばyoutubeとかyahooあたりのアドレスを仕込んで、実際どうなるかを試して欲しいなと思ったりしています。ちなみに、hover&opacity(マウスオーバーで要素を透過)は偶数行のaタグに仕込んでます。なので2つ目か、4つ目のaタグのhrefにアドレスを入れてもらえればhover&opacityのプロパティのaタグの挙動がわかります。
1つ目、3つ目は単純に通常のリンクになってます。これらとは逆にPCの時はどちらもできるので、カーソルがそこまで行けばホバーされるし、クリックすれば移動もします(移動するためにはアドレスを仕込む必要あり)。
サンプルでは、aタグのhrefにアドレスを仕込んでないのでページは飛びませんが、アドレスを仕込んだら飛ぶはずです。 -
もうひとつ、思う所があります。
[a href=”#”]
[p]なんとかかんとか[/p]
[/a]と言うhtml構造があって、
a p:hover{ opacity: .5; }こういうhtmlの構造とcssになっていた場合は、iphoneって1発で飛べないんですかね？
どっちも動作的にはaの中の要素をホバーした時に透過するってことですが、これで飛べないんだったらApple何やってんの？って話になったりします。
もし1発で飛べるのであれば、aタグにhoverを仕込まなかったらいいじゃんと言う根本的な話になったりも(笑)これらも合わせて検証して頂ける勇者を随時募集します。
-
-
あと、かん吉 さんの以下のコードなんですが、間違っているということはないでしょうか。
//$is_ipadを追加 function is_ipad() { $is_ipad = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPad'); if ($is_ipad) { return true; } else { return false; } } //$is_iphoneか$is_ipadがtrueの場合にwp_headにCSSを出力 if($is_iphone or $is_ipad){ function noHoverForIos(){ echo "<style>.snsbs li a{opacity:1 !important;}</style>"; }; add_action('wp_head', 'noHoverForIos'); }else{ function hoverForIos(){ echo "<style>ul.snsp li a:hover{opacity:0.7 !important;}</style>"; }; add_action('wp_head', 'hoverForIos'); }以下の部分なんですが、
if($is_iphone or $is_ipad){
以下ではないかと思うのです。
if($is_iphone or is_ipad()){試しに、僕のiPadではない環境で以下のように実行すると、
var_dump($is_ipad); var_dump(is_ipad());以下のように出力します。
NULL bool(false)NULLということは、中身のないローカル変数を呼び出しているだけではないかと思います。
なので、環境がもしiPadだったとしても、false判定になってしまうのではないかと思います。 -
#31765 の返答です。確かにおかしいですね。
修正しました。ありがとうございました。 -
#31706 の返答です。
手持ちのテストサイトにインストールしてみました。
シェアボタンは機能していませんでした。2回クリックしないと機能しません。
フォローボタンは1クリックで機能しました。本件は、ユーザーさんにテストしてもらうのではなく、わいひらさんがiPhone環境を持って、自力でテストするか、身近なiPhoneユーザーにチェックを依頼する。
それが厳しければ、わいひらさんが、テストサイトを立ちあげて、ユーザーさんにiPhoneでアクセスしてチェックしてもらう。
そのほうが効率的にチェックできると思います。
-
シェアボタンは機能していませんでした。2回クリックしないと機能しません。
フォローボタンは1クリックで機能しました。上にあるテストファイルは、動作確認のためフォローボタンしか修正していないので、意図した通りの動作です。これで、CSSがどういった状態のときに不具合が起こるのか大体わかりました。
ありがとうございました。本件は、ユーザーさんにテストしてもらうのではなく、わいひらさんがiPhone環境を持って、自力でテストするか、身近なiPhoneユーザーにチェックを依頼する。
申し訳ないですが、無料で行っているもので、わざわざそのような環境を購入し赤字になってまで作ろうとは考えていません。
無料テーマで作成している以上、いろいろと動作環境を整えるには限界があります。
あと僕は、身体上の都合でスマホを操作することができません。
http://nelog.jp/profile
購入しても動作確認することはできないので、自力で動作確認は難しいです。周りの人には、iPhoneを持っている人も数人いるのですが、全て女性で「iOSって何？」という方が多く、趣旨を説明しても頼めるほど詳しい人がいません。それに周りの方にはサイトも公開していないもので。
それが厳しければ、わいひらさんが、テストサイトを立ちあげて、ユーザーさんにiPhoneでアクセスしてチェックしてもらう
自分でテストができない以上、それはもう既に先程から行っています。
http://wp-simplicity.com/simplicity1-8-5/これまで、不具合報告をしていただいた方は、みなさん快く動作確認していただけていたため、これまでこの方法で効率的に機能していました。
ですので、ついいつものように気軽に頼んでしまいました。
無理なお願いをてしまい、失礼いたしました。 -
#31791の返答です。
すみません。私の方でチェックするのはまったく問題ないです。わいひらさん自身でチェックできたほうが良いのかなと思いまして。
私はカエレバなどのブログパーツを無料配布していて、同じようなクレームが来ます。解決するたびにサービスが良くなっていきます。
http://wp-simplicity.com/simplicity1-8-5/の存在は知りませんでした。ユーザー側としては、ありがたいです。
わいひらさんのお体については存じ上げません。
Simplicityは素晴らしいテーマだと思いました。利用させていただきたいと考えています。今回色々カスタマイズをしたので、その方法も随時紹介させていただきます。
これからもよろしくお願いします。
-
#31808の追記です。
すみません。勘違いしていました。
私の提案は、最新のテーマを当てたテストサイトを、わいひらさんが公開しておくことです。
http://wp-simplicity.com/や寝ログが、最新のテーマになっていれば、ユーザーさんがテーマをインストールしてテストしなくても動作確認できます。自サイトが最新なら、いち早く問題に気づけるでしょう。
私はテストサイトを持っていたので確認できましたが、そうでないユーザーさんは、自分のメインブログのテーマを切り替えてまではテストしづらいと思います。
とはいえ、私はテスト環境を持っていますので、お困りの際は遠慮なくご連絡ください。
-
まぁ、SimplicityはiOS専門ではないんですから、別に対応したい人だけが対応すれば良いのではないかと思ったりもします。hoverでopacityを使わなきゃ良いわけですし、そんなにたいそうな話ではありません。
iOSを利用している人からしてみれば、アレな部分でしょうけど、本当に問題ならAppleに文句を言うべきなところですしね。hoverもopacityもちゃんと決められた規格なんですから、わざわざそれに対応しなきゃならないなんてのが、お前はIEかと言われるぐらいのアレな部分です。
で、言うだけではアレなので改正案を作ってみました。
SNSのhtmlとcss改造 | codepenそもそもopacityがダメなら擬似要素でbackground-colorにrgbaで透過させればいいじゃんって感じでやってます。オリジナルと同じようなことができます。
それだけではあれなので、htmlの構成の簡略化と、cssにflexを使って、同じようなレイアウトにしてみました。line-heightはできるだけ使わず(テキストを揃えるのに必要な時だけ利用して)、合理化できそうな所はやってみました。アイコンのカラーは、別で書いてますが構造が見やすいようにしてあるだけです。またfontAwesomeのCDNからCSSを読み込んでます。そのため、アイコンが足りない部分は入れてません。
またcssで書くのは面倒なのでscssで書いてますが、view compiledからcssも見れます。何かの参考までに。
-
いつもありがとうございます。今朝になったらbバージョンが出ていてビックリしました。
さっそく、最新バージョン：1.8.5 20150902b にバージョンアップして試してみました。
自分のiOS8.4.1で確認したところ、フォローボタン・シェアーボタンともにワンタッチで動作出来ました。昨日のaではフォローボタンの動作がツータッチだったので、これで改善されたと思います。ありがとうございます。
ひとつ改善されたところで、またまた申し訳ありませんが、モバイルメニュータイプによってツータッチでしかメニューが開かないものが確認出来ました。
デフォルトのアコーディオンとモーダルメニューがツータッチでしか動作しないようです。自分はデフォルトメニューのハンバーガーアイコンを使っているのですが、ツータッチでの動作になっています。
アイコンもツータッチで、メニュー項目もツータッチのようです。
あとのスライドインのダーク・ライト・上下とも、ワンタッチできれいに動作出来ました。アコーディオンツリータイプも問題なかったです。
お時間のある時に、また見ていただければ幸いです。ありがとうございます！！
-
私の提案は、最新のテーマを当てたテストサイトを、わいひらさんが公開しておくことです。
当サイトは最新のテーマが当たっているので誰でもテストできるようにはしてあります。
最初の書き込みに返信した時点でそうしとけよ！と言われればそれまでなんですが、ついいつもの手軽な方法で頼んでしまいました。（報告者のサイトでしか再現できない不具合もありファイルを渡さないと確認できないものもあったもので）
このテーマは、仕事としてやっているわけではないので、夜の空いた時間に開発とサポート対応なども行っています。なので毎回的確に対応できていないのはご容赦ください。
こんなゆるい感じの趣味テーマではありますが、お使いいただければ幸いです。
ご提案ありがとうございます。Simplicityは素晴らしいテーマだと思いました。利用させていただきたいと考えています。今回色々カスタマイズをしたので、その方法も随時紹介させていただきます。
実践的な方法の記事が増えると僕も嬉しいです。（サポートで、その記事にリンクを貼るだけで良いので僕も楽ができるので；）
またよろしくお願いします。background-colorにrgbaで透過
なるほど、そういった方法もありますね。
ただやっぱり、iOSの確認環境は欲しいですね。
Androidみたいにエミュレーターがあればいいのに…。自分のiOS8.4.1で確認したところ、フォローボタン・シェアーボタンともにワンタッチで動作出来ました。昨日のaではフォローボタンの動作がツータッチだったので、これで改善されたと思います。ありがとうございます。
動作確認ありがとうございます。これで数名からの報告を得たのでおそらく大丈夫かと確信しました。
デフォルトのアコーディオンとモーダルメニューがツータッチでしか動作しないようです。自分はデフォルトメニューのハンバーガーアイコンを使っているのですが、ツータッチでの動作になっています。
ありがとうございます。こちらは確認次第修正します。
あとのスライドインのダーク・ライト・上下とも、ワンタッチできれいに動作出来ました。アコーディオンツリータイプも問題なかったです。
こちらは問題なかったんですね。
1人では、動作確認しきれないので、助かります。ありがとうございます！ -
デフォルトのアコーディオンとモーダルメニューがツータッチでしか動作しないようです。自分はデフォルトメニューのハンバーガーアイコンを使っているのですが、ツータッチでの動作になっています。
こちらを修正してみました。
[修正c]モバイルのアコーディオンメニューボタン、トップへ戻るボタンのiOS問題を修正
http://wp-simplicity.com/simplicity1-8-5/というか、このiOS問題は、Apple側で修正する気はないのかな…
環境固有の不具合は作る側としてはやっぱしんどい。。 -
私のブログのアクセスの60%以上がスマートフォンでスマホの中で、さらに60%以上がiPhoneやiPadです。よって40%近くがAppleのモバイル端末からのアクセスです。
Apple側でなんとかして欲しいですよね。ただ、iPhone系は日本国内で圧倒的なシェアですので、無視はできないのかなと。
でも、なんでこうなってしまうんですかね？昔のIEみたいです。困ったものです。
http://wp-simplicity.com/が、常に最新のバージョンにしていただけると助かります。自分のブログがおかしいときには、http://wp-simplicity.com/にアクセスして、同じ問題が発生すればテーマの問題。でなければ、個別の問題と切り分けできるので、わいひらさんの手間も減るはずです。
Simplicity1.8.5にさせていただきました。対応色々ありがとうございました。快適です！
-
そうなんですよね。日本は、iPhone率すごいですよね。
もちろん、無視する気はないのですが、青天の霹靂的にこういったことが起こると、いろいろ情報収集する必要もあったりして、対応に四苦八苦してしまいます。
IEは、常習犯ですしテスト環境もあるので、もう慣れっこになっていたのですが、まさかiPhoneとかでこういったことが起こるとは思ってもいませんでした。ご確認ありがとうございます。
http://wp-simplicity.com/ が、常に最新のバージョンにしていただけると助かります。
このサイトは、特別な理由でもない限り常に最新版になっています。（サーバーで試さないで公開するわけにもいかないので）
一応、ガイドラインでも、まずサイトでチェックしていただくように案内しています。ただ、今回のようにテーマカスタマイザーの設定で不具合が起こらない状態になってる場合もあるので、なかなか思ったようにうまくいかないのが現状です。（不具合の出る状態にするには、あらかじめ不具合自体を理解している必要があるので）
機能を増やすと、こういったところの確認がしんどいですね。
今後あと数点、予定している機能をすべて付け加えたらクオリティー部分をなるべく重視して行こうと思います。なにはさておき問題部分がうまく動作したようでよかったです！
-
お世話になります。#31841のいす。
家に帰ってきて、最新のCバージョン：1.8.5 20150902cにさっそくアップデートしました。
このCバージョンで、メニューのツータッチが修正されているのを確認出来ました。すべてのメニュータイプで、ワンタッチで動作して気持ちいいです。
わいひらさんが
「周りの人には、iPhoneを持っている人も数人いるのですが、全て女性で「iOSって何？」という方が多く、趣旨を説明しても頼めるほど詳しい人がいません。」
と書いてあったので、自分のお店の女性スタッフにメニューのツータッチの動作を試してもらおうと、自分のiOS8.4.1を手渡したところ、「そんなメニューさわった事もなければ、あった事も今知りました！」と言われてしまいました。
「えー」と思い、他の女性スタッフにも聞いたところ同じ返事が返って来ました。ということは、いろいろ見てもらおうとメニュー展開してもスマホがメインの今の時代は余計なメニューがいらないのかなと思ったりしました。それとも、逆に「ここがメニューです！」みたいに、どでかいメニューボタンにするとか。
すみません、余談になりました。動作確認、バッチリでした。本当にいつもありがとうございます！！
-
このCバージョンで、メニューのツータッチが修正されているのを確認出来ました。すべてのメニュータイプで、ワンタッチで動作して気持ちいいです。
動作確認ありがとうございます。助かります。
僕の周りの女性iPhoneユーザーもそんな感じです(笑)
何で選んでいるかというと、完全にデザインなんですよね。
やっぱ、デザイン（おしゃれ感）の力は偉大です。
使い方を見ていると「iPhoneじゃなくても前の電話でよかったんじゃね？」とついつい思ってしまいます。メニューボタン（ハンバーガーボタン）に関しては、以下のような記事もありましたね。
なぜメニュー表示用ボタンの「ハンバーガーアイコン」はダメなのか？ – GIGAZINE
慣れていない人にはやっぱりわからないのだと思います。
ここら辺は、今後もインターフェースを模索していく必要はあると思います。「ここがメニューです！」みたいに、どでかいメニューボタンにするとか。
実際に、ユーザー層によってはそうそうした方が良い場合もありそうですよね。
Simplicityは、そのためにモバイルで目立つボタンを選べるようにしています。
ただ慣れていない人にとっては、それもどれほど効果があるのかわからないところもあったりして(笑)
-
- トピック「iOS8.4.1で2クリックしないとリンクが飛べない問題」には新しい返信をつけることはできません。