Google ChromeをWebSocketで制御する - 箱入りあじゃらの日記
JavaScriptJavaScript Advent Calendar 2011 (Node.js/WebSocketsコース)の6日目。初参加です、緊張します。WebSocketネタということで、ChromeのWebKit Remote Debugging Protocolを使ってWebSocketでGoogle Chromeを操作する小ネタ。手順1.リモートデバッグを有効にしてChromeを起動Chromeの起動オプションに--remmote-debugging-portを付加してリモートデバッグを有効にする。 $ chrome --remote-debugging-port=9222 2.タブ一覧を取得今回はコントロールする側(Chrome)とされる側(node)が同一ホストで動いてるものとします。http://localhost:9222/jsonをGETで叩くとChromeのタ
46 Free CSS HTML5 Upload File Scripts Example - freshDesignweb
If you're looking to create a website that's both modern and stylish, then you'll need to know CSS and HTML5. These two programming languages are essential for creating responsive and engaging websites. And with our CSS and HTML5 upload feature, you can easily add these files to your site without having to coding from scratch. So if you're ready to take your web development skills to the next leve
たった一行のJavaScriptでガラケー向けWebサイトをスマートフォンに最適化·sparrow.js MOONGIFT
sparrow.jsは既存のガラケー向けWebサイトをスマートフォン向けサイトに変換してくれるJavaScriptです。 sparrow.jsを使うと既存のガラケー向けWebサイトをスマートフォン向けサイトに変身させてくれます。それもたった一行のJavaScriptタグを追加するのみです。 ガラケー向けサイトをiPhoneで表示したところです。いわゆる普通の携帯電話向けサイトとしての表示です。テンプレートは「携帯専用無料テンプレート配布中 ： フリースタイル 携帯無料レンタルサーバー」よりお借りしました。 sparrow.jsを適用した表示です。デフォルトではフォントサイズや画像の表示が最適化されるのみとなっています。 sparrow.jsではその他、Viewportの自動挿入、スマートフォン向けのCSS定義、半角仮名を全角に変換、ページ内リンクをアニメーションに、絵文字を絵文字画像に変換
jQueryのCSSセレクタAPIを高速に扱う方法 - KAYAC engineers' blog
最近Androidとの抗争が激化しているago（@kyo_ago）です。 jQueryはCSSセレクタを多用する特徴がありますが、jQuery内では実行ブラウザやCSSセレクタの記述によって呼び出されるブラウザAPIが変わり、それによって実行速度にも影響が出ます。 この記事では「セレクタAPIとはなにか」、「CSSセレクタの記述によって呼び出されるセレクタAPIの種類」、「高速なセレクタAPIを使用するための方法」、「高速なセレクタAPIが使われるかどうか確認する方法」などを紹介したいと思います。 （※この記事はJavaScript Advent Calendar 2011 (フレームワークコース) : ATNDの1日目の記事です） セレクタAPIとはなにか セレクタAPIとは「#hoge .huga」のようなCSSセレクタから、DOM上に存在する要素を取得するためのAPIです。 jQue
jQueryの必要なところだけを取り出せる「jQuip」:phpspot開発日誌
jQuip - jQuery in parts :: Builder jQueryの必要なところだけを取り出せる「jQuip」。 ajaxの機能だけを使いたいのに、全部インクルードしちゃうのは回線のムダでパフォーマンスにも影響しますね。 ということでajaxの機能だけとかcssの機能だけといった風にチェックボックスでチェックすればコードをWEB上で取得できてそのままコピペで使えるというものです。 サイト上でminifyしたり逆も可能です。 いらない機能は読み込みたくないものですがこれはナイスですね 関連エントリ 円形で回転するタイマーを実装できるjQueryサンプル Twitter OAuth認証をポップアップで行うjQueryプラグイン 良い感じで動作するニュースティッカー実装jQueryサンプル
JavaScriptでの日付の処理が超便利になる「Moment.js」:phpspot開発日誌
Moment.js - A lightweight javascript date library JavaScriptでの日付の処理が超便利になる「Moment.js」 以下にできることをまとめてみます 文字列からパースして日付オブジェクトを生成 UNIXのタイムスタンプから日付オブジェクトを生成 「Dec 25, 1995」みたいな文字列から日付オブジェクトを生成 日付オブジェクトに時間を簡単に を加算・減算 指定日時からの経過時間を取得 オブジェクトをベースにフォーマットして出力する moment(date).format("dddd, MMMM Do YYYY, h:mm:ss a"); phpにもdateという関数やstrtotimeという関数があったりしますが、そういう便利機能をJSでも使うことが出来るようなものです。 日付をヘビーに使うようなプロダクトで使えそうですね。 サイ
HTML5 Canvasでフラクタル図形を描いてみた
はじめに 一年の1/4が終わってしまうと思ってるみなさんこんにちは。ダニーです。 今回はHTML5のCanvasの使い方を調べて Canvasでフラクタル図形を描いてみました。 デモ http://f96q.github.com/canvas_demo/ Canvasについて 詳しい仕様は http://dev.w3.org/html5/canvas-api/canvas-2d-api.htmlに載っているのでそちらを参照して下さい。 Canvasを作る <canvas id="main" width="500" height="500" ></canvas> canvasタグでcanvasを作ります。 コンテキストの取得 var canvas = document.getElementById('main'); if (canvas.getContext) { var ctx = can
Canvasを活用するJavaScriptライブラリ·LibCanvas MOONGIFT
LibCanvasはJavaScript製のオープンソース・ソフトウェア。JavaScriptは速度、機能ともに進化している。メールやカレンダーのようなオンラインとの親和性の高いものはもちろん、画像編集をはじめ様々なアプリケーションがWeb化している。 ソリティアデモ 今後スマートフォンなどでHTML5が積極的に取り入れられてくれば、JavaScriptの利用機会はさらに増えるはずだ。そんな時には一からJavaScriptを組むのではなく、多様なライブラリを使うことになるだろう。そこで覚えておきたいのがLibCanvasだ。 LibCanvasはCanvasタグを使うことで表現力を向上するJavaScriptライブラリだ。MooToolsをベースに開発されている。デモの中には物理エンジンのように多数のオブジェクトが関連して動作するものや、カードゲームのデモもある。 アステロイドのデモ ソリ
無職のプログラミング 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負荷が小
RGraph: Beautiful JavaScript charts for websites
RGraph is a JavaScript charts library based on HTML5 SVG and canvas. RGraph is mature (over 15 years old) and has a wealth of features making it an ideal choice to show charts on your website. More » RGraph can be used for free under the GPL or if that doesn't suit your situation there's an inexpensive (£99) commercial license available. More » Get the latest version of RGraph (version 6.16) from
HTML5のcanvas要素を使ってアニメーションを作る | 波乗りスタッフ日記/Web制作会社サーフボード
こんにちは、営業の東です。 前回のcanvasネタだったんですが、今回もcanvasネタですｗ Flashの代替が期待されているHTML5ですが、canvas要素を使うことでFlashのようにアニメーションを作ることができます。 とは言うものの、Flashの代わりに使うには、機能的に足りないし、実装も大変です。 もしかすると、簡単なものはFlashからHTML5 + JavaScriptに置き換わっていくかもしれませんね。 作るアニメーションの見本 canvas要素のアニメーションのサンプルは、世の中的なまだまだ少ないので、検索してもあまり良いものが見つかりません。 Processing.jsのサイトから作るアニメーションの見本を見つけるのがいいですね。 で、今回選んだ見本はこちら。 Processing.js - Basic - easing マウスポインタの位置に向けて、ゆっくりと円が
Canvas要素のアニメーションライブラリcakejs - TechTalkManiacs
HTMLで規定されている、2次元画像用の要素Canvasで簡単にアニメーションできるライブラリがcakejsです。 なぜか日本では紹介されていませんが、2008年ごろからリリースされている歴史のあるライブラリで複雑な図形やそれを使ったアニメーションを簡単に書くことができます。 円を書くならばCircleオブジェクトを呼び出す、とういうようにグローバルな名前空間を思いっきり占領しているのは少し困りものですが、使用方法にはIllustratorやInkscapeのようなベクタグラフィックソフトと似たようなところがあり、こちらになじんでいる人ならば使いやすいと思います。 長方形を回転させる例 var c = document.getElementById("target") // Canvas要素取得 var canvas = new Canvas(c) // cake.jsのキャンバスオブジェ
OpenLayersで地図を表示する | OSDN Magazine
Google Mapsによって、ウェブサイトに簡単に地図を加えることができるが、GoogleのAPIを使用している場合は、他のデータを表示する能力は限定される。自分自身のデータや、Google以外のデータを表示したい場合に、より多くのオプションを提供してくれるのが、オープンソースのJavaScriptライブラリ OpenLayers である。 OpenLayersは最近、いくつかの著名な活動において利用されている。Djangoの開発者であるAdrian Holovaty氏らが運営する地域的ニュースサイトEveryBlockにも使用され、また、Barack Obama次期大統領の選挙キャンペーンにおいても、その米国大統領選を支援するための地図情報の一環として使用された。 OpenLayersを最初に開発したのは、地理情報を扱う企業MetaCartaだが、現在ではBSDライセンスの下で公開され
OpenLayers - Mapabc
OpenLayers は地図を表示するための JavaScriptライブラリ です。Google Maps API のように javascript でプログラミングし、地図ページを作成できます。 OpenLayers では Google Maps や Virtual Earth といった複数の地図提供プロバイダの地図を同じインターフェースで扱うことができます。 OpenLayers V2.6 リファレンス OpenLayersクラス OpenLayers.Ajaxクラス OpenLayers.Ajax.Baseクラス OpenLayers.Ajax.Requestクラス OpenLayers.Ajax.Respondersクラス OpenLayers.Ajax.Responseクラス OpenLayers.Arrayクラス OpenLayers.Boundsクラス OpenLayers.C
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.nihilogic.dk/labs/canvas_sheet/HTML5_Canvas_Cheat_Sheet.png
Google Code Archive - Long-term storage for Google Code Project Hosting.
Google Code Archive - Long-term storage for Google Code Project Hosting.
sakef.jp
Canvasリファレンス - HTML5.JP
OpenLayers API Documentation (leela's)
