[JS]Canvasを使って、リアルタイムにヒートマップを描くスクリプト -real time heatmap
[JS]Canvasを使って、リアルタイムにヒートマップを描くスクリプト -real time heatmap real time heatmap デモ [ad#ad-2] デモの画像の上でマウスを動かすと、その動いた量に伴いカラーがブルー、グリーン、イエロー、レッドとマウスの移動し滞在した量をヒートマップとして生成します。ヒートマップのデータはエクスポートも可能です。 また、iPhoneのシングルタップもサポートしている、とのことです。 スクリプトはjQueryなどの他のスクリプトは依存せず、下記のようになります。 JavaScirpt /* Copyright (c) 2010, Patrick Wied. All rights reserved. Code licensed under the BSD License: http://patrick-wied.at/static/li
Heatmapをつくる - To The Sky
heatmap.js | Create HTML5 Heatmaps with Canvas and JavaScript を使ってヒートマップを作る方法。 今回は、Leafletを使って表示した地図上にヒートマップをオーバーレイする。 実はこのExampleのままでは動かない。 heatmap.js | Examples: Leaflet Heatmap Layer 1. 必要なファイルの読み込み <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> <script src="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet-src.js"></script> <script src="/lib/heatmap/QuadTree.js"></script> <scr
ヒートマップツールを無料でとても簡単に自作してWebサイトに導入する方法（heatmap.js＋Milkcocoa） | Milkcocoa Engineers' Blog
ヒートマップツールを無料でとても簡単に自作してWebサイトに導入する方法（heatmap.js＋Milkcocoa） Posted: 2015-07-04 / Tags: heatmap.js Webでいうところのヒートマップツールとは、Webサイトを改善するために、クリックした場所やどこまでスクロールしたかなどを、度合いによって色を変えて視覚的にわかりやすく表示してくれるものです。 PtEngineやクリックテールといったサービスを聞いたことがある方もいるのではないでしょうか。 今回は、そういったサービスを使うことなく、heatmap.jsとMilkcocoaを使って、無料でヒートマップツールを自作してしまおうといった記事になります。とても簡単なので、初心者の方も是非試して頂きたいです。 こちらが、このブログのトップページのクリック箇所のヒートマップ表示になります ヒートマップを表示する
Backbone.js ではじめるクライアントサイド MVC プログラミング | CYOKODOG
MVC と言えば Apache Struts をはじめとするサーバサイド・フレームワークを想像しますが、 今回は JavaScript による大規模開発の際に採用されるクライアントサイド MVC フレームワーク「Backbone.js」の使い方についてまとめてみました。 (厳密にはクライアントサイドの場合、MVC とは呼ばず MVVM とか MV* とか呼ばれてるようです。) 前提 Backbone.js の構成を簡単に言ってしまうと 単一データの管理を行うモデル 複数件のモデルの管理を行うコレクション 画面の管理を行うビュー の３つの主要モジュールを軸に構成されており、Underscore.js、jQuery(Zepto）に依存するかたちで動作するようになっています。 利用の際は、underscore.js、jquery.js、backbone.js の順で読み込みます。 //cdnjs
jquery.autoKana.jsで自動カナ入力する - Qiita
<script src="../../public/javascripts/jquery-1.10.2.min.js"></script> <script src="../../public/javascripts/jquery.autoKana.js" language="javascript" type="text/javascript"></script> <div> <label for="user_name" class="">氏名</label> <input type="text" id="user_name"> </div> <div> <label for="user_name_kana" class="">カナ</label> <input type="text" id="user_name_kana"> </div> <script type="text/javasc
jQuery入門道場 - 【セレクター】
2章 セレクター この章で見る主な内容です。 基本的なセレクター 検索する対象（範囲）を指定する書き方 階層構造によるセレクター 基本、子要素フィルター コンテントフィルター フォーム系フィルター .is()フィルター セレクト回数を減らそう 基本的なセレクター jQueryでは、CSSでお馴染みのセレクターを使って、要素を選択（取得）します。ここでは、以下の基本的なCSSセレクターを見て行きましょう。 要素（タグ）セレクター クラスセレクター IDセレクター グループセレクター ユニバーサルセレクター 属性セレクター 要素（タグ）セレクター 要素（タグ）名を元に対象要素を選択します。要素名は、括弧（<>）は付けずに、そのまま書きます。 例えば、
データをExcel風の表にして表示するjQueryプラグイン - 感謝のプログラミング
データをExcel風の表にして表示するjQueryプラグイン JavaScriptで、ブラウザにキレイな表を表示させたいとずっと思っていた。 で、色々と探していたんだけど、jQuery Grid Pluginなるものがあった。 以下からダウンロードできる。 http://paramquery.com/ デモはこちら。 http://paramquery.com/demos デモを真似して作ってみると、なかなか良い感じの表がブラウザに表示される。 列をクリックすると並べ替えもできて、見栄えもかなりよい。 けっこうExcelっぽい感じに表示される。 サンプルはこんな感じ。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <!--jQu
自作のjQueryスクリプトをプラグイン化しよう
Posted: 2011.06.13 / Category: javascript / Tag: jQuery, Plugin 自作したjQueryコードは作成した本人なら簡単にパラメーターの調整などを行いカスタマイズできると思いますが、Webに公開して他の人に使用してもらう場合はなかなかむずかしかったりしますよね。 そこでプラグイン化をすることで誰でも簡単に扱えるようにしてみましょう。 外部ファイル化 たとえば「#hide-btn」をクリックすると「#view」がフェードアウトして消えるという簡単なスクリプトがあります。 jQuery script $(function() { $('#hide-btn').click(function(){ $('#view').fadeOut(1000); }); }); まずは外部ファイル化しましょう。 jQueryプラグインは「jquery.プラ
コールバック……駆逐してやる…この世から…一匹…残らず!! - Qiita
このテキストは JavaScript のコールバック地獄に疲れたひとのためのコールバック駆逐術指南書です。対象読者は JavaScript道初段くらいの人です。このテキストを読むと、以下のそれぞれの手段における非同期処理制御の仕組み、利点および欠点がわかるようになるかもしれません。 コールバック地獄 jQuery.Deferred async.js Concurrent.Thread generators co fibers Web Workers (※なぜか『進撃の巨人』の一部ネタバレが含まれるので注意してください) それは『何故人はコールバックするのか』という話でしょうか？ 非同期処理って面倒ですよね。JavaScriptではいわゆる コールバック地獄 というやつにしばしば陥りがちです。たとえば、Ajax でふたつのファイル hoge.txt と piyo.txt を持ってきて、それら
スクロールでtopへ戻るボタンを表示するjQueryコード（スムーススクロール）
（”追記”書きました。） 下にスクロールすると横にtopへ戻るボタンを表示させるjQueryのコードのチュートリアルが公開されていましたのでメモ。 チュートリアルページ→webdesignerwall チュートリアルdemo→demo 上記のページに設置方法も詳しくのっています。デモコードと画像のダウンロードもできます。 チュートリアルページに公開されているCSSのコードとjQueryのコードをヘッド内で読み込み、 下記の例のように、body内のスクロールさせたい要素に”back-top”とidをふり空のspanを入れます。 <p id="back-top"> <a href="#top"><span></span>Back to Top</a> </p> このspanの部分がスクロールボタンになります。 CSSをいじればスクロールボタンの位置やデザインなど変更できます。 ↓↓Demoを作
jQueryのパフォーマンス高速化Tipsまとめ | Webエンジニアのメモ
TweetPocket jQueryのパフォーマンス高速化Tipsまとめ jquery-logo jQueryのパフォーマンス高速化Tipsのヒントリストです。 セレクタのパフォーマンスのヒント 1. 常に#ID から辿る jQueryで要素を選択する最速の方法は、IDによるものです。 $('#content').hide(); $('#content p').hide(); 2. クラスの前にタグを使用 jQueryで2番目に早いセレクタは、タグセレクタ（$（’head’））です。 なぜならそれはネイティブJavaScriptメソッド、getElementsByTagName（）だからです。 最良の方法は、接頭辞にタグ名（およびIDから派生）を持つクラスです。 var receiveNewsletter = $('#nslForm input.on'); クラスセレクタは、jQueryの
Symfony2でjQuery UIを簡単に扱うGenemuFormBundleを試してみた - Do You PHP はてブロ
KnpBundlesでjQueryを扱うBundleを探していたら、何だかいい感じっぽいGenemuFormBundleというのが見つかったので試してみました。 GenemuFormBundle by genemu | KnpBundles 今回はjQuery UIのDatepickerを使うまでの手順をまとめてます。 GenemuFormBundleとは javascriptライブラリを使うカスタムForm集で、jQuery UIだけではなくReCaptchaやTinymce、uploadifyといったものを使ったカスタムFormも用意されています。 GenemuFormBundleのインストール インストール手順はREADME.markdownにある通りです:-) 1. GenemuFormBundleのインストール Symfony/depsファイルに以下の内容を追加 [GenemuF
【JavaScript】配列から空文字の要素を削除する at softelメモ
問題 以下の配列から、空文字の要素を削除してください。 var a = ["", "123", "abc", "xyz", "", "987", "hoge", "", "fuga"] 答え 素直に1つずつ内容を見て、新しい配列に移していく var a = ["", "123", "abc", "xyz", "", "987", "hoge", "", "fuga"]; var x = []; for (var i = 0; i < a.length; ++i) { if (a[i] !== "") x.push(a[i]); } //alert(x); // -> 123,abc,xyz,987,hoge,fuga var a = ["", "123", "abc", "xyz", "", "987", "hoge", "", "fuga"]; var b, x = []; while
jQueryでスクロールすると表示する系いろいろ
jQueryでスクロールすると表示する系いろいろ 最近はスクロールするときにいろいろ仕掛けをするのが流行なようです。 ここではシンプルにある要素の位置とか最下部までスクロールしたら何か表示するということをやってみます。 投稿日2012年03月08日 更新日2019年12月19日 ちょっとスクロールするとフェードして「トップへ戻るボタン」を表示を表示します。 ボタンは下の方にこんな感じで配置します。 html <p id="page-top"><a href="#wrap">PAGE TOP</a></p> fixedにすると固定配置されます。 css #page-top { position: fixed; bottom: 20px; right: 20px; font-size: 77%; } #page-top a { background: #666; text-decoration
ブログの画像を後から読み込んでページを軽くするjavascript | 星光のつれづれ日記
ダウンロード 『Lazy Load Plugin for jQuery』 英語のサイトだけど下の方にスクロールするとdownloadがあるから、 sourceの方でもminifiedの方でも好きな方を右クリックでダウンロードしよう。 なぜこのプラグインなのか？ このプラグインを選んだ理由を書いておこう。 画像関係のプラグインでlightboxって言うのがあって、これは画像をクリックすると『うにょ～ん』と画像がポップアップしてくるやつだ。 そのlightboxで僕が使っている『WordPress用lightboxプラグイン作ってみた』と共存できるのが一番の理由だ。 今回紹介した以外の遅延読み込みに関しては『画像の遅延読み込み』を参考にして貰えば良いと思う。 使い方 このjavascriptはjQueryって言う物も必要だ。 ブログで既に使っている場合は良いんだけど、まだの時は以下のコードをヘ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JointJS入門]JointJSを使ってブラウザ上にフォルダ構成図を描いてみよう | Tech-Sketch
JavaScript diagramming library for interactive UIs – JointJS
heatmap.jsでページのどこがクリックされたかがわかるヒートマップを自作してみる - Qiita
finefinefine.jp
Javascriptでクエリを取得する｜DIGITAL SQUADブログ