対策 on qwerty.work

【jQuery】hoverとtouchの共存について模索したこと

Mon, 08 Aug 2022 21:46:20 +0900

書きなぐりですが、メモ。

PCのホバーとiOSのタッチは問題なし

あるサイト制作でアコーディオンメニューを作成し、ホバーとタッチの両方に対応させたく、jQueryでメニュー開閉のスクリプトを書きました。PCの場合はマウスをメニュータイトルにかざすと開閉でき、iPhoneやiOSではタップで開閉できました。ところが…。

Windowsタブレットで問題発生

クリックしかできないデバイスと、タップしかできないデバイスならこれで良かったのですが…。タップもクリックもできるデバイスとなると挙動が変わりました。マウスホバーでの開閉はいいのですが、途中でタップに切り替えると、2度タップしないとメニューが開かないようになりました。閉じるのは1回でもOKでした。

問題のあるソース例

メニューのタイトル部分- タイトルで、開閉して表示・非表示となる部分が.menu_contentsだった場合の例。

//PCの場合はマウスオーバーで開閉
$('li.menu_list').not('.active').hover(function () { 
  $(this).addClass('active');
  $(this).find('.menu_contents').stop().slideDown();
}, function () {
  $(this).removeClass('active');
  $(this).find('.menu_contents').hide();
});

