history.pushState、history.replaceState - 素人がプログラミングを勉強していたブログ
HTML5のhistory.pushState、history.replaceStateを試した。 HTML5 pushState/replaceState demoで動かせる。 Minefieldだと完全に意図した通りに動くがWebKitだとURLまわりがうまくいかない。 メインのソースコードは下記の通り。 canvasで適当に壁紙用画像を作るデモで、画像自体をクリックして何度も作り直せるようにした。 こういう物を作るときは、前の画像に戻れるよう履歴管理をすべきだが、今まではlocation.hashを使ったり（hashchangeイベントが入るまではタイマーが必要だった）iframeを使ったハックだったり（ブラウザ間の互換性やhistory.go(-2)をきちんと動かすのが難しい）、あるいはページを遷移する（必要ない部分まで毎回読み込まれる）必要があった。 pushState/repl
Rails3.1の初期化プロセスを細かく追いかけたRailsGuidesの記事を和訳したよ:ミームの死骸を越えてゆけ
This domain may be for sale!
株式会社 QTmedia | COARAの発展形デジタルエージェンシー
想いにかたちはありません。 それでも確かに存在して、人と世界を動かします。 お客さまの想いをくみ取り、解決策を提案する。 多彩なアイディアと技術を駆使して、効果をもたらすまで実行する。 私たちの取組みで、お客さまの想いをあまねく伝える。 伝わる想いで、人と世界を彩り豊かに変えていく。 「明日を今日よりあざやかに」 それがQTmediaの想いです。
「JavaScriptとcanvasで3Dなポリゴンを回転させる」の続き。 - latest log
複数のcanvas使うと、こんなこともできるよ〜。という感じかな。 黒いやつの中に、青いやつが入ってぐりぐり回転します。 昨日のコードからの変化は、HighLightの指定,ポリゴンカラーの指定,不透明度の指定などが可能になったことぐらい。基本的に変わりません。 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"
さまざまな図形を描く - Canvas - HTML5.JP
Canvasでは線を引くだけではなく、さまざまな図形を描くためのメソッドを用意しています。このコーナーではCanvasで利用できる図形描画のいくつかをご紹介します。 矩形（長方形） 先ほどのコーナーでは、線を引くことで矩形を描きましたが、一発で矩形を描くメソッドがあります。 ctx.fillRect(x, y, width, height) 塗りつぶした矩形を描きます。x, yには矩形の左上端の座標を、widthに矩形の横幅を、heightに縦幅を引数として与えます。 ctx.strokeRect(x, y, width, height) 矩形を描きますが、枠線のみとなります。引数はfillRectメソッドと同じです。 ctx.clearRect(x, y, width, height) 矩形を削除します。削除された部分は透明になります。引数はfillRectメソッドと同じでです。 それぞ
HTML5のvideo/audio＋JavaScript APIテクニック
HTML5の＜video＞や＜audio＞タグとJavaScript APIで、自由に動画や音声を楽しもう。カスタムのビデオプレイヤーだって作れる video/audio要素のAPIやイベントを利用する video/audio要素は、JavaScriptを用いた細かい制御を行えるのも特徴の1つです。 カスタムのビデオプレイヤーを作ることも容易ですし、動画からフレームを切り出してCanvasに投影し、グラフィックとして取り扱う、なんてテクニックもあります。 今回は、そうしたJavaScript APIの利用方法について見ていきましょう。なお、この記事は2011年5月25日版の仕様に基づいています。 video/audioに共通のメソッド、プロパティ video要素とaudio要素は、メソッドやプロパティの多くが共通です。そうしたメソッドやプロパティを表すのが以下の一覧です。 MediaErr
Html5 Open Video Tutorial
The document provides an outline and overview of HTML5 video including: 1) Basics of setting up HTML5 video including recommended software, codecs supported by browsers, and standards being developed. 2) Details on editing and preparing video for the web including transcoding, publishing video on a webpage, and using JavaScript to control the video player. 3) Expert topics covering cross-platform
05. メディア再生に関するJavascript API » HTML5 -
video／audio要素は、単にタグを貼りつけて再生を行えるだけでなく、Javascriptを用いて細かい制御を行うことも可能である。再生や一時停止、再生速度の変更などは当然ながら、再生位置を変更したり、ダウンロードや再生の進捗状況などをイベントとして補足し、処理を行うこともできる。Javascript APIを用いることで、カスタマイズされたプレイヤーを作ることが可能になる。 メディアの再生に関するJavascript API メディアの再生に関するAPIには、以下のようなものがある。 src src属性の値に対応。 currentSrc 実際に読み込み／再生を行っているメディアデータのURL。 currentTime 現在の再生位置を表す秒数。 duration メディアデータの長さを表す秒数。 paused 一時停止中かどうか。 defaultPlaybackRate デフォルトの
【特集】詳解! HTML 5と関連APIの最新動向 - 新タグ&API編 (3) Video/Audio要素とそのAPI | エンタープライズ | マイコミジャーナル
Video/Audio要素のマークアップ方法 Video/Audio要素は、動画データや音声データをHTMLから取り扱えるようにしたものだ。 VideoとAudioの利用法は至って簡単だ。 video/audioタグを記述する src属性に動画/音声ファイルのURLを指定する たったこれだけで、動画や音声をWebページ内に埋め込むことができる。また、タグの内部に記述したコンテンツは、video/audioタグをサポートしていないブラウザにとっての代替コンテンツとして利用できる。 <video src="動画ファイルのURL"> 動画を視聴するにはvideoタグをサポートしたブラウザが必要です。 </video> <audio src="音声ファイルのURL"></audio> また、リソースの指定をさらに細かく行うためのsource要素もHTML 5から導入された。この要素を使用する
HTML5ビデオ導入編
“見てわかる” ファイバーチャネルSAN基礎講座（第4弾）～続・間違わない！FC SAN導入のヒントとコツ～Brocade
いまさら聞けない＞＜； 基礎から学ぶ「HTML5」超入門！
HTML5 旋風、吹き荒れてますね！(^0^)／ さて、ものすごく突然で恐縮ですが、この度「HTMLファイ部」、設立しました！ 株式会社カヤック（本社：神奈川県鎌倉市、 代表取締役CEO：柳澤大輔、http://www.kayac.com以下「カヤック」）は、HTML＋CSSコーディング、JavaScript プログラムを担当する職種が所属する「HTMLファイ部」を発足いたします。 これまでHTMLおよびCSS、JavaScriptの担当者は、プログラマが所属する技術部、デザイナが所属する意匠部ME課（MEはMarkup Engineerの略）に分かれて所属していましたが、昨今のHTML5の進化と普及を受けて、HTML、CSS、JavaScriptの担当者は「HTMLファイ部」にて活動をスタートします。 そんなHTMLファイ部員が今回お送りさせていただくのは、 HTML5 について基礎から
WebSocket(hybi-07)でechoサーバを作ってみた - いろいろな何か
はじめに 以前、WebSocket Draft 76でechoサーバーを作ってみましたが、今回はhybi-07に対応したバージョンを作ってみました。しばらく見ない間に大きく仕様が変わっていて驚きました(*_*; 今回の実行環境は以下の通りです。 サーバ Python v2.6.1 クライアント Firefox v6.0a2, v7.0a1 最新のWebSocketプロトコルを調べるために作成したプログラムなんですが、以下の機能については未実装です。 バイナリデータと断片化されたフレームの送受信 クライアントからこれらを送信する方法がわからなかったので 拡張機能(Sec-WebSocket-Extensions) IETFの仕様(Section 8)を読んだけどよくわからなかった(；・∀・) 実行の手順 まず、以下からプログラムをダウンロードします。 GitHub - yogit/ws_ec
Flash?いいえ、HTML5です: ファイルのドラッグ&ドロップによるフォトアップロード機能について - mixi engineer blog
はじめまして。コミュニケーションサービス開発部の澤と申します。コーヒーとカレーをこよなく愛する新卒2年目の新米エンジニアで、弊社Webのフロントエンドを主に担当しています。最近はmixiスマートフォン版(mixi Touch)の開発にも精力的に取り組んでいます。 さて、本日はPC版のmixiで1つの機能をリリースいたしました。ファイルをWebブラウザにドラッグ&ドロップするだけで写真をmixiフォトにアップロードできるもので、HTML5 File API※1を採用しています。本記事ではこの機能について色々とお話をしたいと思います。 なにこれ? 以下では、ドラッグ&ドロップによるアップロード機能を「本機能」と呼びます。 百聞は一見にしかずです。本機能のプロモーションムービーがありますので、まずはこちらをご覧ください。 動画では下記を説明しています。 従来のアップロード方法からドラッグ&ドロッ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
reST/Markdownで書けるHTML slide generator、landslide - そこはかとなく書くよ。
Blogger