JavaScriptでブラウザ判定をするなら「Platform.js」がラク | 綺麗に死ぬITエンジニア
JavaScriptで閲覧者のブラウザやOS等のプラットフォームを判定するのに、皆さんはどうしてますでしょうか。 それぞれ独自にユーザーエージェントから推測するコードを実装している方も多いと思います。 しかし、現在様々なプラットフォームが存在するため、正確にプラットフォームを推測するのは、個人の実装では難しいところがあります。実装できたと思っていても、想定外のユーザーエージェントによって正しくブラウザ名やそのバージョン情報を取得できていない場合もあるかもしれません。 そこで今回は、できる限り正確に、そしてラクにプラットフォーム判定を実装したい人向けに、ユーザーのプラットフォームを判定するJavaScriptライブラリ「Platform.js」を紹介します。 「Platform.js」とはPlatform.jsは、ほぼすべてのJavaScriptプラットフォームで動作する、プラットフォーム検
userAgentでブラウザ＆デバイス判別 2017年版 - Qiita
ブラウザのUserAgentを調べて、ユーザーのブラウザ名・バージョン・デバイスの種類を判定するJavaScriptライブラリをアップデートしました。CSSでの場合分けに使えるように、Modernizrっぽく <html> タグのクラス名に判定結果が追加されるようにしてみました。 よりよい方法やバグ等ございましたら、アドバイスいただけると光栄です。 ソースコード ちなみにおいらのコードはとても汚いです。 Githubにも置いておきますね → Github - UserAgentChecker.js // ------------------------------------------------------------------------------- // User Agent Checker // ----------------------------------------
.layerY | JavaScript 日本語リファレンス | js STUDIO
現在のレイヤーの相対的なイベント発生場所の垂直位置を返します。 文法 var Ypos = event.layerY; Ypos変数には、マウスイベント発火時の、マウスポインタの垂直位置のピクセル数値が返ります。 例 <html> <head> <title>pageX\pageY & layerX\layerY example</title> <style type="text/css"> body { font-size: 12px; } #d1 { border: solid blue 1px; padding: 20px; } #d2 { position: absolute; top: 180px; left: 80%; right:auto; width: 40%; border: solid blue 1px; padding: 20px; } #d3 { position:
トップページ -
10の顧客セグメント例とそのメリット 企業が購買者をセグメント化できるようになり、マスマーケティングの時代は終わりました。顧客セグメンテーションは、マーケティング、コンテンツ制作、営業、解析チームなどに様々なメリットをもたらします。顧客セ…
リアルタイムウェブ解析 - Matomoユーザー会
Piwikは、リアルタイムウェブ解析レポートを提供しています。 今日のデータ、今月のデータ、あるいは任意の日付範囲で、最新の訪問者情報を表示し、最新の分析データをレポートします。 デフォルトではレポートは１０秒ごとに更新されますが、管理機能の設定でこの間隔はカスタマイズ可能です。 しかしそれだけではありません！ Piwikは、リアルタイムのトラフィックを分析しより良く理解するためのツールを提供しています。 リアルタイムのライブ！ウィジェット ライブ！ウィジェットは、デフォルトでPiwikのダッシュボードに表示され、ウェブサイトへの訪問者のリアルタイム?フローを示しています。 また、過去24時間以内と最新の30分以内のリアルタイムのカウンタ、訪問者、ページビューを表示します。 ライブ！ウィジェットは5秒ごとに更新され、、リストの一番上に新しい訪問者（あるいは新しいページを見た既存の訪問者）を
PiwikでGoogle Analyticsを超えるアクセス解析を実現
Google Analyticsもカスタム変数を活用すると使える幅が広がるのですが、 少しとっつきにくいと感じた人も多いと思います。 そこでPiwikをインストールして、そのような不便さを解消してみたいと思います。 ※厭くまで当時のデータです。現在はGoogleAnalyticsにもかなりの機能が追加されています。 ■Piwikのインストール ・前提パッケージのインストール PHPの他、mysqlをインストールします。 yum -y install httpd php php-mbstirng php-mysql php-gd php-xml mysql-server ・mysqlの設定、起動、Piwik用データベースの作成 ・mysqlの起動 /etc/init.d/mysqld start ・mysqlの設定、パスワードの設定 /usr/bin/mysql_secure_install
JavaScriptで視線追跡 - ごった日記
「WebGazer.js：ブラウザ上でのウェブカメラによる視線追跡機能をみんなに」 https://webgazer.cs.brown.edu/ JavaScriptライブラリ1つで、ウェブカメラ画像から「どこを見ているか」をリアルタイム取得するというもの。特筆すべきは自動補正機能で、マウスカーソルの動きやクリックから、スクリーン上の見ている先の精度を勝手に高めることができます。 あくまでカメラへのアクセスを許可しないと動作しないので、知らないうちに撮影され、視線も追跡されていた、ということはないと思いますが（脆弱性がない限り）、カメラを動かすということの意味を考えるいい機会になるんじゃないでしょうか。スマートフォンアプリが内側カメラをどう使っているのか、とか……。
ScaleOut | Supership
TARGETING正確かつ豊富なデータで きめ細やかなターゲティング 独自データによるユーザーの属性や興味関心などの精緻なセグメントで的確にアプローチが可能です。 Post Cookie時代の次世代マーケティングプラットフォームを通じて、独自開発の広告配信用ID「Hyper ID」で、プライバシーに配慮した高精度のターゲティング広告配信が可能です。 次世代マーケティングプラットフォームとHyper IDターゲティングについて詳しくはこちら
WebGazer.js - WebカメラとJavaScriptによるアイトラッキングシステム MOONGIFT
ユーザテストでユーザの視線がどこに移動しているのかチェックするのは必要です。ただし、アイトラッキングシステムを使うのはとても複雑ですし、コストもかかります。手軽にするため、マウスのトラッキングで済ましてしまっているケースもあります。 そこで使ってみたいのがWebGazer.jsです。JavaScriptとWebカムを組み合わせてアイトラッキングを実現しています。 WebGazer.jsの使い方 使っているところ。顔が認識されているのが分かります。 目線をオレンジのボールに持っていくらしいのですが…なかなか思い通りには動きません。 WebGazer.jsの精度はまだまだ実用レベルではないですが、Webカメラを使うことで視線の動きが追えればアイトラッキングシステムを手軽に使えるようになるでしょう。テストはもちろん、視線を使った情報入力などにも応用できそうです。 WebGazer.jsはHTML
gas.jsというGoogle Analytics用スクリプトを書いた
ダウンロード・ソースコード Github: ahomu/GAS MITライセンスです。色々とご自由に。 より身近なイベントトラッキングを提供 メインフィーチャとして、gas.jsはイベントトラッキングをより身近にしてくれます。 従来のイベントトラッキング Event Tracking Guide - Google Analytics — Google Developersより <a href="#" onClick="_gaq.push(['_trackEvent', 'Videos', 'Play', 'Baby\'s First Birthday']);">Play</a> onclick属性とかつらい！不思議なスペルが目に痛い！！ よくよく見ればVideoをPlayして、それがBaby's First Birthdayなのは、なんとなく分かるけど_trackEventメソッドの引数の
Google Analyticsがさらに使いやすくなる！ユーザーのさまざまなインタラクションを自動的にトラッキングするスクリプト -Autotrack
Google純正のGoogle Analyticsをさらに使いやすくする便利なスクリプトを紹介します。 ページ上のあらゆる要素のクリックイベント、メディアクエリのトラッキング、TwitterやFacebookボタンのトラッキングなどをGoogle Analyticsで自動的に取得することができます。 Autotrack -GitHub Introducing Autotrack for analytics.js Autotrackの使い方 Autotrackのプラグイン Autotrackの使い方 サイトにAutotrackを加えるには、2つのことをします。 ページに「autotrack.js」をロードさせる。 Autotrackのプラグインを必要とするトラッキングのスニペットをアップデートする。 参考: トラッキングのスニペット、プラグインの使用 既にデフォルトのJavaScriptのス
Canvas Fingerprintingはクッキーより怖いのか技術的に調べてみた｜TechRacho by BPS株式会社
morimorihogeです。最近忙しくて遠征すらおぼつかない状態です。夏イベント資源足りるのかこれ。 なんかはてブ界隈などでCanvas Fingerprintingの話題が出ていて、Cookieより怖い！とか、Adblockみたいに無効にする方法がないのにユーザトラッキングできて怖い！！といったアオリの記事がぽこぽこ出てきているようです。 でも、ざっと調べた限りの日本語のどの記事を読んでも、具体的にどうやってユーザ個々のトラッキングができるようになるのか、技術的に解説されている記事が見つかりませんでした。 というわけで、エンジニアとしてはここは一つキッチリ理解しておきたいと思い、調べた結果をまとめます。 もし僕の読解がおかしくて変なことを言っている部分があれば、はてブやTwitter、コメント欄などで指摘して頂ければ更新していこうと思いますので、マサカリ上等です ;) Canvas F
Canvas Fingerprintingというトラッキング技術
var fingerprint = new Fingerprint({canvas: true}).get(); これだけでトラッキングIDを取得できます。 ※試しに利用して何かあっても責任は取れませんので注意してください。 本当に危ないのか？ 今のところ追跡をされても問題はないと考えられていますが本当のところどうなのでしょう？ 悪用されてしまうとしたらどのようなものになるか考えてみます。 ダミーアカウントの無意味化 アカウントを複数持って怪しいサイトではダミー情報を入力して試すなんてことがあると思います。 Canvas FingerprintingのトラッキングIDと個人情報をどこかから取得できれば個人は特定されてしまいます。 こんな事になればメールを入力していないのに怪しいサイトからスパムメールが飛んでくることになりかねません。 個人情報問い合わせサービスの出現 トラッキングIDをキー
Esprima
Esprima is a high performance, standard-compliant ECMAScript parser written in ECMAScript (also popularly known as JavaScript). Features Full support for ECMAScript 2019 (ECMA-262 10th Edition) Sensible syntax tree format, with optional node location info Experimental support for JSX, a syntax extension for React Heavily tested (~1600 tests with full code coverage) API Esprima can be used to perfo
Esprima
Esprima is a high performance, standard-compliant ECMAScript parser written in ECMAScript (also popularly known as JavaScript). Features Full support for ECMAScript 2019 (ECMA-262 10th Edition) Sensible syntax tree format, with optional node location info Experimental support for JSX, a syntax extension for React Heavily tested (~1600 tests with full code coverage) API Esprima can be used to perfo
Timeline JS
TimelineJS is an open-source tool that enables anyone to build visually rich, interactive timelines. Beginners can create a timeline using nothing more than a Google spreadsheet, like the one we used for the Timeline above. Experts can use their JSON skills to create custom installations, while keeping TimelineJS's core functionality. Tips & tricks Keep it short. We recommend not having more than
humble software development - envision
Envision.js is a library for creating fast, dynamic and interactive HTML5 visualizations. TimeSeries template with real-time data. This demo features animation of the selection when new data arrives. The data itself is from a function but could be a callback to a remote data source. (click to code) HTML5 time series chart. This uses the TimeSeries template. Templates provide pre-built interactive
TestCafeでブラウザの自動テスト(E2Eテスト)
TestCafeという自動テストフレームワーク(いわゆるE2Eテストフレームワークジャンルとしておきます)を試してみました。 TestCafeの特徴としては、Seleniumを使っていないこと、設定ファイルなしで利用できる点です。 Seleniumを使ったテストフレームワークとしては、Protractor、testium、WebdriverIOなどがあります。 (Seleniumを使わない他のテストフレームワークだとNightmareなど) Seleniumを使わずにどうやって自動的にブラウザを操作するかというと、中継サーバーを起動してそこにテストコードなどを追加して動かすことができるSelenium RC(1)方式に近いものだと思います。 同名のウェブサービス/クライアントアプリも出していて、こちらはSelenium IDEのようにGUIで操作して記録したものを再生などができます。 なぜ
DalekJS - Automated cross browser testing with JavaScript
DalekJS is an open source UI testing tool written in JavaScript, it will: launch & automate your browserfill & submit formsclick & follow linkscapture screenshotsrun your functional tests… and it works on Windows, Linux & Mac QuickstartCreate a package.jsonInstall DalekJSWrite your first testRun this beast!
JSでクロスブラウザの動作テストを自動化できる「DalekJS」:phpspot開発日誌
DalekJS - Automated cross browser testing with JavaScript JSでクロスブラウザの動作テストを自動化できる「DalekJS」。 テストコードをJavaScriptで記述すれば、指定したサイトを開いてスクリーンショットを撮って、指定位置をクリックして、といった具合にテストが実施できます Seleniumのような既にメジャーなツールもありますが、これもなかなか便利そうです。 node.jsベースで実装されているみたい。 関連エントリ JavaScriptのコードでPDFを生成できる「jsPDF」 ブラウザ上でRubyプログラムをJavaScriptに変換して実行できる「Opal」 JavaScriptオフ、CSSをのみで動くツールチップライブラリ「hint.css」
Awesome JavaScript : 素晴らしい JavaScript ライブラリ・リソースの数々 - Qiita
元記事: Awesome JavaScript Awesome List in Qiita Awesome Ruby Awesome Java Awesome Node.js Awesome Python Awesome Go Awesome Selenium Awesome Appium パッケージマネージャ JavaScript ライブラリをホストし, それらを取得してパッケージ化するためのツールを提供します npm - npm は JavaScript のためのパッケージマネージャです. Bower - Web のためのパッケージマネージャ. component - より良い Web アプリケーションを構築するためのクライアントパッケージマネージャ. spm - 新しい静的パッケージマネージャ. jam - RequireJS のレポジトリと互換性があり, ブラウザーに焦点を当てたパ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://ga-dev-tools.appspot.com/autotrack/