• IDEA

  • 2016.02.24

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

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

こんな風に書いた

 

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

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

 

 

What’s Your Color?

 
あなたの色は、何ですか?
 
ちなみに僕は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アニメーションでゆらゆら波打つように色が変わるとかも、試してみたいですね。
 

この記事が気に入ったら
いいね!しよう

orange plus music
の最新情報をお届けします

WRITER

石松豊 / がちゃーん

音楽とインターネットが好き。CINRAの制作ディレクター。orange+me名義で音楽を作りつつ、個人やGerbera Music Agencyでミュージシャンを支援しています。

詳細プロフィールや活動実績、お問い合わせなどはWORKSよりご覧ください。

ABOUT THIS BLOG

orange plus music
(オレンジプラスミュージック)

音楽とインターネットについて考える個人ブログ。アンビエント・エレクトロニカ系を中心としたおすすめ音楽紹介や、マーケティングコラム、日々考えたことなど、アイディアを自由に発信しています。

RELATED

orange plus musicリニューアル!変更点やポイントをまとめました

2017.10.15

Twitter埋め込みタイムライン上部の「●●さんのツイート」をなくす方法

2016.10.02

canvasで横幅可変な正規分布曲線を描いてみた

2016.07.09

CSSでシネマグラフは作れる?

2016.05.19

【WordPress】前後の記事のカテゴリ名を取得・表示させる方法

2015.05.08

PR