現在デフォルトスキンとして「Veilnui Simplog (blue)」を適用中。

最新版のモバイルメニュー検索について | 不具合報告 | Cocoon フォーラム

書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法 
  7. ブラウザ環境チェックツール

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

また、問題の解決に至った場合には、トピック冒頭の「解決済み」リンクをクリックしていただけますと幸いです。

wpForoの解決済みリンク

また、有用な返信があった場合は「いいね!」リンクもご活用ください。返信者の励みになります。

wpForoのいいねリンク

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

詳細なカスタマイズ依頼をするならこちら。

フォーラムのTwitterアカウント(@CocoonForum)はこちら

スポンサーリンク
最新版のモバイルメニュー検索について
 
Share:

[解決済] 最新版のモバイルメニュー検索について  


もうふ
 もうふ
(@もうふ)
ゲスト
参加: 2年 前
投稿: 7
2019年12月2日 21:56  

お世話になっております。

以前、要望のフォーラムでこちら→「モバイルメニューの検索ボックスの挙動について」の機能を実装していただきました。

しかしCocoonテーマを最新版にアップデートしたところ、検索ボタンを表示しても入力待ちにならない状態に戻ってしまいました。

私のサイトだけでなく、このCocoonテーマの公式サイトでも同じ挙動になっております。

できれば以前と同じく検索ボタンをタップした段階でスマホのキーボードが立ち上がるようにして頂けるとありがたいのですが…

それではよろしくお願いいたします。


未解決
草村
(@kusamura_mono)
Estimable Memberサイト
参加: 1年 前
投稿: 156
草村 - Twitter
2019年12月12日 00:10  

あげ(∩・ω・)∩


わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 7798
わいひら - Facebookわいひら - Twitter
2019年12月12日 22:29  

この書き込みを見落としていました ? 
草村さん、ありがとうございます。

ただ、前回の修正点は、現在でも適用されていて、最近特に変更もしていないようなんですけど、現在は当サイトの検索ボタンからでもフォーカスされないのでしょうか

This post was modified 1か月 前 2 times by わいひら

草村 件のいいね!
たなかま
(@tanakama)
Reputable Memberサイト
参加: 2年 前
投稿: 360
たなかま - Twitter
2019年12月12日 23:18  

こんばんは。

こちらの件は、検索ボタンを押して拡大される問題ではなく、検索ボタンを押した後、フォーカスが入らない状態に戻っている、という話のようですね。(フォームをタップすれば、キーボードが出てくる状態)

safariのデベロッパーツールで見ましたが、javascriptのコンソールエラーなどは見つからず、ちょっと原因が分かりませんでした・・・。


わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 7798
わいひら - Facebookわいひら - Twitter
2019年12月12日 23:50  

あ、そっちか ? ?
でも特に最近コードは変更してないようですけどなぜなんだろう…。
変更したとき。
https://github.com/yhira/cocoon/commit/7f2d7e9a2c3f7770a6f61f3f2bf69a814d06645e#diff-dee1eb0a17b89ee10e8277a3fdd706da
現在。
https://github.com/yhira/cocoon/blob/b5ac8eaf61ad2dd327865d82640976970b73d4ac/javascript.js#L58


たなかま
(@tanakama)
Reputable Memberサイト
参加: 2年 前
投稿: 360
たなかま - Twitter
2019年12月13日 00:35  

iOS以外でも、そうなっていますね。

調べたところ、モーダルウィンドウが出る前に処理されてるみたいです。

https://stackoverflow.com/questions/15859113/focus-not-working

 

setTimeout()で処理を遅らせてあげると、フォーカスが来ました。


わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 7798
わいひら - Facebookわいひら - Twitter
2019年12月13日 00:52  

なるほど!
以前のトピックを見る限りでは、そのタイミングで問題なかったようですが、ブラウザのアップデートか何かでタイミングが変わってしまったんですかね。
setTimeoutでフォーカスのタイミングを変更してみました。
------------------------------------------------
https://github.com/yhira/cocoon
最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。

