最近困ってたけど解決したことしなかったことと近況

Wi-FiルーターをGoogle Nest WifiからTP-LINK Archer BE805に変更した。

引っ越しと共にフレッツ光クロスになり、屋内も10G環境を整えたけれどWi-Fiは手を入れてないな、ということでWi-Fi7対応ルーターを買った。

  • スマホゲーのダウンロードがパケ詰まりするようになった
    プリ●ネをメインとして遊んでいるけれどダウンロードが頻繁に止まってリトライ入るし速度も遅くなるしなんだこれってなった
  • ベビーカメラが1日一回切断されるようになった
    毎日起きると常時起動のカメラモニター用タブレットに「接続できません」の文字。
    毎日再接続が必要になった。
  • IoT機器が頻繁に切断されるようになった
    引っ越してSwitchBot各種を取りそろえたけれど特に電球がダメだった。
    数回リセットしてBTから再接続&Wi-Fi再設定を行ったりしたけどダメだったりもした。
  • 睡眠監視用のWithings SleepがWi-Fiに接続できなくなった
    ログとれてないなーと思ったらWi-Fi再設定が必要だったので設定しようとしたらパスワードが通らないでやんの。
    同じパスワードで他の機器は接続できてるのに。

問題山積みになった。

 

 

ベビーカメラが切断される→DFSの影響を受けないチャンネルに固定

5Ghz帯で接続していたが、デフォルトの設定では繋がりやすいチャンネルを自動選択してくれる機能があった。

しかしそれだとDFS(Dynamic Frequency Selection)の影響を受けて夜中にチャンネル変更が行われていたらしい。

DFSの影響を受けない周波数/チャンネル固定に変更して解決した。

IoT機器が頻繁に切断される→Wi-Fi中継器を増設し、2.4Ghz帯だけそっちに回す

これは正直原因が不明だったけれど、接続台数が多すぎる or チャンネルが混線している or 親機とIoT機器の間に壁があるのが悪いのかもしれない、と思ったので中継器を増設した。RE330。

2.4Ghz帯しか使えない機器は中継器に集約したら安定した。

SleepがWi-Fiに接続できない→セキュリティをWPA/WPA2-Personalに落としたSSIDを用意

2.4GhzだからRE330につなげようとしたけれど一向に接続できなかった。

サポートに問い合わせても別のスマートフォンから試してくれる?と言われるけど解決しなかった。

仕様確認したらWAP2って書いてるけどもしかしてWPA2-PSK対応してないのでは?ってセキュリティ落としたら接続できた。

Sleep専用のSSIDが今我が家には存在している。

プリ●コネのパケ詰まり→VyOSのSegmentation Offload設定をオフにしたら治った治ってなかった(7/21)→治った(7/31)

これは一か月くらい苦しんだ。

ソフトウェアルーターを運用し、その下にWi-Fiルーターをアクセスポイントモードで取り付ける形だったが、Nest Wi-Fiでは問題なかったのにBE805に付け替えたとたん発生した。

BE805の各種設定はほぼ全部ON/OFFしたし初期化しても治らなかった。

悩んでサポートに連絡したら、「ルーターモードで直繋ぎして問題ないか確認してほしい」とのことだったのでONU直繋ぎしたら全然問題なかった。問題切り分けが必要になった。

VyOSの設定は自分ではわからない領域なので家族に依頼したところ、数時間してGRO/GSOの設定を変更したら治った。

(7/21)追記

改めて今日発生したので治ってなかった。

ルーターモードは再起動直後だったから発生しなかっただけかもしれない。

PCでは発生せずスマホだけの問題なので謎のまま。

(7/31)追記

IPv6が悪いんだろうなあというのはなんとなく発覚していたが
結局AndroidIPv6DHCP配布に対応してないらしいということで。

Wi-Fi経由の端末にはIPv6を割り当てないことで解決となった。

ステートレスアドレスで配布してたらまた違うのかもしれないらしい。このへんは難しくてわかりません。

PC端末等はIPv6ネイティブで通信し、Wi-Fi経由はIPv4 over IPv6してるらしい。

600Mbpsくらい出てるので、速度は困りませんでした。

 

あまりWi-Fi 7の恩恵を受けている気がしなかったけれど、各種問題が解決したことでやっと恩恵を受けられるかもしれない。

 