//スマホやタブレットはタッチで開閉
var clickEventType = ((window.ontouchstart !== null) ? 'click' : 'touchend');
$('li.menu_list').on(clickEventType, function () {
  // 状態が active の場合は閉じる
  if ($(this).hasClass('.active')){
    $(this).removeClass('active');
    $(this).find('.menu_contents').hide();
    }
  // 状態が activeなしの場合は開く  
  else if (!$(this).hasClass('active') {
    $(this).addClass('active');  
    $(this).find('.menu_contents').stop().slideDown();
    }
});

hoverとtoutchの切替えがうまくいっていないのか？

仕組みがよくわからないのですが、タップで閉じた後に同じメニューを開くのは何度やってもタップ1回で繰り返し開閉できる。しかし、隣りのメニューをタップすると、2度タップしないと開かない…。タップした時点で要素を捕まえきれていない感じがします。タップからマウスホバーは問題ありませんでした。

想像ですが、2回タップしないといけないのは、指がタッチパネルから離れていてもホバー状態になっていて、1回目のタップでは以前タップした場所をからhoverを解放し、2回目のタップで現在のボタンをクリックしているのではないかと思います。しかし、初回表示時でも2回タップしないとメニューが開きませんでした。つまり、ページ表示時やタップ時にホバーを解除する命令を加えれればうまくいくような気がします。

↓このページを見てそう思いました。

https://solutions.vaio.com/1759 https://solutions.vaio.com/1759

模索した解決策の候補

クリックとタップのみでの開閉はPCでもタブレットでもうまくいくため、**『hoverの開閉を諦める』**これしかないかもしれません。どれも試していませんがメモ。

hoverをmouseenter、mouseleaveに変えてみる

これはダメでした。clickやtoutchstartのようにon('mouseenter', function(){～のように書けるので、これならイケるかも？と思いましたが、挙動は同じでした。

https://daiblog923.com/jquery-eventtrigger/ https://daiblog923.com/jquery-eventtrigger/

発火方法を細かく分けてみる

これもダメでした。PCのマウスホバーのみ動作やiOSでのタッチのみの動作はOKでしたが、Windowsタブレットでは2回タップしないとメニューが開きませんでした。

https://blog.ikappio.com/jquery-hover-on-pc-and-touch-screen/ https://blog.ikappio.com/jquery-hover-on-pc-and-touch-screen/

CSSからhoverのルールを削除して無効化する例

タップされたら、一時的にhoverを無効化。ontouchstartでhoverを無効化するという方法がありましたが、hoverを復活したいときはどうするんだろう？

https://techmemo.biz/javascript/touchdevice-hover-disable/ https://techmemo.biz/javascript/touchdevice-hover-disable/

http://cmz.wp.xdomain.jp/archives/1029 http://cmz.wp.xdomain.jp/archives/1029

単純にこれは、hoverの機能を無効化するというより、CSSにある:hoverのルールを削除するだけみたいです。

疑似的に:hoverを追加削除する方法

https://urashita.com/archives/17532 https://urashita.com/archives/17532

https://worklog.be/archives/2860 https://worklog.be/archives/2860

https://tutorialmore.com/questions-2478488.htm https://tutorialmore.com/questions-2478488.htm

指定した要素にJavaScript で ontouchstart 属性を追加する方法

https://www.webdesignleaves.com/pr/plugins/ontouchstart-event-handler.html https://www.webdesignleaves.com/pr/plugins/ontouchstart-event-handler.html

onclick 属性を付与する方法

ontouchstartと同じかな。

https://analogstd.com/pc/iphone-hover-click-faq/ https://analogstd.com/pc/iphone-hover-click-faq/

mouseenterの替わりにtoutchenterを使用してみる

https://shanabrian.com/web/javascript/event-handler.php https://shanabrian.com/web/javascript/event-handler.php

初回イベント時のみ取得できない状況を解消する？

これに近い挙動のように感じます。しかし、これはAndoroidアプリ制作上での話みたいで、コマンドがJavascriptではない感じ。以下のページに関連するページのリンクがあるので、進んで行くと『初回の１タップ処理が、何か別の処理に搾取されていると推測できる。』と記載があった。まさにこの挙動だと感じていますが、これをどうやって調べるかが課題。

https://qiita.com/erik_t/items/7f1c05f2deb01421b2cd https://qiita.com/erik_t/items/7f1c05f2deb01421b2cd

http://latache-program.blogspot.com/2017/01/android_8.html http://latache-program.blogspot.com/2017/01/android_8.html

イベントハンドラの指定方法を変えてみる

$('li.menu_list').on('toutchstart', function () {

ではなく、

$('document').on('toutchstart', 'li.menu_list', function () {

とする方法。

後日、試してみたところ、これが当たりでした！

https://pisuke-code.com/jquery-solution-for-event-unfired/ https://pisuke-code.com/jquery-solution-for-event-unfired/

click / touch / pointer イベントを完全に制御する

『タッチディスプレイを搭載したPC』について言及があったので、これが案外有力そうです。Windowsタブレットで試したところ、タップやクリックの度に取得したイベントが異なっていたので良さそうでした。しかし、私のスキルが追い付いていないため、うまくfunctionを組み立てることができず、使いこなせませんでした。使いこなせる方ならこれが一番いいような気がします。

https://qiita.com/toshiharu-irie/items/83e17eace4c2c9446667 https://qiita.com/toshiharu-irie/items/83e17eace4c2c9446667

clickとtouchを交互にsettimeoutで入れ替える

なんか邪道だけどメモ。

https://www.web-dev-qa-db-ja.com/ja/jquery/touchstart%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%81%A8click%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%82%92%E3%83%90%E3%82%A4%E3%83%B3%E3%83%89%E3%81%97%E3%80%81%E5%8F%8C%E6%96%B9%E5%90%91%E3%81%AB%E5%BF%9C%E7%AD%94%E3%81%97%E3%81%AA%E3%81%84%E3%82%88%E3%81%86%E3%81%AB%E3%81%99%E3%82%8B%E3%81%AB%E3%81%AF%E3%81%A9%E3%81%86%E3%81%99%E3%82%8C%E3%81%B0%E3%82%88%E3%81%84%E3%81%A7%E3%81%99%E3%81%8B%EF%BC%9F/940675911/ https://www.web-dev-qa-db-ja.com/ja/jquery/touchstart%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%81%A8click%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%82%92%E3%83%90%E3%82%A4%E3%83%B3%E3%83%89%E3%81%97%E3%80%81%E5%8F%8C%E6%96%B9%E5%90%91%E3%81%AB%E5%BF%9C%E7%AD%94%E3%81%97%E3%81%AA%E3%81%84%E3%82%88%E3%81%86%E3%81%AB%E3%81%99%E3%82%8B%E3%81%AB%E3%81%AF%E3%81%A9%E3%81%86%E3%81%99%E3%82%8C%E3%81%B0%E3%82%88%E3%81%84%E3%81%A7%E3%81%99%E3%81%8B%EF%BC%9F/940675911/

これ以外で役に立ちそうなついでの対策

スクロールとタッチイベントの衝突回避

https://alaki.co.jp/blog/?p=2546 https://alaki.co.jp/blog/?p=2546

何のイベントがどの要素で発生しているかを調べるのに良さそうなコマンド

https://garafu.blogspot.com/2013/09/javascript-webkit.html https://garafu.blogspot.com/2013/09/javascript-webkit.html

解決後のソース例

結局、何とか解決できました。実際にテストしたソースとは異なりますが、解決に至ったソースを簡単にまとめました。もっと効率よく書きたいところですが、とりあえずメモ。

これでPCのマウスホバーによる開閉、Windowsタブレットでのマウスホバーとタップによる開閉、スマホのタッチによる開閉を同時に実装できました。不思議なのはクリックイベントの指定をon('click mouseend touchend'としたことです。この3つのイベントを同時に入れることで何故か理想通りの動きになりました。ここにpointerstartなどのpointer〇〇を入れると不具合が起こりました。

//マウスカーソルをかざすと開
$(document).on('mouseenter', 'li.menu_list', function () {
  // class に active がない場合は開く
  if (!$(this).hasClass('active')) {
    $('.menu_contents').hide(); //他のメニューを閉じる
    $(this).addClass('active');
    $(this).find('.menu_contents').stop().slideDown();
  }
});

//マウスカーソルが外れると閉じる    
$(document).on('mouseleave', 'li.menu_list', function () {
  // class に active がある場合は開く
  if ($(this).hasClass('open')) {
    $('.menu_contents').hide();
  }
});

//スマホやタブレットはタッチで開閉
$(document).on('click mouseend touchend', 'li.menu_list', function () {
  // class に active がある場合は閉じる
  if ($(this).hasClass('.active')){
    $(this).removeClass('active');
    $(this).find('.menu_contents').hide();
    }
  // class に active がない場合は開く  
  else if (!$(this).hasClass('active') {
    $('.menu_contents').hide(); //他のメニューを閉じる
    $(this).addClass('active');  
    $(this).find('.menu_contents').stop().slideDown();
    }
});

バッチで解決！パソコンとiPhoneのテザリングが勝手に切断されるのを防ぐ方法

Tue, 01 Mar 2022 20:54:14 +0900

いつの間にかテザリングが切れて困る

営業でお客さんを訪問し、WindowsタブレットからiPhoneにテザリングしてブラウザでWEBページを開いて説明していると、5分くらい放置していただだけなのに、いつの間にかインターネット共有が切断されていることが頻繁にあります。いいテンポで商談しているのに、いざというときに切断されていて、再接続の間は焦ったりして変な空気になってしまうことがあります。それを防ぎたいなと調べたら原因や対策方法がわかったのでメモ。

切断される原因

iPhone/iPadのインターネット共有は90秒間に何も通信がないと、省電力化のためにテザリングが切断される仕様のようです。また、iPhoneの画面が自動ロックされてスリープ状態になるのも原因があるようです。その設定を変更するメニューは存在していないみたいで、無効にしたり、90秒以上に変更することができないようです。

解決方法

よって、無通信状態が90秒以上にならないようにするか、画面の自動ロックやスリープを防げば良いということで、いい方法がありました。

バッチファイルで定期的にPINGを飛ばす方法

以下の参考ページにはバッチファイルで『90秒以内にPINGを1回飛ばす』ということをバックグラウンドで定期的に繰り返し、無通信状態を回避する方法がありました。フリーソフトも要らない簡単な方法です。

http://blog.livedoor.jp/dodemo118/archives/65966433.html http://blog.livedoor.jp/dodemo118/archives/65966433.html

バッチファイルのソース例（Windows）

60秒に1回、ヤフーにPINGを飛ばします。

:top
ping /n 1 www.yahoo.co.jp
timeout /t 60
goto top

PING送信先はlocalhostまたは127.0.0.1でもOKでした。これなら外部のサイトではなく、自分自身のパソコンにPINGを送信するので、不要なパケットロスやトラフィックの負荷を最大限防いだ上で通信状態を発生させることができるかもしれません。

ちょっと改造したバッチファイルのソース例（Windows）

@echo off
set time=60
set url=localhost

:top
cls
echo.
echo %time%秒ごとに %url% へPINGを1回送信しています。
echo.
ping /n 1 %url%
timeout /t %time%
goto top

ダウンロードこのソースを使ったバッチファイルは以下からダウンロードできます。解凍すると**「テザリング接続キープ.bat」**というファイルがありますので、ダブルクリックしてお使いください。

**keep-tethering-connection.zip（341 byte）

実行画面

他にもストリーミングミュージックを流し続ける方法というのもありましたが、パケットが消費されてしまいます。PINGを飛ばす程度であればパケット消費も気にならないかと思います。iPhone/iPadに限らず、パソコンからAndoroidのスマトフォンやタブレットに接続したテザリングが勝手に切れて困るなど、一定周期でパケットを送信するフリーソフトを探している方には簡単で便利な方法かと思います。

MACの場合 Macの場合も、同様の理屈でできるみたいです。Windowsとはスクリプトが異なります。先ほどの参考ページにMacで行う場合の詳しい方法が記載されています。

iPhone/iPadをスリープさせない方法

以下の参考ページでは、iPhoneの「インターネット共有」の画面を開きっぱなしにしておくことで、切断が防げるとのこと。併せて画面がロックされる時間を無制限にする方法が記載されています。

https://www.teradas.net/archives/13717/ https://www.teradas.net/archives/13717/

Windows側のBluetoothを無効にする方法

以下はWi-FiとBluetoothの電波干渉を防ぐことで解決する方法らしいのですが、Bluetoothも使う方には困る方法ですので、参考程度にメモ。

https://www.sumahoinfo.net/entry/iphone-windows-10-tethering/ https://www.sumahoinfo.net/entry/iphone-windows-10-tethering/

【JS】アンカーへの画面遷移時に表示位置がズレてしまうときの対策

Sat, 04 Dec 2021 22:14:08 +0900

アンカーポイントがずれてしまう

ハッシュタグを使用してアンカーの位置にジャンプしようとしたとき、LazyloadやSlick.jsなどのSliderを使っているせいか、画像表示ページが伸縮するために、意図する位置で表示されないことが起こりました。

具体的には画像スライダーのあるページに``でお問合せフォームを設置していて、actionには自らのページにハッシュタグを付けており、submitで送信後に戻ってきたときにスクロール位置がずれました。しかも、パソコンとスマホ（iPhone）で停まる位置が異なり、ブラウザを変えてもの同じ挙動でした。そこで、以下のソースで解決できました。jQueryが必要です。

解決できたソース

URLに#contactなどハッシュタグが含まれていた場合、ページ上部からアンカーまでの位置を取得し、数秒後に画面が伸縮した後に再度、アンカーのポジションを確認して比較します。もし、比較して変化があればその位置に画面をスクロールさせます。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
//
//Lazyloadなどでアンカーの高さが変化する場合の対応
//
$(window).ready(function() {
try {
    const deleyTime = 600; //アンカー位置を再確認するまでの待機時間（ミリ秒）
    const adjust = 50; //高さの微調整
    
    //URLに#タグがあるか確認
    const getHash = ($this) => {
        if (!location.hash){
            console.log('アンカータグは指定されていません。');
        } else {
            return location.hash;
        }
    }
    console.log('アンカータグは '+getHash()+' です。');

    //アンカーの位置確認（1回目）
    const firstPositionY = $(getHash()).offset().top;
    console.log('最初に取得した '+getHash()+' の高さは '+firstPositionY+' です。');

    //アンカーの位置確認（2回目）
    const secondPositionY = ($this) => {
       return $(getHash()).offset().top;
    }

    //数秒後にアンカーの位置が変わっていたら正しい位置にスクロール
    setTimeout(function(){
        console.log(deleyTime/1000+'秒後の '+getHash()+' の高さは '+secondPositionY()+' です。');
        if(firstPositionY != secondPositionY()){
            $('html,body').animate({ scrollTop: secondPositionY()+adjust }, 'fast');
            console.log(getHash()+' の現在位置が変化しているため正しい位置にスクロールしました。')
        }else{
            console.log(getHash()+' の現在位置に変化はありません。')
        }
    }
    ,deleyTime);
} catch (error) {
    console.log('アンカータグが見当たらないため処理を終了しました。');
}
});
</script>

以下の部分の最後にある'fast'を'slow'や'nomal'にするとスクロールのスピードが変わります。

$('html,body').animate({ scrollTop: secondPositionY()+adjust }, 'fast');

コンソールでログを確認

上記にソースにあるconsole.logで指定した文字列はブラウザのコンソール画面に出力され、処理の経過状態を確認することができます。以下の画面はEdgeですが、Chromiumベースのブラウザなら、F12を押すことでこの画面を出すことができます。

URLに#～が含まれていなかった時

URLに#～が含まれていた時

参考サイトメモ

旨く行きませんでしたが、以下のページにあるソースも気になりました。

https://fe-designer.com/article/lazyloadandsmoothscroll/ https://fe-designer.com/article/lazyloadandsmoothscroll/

https://github.com/cferdinandi/smooth-scroll https://github.com/cferdinandi/smooth-scroll

Font-Awesome 5を使うときのPageSpeed Insights「ウェブフォント読み込み中の全テキストの表示」対策

Sun, 03 Mar 2019 22:06:49 +0900

Pagespeed Insightsでフォントの代替表示を求められた

ページ装飾のアクセントにアイコンフォントとしてFont-Awesome 5 のフォントをCDN経由で読み込んで使用しているのですが、Pagespeed Insightsでページの分析をした際、以下のような改善案が表示されました。

ウェブフォント読み込み中の全テキストの表示

フォント表示の CSS 機能を使用して、ウェブフォントの読み込み中にユーザーがテキストを見られるようにしてください。この改善案に対して、どうのような対策を採ればいいのか調べたとことCSSに**@font-face**の設定を加えればいいみたいなので、やってみたことをメモ。

３つのフォントファイルに対して対策が必要

Font-Awesome 5（Free）を以下のコードで読み込んでいるのですが、ページを表示する際に以下の3つのフォントファイルがFont-Awesome 5のスタイルシートから読み込まれます。その３つのフォントに対して代替表示の対策をしなければなりません。

Font-Awesome 5（Free）の読み込みコード

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6.3/css/all.min.css">

上記のスタイルシートから読み込まれるフォントファイル

この３つに対して対策が必要。

fa-brands-400.woff2
fa-regular-400.woff2
fa-solid-900.woff2

スタイルシートに@font-faceを追加して解決

ページのスタイルシートに以下のコードを追記することで解決できました。@font-faceに３つのフォントファイルを指定。

@font-face {
     font-family: 'Font Awesome 5 Brands';
     font-style: normal;
     font-weight: 400;
     src: url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6.3/webfonts/fa-brands-400.woff2") format("woff2");
     font-display: swap;
 }

 @font-face {
     font-family: 'Font Awesome 5 Free';
     font-style: normal;
     font-weight: 900;
     src:url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6.3/webfonts/fa-regular-400.woff2") format("woff2"),
         url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6.3/webfonts/fa-solid-900.woff2") format("woff2");
     font-display: swap;
 }

診断に合格

スタイルシートに**@font-faceを加えた後に、再度Pagespeed Insightsでページを分析したら無事合格しました。「診断」の欄から「合格した監査」**の欄に移動していました。

@font-faceでFont-Awesome 5を指定するときはfont-weightに注意

FontAwesome5を使うときは必ず font-weight:400; または font-weight:900; を指定しないとうまくいきません。font-weight:normal;とか使うとダメです。

また、ブラウザによっては**@font-face**に対応していないブラウザがあります。

https://caniuse.com/#search=font-display https://caniuse.com/#search=font-display

ついでに「Preload」や「Prefetch」で高速化

対策ついでに以下のコードを～間に入れておくことでページを読み込む間（レンダリングが開始される前）にWEBフォントを事前に読み込んでおくことができます。多少の高速化が図れます。

Preloadだけでもいいのですが、Preloadは一部のブラウザが対応していないので、幅広く対応しているPrefetchと併用しています。

<link rel="preload prefetch" as="font" type="font/woff2" href="//cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6.3/webfonts/fa-brands-400.woff2" crossorigin>
<link rel="preload prefetch" as="font" type="font/woff2" href="//cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6.3/webfonts/fa-regular-400.woff2" crossorigin>
<link rel="preload prefetch" as="font" type="font/woff2" href="//cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6.3/webfonts/fa-solid-900.woff2" crossorigin>

参考にしたページ

https://pavelmakhov.com/2018/04/font-awesome-5-in-gwt/ https://pavelmakhov.com/2018/04/font-awesome-5-in-gwt/

https://coliss.com/articles/build-websites/operation/css/about-font-display.html https://coliss.com/articles/build-websites/operation/css/about-font-display.html

https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization?hl=ja https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization?hl=ja

https://qiita.com/oreo/items/2e82bfeb42e351557c3c https://qiita.com/oreo/items/2e82bfeb42e351557c3c

後日再発

解決したつもりが後日またPageSpeed Insightsで「ウェブフォント読み込み中の全テキストの表示」について警告が出ました。

all.cssを改造して読込

Font-Awesome 5 の** all.css** をCDNからの読み込みではなくローカルに置き、一部を以下のように変更しました。all.cssの最下位部分にあります。2パターンで試したところ、どちらでも警告が出ないようになりました。

パターン1 font-display: Auto;をswapに変更し**、意味はわかりませんがlocal("@")**を挿入し、urlはCDNのパスに変更してしています。

@font-face {
   font-family: 'Font Awesome 5 Brands';
   font-style: normal;
   font-weight: normal;
   font-display: swap;
   src: url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-brands-400.eot");
   src: local("@"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-brands-400.woff2") format("woff2"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-brands-400.woff") format("woff"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-brands-400.ttf") format("truetype"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-brands-400.svg#fontawesome") format("svg"); }
   
.fab {
   font-family: 'Font Awesome 5 Brands'; }
   @font-face {
   font-family: 'Font Awesome 5 Free';
   font-style: normal;
   font-weight: 400;
   font-display: swap;
   src: url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-regular-400.eot");
   src: local("@"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-regular-400.woff2") format("woff2"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-regular-400.woff") format("woff"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-regular-400.ttf") format("truetype"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-regular-400.svg#fontawesome") format("svg"); }
   
.far {
   font-family: 'Font Awesome 5 Free';
   font-weight: 400; }
   @font-face {
   font-family: 'Font Awesome 5 Free';
   font-style: normal;
   font-weight: 900;
   font-display: swap;
   src: url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-solid-900.eot");
   src: local("@"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-solid-900.woff2") format("woff2"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-solid-900.woff") format("woff"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-solid-900.ttf") format("truetype"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-solid-900.svg#fontawesome") format("svg"); }

パターン2 パターン1との違いはlocalのパスの部分です。

@font-face {
 font-family: 'Font Awesome 5 Brands';
 font-style: normal;
 font-weight: normal;
 font-display: swap;
 src: url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-brands-400.eot");
 src: local("/webfont/fontawesome-free-5.11.2/package/webfonts/fa-brands-400.woff2") , url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-brands-400.woff2") format("woff2"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-brands-400.woff") format("woff"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-brands-400.ttf") format("truetype"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-brands-400.svg#fontawesome") format("svg"); }
 
.fab {
   font-family: 'Font Awesome 5 Brands'; }
   @font-face {
   font-family: 'Font Awesome 5 Free';
   font-style: normal;
   font-weight: 400;
   font-display: swap;
   src: url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-regular-400.eot");
   src: local("/webfont/fontawesome-free-5.11.2/package/webfonts/fa-regular-400.woff2"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-regular-400.woff2") format("woff2"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-regular-400.woff") format("woff"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-regular-400.ttf") format("truetype"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-regular-400.svg#fontawesome") format("svg"); }
   
.far {
   font-family: 'Font Awesome 5 Free';
   font-weight: 400; }
   @font-face {
   font-family: 'Font Awesome 5 Free';
   font-style: normal;
   font-weight: 900;
   font-display: swap;
   src: url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-solid-900.eot");
   src: local("/webfont/fontawesome-free-5.11.2/package/webfonts/fa-solid-900.woff2"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-solid-900.woff2") format("woff2"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-solid-900.woff") format("woff"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-solid-900.ttf") format("truetype"), url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/webfonts/fa-solid-900.svg#fontawesome") format("svg"); }

ネットワークが定期的に切断されるときに試したネットワーク設定をリセットするコマンド

Sat, 06 Jun 2015 11:42:23 +0900

定期的にWindowsのネットワークが切れることがある

会社のパソコンも自宅のパソコンもネットワークが定期的に切断されます。ひどいときは起動した時点で既にアイコンにビックリマークが付いていてインターネットができないことも.あります。今回、症状が出たOSはWindows7とWindows8.1。

ネットワークカードのドライバを更新したり、IPv6をOFFにしてみたり、ネットワークカードの詳細設定を変更してみたりといろいろしてみましたが全く解決に至りませんでした。

以下のことを試して定期的に切断される問題は解決できませんでしたが、結果的にネットが高速化されブラウザの表示スピードが速くなったので、とりあえずやってみたことをメモ。

Windowsのネットワークアダプタの設定を初期化するコマンド

とりあえず、コマンドプロンプトでいろいろ初期化してみる。IPアドレスを固定していた場合、リセットするとIPアドレスが消えるので、実行前に現在のIPアドレスをメモしておいてください。このコマンドはWindows 10/8.1/8/7 で使用できます。

ネットワーク・インターフェイスの初期化（リセット）

netsh interface ip reset c:\reset.log

IPv4のみリセットしたいとき

netsh interface ipv4 reset

IPv6のみリセットしたいとき

netsh interface ipv6 reset

Windows Socketの初期化

netsh winsock reset

TCPパラメータの初期化

netsh interface tcp reset

SNPを無効化する設定

まずSNPの各機能の設定を確認

netsh int tcp show global

Receive-Side Scaling（RSS）の無効化

netsh int tcp set global rss=disabled

通信に極端な障害が発生していない場合や、効果を感じられない場合は、enabledでも良いかもしれません。

TCP Chimney オフロードの無効化

netsh int tcp set global chimney=disabled

NetDMA（Network Direct Memory Access）の無効化

netsh int tcp set global netdma=disabled

※Windows8/8.1は未サポートで設定不要。

受信ウィンドウ自動チューニングレベルも無効化

netsh interface tcp set global autotuninglevel=disabled

または

netsh interface tcp set global autotuninglevel=highlyrestricted

highlyrestrictedのほうが速い気がする。

  パラメータ
  意味




  disabled
  自動最適化を無効


  highlyrestricted
  既定値より受信ウィンドウを保守的に少し拡大


  restricted
  既定値より受信ウィンドウを制限的に拡大 


  normal
  既定値に戻す


  experimental
  restrictedの制限対応

アドオン混雑制御プロバイダに設定

netsh interface tcp set global congestionprovider=ctcp

  パラメータ
  意味




  ctcp
  有効


  none
  無効

ネットワークアダプタの電源の設定

「電力の節約のために、コンピューターでこのデバイスの電源をオフにできるようにする」のチェックは外します。「デバイスマネージャ」-「ネットワークアダプタ」にあるネットワークカードのプロパティの「電源の管理」というタブで設定できます。

参考サイト

GTmetrixの評価の見方と対策が詳しく書いてあるサイトのメモ

Thu, 09 Apr 2015 10:20:15 +0900

サイトを高速化するために評価してくれるサイトGTmetrixで評価の悪いところが何を示していて、どういった対策をすればいいか具体的なことを書いてあるサイトを見つけたのでメモ。Page SpeedとYSlowの対策がよくわかりました。

http://media-pickup.com/column/20150215/page-speed-and-yslow-optimization/ http://media-pickup.com/column/20150215/page-speed-and-yslow-optimization/

現在、MovableTypeを使用しているのですが、上記のサイトを参考にいろいろ対策した結果。あともうちょっとでAA。