FTPでのアップデート方法はこちら。
https://wp-cocoon.com/ftp-update/
------------------------------------------------
https://github.com/yhira/cocoon/commit/0b98e750defca278fca5453f1b41cc48fc371b12
当サイトにも適用してあるので、このサイトのモバイルボタンでも試せます。

たなかまさん、ありがとうございます!


たなかま
(@tanakama)
Reputable Memberサイト
参加: 2年 前
投稿: 360
たなかま - Twitter
2019年12月13日 12:47  

ありがとうございます。

iOSで検索ボタンをタップ→フォームにフォーカス&キーボードが起動したのを確認いたしました。

実機を持たれている方もご確認いただけると幸いです。

 

こちらのコメント欄を読むと、setTimeout()に頼らない方が良いとのことですが、setTimeout()を使わず直す方法が分からない・・・。

https://stackoverflow.com/questions/15859113/focus-not-working

 

This post was modified 1か月 前 by たなかま

わいひら 件のいいね!
草村
(@kusamura_mono)
Estimable Memberサイト
参加: 1年 前
投稿: 156
草村 - Twitter
2019年12月13日 15:29  

iPhoneにて試してみました。

以下フォーカス・キーボードの動作に関する備考はスマホの状況です。
実機がないと分かりづらいかと思いますが参考になれば幸いです。

Cocoon 2.0.0.3~12月2日の報告までの間の更新に何か原因がありそう?

【2.0.0.3】
スマホ:フォーカス○、キーボード○
PC:フォーカス○

2.0.0.3のテスト環境があったので試しました。こちらはキーボードが起動しました。

【2.0.2.4】
スマホ:フォーカス×、キーボード×
PC:フォーカス×

2.0.2.4ではフォーカスされませんが、背景の黒い部分をタップすると検索画面が消えると同時にフォーカス・キーボードが起動します。(検索画面は透明のままです)

【Cocoonトップページ】
スマホ:フォーカス○、キーボード×
PC:フォーカス○

タッチ後フォームにフォーカスされるもののキーボードは起動しませんでした。※添付画像
(フォームにカーソルが入っていないようです)
背景の黒い部分をタップしてもキーボードは起動しません。

【確認環境】
スマホ:iPhone 8 iOS13.2.3
PC:Win10 Chrome

This post was modified 1か月 前 2 times by 草村

わいひら 件のいいね!
かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 2年 前
投稿: 4218
かうたっく - Facebookかうたっく - Twitterかうたっく - Google+
2019年12月13日 16:06  

実機がなくても分かるみたいです。Androidでも同じですが、Windows(10)でも検索のカーソルが出るバージョンと出ないバージョンがあるようです。

以下|部分が、点滅的な。

サイト内検索

テーマ名:Cocoon
バージョン:1.9.9.5.3 です。

添付画像あり。

 

  • 古いバージョンのサイトもあったので一応。テーマ名:Cocoon

バージョン:1.7.8.3 これは サイト内検索  検索にカーソルは出なかったです。

 

関係ないけど、草村さんのこれ↓ かわいい ? 

あげ(∩・ω・)∩


わいひら草村 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 7798
わいひら - Facebookわいひら - Twitter
2019年12月13日 19:23  

こちらのコメント欄を読むと、setTimeout()に頼らない方が良いとのことですが、setTimeout()を使わず直す方法が分からない・・・。

あまりスマートな方法ではないとは思いつつも、僕も他の方法が分からないです… ? 

Cocoon 2.0.0.3~12月2日の報告までの間の更新に何か原因がありそう?

今、2.0.0.3から遡って見ているのですが、JavaScript関係で変更したといえば、まずこれが出てきました。
https://github.com/yhira/cocoon/commit/b5ac8eaf61ad2dd327865d82640976970b73d4ac#diff-dee1eb0a17b89ee10e8277a3fdd706da
この部分を削除すると動作しますでしょうか。
https://github.com/yhira/cocoon/blob/0b98e750defca278fca5453f1b41cc48fc371b12/javascript.js#L178


わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 7798
わいひら - Facebookわいひら - Twitter
2019年12月13日 19:57  

僕の環境で削除して試したけど、Firefoxですらダメだったわ…。


草村
(@kusamura_mono)
Estimable Memberサイト
参加: 1年 前
投稿: 156
草村 - Twitter
2019年12月13日 20:09  

画像の部分を削除してみましたが、iPhoneでもダメでした?

あと、「2.0.0.3のjavascript.js」を丸々コピペして書き換えてもダメでした。

※前回書き忘れましたがiPhoneのブラウザはSafariです。


わいひら 件のいいね!
かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 2年 前
投稿: 4218
かうたっく - Facebookかうたっく - Twitterかうたっく - Google+
2019年12月13日 20:48  

バージョン:1.7.8.3 これは |サイト内検索  検索にカーソルは出なかったです。

バージョン:1.9.9.5.3

バージョン:1.7.8.3

このCocoon: javascript.jsを見てですが

  //検索ボタンクリックでフォーカスを入力エリアに移す
  $('.search-menu-button').click(function(){
    //フォーカスの移動
    $('#search-menu-content .search-edit').first().focus();;
  });

このコードをバージョン:1.7.8.3に追記すればChromePCで確認時にも
カーソルが出なかったのに出てきました。結構バージョンがふるいんですが^^;


わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 7798
わいひら - Facebookわいひら - Twitter
2019年12月13日 20:54  

メモ。
バージョンを上げていって試してみた限りでは、Firefox環境では2.0.0.5~2.0.0.6の間で何かあった模様。2.0.0.6~動作しなくなる。
とりあえず、後からまた原因を探ります。


わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 7798
わいひら - Facebookわいひら - Twitter
2019年12月13日 21:01  

2.0.0.5~2.0.0.6での変更は以下の2つしかない。
https://github.com/yhira/cocoon/commit/330d57089eb433578e54d67dafcca3365c783269
https://github.com/yhira/cocoon/commit/4dca933eaafc0b76e35aea83c96755c609a4449c

なので原因は、こちらと思われる。
https://github.com/yhira/cocoon/commit/4dca933eaafc0b76e35aea83c96755c609a4449c#diff-da232d78aa810382f2dcdceae308ff8e

これの対応が原因ぽい。
https://wp-cocoon.com/community/skin-bugs/season%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA%E3%81%A7%E3%83%98%E3%83%83%E3%83%80%E3%83%BC%E3%83%BB%E3%83%95%E3%83%83%E3%82%BF%E3%83%BC%E3%83%A2%E3%83%90%E3%82%A4%E3%83%AB%E3%83%9C%E3%82%BF%E3%83%B3/

おそらく、デフォルトでvisibility: hidden;になっているから、フォーカスが移動しないと思われる。
style.cssの記述を削除すれば、何とかなると思うけど、それだと上記トピックの問題が元に戻ってしまうので、とりあえず対策は後で考えます。

This post was modified 1か月 前 4 times by わいひら

わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 7798
わいひら - Facebookわいひら - Twitter
2019年12月13日 21:07  

今、思いついた。透過で対応しようと思います。


わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 7798
わいひら - Facebookわいひら - Twitter
2019年12月13日 21:11  

時間がかからなそうだったので、修正しておきました。
https://github.com/yhira/cocoon

これで多分、カーソルが出ると思います。おそらく。
https://github.com/yhira/cocoon/commit/99d5ee6c53170378ff285f57db25b6944fba1eb7#diff-da232d78aa810382f2dcdceae308ff8e

This post was modified 1か月 前 3 times by わいひら

草村 件のいいね!
かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 2年 前
投稿: 4218
かうたっく - Facebookかうたっく - Twitterかうたっく - Google+
2019年12月13日 21:28  
.search-menu-content {
	visibility: visible;
}

こんな感じだとダメですかね???


かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 2年 前
投稿: 4218
かうたっく - Facebookかうたっく - Twitterかうたっく - Google+
2019年12月13日 21:45  

追記

今githubアップロードが完了して、スマホAndroidとChromePC上で問題ないことを確認できました!

 

iPhone・iPadでも問題なけば大丈夫そうですね❦

お疲れさまでした ? 


わいひら 件のいいね!
たなかま
(@tanakama)
Reputable Memberサイト
参加: 2年 前
投稿: 360
たなかま - Twitter
2019年12月14日 17:11  

僕の方でもiOSシミュレーターで上手く表示できました。

キーボードが出てくる・出ないは、こちらの環境の設定かもしれないのですが、フォーカスは来ています。

javascriptかと思っていたのですが、CSSとは分かりませんでした。

setTimeout()やdelay()は、その場しのぎで使っちゃいますね・・・。


わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 7798
わいひら - Facebookわいひら - Twitter
2019年12月14日 17:58  

ご確認ありがとうございます。

キーボードが出てくる・出ないは、こちらの環境の設定かもしれないのですが、フォーカスは来ています。

ということは、キーボードは出なかったということでしょうか。
まだ2.0.0.3からの違いといえば、SNSボタンの初期位置が違うので、こちらも元に戻しておきました。
https://github.com/yhira/cocoon/commit/0cba06e387b26e8978d1f795136d09338af961fe#diff-da232d78aa810382f2dcdceae308ff8e

javascriptかと思っていたのですが、CSSとは分かりませんでした。

僕も、草村さんのヒントがなかったら、多分わからなかったです。


たなかま
(@tanakama)
Reputable Memberサイト
参加: 2年 前
投稿: 360
たなかま - Twitter
2019年12月14日 19:44  

ということは、キーボードは出なかったということでしょうか。

おそらく、シミュレーターの初期設定がMacの物理キーボードを使う、になっているからだと思います。

ソフトウェアキーボードを使う設定にすると、キーボードが出てくるので問題はなさそうです。

ただ、もしかしたらそれもシミュレーターの設定に依存してる可能性も・・・という感じですね。


かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 2年 前
投稿: 4218
かうたっく - Facebookかうたっく - Twitterかうたっく - Google+
2019年12月14日 21:18  

https://github.com/yhira/cocoon

こちらでgithub先行バージョンをiPhone/ipadを持っている人にFTPでアップロードしてもらった結果待ち。ってことで、だれか見てくれた人の返信を待ってみるのが良いカモしれないですね。


草村
(@kusamura_mono)
Estimable Memberサイト
参加: 1年 前
投稿: 156
草村 - Twitter
2019年12月14日 22:03  

お疲れさまです。

iPhoneで確認した所、フォーカスされキーボードも起動しました!
(ダウンロードしてアップロードしたCocoonのバージョンは2.0.3です)

原因が解明してよかったです。

ついでに要望なんですが検索フォームをクリックで表示して、検索をせず背景の黒い部分をクリックして閉じてもキーボードが表示されたままになってしまうので

よければ閉じるタイミングでフォーカスが外れるようにしてほしいです。

コード的には例えば以下のような感じです。
最適化出来ているかはちょっと自信ないですが…。
※1回のクリックでlabelとinputの2回分イベントが発生するためタグ名で判別しています。

  $('.search-menu-button').click(function(e){
   if( e.target.tagName == 'INPUT' ) {
var searchEdit = $('#search-menu-content .search-edit').first();
if( e.target.checked ) {
searchEdit.focus();
} else {
searchEdit.blur();
}
}
});
This post was modified 1か月 前 by 草村

わいひら 件のいいね!
草村
(@kusamura_mono)
Estimable Memberサイト
参加: 1年 前
投稿: 156
草村 - Twitter
2019年12月14日 22:24  

※1回のクリックでlabelとinputの2回分イベントが発生するためタグ名で判別しています。

こういう時はchangeがいいみたいですね。