近況

子どもが1歳を超えました。みかん欲しさにはーい。

すこやかであれ。

jsdo.itがいつのまにか死んでいた

最近HTML5実力テストをやり直したくて何回かアクセスしてたんですけど
全然表示できませんでした

TOPはまともに表示されるときもあったけれど、ユーザーページがダメだったり

データサルベージしなきゃなあと思っていたのですが
とうとうTOPすらエラー画面になってしまった

SVG GirlをIE9で眺めたり
MinecraftのNotchが降臨して祭りになったり
HTML5実力テストさせてくれたり
すごいしょぼい椅子と机の高さ計算ツールなのに166kのPVがついたり
楽しかった

競合サービスがいっぱいあるので乗り換えは容易だけど
悲しいですね

Googleのキャッシュが取れるうちに残したいコードだけcodepenに移植しようと思いました

Xperia X Performance SOV33をAndroid6.0から8.0にメジャーアップデートしたらバッテリー消費がすごく激しくなったので初期化して直した

経緯

白ロムのロック解除制限前に購入したSOV33をUQmobileで運用してから半年ちょっと経過しました。

ずっとAndroid6.0で使っていたのですが、8.0も配信されていることだしゲームがちょっと早くなったりしないかな?という気持ちで唐突に6.0→7.0→8.0とアップデートをかけました。

そして起こった症状は朝充電100%で家を出て会社に着くころにはバッテリーが85%に減っているというバッテリー消耗激しすぎる問題。

XperiaMVNO運用するときはCPA接続とかいうのを使います。

6.0のときはWi-Fi切断時は「CPA接続:接続しました」という通知が出てたけれど、8.0にしてからは「CPA接続:接続なし」になっている。
しかしLTEは使える。

設定からバッテリー>詳細設定で電池を消費してるアプリを見ると一番は「モバイルネットワークスタンバイ」になってました。

これは格安SIMを使うときにSMSがないSIMカードを使うと起こっていたセルスタンバイ問題ではないかとあたりをつけましたが、SMSつきのカードを使っているんですね。

もうどうしようもないな、と思い切って初期化することにしました。

やったこと

  1. 二段階認証系アプリ(VIPAccess,Google認証システム)を使っているアカウントでの認証解除
    →先に解除しておかないと初期化したあとログインできなくなって死ぬ。
  2. 写真動画のバックアップ
  3. アプリのバックアップ
    →設定>システム>バックアップ
    からGoogleドライブへのバックアップをONにして一晩Wi-Fiで置いといた。
    インストールアプリの履歴や電話帳なんかはこれだけでよかった。
  4. LINEのトーク履歴のバックアップ
    →LINE>設定>トークトーク履歴のバックアップ・復元
    でこれもGoogleドライブにバックアップした。便利になった。
  5. ゲームやアプリのアカウント引継ぎコード発行
    →ゲーム一杯やってる人は大変そう。少なくてよかった。
  6. アカウントのログアウト
    →念のためAndroidでログインしてるアカウント認証全部削除した。

最近は全部Googleドライブに入れてしまえるので便利だなー。

あとはなくなっても死にはしないと思ったのでどきどきしながらシステム>リセットからデータの初期化をしました。

初期化したらあとはGoogleアカウントログインしてバックアップから復元しては各種アカウント・アプリにログインしつづけるだけで元の状態に戻りました。
といっても半日くらいかかった。しんどい。
おかげでCPA接続も接続表示になったり電池持ちもとってもよくなりました。
朝100%から帰宅しても電池50%残っています。安心。

結論

やっぱ初期化。
メジャーアップデートしたら初期化は必須。

 

 

8.0にしたらChromeがIDパスワードをぐいぐい吸い上げるようになったのでログイン関係はとても楽になりました。
しかしGoogleへの依存が激しすぎて怖いレベル。なくなったら生きていけない。
とりあえずこのままSOV33であと2年くらい生き延びたいです。

アクセシビリティ対応済みのドロワーメニュー「hiraku.js」

コンテンツが多いとメガメニューやドロップダウンメニューが使われることが多いですが

アクセシビリティとかスマホ向けの処理を分けたりなどが必要になります

スマホでよく使われるドロワーメニューならパソコンもスマホも同じ処理でいけるので

