mako110 これもまた掲題の通りなのですが。。
先日クライアントからの依頼で、掲題の対応を行いました。
「このサイトを今〇人が見ています」ってやつですね。
GoogleAnalyticsで表示されていますが、
これをサイト内で表示させたいということ。
常に多くのユーザーがアクセスしているサイトであれば、
賑わいを可視化するのに非常に良い手法だと思います。
最初は
を発見し、「おっ！jqueryで簡単にできそうだな！」
と思っていたのですが、試してみると上手くいかず。。
「１」としか表示されない。。。
まあ確かに、セッションの保持をし続けないと
リアルタイムの閲覧者数は集計できないですから、
jqueryだと難しそうですよね。
ということで、その後いろいろ検索しても一切情報が出てこなかったのですが、
英語の情報も含めて根気強く調査してみると。。
ありました！！！
なるほどー。
Firebaseを使って、セッション数を保持しておくのですね。
Firebaseについては、上記の記事が分かりやすいですね。
根気強く調べていると、世界中の誰かが助けてくれる。。。
インターネットって素晴らしいですね。
しかし、最近はこの手のチュートリアルも
すべてyoutubeでアップされるんですね。。
やることとしては
・FirebaseのRealtimeDatabaseを使い、ipアドレスごとのviewセッションを保持する場所を作る
・ipify APIを使い、各ユーザーのIPアドレスをjsonで取得する
・上記を合わせて、各ユーザーのセッション数を表示させるjavascriptを書く
って感じですね。
早速実装してみます。
Firebaseの設定は、上記動画が分かりやすいので割愛します。
英語の動画ですが、画面の通り進めていけば大丈夫だと思います。
ただ、動画ですと、コードを写していくのがしんどいのと、
上記の動画の通りだと、数値が延々と積みあがっていってしまいますので、
IPアドレスだけでなく、timestampを保持させるようにして、
一定期間（今回は10分）経ったtimestampを保持しているIPアドレスについては
削除するように調整しました。（ちょっと自分でも何言ってるか分かりませんが笑）
下記に記載しておきます。
★のところは、各アカウントによって変わるので適宜変更ください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
<script src="https://www.gstatic.com/firebasejs/7.14.1/firebase-app.js"></script> <script src="https://www.gstatic.com/firebasejs/7.14.1/firebase-database.js"></script> <script type="application/javascript"> // Your web app's Firebase configuration var firebaseConfig = { apiKey: "★★★", authDomain: "★★★.firebaseapp.com", databaseURL: "https://★★★.firebaseio.com", projectId: "★★★", storageBucket: "★★★.appspot.com", messagingSenderId: "★★★", appId: "★★★★" }; // Initialize Firebase firebase.initializeApp(firebaseConfig); //ココまでfirebaseの情報 function get_viewers_ip(json){ viewers_ip = json.ip; count_view(viewers_ip); } function count_view(viewers_ip){ var views; var ip_to_string = viewers_ip.toString(); for(var i, i = 0 ;i < ip_to_string.length; i++){ ip_to_string = ip_to_string.replace(".","-"); } firebase.database().ref().child("page_views/" + ip_to_string).set({ viewers_ip: viewers_ip, timestamp: parseInt( new Date() /1000 ) }); firebase.database().ref().child("page_views").on("value", function(snapshot){ views = snapshot.numChildren(); document.getElementById("view_count_text").innerHTML = views; }); //10分以上経ったIPアドレスを削除する var now = parseInt( new Date() /1000 ); var cutoff = now - 10 * 60; var ref = firebase.database().ref("page_views"); var old_ref = ref.orderByChild("timestamp").endAt(cutoff); old_ref.on("value", function(snapshot) { snapshot.forEach( childSnapshot =>{ childSnapshot.ref.remove(); }); }); } </script> <script type="application/javascript" src="https://api.ipify.org/?format=jsonp&callback=get_viewers_ip"></script> |
こんな感じです。
上記コードが入っているところが、閲覧者数としてカウントされます。
あとは、閲覧者を表示したいところに
|
1 |
現在<span id="view_count_text"></span>人が閲覧中です |
こんな感じにすれば、リアルタイム閲覧者数が表示させます。
一応、下記にデモをアップしましたので、見てみてください。
上記のような感じで閲覧者数が表示されます。
どなたかの参考になれば幸いです。
それでは。
