ユーザーのページ遷移をグラフで可視化してみた
takada-atです。 サイトを運営するとき、ユーザーがサイト上でどんな行動をとっているのか知りたくなることがあります。ページからページへリンクをたどって移動する動きは、テキストで表現してもいまいち理解しづらいので、グラフをつかって図にしてみます。 以下のリンクからデモを表示してみてください。 ユーザーがたくさん訪れたページほど、ノードのサイズが大きくなり、またページからページへ移動した人の数が増えるほど、線が太くなります。 HTML5のcanvasをつかって描画しているので、InternetExplorerでは見れません。InternetExplorer以外のブラウザで閲覧してください。 グーグルマップのようにドラッグで移動したり、カーソルキーで移動できます。 デモ github ■アルゴリズムなど ノード同士が適切に距離をとりあうようにEadesのバネモデルというアルゴリズムを
Canvasに入門してみた。 - 車輪を再発明 / koba04の日記
最近Canvasと触れ合う機会があり、色々勘違いしていたり、こんなことも出来るんだみたいなことがあったのでメモ。 描画をプログラミングでするのがはじめてだったので、やっている人には常識なことばかりかもしれませんが。 参考 まず最初に見るサイトとしては日本語だとこの辺りがわかりやすいんじゃないかと思います。 http://www.html5.jp/canvas/index.html https://developer.mozilla.org/ja/Canvas_tutorial Canvasの基準点 Canvasには基準点というのがあって、全てはその位置から「x」にいくら「y」にいくらというように図形を配置する場所を指定します。例えばx軸に「100」、y軸に「50」ずらした「40」の正方形を描画するには下記のように指定します。(他にも指定する方法はあります) // ctxはcanvasのco
canvas要素 + Javascriptで作る、動的コンテンツ
HTML 5 + Javascriptで作る動的なコンテンツ 前回の授業では、HTML 5について、その成り立ちや特徴を解説した上で、新しい構造化のための要素について解説しました。また、あわせてCSS3によって格段に進歩した表現力について実際にサンプルページを作りながら解説しました。 今までは、Webページで動的に図や画像やアニメーションを描画するにはFlashが代表的な選択肢でした。しかし、ここ数年でその状況が大きく動きつつあります。Flashに代表されるような動的なコンテンツが、専用のプラグイン無しに、HTMLの要素とそれと連携するスクリプトだけで実現できるようになりつつあるのです。こうした技術は、今後のWebの動向を大きく変える可能性を秘めた技術として脚光を浴びています。 HTML 5で動的に画像やアニメーションを生成するためには、canvas要素という新規に導入された要素と、can
HTML5 の Canvas 上でボールをコロコロ for iPhone | TM Life
以前, HTML5 の Canvas 上でボールがコロコロするプログラムを作りました. iPhone の傾きを JavaScript で取れたので iPhone 用に修正してみました. iPhone を傾けるとボールの転がる方向が変わります. DEMO And DATA デモはこちらから見ることができます. iPhone を傾けると, 画面が回ってしまうのでできれば画面をロックして見てみてください. また, Safariのメニューから”ホーム画面に追加”してホーム画面から起動するとフルディスプレイで見ることができます. データはここからダウンロードできます. 主な変更点 下記は以前のコードから iPhone 用に変更した箇所です. index.html headタグに下記の２行を追加. ホーム画面から起動した際にフルディスプレイにし, キャッシュを有効する設定です. <meta name=
無職のプログラミング HTML5 Canvas + jQuery でドラッグ＆ドロップ
タイトルのとおり、drag&drop を HTML5 Canvasで実装してみた。 こちらで公開しています → HTML5 Canvasでドラッグ＆ドロップ スタートボタンを押して実行してください。 実装してみてわかったことを簡単に解説する。 1. ソースコード 作成したソースコードは以下のとおり。jQuery は ver1.4.2 を使用。 ・html および共通の Canvas 描画クラス dtest.html dtestcom.js ・drag&drop処理(1px 移動するごとに Canvas 更新) dtest1.js ・drag&drop処理(1/24秒ごとに Canvas 更新) dtest2.js 2. Canvas 更新方法について 「mousemove イベントが発生するたび更新」 → 「1px 移動するごとに更新」 → 「1/24秒ごとに更新」 の順にCPU負荷が小
atpages.jp - このウェブサイトは販売用です！ - atpages リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
canvasで簡単なお絵かきをしてみたメモ - 超自己満足プログラミング
タイトルのまんまです。 Firefox/Chromeあたりで動きます。 デモページ html canvasを用意しとくだけです。 canvas内の座標を取るときに、layerX/Y で取りたいので、styleにposition:relativeを当てておきます。 (positionが当たってないと、layerX/Yは pageX/Y の値と等しくなるらしいので。 positionを当てたくないなら、pageX/Yからcanvasのオフセットを引いたりすることになるんでしょうか。) <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <canvas id="c" style="position:relative; border:3px solid #999" width="600" height="480">
【HTML5】Canvasでお絵かきしてみた（前編）
こんにちは、橋本です。 今回はHTML5シリーズ第二弾ということで、canvasを使ってお絵かきしてみました。 今回は前編で、基本的な機能について触れてみたいと思います。 さっそくサンプルコードを以下に。 canvas_sample.html <html lang="ja"> <head> <meta charset="UTF-8"> <script src="js/canvas.js" type="text/javascript"></script> <link media="all" rel="stylesheet" href="css/main.css" type="text/css" /> <title>canvas test</title> </head> <body> <div id="container"> <div id="leftContainer" class="cle
[proce55ing] 話題のProcessing.jsを試してみた（あわあわデモ作った） | fslashtの日記 | スラド
processingという開発環境があります。 これは、Javaベースの統合開発環境で、グラフィック系の独自のライブラリを搭載することで、イメージ処理が簡単に出来るのが大きな特徴です。メディアアート界隈でよくつかわれています。 エディターも内臓していて、スケッチ的に小さなプログラムを作っていけるのもお手軽でいいですね。完成したプログラムは、アプレットとして生成できます。 【最近作った作品】 →椅子取りゲームシミュレーション →ゲーム「Amoeba#1」 アプレットが簡単に作れるのはいいのですが、最近はアプレットも冷遇されてるような気がしますし、プラグインインストールしないといけないのが面倒です。 せっかく作っても、プラグイン入れてないから見れないよーって言われたら悲しいですしね。 （でも、プラグインはダウンロードしてインストールするだけだから入れてくれよぅ→Java ソフトウェアの無料ダウ
HTML5のCanvas図形をクリッカブルにするjQueryプラグイン ClickableCanvas - ウィザード・コード | WIZARD-CODE
ClickableCanvasの概要 jQuery ClickableCanvasは、HTML5のグラフィック機能であるCanvasで描かれた図形に、一部のマウスイベントをバインドするjQueryのプラグインです。 図形にマウスを合わせたり、図形をクリックしたタイミングでDOMイベントのようにコールバック関数を呼び出すことができます。 Internet Explorerはバージョン8までCanvas要素に対応していないものの、FlashCanvasやExplorerCanvas、 uuCanvas.jsをページ内で呼び出すことで同等の機能を持たせることができます。 jQuery Clickable Canvas バージョン２を公開しています。詳しくはこちらのデモページへ！ 10/11/18 Canvas機能をInternet Explorerで実現するライブラリFlashCanvasに対応
)
Creating User Interface Elements with Canvas or SVG (Windows)
This topic compares how to use Canvas and SVG to develop an interactive pushbutton for use on a webpage. Canvas Code Sample Discusion Drawing the User Interface Processing the Click Event SVG Code Sample SVG Code Sample Discussion Comparison Summary Related topics This topic contains two stand-alone code samples that demonstrate how Canvas and SVG create user interface buttons. These code samples
HTML５のポテンシャルを存分に感じるFLASH越えのサンプル集48個(秒刊サンデー) - livedoor ニュース
HTML５のポテンシャルを存分に感じるFLASH越えのサンプル集48個2010年06月09日00時31分 / 提供：Appleをはじめ、最近脱FLASHの動きを見せており、FLASHクリエータとしても、今後どこに向かえばよいのかと、頭を悩ませる今日この頃ですが、そんな中、FLASHの代替方法として注目されているのがHTML５という技術なのです。もちろん、まだ普及するには時間がかかりますが、FLASHを超えるべくポテンシャルは存分に秘めており、WEB業界ではいつかFLASHがHTML５に抜かれてもおかしくは無いという空気になってきております。＜注意＞ これらサンプルはHTML5で作られております。HTML５が表示できないブラウザでは 閲覧ができませんので、ご注意ください。(IE6とか・・・） HTML5についてはこちらを参考ください。 最近ではAppleのサイトでHTML5のサンプルが公開さ
わずか8KBで直感的にCanvasが使えるjQueryプラグイン「jCanvas」 | Web活メモ帳
円を書く ↑drawArcメソッドで円を書く事ができます。 オプション引数で座標位置とサイズ、色などを指定します。 $("canvas.test").drawArc({ fillStyle: "black", x: 100, y: 100 }); 短形を書いて回転させる ↑rotateCanvasで回転軸の座業と角度を指定します。 $("canvas.test").rotateCanvas({ angle: 45, x: 100, y: 100 }) .drawRect({ fillStyle: "#000", x: 100, y: 100, width: 100, height: 50 }) .restoreCanvas(); グラデーションを作成する ↑gradientメソッドでグラーデーションオブジェクトを作成し、 描画する際に指定するとグラデーションが適用されます。 var lin
HTML5でスマートフォンアプリを作ってみよう | りみっとさいくる.net
近年一気に利用者数の増えたスマートフォン。 iPhoneにもAndroidに対応したアプリを作ってみたい！ ということで、HTML5+javascriptでのアプリ開発について現在勉強中です。 今回は入門編。 そもそも何でHTML5使ってアプリ開発するんでしょう？ １．アプリを作ってみたいけど… 最近スマートフォン使ってる人増えましたよね。私もiPhoneユーザです。 経緯はさっぱり忘れましたが、友人のBrvFlame、gaya_Kの2人と「なんかアプリとか作ってみようぜ！」ということになりました。 しかしながら、私はiPhoneアプリを作るのに必要なMac OSを持っていない。 AndroidアプリならWindowsでも作れますが、どうせなら自分が持っているiPhoneで動くものを作りたいです。できれば、どっちでも動くものが作りたい！ そこで、たどり着いたのが、HTML5とjavascr
iPhone向けサイトを考える:よろしい、ならばiPhoneでくぱぁだ
2008年07月29日 よろしい、ならばiPhoneでくぱぁだ iPhoneユーザーの皆さんこんにちは！くぱぁ(i)をリリースしました！ くぱぁ(i)はiPhone/touchで直感的にくぱぁできるWebサービスです。 DEMO http://hayashi311.googlepages.com/cupha.html くぱぁってなります。心の目で見てください！まさにiPhoneの正しい使い方って感じですよね！ iPhone/touchを持ってない人はよく分からないと思いますが、こんな風になってます。 マルチタッチとcanvas要素の練習に作ってみました。 追記：画像を挿入できるようにしました！ コード window.addEventListener("load", loaded, false); window.onorientationchange = hideURLbar; var st
canvasに3000個のドット、Processing.jsを使わないと... | 秋葉秀樹個人ブログ
processing_no_use.html ←クリックして見てください、Safari,Chromeあたりが速いです、Mac版でしか見てませんが... この前書いたブログ記事のあと、「Flashとcanvasを比べるなんておかしい」なんて声をいただきました、、、すいませんすいません。。。 ただし、最近どこかのサイトで「Flashに取って代わる」、とか「Flashが要らなくなる」、とか、ずいぶんはっきりした書き方をしている所もあるから。。 で、、そのときの記事でJavaScriptのフレームワーク、「Processing.js」を使って1000個のドットを動かしたんですが、システムエンジニアの方に「フレームワークを使ったら処理も影響されるんじゃない？」って言われて、良く分かんない僕は「え？」って思いました。 で、1000個のドットを動かすのもやっとこさのProcessing.js+canva
voglia.jp - Processing.jsでMultiTouchしてみる
FlashとかPHPとかJavascriptとか適当にiPhone搭載のブラウザはhtml5のcanvasとか対応してるので、Processing.jsでマルチタッチで絵を描くとか出来るかなってことで、ちょっとやってみた。 ■準備物 Processing.js http://processingjs.org/ 基本的にはこれとデバッグ環境とテキストエディタのみでOK。 自分はとりあえず、XcodeのiPhoneシュミレーターを使用。 ■マルチタッチイベント iPhoneのタッチはマウスイベントではなくtouch＊＊ってイベントが用意されているのでそれを使用。 event.touches.lengthでタッチ数が取得でき、event.touches[i].pageXとかで座標が取得出来る。 ke-tai.orgさんのこの記事が詳しいので参考にしてみました。 ■Processing.j
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
1ka2ka.com