$('#search-menu-input').change(function(e){

https://qiita.com/kazu56/items/9ebc8918fb7a75da9434


わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 7798
わいひら - Facebookわいひら - Twitter
2019年12月14日 22:30  

草村さん、コードありがとうございます!

コードを適用したものを、以下にアップしておきました。
https://github.com/yhira/cocoon
変更。
https://github.com/yhira/cocoon/commit/14c406fe6dabf5c42fd0527f6866443ae05eb5c7
僕の環境(※Firefox ? )で動作確認した限りでは、問題なかったです。


草村 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 7798
わいひら - Facebookわいひら - Twitter
2019年12月14日 22:36  
投稿者:: 草村

※1回のクリックでlabelとinputの2回分イベントが発生するためタグ名で判別しています。

こういう時はchangeがいいみたいですね。

$('#search-menu-input').change(function(e){

https://qiita.com/kazu56/items/9ebc8918fb7a75da9434

この書き込みを見逃していました ? 
こっちも適用しておきました。
https://github.com/yhira/cocoon/commit/76a48ca29b8a3b28c513fe582e1db32e06741147


草村 件のいいね!
草村
(@kusamura_mono)
Estimable Memberサイト
参加: 1年 前
投稿: 156
草村 - Twitter
2019年12月14日 23:12  

わいひらさん

ありがとうございます!iPhoneでも確認して問題なかったです。

あと、changeに変えた事でタグ名の判別が不要になったので

if( e.target.tagName =='INPUT' ) {

の判定を無くして以下で大丈夫でした!

  $('#search-menu-input').change(function(e){
var searchEdit = $('#search-menu-content .search-edit').first();
if( e.target.checked ) {
searchEdit.focus();
} else {
searchEdit.blur();
}
});

わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 7798
わいひら - Facebookわいひら - Twitter
2019年12月15日 19:35  

ご確認ありがとうございます。

僕も思ったのですが、タグ名が明示的なっていいかなと思ってそのままにしておりました。
ただ、削除した方がコードが短くなって読みやすくなるという利点もあるので、削除しておこうと思います。


草村 件のいいね!
草村
(@kusamura_mono)
Estimable Memberサイト
参加: 1年 前
投稿: 156
草村 - Twitter
2019年12月15日 21:29  

わいひらさん

なるほどです。
iPhoneでは記述があってもなくても動作するのは確認済みですので、ご都合に合わせていただければと思います。

お疲れさまでした!


わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 7798
わいひら - Facebookわいひら - Twitter
2019年12月16日 18:59  

いえいえ、僕もどっちがいいか半々ぐらいで迷ったので、コードを書いていただいた、草村さんが書き込んでいただけたおかげで、迷う必要が無くなりました ? 


Share:
スポンサーリンク
わいひらをフォローする
おすすめサーバ

性能も兼ね備えながら安くブログ運営を開始できる点においてのNo.1。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越しオプションあり(有料)

サービス運営期間:1年5ヶ月

1年以上の契約をする場合は、クーポンコード入力でさらに10%割引(※2020/6/30まで)。

クーポンコード:PK4JK4RJ

クーポンの使用方法はこちら

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
△DBは7日分だけ無料復旧可能(ファイルは有料)
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可

サービス運営期間:16年

プラン変更で負荷対策が行えるので、ブログ向きのレンタルサーバーです。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎転送量が多い
◎ディスク容量が多い
◎毎日無料バックアップ(14日分)
△DBは復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
○サーバ引っ越しオプションあり(有料)
○サーバー料金をチャージ払いが可能

サービス運営期間:3年

とにかく速い。サイトに表示スピードを求めるならココ。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DB復旧は無料(ファイルは有料)
○サーバ引っ越しツールあり
○サーバー料金をチャージ払いが可能
△新しいサービスなので運営櫪がまだ短い

サービス運営期間:1年3ヶ月

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
サイトを続けるうちにアクセスが増えれば、プランのアップグレートで対応可能です。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越しオプションあり(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)

サービス運営期間:4年

Cocoon

ログイン または 登録 してください

タイトルとURLをコピーしました