どこかのホームページを見ている時に、「Cookie食べてもいい？」っていう、アラートみたいな表示が出てきて「うざ〜！！！」と思った人、手を上げてみろ。
そう、あれ、ウザいのだ。
スマートフォンで、似たような感じで下やら上から、にゅろ〜んって出てくる広告バナーなんかも、ウザリング極まりないのだ。
でも、ウザいというのは、目に付くからウザいのであって、目に止まりもしなかったら、ウザくないという見方もある。
使い古された表示方法だが、そんなウザ表示機能を「フローティング要素」と勝手に名付けて、5分程度で他人に提供してあげたら、めちゃくちゃ喜ばれたので、
そのコードをそのままブログに掲載しておくから、同じくコピペで使いたい人は、感謝するべし。
目立つための施策について
さて、ウザ口調もここまでとして、今回の経緯をまずはお話させていただきます。
以前ホームページを作った人から、
「トップページのニュース項目に既に書いて表示もしてある内容を、もっと目立つようにしたい」
という相談を受けました。
なんか、禅問答をしている一休さんになったような気分になったが、このような相談をしてくる場合は大体において相手はこうして欲しいという答えを持っていない、いわゆる
ノーアイデア状態なのである。
ということは、こちらから、個気味の良いご提案をさせていただくフェイズというボールはこちらに投げられた状態なワケです。
確かに、トップページのニュースには、リンク付きで表示されているのだけれど、ファーストビューには表示されていない、２画面ほどスクロールした位置に表示されているだけだ。
同じ文字をファーストビューに表示するように書き込むのも芸がないというか、見た目もなんか微妙で、目立ちもしない。
そう目立つことは、ホームページにおいて、重要なポイントでもあるのだ。
単に情報をきちんと並べ立てて表示するだけのホームページって、面白くもないし、
変化に乏しい印象しか残らない（多くの場合は・・・）
フローティング要素について
そこで、フローティング要素の提案をしてみたところ、相手が興味を示してくれたので、zoomの共有で、眼の前でjavascriptを書いているところを見せながら、作ってあげたという経緯です。
フローティング要素というのは、このブログの上部で書いた、広告バナーや、クッキー承諾バナーのような、どうしても強制的に見てしまう画面内要素だと理解してください。
最近では、多くの企業が、ホームページの右下に、「チャットボット」のフローティング要素が仕込まれていて、一度くらいは使ったことがある人の方が多いのではないでしょうか？
Webマーケティング業界では、ああしたバナーをLPO(LandingPageOprimyzation)と言って、ホームページの適正リンクを配置する用途で製品化していたというのを業界人なら誰でも知っているはずです。
何を隠そう、ユゲタも、あのLPOやら、EFOやらを開発していたので、今回作ったフローティング要素というのは、LPOの簡単バージョンという事なんですね。
ソースコード
便宜上、Javascript１ファイルのみの構成にしています。
gadget.js
const str = "Sample Floating"
function Main(){
const div = document.createElement("div")
div.innerHTML = str
document.body.appendChild(div)
div.style.setProperty("position","fixed","")
div.style.setProperty("bottom","20px","")
div.style.setProperty("right","20px","")
div.style.setProperty("padding","10px 20px","")
div.style.setProperty("background-color","white","")
div.style.setProperty("border-radius","10px","")
div.style.setProperty("color","#33F","")
div.style.setProperty("box-shadow","4px 4px 10px rgba(0,0,0,0.5)","")
}
switch(document.readyState){
case "complete":
case "interactive":
new Main()
break
default:
window.addEventListener("DOMContentLoaded" , (()=>new Main()))
break
}
実装したいページのHTMLのどこかに次のタグを埋め込むことでページが読み込まれたら自動で表示されるようになります。
※ファイルパスは環境に応じて変更してください。
<script src="gadget.js"></script>
デモ
デモは、表示タイミングではなく、下記のボタンを押した時に表示発動するようにしています。
汎用的な使い方
ソースの中の1行目の文字列は、表示するHTMLのタグになっているので、その中に
Aタグやら、お好きな
style属性を書き込めば、好きな表示で簡単にフローティングバナーが作れます。
Javascriptを難なく操れる人は、今回のソースは大したことがないと思いますが、コピペしかできない人たちにとっては、便利に使えるソースだと思います。
フレームワークみたいなWebサイトに設置する場合は、共通ページ箇所などに入れておくことで、全てのページで、フローティング表示できるようになります。
もし、ウザと思われてページを離脱されるのが怖いのであれば、バッテンの
閉じるボタンを付けておくというのも悪くないかもです。
クッキーやLocalStorageで、二度と出てこないように設置もできるので、利用者の気分次第で対応してくれるフローティングバナーのできあがりです。
でも、今回は機能に盛り込んでませんので、もしどうしてもご要望があるようでしたら、お便りいただければソースを掲載したいと思います。
あとがき
こういうフローティングバナーって、一昔前って、なかなか構築できる人が少なかったんですが、最近では、Webの標準化が進んできて、ブラウザ依存するポイントもかなり少なくなったので、
安定して簡易な書き方ができるようになりました。
でも、今回のソースコードは、古いIEでも動きますよ（試してないけど、きっと）。
何で動くか動かないかわかるのかというと、これがこれまで経験してきた実績が脳にインプットされているからなんでしょうね。
オレの脳内フローティングバナーからIEが消え去ることは金輪際無いだろう・・・（全然カッコよくないし、今後不要）
