株式会社永産システム開発 / backendエンジニア
webサイト分析ツールの開発
# プロジェクト概要 ## 目的・背景 このプロジェクトはwebサイトの分析を行うためのアプリケーションを受託開発するというものである。 実装する機能は、「ヒートマップ」、「離脱防止」、「チャットボット」、「ポップアップ配信」、「ABテスト」、「プッシュ通知」等である。 このアプリケーションは弊社でスクラッチで開発したが、私が参画したのは後半である。 ## 規模感、チーム構成、担当した役割 弊社のbackendエンジニアチームで、frontend, backend, インフラ等、サービス展開に必要な作業を包括的に対応した。 私が担当した業務は、上記の「ヒートマップ」機能の実装である。 ## 使用技術 言語: Ruby、 JavaScript フレームワーク: Ruby on Rails DB: MySQL インフラ: AWS # 開発・実装内容 ## 1. ヒートマップ機能の実装 ### 概要 エンドユーザーが訪問したWebサイトにおいて、どのような動作を行ったかを可視化するための、ヒートマップの実装を行った。 ヒートマップの種類としては以下の2つがある。 * クリックヒートマップ: ページのどの部分がどの程度クリックされたかを可視化する * アテンションヒートマップ: ページのどのスクロール領域をどの程度見ていたかを可視化する ### 打ち手・使用した技術 ヒートマップの表示を行うために、javaScriptのcanvas APIを使用した。 また、クリック・アテンションヒートマップの描画には、クリック座標や、閲覧秒数等の情報取得が必要である。 これらの情報はjavaScriptのaddEventListenerを使用して、必要な情報を取得し、ページ遷移時にDBに保存することで実現した。 ### 成果 ヒートマップ機能を実現できた。 ## 2. ヒートマップデータの運用 ### 概要と課題 上述のヒートマップデータはその性質上、かなり膨大な量になることが予想された。 それにより発生するDBの運用コストを低減する必要があった。 また、取得速度の向上も考える必要があった。 ### 打ち手・使用した技術 ヒートマップデータはその構造上、RDBで管理する必要はなかった。 よって、NoSQLタイプのDBが使用可能であったため、コストやデータIOに優れたAWSのDynamoDBを採用した。 ### 成果 DynamoDBを使用することで、DBの運用コストを低減させ、また、データIOのパフォーマンス向上も実現できた。 # 本プロジェクトを通して学んだこと * javascriptを用いた画面情報の取得 * DynamoDBの実践をもとにした使用方法