【あなたは何色？】IPアドレスを取得して動的にrgbaを表示させるjavascriptを書いてみた

人はそれぞれ異なる「色」を持っていて、時に変化したり光ったりすると思います。今回は、そんな「動き」や「透明感」を表現しようと思い、IPアドレスを取得して動的にrgba色を表示させるjavascriptを書いてみました。

こんな風に書いた

 

 
この最大12桁のIPアドレスを4つに分解します。
「.」で区切って、左から「r.g.b.a」の色を割り当てます。
 

 
今回は4つめだけ、225で割って小数点第2位までの値に変換します。
rgbaのaが0だと完全な透明になってしまうので、変換した後の値が0.1以下の場合は0.1を足すことにしました。
 

 

 

 
あなたの色は、何ですか？
 
ちなみに僕はWi-Fiがrgba(106,188,39,0.13)、楽天モバイルがrgba(110,165,138,0.14)でした。
サムネイルの2色です。青が好きなんだけど、緑な人なんだろうか。
 
 

コードはこちら

 

IP取得はこちらを参考にPHPで。最後は#color-ipのdivの背景色をページ読み込み後に設定しています。
※参考：【javascript】IPアドレスを取得する方法 – ysklog
 
IPアドレス×その時の時間、という風に同じIPでも色が変わる仕組みとか、CSSアニメーションでゆらゆら波打つように色が変わるとかも、試してみたいですね。