探したところ、アクセシビリティ対応をあげているjQueryプラグインhiraku.jsにたどり着きました

www.appleple.com

オフキャバスメニューとも言うそうです。初めて知りました。

キーボードでの操作も可能、ボタンにはスクリーンリーダー向けのテキストも挿入されていました。

アニメーション部分はCSS3での動作になるので、コンテンツのスライドを止めたり左開き・右開きなどの処理もほぼCSSで調整できそうでした。

ただ、「オフキャンバスメニュー開閉時に Body 自体は固定する」処理を行った際、メニューを閉じる際にFirefoxで右スクロールバーが閉じる瞬間消え、完全に閉じたら復活するので画面がカクカクする問題に遭遇しました。

この手の処理だとhtml { overflow-y:auto; } を入れて常にスクロールバーを表示させて対処することが多いのですが、こちらのスクリプトはコンテンツをスクロールさせないようにbodyにheightとネガティブのmargin-topが入っていたので、コンテンツが切れてしまうという事態になりました。

とりあえずhiraku.js 138行目の$('body').css({ width: '', height: '' });を145行目scrollToの上に入れることにより、カクカクを回避することが可能でした。

設定も簡単で今後アクセシビリティへの対応を求められることも増えそうなので、是非これからも使わせていただきたいスクリプトでした。

ありがとうございます。

Google ChromeでCSSアニメーションを使っている要素の中にYoutubeを埋め込むと、全画面(フルスクリーン)にできない

stackoverflow.com

animation-fill-mode が none 以外になっていると

その要素の中にしかYoutube動画が拡大されない

CSSに以下を記述することで回避できました

:-webkit-full-screen-ancestor:not(iframe) {
  -webkit-animation-fill-mode: none !important;
  -moz-animation-fill-mode: none !important;
  -ms-animation-fill-mode: none !important;
  -o-animation-fill-mode: none !important;
  animation-fill-mode: none !important;
}

jQueryプラグインjquery.inviewで要素再表示時にアニメーションしない

LazyLoad(画像の遅延読み込み)みたいな表示をしたいということで

表示エリアの判定が楽そうなので、jquery.inview.jsを使用してみた

github.com

今回は表示する要素をcheckboxで選択できるようにする必要があり、表示が変わったらその度にinviewで上からパラパラフェードインしてきてほしかった

しかしそのままだと、一度表示されたことのある部分が、非表示のままになった。

スクロールして戻ってきたら表示される。

修正したのが以下

どうも一度表示した要素にはdata-inview="true"が入っているということが分かったので、表示リセット時にdata('inview', false)を設定すると、再表示した時にもうまくアニメーションしてくれた

チェック外した時の挙動が少しおかしいがまた直す

コーディングしたら構文チェックをしよう。Firefoxアドオン「Html Validator」の紹介。

構文チェックはとても大切

HTMLコーディングをしたら誰でもやったことがあると思われるHTMLの構文エラー

<div class="section">
    <h2>ほげほげ</h2>
    <p>ふがふが</p>
</div>
<div class="section">
    <h2>ほげほげ</h2>
    <p>ふがふが</p>
<!-- divの閉じタグ一個無い -->

構文チェックを行えばエラー箇所だけハイライトしてくれてすぐ直せます。
有名なのは以下のW3Cのエラーチェックサービスかと思います。

validator.w3.org

しかしこのサービスは1ページづつしか構文チェックできないし、ローカルのファイルは
ソースをテキストエリアに張り付けなきゃいけなかったりで面倒です。

Firefoxのアドオンを入れる

「HTML Validator」というFirefoxのアドオンは、ソースコードを表示(Ctrl+U)すると、ソースコードの下部にエラーチェック結果を表示してくれます。

f:id:teffet:20160603171839p:plain

昔はソースコードを開くだけでよかったのですが、現時点(2016/06/03)のバージョンではソースコードの画面でもう一度Ctrl+Uを押さないと表示されません。
それでもエラーチェックしたいソースを開く→Ctrl+Uを押す
だけでエラーチェックしてくれる、ローカルのHTMLでも問題なし。

アドオンの形式が変わってChromeと同じ形式になる問題とかいろいろ言われていますが、どうかこのまま開発を続けてほしいと思っているアドオンです。

addons.mozilla.org