海岸製作所

Blog

2018
2
25

実装されたら超便利!簡単に回線の情報が取れるjs Network Information API

jsで簡単に回線の情報が取れるといいなぁと思いませんか?

それが、調べたらあったんです。
Network Information APIっていうのが。
Network Information API はシステムのネットワーク接続に関する情報を、一般的な接続タイプ (例: ‘wifi’ や ‘cellular’ など) の観点から提供します。これは、ユーザの接続を元に高解像度コンテンツまたは低解像度コンテンツを選択するために使用できます。API の全体像は NetworkInformation インタフェースの追加と、Navigator インタフェースに追加された 1 個のプロパティ Navigator.connection で構成されます。
とのこと。
https://developer.mozilla.org/ja/docs/WebAPI/Network_Information

例えば、inlineで埋め込んだ動画コンテンツをセルラー回線の時だけ、 静止画に置き換えるなーんてことができたら超便利!

しかし…現状は?

現状ではChromeしか対応していない状態。(T_T)

2018 3/1追記

でも、キービに動画を埋め込んだサイトでUAで振り分けるの勿体な〜い!
だってスマホやタブレットでも動画再生は可能なんですから。
というわけで、キャリア各社のゲートウェイを調べたら下記の数値から始まるIPアドレスになるようです。

ドコモ

・1.66.~
・1.76.~
・1.75.~
・1.78.~
・1.79.~
・49.96.~
・49.97.~
・49.98.~
・49.104.~
・49.106.~
・110.163.~
・183.74.~
・183.75.~

au

・59.128.~
・59.135.~
・106.128.~
・106.135.~
・111.86.~
・111.87.~
・118.152.~
・182.248.~
・182.249.~
・182.250.~
・222.1.~
・222.15.~

ソフトバンク

・123.108.~
・126.161.~
・126.163.~
・126.186.~
・126.192.~
・126.193.~
・126.194.~
・126.204.~
・126.237.~
・202.253.~
・210.228.~


しかし、JSでIP取るの難しそう…
そこで、PHPにてクライアントのIPとって前方一致で条件分岐かけてJSに渡すことにしました。
で、簡潔にPHPをJSに埋め込んでしまえ!というのが下記のソースになります。
当然このまんまじゃ動かないのでサーバの.htaccsesの設定を忘れずに。 var circuitの値がセルラー回線なら1、それ以外は0を返します。 長〜くメンドくさいですが、これしか現状では方法はなさそうです。

Category カテゴリ一覧

Author このブログを書いてる人

ハヤシ ヒロキ

2009年からWeb製作屋やってます。
葉山育ち。
お酒とアクアリウムと鉄道が好きな30代。
どちらかと言えばデザインよりもコーダー寄り。
表現の幅を広げたくてインタラクティブなものやシステム的なものも取り入れるべく悪戦苦闘。
シンプルで動きなど触っておおっとなるWeb制作を目指しています。
お仕事もお待ちしております。

お問い合わせはこちら