Inspired by American portrait painter Chuck Close, this script converts an image into a pixelated version using an HTML5 canvas element. It's basically a simple demo for canvas' imageData functionality. This project lives on GitHub where you can download the script and these examples. View Close Pixelate on GitHub Options The function accepts an array of objects. Each object holds a set of option
スライダーで視点を変えられる360度動画。画像クリックでサンプルページを表示します(Safari 4、Opera 10.50でのみ表示可能) 動画を手軽に扱えるHTML5 Webブラウザーで動画を再生するには、従来、Flash Playerなどのプラグインが必要でした。これに対して、現在策定が進められているHTML5では、「video」という新しい要素が追加され、ブラウザーだけで動画を再生できます。 単なる再生だけであればメリットは薄いと感じるかもしれませんが、HTML5のvideo機能はJavaScriptによって動画を制御できます。Flashの場合、JavaScriptからFlashへ命令を送れないブラウザーもありますし、iPhoneやiPadなど、Flash Playerが存在しない環境もあります。将来的に、iPhoneやiPadなどに搭載されているSafariのWebKitがHTM
Credits for music artists are on staff rolls of each games and here. Feel brave? So you're ready for the Dark side of Akihabara with experimental material! Uh-uh-uh! HTML5 is my Arcade. Akihabara is a major Tokyo shopping area for electronic, computer, anime, and otaku goods. You can find any sort of old & new videogames, starting from the 8-bit era to modern motion-sensing videogames. But is also
function geoip_country_code() { return 'JP'; } function geoip_country_name() { return 'Japan'; } function geoip_city() { return 'Osaka'; } function geoip_region() { return '32'; } function geoip_region_name() { return 'Osaka'; } function geoip_latitude() { return '34.6667'; } function geoip_longitude() { return '135.5000'; } function geoip_postal_code() { return ''; }
PHPWebSocketはPHP製のフリーウェア(ソースコードは公開されている)。HTML5で登場する新しい機能の一つがWeb Socketだ。JavaScriptを使って特定のWebサーバとソケット通信ができるようになる。これまでAjaxを使って行っていたような操作がもっと手軽に、さらに高度なこともできるようになるだろう。 クライアントサイド だが実装までの道のりが複雑であれば利用頻度は少なくなってしまう。そこで参考にしたいのがPHPWebSocketだ。PHPWebSocketはPHPを使ったWeb Socketサーバの実装と、それと会話するクライアントのデモを提供している。 server.phpを実行すると、localhost:12345でサービスが立ち上がる。後はWeb Socketに対応したクライアント(例えばGoogle Chrome)でclient.htmlを開けば良い。サー
1/23(土)に神戸で Webteko(ウェブテコ)第11回が開催された(告知ページ) 今回のテーマは「HTML5 と CSS3」ということで、僕も Web Workers について発表してきた。 発表内容 Try WebworkersView more documents from H M. サンプルコード デモとして、バックグラウンドで足し算を行う JavaScript コードを紹介した。あと、1%分完了するたびに進捗状況を表示してる。計算してる途中でもブラウザが固まらないってのがポイント。 まずこれが HTML ファイル。入力ボックス、ボタン、結果表示欄があるだけ。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Web Workers を使って足し算する</title> <script type="applic
2010年のJavaScriptと題しまして、JavaScript周辺の「これまで」と「これから」についてまとめてみたいと思います。 2009年までのJavaScript JavaScriptは各ブラウザベンダなどが個別に実装するという特殊性から、ブラウザ(実装)ごとの非互換性の問題に悩まされ続けてきた言語です。まず、そのJavaScriptの歴史を簡単に振り返ってみます。 ECMA-262 3rd editionとスピードコンテスト JavaScriptはNetscape社によってLiveScriptという名前で誕生し、その後ECMAScriptとして標準化が進みました。1999年12月にECMA-262 3rd editionが策定されてから、Internet ExplorerのJScript、MozillaのSpiderMonkey(TraceMonkey)、SafariのJav
などという煽り気味なタイトルをついつけてしまいたくなる記事がGoogleCodeBlogに掲載されていました。 最初のほうはごく普通にJavaScriptを使ったRIAアプリケーションはどうしても起動が遅くなるため、それをどう減らすか、というテーマにそって書かれています。 方法として挙げられているのは、最初にすべてを読み込まず、モジュール単位で分割して遅延ローディングすること。ただし、それだけだと回線速度が遅く不安定なモバイル環境では問題が生じるためHTML5のキャッシュ機能を利用するといいとのこと。 遅延ローディングのためのさまざまな手法の得失や、例えばユーザーデータを読み込むときには動的ロードしない、というようにユーザーの操作を妨害しないよう留意することなどについても述べられていてそれだけでもノウハウとして十分に有意義なのですが、決め手として最後に出てくる方法がすごいです。 その方法と
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
JavaScriptでバックグラウンド処理が可能になるWeb Workersを試してみました。 以下のようにWorker用のJSファイルを別に作り、それをスクリプト中で呼び出すことで利用します。 index.html var worker = new Worker("test-worker.js"); // workerにデータをPOST worker.postMessage("働け"); // worker.jsからpostされた場合のハンドリング worker.onmessage = function(event) { // 返り値はevent.dataに含まれます alert(event.data); // => "働きました" } test-worker.js onmessage = function(event) { var res = ""; // POSTされたデータは ev
ASCII.jp:HTML5のcanvasで作る画像フィルター|古籏一浩のJavaScriptラボ こちらの記事をたまたま拝見して、コメント欄もなければトラックバックもできないようなので、どうやって反応を返せばいいのかわからないけれど、もし古籏一浩さんご本人が見てくれたらいいなあ、ということで書きます。 全体的にはとても素晴らしい記事なのですが、いくつか言いたいことがあります。 ImageData まず、CanvasRenderingContext2D#createImageData というメソッド。これは知りませんでした。 Opera には window.ImageData というグローバルオブジェクトとして似たものが定義されています。(createImageData と違い、第三引数に配列を渡せるのが特徴ですが) if (window.CanvasRenderingContext2D
Chrome Experiments is a showcase of work by coders who are pushing the boundaries of web technology, creating beautiful, unique web experiences. You'll find helpful links throughout the site for creating your own experiments, and you can also explore resources like WebGL Globe and our workshop of tools.
更新履歴 2010-01-22 jQuery.exPlaceHolder.js を Ver 0.1.1 に更新 title 属性(あるいは任意の属性)で、表示するメッセージを指定できるようにしました 専用の css ファイルの読み込みを不要にしました jQuery.exInlineBlock.js ファイルの読み込みを不要にしました 初期値があった場合もメッセージが表示されてしまう不具合を修正しました 記事に使い方を追記しました まずプレースホルダ付き入力欄のおさらいですが、 こういうやつの事をいいます。入力欄にカーソルがあたるとナビゲーションメッセージが消え、カーソルがはずれるとまた表示されるやつです。 HTML5 では <input placeholder="google"> と記述すると自動的にこういう制御をしてくれるそうです。ですが HTML5 の普及はまだ先の話なので JavaS
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く