ネットにつながっているか・画面の向き

ブラウザに「いまつながってる？」と聞いた答えと、画面の向きを、その場で出します。 ただしつながっているという答えは、あてになりません。 そのわけが、このページの中身です。

true は「つながっている」ではなく「かもしれない」です

ここがこのページの本体です。navigator.onLine が true でも、インターネットに出られるとは限りません。なんとなくそう読める名前をしているのですが、そういう意味ではないのです。

HTML の仕様の書き方が、そのことをはっきり示しています。 false については「確かにオフライン（ネットワークから切りはなされている）」と強く書いているのに、true については「オンラインかもしれない（might be online）」としか書いていません。片方だけ、わざと弱く書いてあるわけです。

なぜ弱いのか。仕様は理由もそのまま書いています ──「この値はもともと当てにならない。コンピューターは、インターネットに出られないネットワークに つながっていることがある」。つまり「ネットワークにつながっている」と「インターネットに出られる」は別のことで、この値が見ているのは前者だけなのです。

true のままになる場面は、めずらしくありません

家の無線につながっているのに外に出られないとき、空港やホテルでログイン画面が出たまま先に進んでいないとき、 線はささっているのに回線そのものが止まっているとき ──どれも true のままです。 MDN も「LAN につながっていればオンラインとみなされる。その LAN にインターネットが なくてもです」と書いています。

false のほうも、じつは言い切れません

では false なら安心して「切れています」と言えるかというと、そうでもありません。 MDN が、決め方の中身をこう説明しています ──「ウィンドウズでは、決められたサーバーに届くかどうかで判断している。 防火壁や VPN がそれを止めることがあり、コンピューターがインターネットに 出られる状態でもそうなる」。

決め方はブラウザや基本ソフトによってばらばらで、そろえられていません。 だから MDN は、使い方についてまで踏み込んで書いています ──「この値でページの機能を止めてはいけない。オフラインらしい、という手がかりを出すだけにすること」。 このページが答えを言い切らずに「ブラウザはこう言っています」と書いているのは、 この助言に従っているからです。

本当に外に出られるかを確かめる方法は、1つしかありません

実際に、どこかへ通信してみることです。小さなデータを1つ取りに行って、返ってくれば出られている。それ以外に確かめようがありません。 値を読むだけでは、どうやっても分からないのです。

そしてこのページは、その確認をしません。 このサイトは入力も貼りつけた文章も外に出さないと決めていて、 つながりを確かめるためであっても、そこだけ例外にはしないからです。

できないことを、できるかのように書かない。これは遠慮ではなく、道具としての正確さの話です。 このページが出せるのは「ブラウザはこう言っている」という1つの事実と、そこから何が言えて何が言えないかだけ。 それ以上を書けば、それは嘘になります。

角度は「まっすぐ」からではなく、その画面の「もとの向き」から測ります

ここからは画面の向きの話です。まず、いちばん意外なところから。screen.orientation.angle の角度は、まっすぐな状態から測ったものではありません。仕様はこう定めています ──「その画面のもとの向きから、反時計回りに何度まわっているか」。

「もとの向き」は端末ごとに違います。仕様は、机に置く画面ならよこ長、手に持つ機械ならたて長であることが多い、と書いています。 だから同じ「よこ長に見えている状態」でも、角度の数が変わります ── 手に持つ機械では90度、机に置く画面では0度です。

だから、名前と角度から「もとの向き」を逆算できます

仕様は、もとの向きが たて の画面と よこ の画面について、名前と角度の対応表を2つ載せています。 面白いのは、2つの表で同じ組み合わせが1つも重ならないことです。 たとえば landscape-primary は、たての表では 90度、よこの表では 0度。どちらの表に載っているかで、その画面のもとの向きが決まります。

上の「この画面の『もとの向き』」の欄は、これをそのまま計算したものです。ブラウザはもとの向きを教えてくれませんが、 名前と角度の2つが分かれば逆算できる、というわけです。 表のどちらにも当てはまらない組み合わせが来たときは、当てずっぽうで決めずに「判断しません」と書くようにしてあります。

なお仕様には、「さかさまのたて持ち（portrait-secondary）にだけは変わらない端末がある」という注意も書かれています。 回してもその名前が出ないのは、壊れているからではありません。四角い画面や折りたたむ画面のように「上がどちらか」がはっきりしないものでは、もとの向きの決め方がブラウザによって違うことがある、とも書かれています。

「画面の向き」は「端末の向き」ではありません

名前のとおり、ここに出るのは画面の向きです。端末をどう持っているか、ではありません。画面の回転をロックしていれば、端末をたおしてもこの欄は動かないのが正しい動きです。

仕様の配慮の節が、そのことをはっきり書いています ──「利用者が端末を固定して使っていることがある（たとえば車いすの肘掛けに）」。 だから「回してください」を前提にした作りにしてはいけない、と続きます。向きは、いつでも変えられるものだと思ってはいけないわけです。

もう1つ、混ざりやすいのが窓の形です。 パソコンで窓をほそ長くすると窓はたて長になりますが、画面の向きはよこ長のまま動きません。 食い違って見えても壊れてはいなくて、screen.orientation が見ているのが画面ぜんたいで、窓ではないからです。 上の表で2つを並べているのは、この違いを見てもらうためです。

古いブラウザには window.orientation という別の窓口もありますが、このページは読みません。 MDN が「新しく作るものでは避けること」「代わりに Screen.orientation を使うこと」と書いている古い方法だからです。 読めないときに古い方法で埋めると、数は出るのに、どの決まりで出た数なのか分からなくなります。

向きの数字は、わざと単純にされていることがあります

最後に、数の読み方について1つ。画面の向きと角度は、利用者を見分ける手がかりになりえます。仕様はそのことを認めたうえで、ブラウザがとるべき対策を書いています。

シークレットウィンドウのような場面では、名前を portrait-primary か landscape-primary の2つに限り、角度も 0 か 90 しか返さないようにすることが勧められています。 理由として書かれているのが「端末がどう持たれているかを明かさないため」── 向きは、それだけで人の状況を語ってしまうということです。

さらに、後ろに隠れているタブには向きの知らせを届けないという決まりもあります。 見ていない窓が向きを集め続けることを防ぐためです。

ですから数が出ているからといって、測ったままの数とは限りません。 画面まわりの値を扱うときに、覚えておくとよいところです。

出どころ: つながりの値と online・offline の知らせはWHATWG HTML Standard（Browser state の節）（新しいタブで開きます）、決め方がばらばらであることと使い方の助言はMDN の Navigator: onLine（新しいタブで開きます）、向きの名前・角度の表・配慮・指紋対策はW3C Screen Orientation（新しいタブで開きます）、古い窓口を使わない理由はMDN の Window: orientation（新しいタブで開きます）から取っています。 引用した文はすべて原典を開いて確かめました。読んだ値はどこにも送っていません。