The Polaris Dawn crew is back on Earth after a historic mission
1000人同時プレイのMMOボンバーマン『Bombermine』ベータテスト中 - Engadget Japanese
The Polaris Dawn crew is back on Earth after a historic mission
localStorageはいい感じ
今日のネタは、HTML5で規定されているlocalStorage(ローカルストレージ)についてです。 以下、特徴をいくつか挙げてみます。 2011/07/06 イベントについて追記 ローカルにデータを保存します PCやスマートフォンなどの端末にデータを保存します。 別のサイトに行こうが、ブラウザを閉じようが、データが残っています。 localStorageの使い方としては、キャッシュ的な使い方が良さそうです。 「サーバーからデータを取得してlocalStorageに格納しておく。次にアクセスしたときはlocalStorageから取得する。もしなければサーバーに取りに行く。」 って感じで。 サーバーに取りに行かなくて済むなら処理が早くなってハッピーですね。 所詮はローカルのデータなので、データが存在することを前提にしてはいけません。 モダンなブラウザなら大概使えます IE8以上、FireFo
HTML5でマークアップしてみよう－HTML5リファレンス
■HTML5でマークアップしてみよう HTML5でマークアップしたウェブページを作成してみましょう。 DOCTYPE宣言と文字コードの記述ルールを確認してから、 ごく簡単なHTML5のサンプルページを作成してみたいと思います。 ■DOCTYPE宣言 HTML 4では、DOCTYPE宣言は以下のように記述していました。 （HTML 4.01 Transitionalの場合） HTML5におけるDOCTYPE宣言は、あまり意味を持たないとされていますが、 DOCTYPE宣言が無いとブラウザのレンダリングモードが、互換モード（Quirks mode）となってしまいます。 ブラウザに標準モード（Standards mode）で解釈させたい場合には、DOCTYPE宣言を記述する必要があります。 IE6も含めて、主要なブラウザでは文書の先頭に <!DOCTYPE html> と記述することで標準モード
ユーザーのページ遷移をグラフで可視化してみた
takada-atです。 サイトを運営するとき、ユーザーがサイト上でどんな行動をとっているのか知りたくなることがあります。ページからページへリンクをたどって移動する動きは、テキストで表現してもいまいち理解しづらいので、グラフをつかって図にしてみます。 以下のリンクからデモを表示してみてください。 ユーザーがたくさん訪れたページほど、ノードのサイズが大きくなり、またページからページへ移動した人の数が増えるほど、線が太くなります。 HTML5のcanvasをつかって描画しているので、InternetExplorerでは見れません。InternetExplorer以外のブラウザで閲覧してください。 グーグルマップのようにドラッグで移動したり、カーソルキーで移動できます。 デモ github ■アルゴリズムなど ノード同士が適切に距離をとりあうようにEadesのバネモデルというアルゴリズムを
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=
iphone safari向けのページを作っています スクロールを禁止させる方法はあるのでしょうか？…
iphone safari向けのページを作っています スクロールを禁止させる方法はあるのでしょうか？ 画面サイズ固定のページにして 引っ張って戻るあの動き（名称ってあるのでしょうか？）をさせたくないのです。 よろしくお願いします。
無職のプログラミング 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
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に対応
SVGによるベクターグラフィック(2)(3/5):JavaScriptによるHTML5プログラミング入門 - libro
SVGグラフィックのタグには、HTMLのタグと同様、JavaScriptのイベントに関する属性が用意されています。用意されているものとしては以下のようなものがあります。 ◯グラフィックおよびコンテナ・レベルでの対応 onclick――クリックした onmousedown――マウスボタンを押した onmouseup――マウスボタンを離した onmouseover――マウスポインタが領域内に入った onmousemove――マウスポインタが領域内で動いている onmouseout――マウスポインタが領域外に出た onload――ロードが完了した onfocusin――フォーカスされた onfocusout――フォーカスが外れた onactivate――アクティブになった ◯ドキュメント・レベルでの対応 onunload――SVGドキュメントがアンロードされる onabort――ロードが中断され
)
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
HTML5で注目！インラインSVGの使い方 (1/5)
HTML5ではビットマップ画像を手軽に扱える「Canvas」が話題ですが、「SVG」も画像関連で注目したい新技術です。HTML5ではInline SVG（インラインSVG）がサポートされ、HTML内にSVGを直接記述できるようになるのです。 今回のJavaScriptラボは、Firefox 4、Google Chrome 7、Internet Explorer 9を対象に、インラインSVGの使い方とJavaScriptによる制御方法について解説します。全部で3回に分けて、最終的には簡単なシューティングゲームを作成します。 SVGとは？ SVG（Scalable Vector Graphics）は、名前のとおりベクター形式の画像フォーマットです。ベクター形式とは、点と点で結ばれた線で図形を表す方法で、アプリケーションでいえばIllustratorがベクター形式を採用しています（Photosh
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のサンプルが公開さ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
1ka2ka.com