水飴信号 ver1では、jQueryを使ったTwitterフォローしてほしいボタンを作ってましたが、他のサイトではあまり見ないようなワンポイントが入っているのはいいな！と思ったので、実用性や効果は度外視でこのサイトにもボタンを設置してみました。

フォローしてほしいボタンはVue.jsで作成しました。コンポーネントのプログラムは以下の通りです。

下の方までスクロールしたら画面に出てきて、マウスオーバーでぴょん！とするのは前回とほぼ一緒ですが、ボタンに使用する画像の読み込み部分を少し改善しました。

前回のボタンでは、マウスオーバー時に表示する画像は初めてマウスオーバーした時に画像に対するHTTPリクエストを発行するため、初めてマウスオーバーしてから画像が切り替わるまでに一瞬ラグが発生するようになっていました。
ですが、今回はVue.jsのcreatedメソッドを使用してVueコンポーネントのインスタンスが作成された時点でボタンに使用する全ての画像のHTTPリクエストを発行しているため(155~169行目)、最初にマウスオーバーした時もラグ無く画像が切り替わるようになりました。

また、改善ではないですが今回初めてカスタムディレクティブというものを使ってみました。画面のスクロールとリサイズはVue.jsにデフォルトでイベントリスナが付いてなかったみたいなのですが、カスタムディレクティブを使用してスクロールイベントとリサイズイベントを発火させてコンポーネント内の変化を起こすようにしました(28~49行目、107~153行目)。

公式的にはTwitterフォローボタンのリンク先はここみたいですが、個人的好みにより普通のプロフィールページへのリンクにしています。

基本的にこのサイトのプログラムは動けばよかろうの精神で書いているのですが、Vue.jsに関しては完全に雰囲気なので他のサイトはどんな感じになってるのかが気になるところです。