デブサミ2010のhtml5セッションで見たデモ(Movement tracker)*1 が、 衝撃的だったので video x canvas をちょっと勉強した。 1.videoの任意のフレームをそのままcanvasに描画させてみる htmlのbodyに書くにはこれだけ。 <video id="v" src="video.ogv" autobuffer controls></video> <canvas id="c"></canvas> <input type="button" value="copy frame" onclick="copyFrame()" /> copy frameボタンで呼び出されるjavascriptはこんな感じ。 function copyFrame() { var cEle = document.getElementById('c'); var cCtx =
この記事は、HTML5が引き寄せる近未来を、9つの「○○ウェブ」で理解する。(前編)の続きです。 ウェブプラットフォーム HTML4からHTML5への変化の中でも、最も大きなパラダイムシフトは、「アプリケーションプラットフォームを志向する」という姿勢を明確に打ち出したところでしょう。 そうした旗印のもと、さまざまな機能をウェブに付け加えてきた結果、「ウェブはもはやOSである」と言っても良いくらい豊富な機能を保持しつつあります。 とは言え、プラットフォームとしてのウェブはまだまだ発展途上段階です。以下の様なプラットフォームが、ウェブ技術をプラットフォームの基盤言語として採用しています。 Google Chrome OS・・・Google Chromeをベースとしたオペレーティングシステム。ラップトップ用のOSとして採用が進んでいる。 Windows 8・・・最新版のWindowsでは、ウェブ
Face to gif is a simple webapp that lets you record yourself and gives you an infinitely looping animated gif. In this post I will walk you through how it came to be and what I’ve learned from building the small app. It started with Chris Heilmann’s post about people losing expressiveness to internet memes. At least, that was what I wanted to understand out of it. I thought it really came down to
米Googleは5月15日(現地時間)、同日米カリフォルニア州サンフランシスコで開催されているGoogle I/Oにおいて、ユーザーインターフェイスを一新した「Google Maps」を発表した。新Mapsは現在プレビュー版の招待制で、利用可能になったユーザーは検索結果に応じてハイライト表示が切り替わったり、プラグインなしでWebブラウザから直接Google Earthの呼び出しが可能になる。 新Mapsの特徴は個々人の利用スタイルによって画面表示が変化するインターフェイスを採用している点が特徴で、検索キーワードを入力しながら地図上で絞り込みが行えるダイナミック検索機能が利用できたり、選択したレストランやランドマークなどに応じて地図上のハイライトが変化し、目的の場所や周辺の位置関係を把握しやすくなったりと、検索性が大幅に向上している。また特定の都市の探索機能が強化されており、例えば初めて行
はじめまして。新入りのnagataです。 入社式で自転車乗ってた野郎です。 先輩方から「ブログ、書いてね!」とのお達しがあったので、 日報で書いたらウケがよさげだったcanvasのことについて書いてみようと思います。 ※各種サンプルはMac上のSafari4.05、Firefox3.6.3、Chrome5.0で動作を確認しています。 canvasってなんぞ? 図を書き込めるhtml要素です。 OpenGLやDirectXのような面倒な設定を書くことなく、 手軽にグラフィック描画が行えます。 ブラウザだけでローカルアプリケーションのような グラフィカル(かつ動的な)表現が行えるわけです。 とりあえずつかってみる 早速何か描いてみましょう。 こういうことは実践あるのみです。 処理にはJavascriptを使います。 canvasに描画を行うときは、canvas要素からcontextを取得して、
A front-end framework for building HTML5 mobile apps with a native look and feel. CSS3 Transitions optimized for mobile performance. Swipable carousels using flickable.js. Integration with backbone.js views and routers. Ratchet CSS UI components. Try loading this page on a mobile phone or try our "simulator" to the right. Download Installation Javascript Dependencies modernizr zepto zepto flicka
先日このブログを HTML5 で作り直しました。その時に思った、HTML5 でコーディングするときの基本的な注意書きです。なので、HTML5 をこれからやってみようかなーという人向けです。canvas、video、audio などには触れていません。もっと基本の文章構造、アウトラインについての記事です。また、後半は実際に HTML5 でコーディングする時の tips になってます。 先日このブログ – Webデザインレシピを、HTML5で作り直しました。HTML5 … クライアントさんのページでは、まだ一度も使ったことがないし、勉強のためのサンプルはいくつも作ってみたんですけど、実際に運営しているページで試したいなーと思い、思い切って HTML5 にしました。 とりあえず作ってはみたものの、まだまだ分からないことだらけ。これから HTML5 でコーディングをする時に、とても大事だなーと思っ
Thunderhead is a Mozilla Labs experiment to explore a JavaScript-based GUI toolkit that works with DOM elements and <canvas> to render components. Thunder is not yet official released, so these materials are especially incomplete. Helpful References The Book: A Narrative Doc for Th Frequently Asked Questions Known Issues CSS Support Source Code (Mercurial Repo) You want to help out? So, you want t
「HTML5 Conference 2012」で語られた、HTML5の最先端のAPI、HTML5時代のWebデザイン、開発現場で培ったノウハウやjQuery Mobileの緻密なカスタマイズ法をレポート ブラウザはもはや「インターネット閲覧ソフト」ではない 2012年9月8日、「HTML5 Conference 2012」が慶應義塾大学で開催された。HTML5の最先端のAPI解説からHTML5時代のWebデザイン、開発現場で培ったノウハウの紹介やjQuery Mobileの緻密なカスタマイズ法など多岐にわたる。エンジニアやWebデザイナーだけではなく、Webに携わるすべての人にとって、今知っておくべき「Webの今と未来」が凝縮された1日であった。 シーエー・モバイルの白石俊平氏が、このHTML5コミュニティ(html5j)の存在意義とイベントの趣旨を解説した後、Googleの及川卓也氏はか
123 CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View. CodePen is a social development environment for front-end designers and developers. 👋 It’s the best place to build and deploy a website, show
「HTML5タグの誤用で恥をかいた」「分厚い仕様書は読み切れない」コーダー&デザイナーのためのコーディングガイド。最終草案に対応したほか、商用サイトを意識したコーディング例を新たに書き下ろし。HTML5マークアップへ移行するために必要な知識を効率よく学べる1冊です。ネットで話題の「HTML5カルタ」付き! HTML5マークアップ 現場で使える最短攻略ガイド 定価:2,808円 (本体2,600円)/形態:B5変 (240ページ) ISBN:978-4-04-866070-9 前回に続き、HTML5で強化されたフォーム機能について解説します。 新しいフォーム関連要素 HTML5のフォームでは、input要素が強化されただけでなく、新しいフォーム要素も追加されました。 datalist要素 カテゴリー:フローコンテンツ、フレージングコンテンツ この要素が使える文脈:フレージングコンテンツが予想
使い方<script type="text/javascript" src="redips-drag.js"></script> <script type="text/javascript" src="script.js"></script>ライブラリと設定用のjsファイルを読み込んでマークアップするだけです。 デモのマークアップは以下のような感じ。 <div id="drag"> <table> <colgroup> <col width="30"/> <col width="100"/> <col width="100"/> <col width="100"/> <col width="100"/> <col width="100"/> </colgroup> <tbody> <tr> <th colspan="6" class="mark">テーブル</th> </tr> <tr c
Updates: May 10, 2013: This article has been translated into Serbo-Croatian language by Anja Skrba from Webhostinggeeks.com. Feb 3, 2009: A bug in Webkit seems to be the culprit in the permissions form example below not working correctly in Safari 4. The code has been updated to work around this bug and the article below has been updated. Thanks to russbuelt for pointing this out. Feb 3, 2009: App
タイトルのとおり、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負荷が小
HTML5のDrag and Drop APIとFile APIを試してみました。 Drag And Drop APIは HTML上の要素のドラッグアンドドロップをサポート File APIとの連携でデスクトップからのドラッグアンドドロップをサポート 1番はHTML5でなくてもjQuery等を用いれば実現可能ですので、File APIとの連携を試します。 File APIのサンプル jQueryでFile APIを使うために以下のおまじないを実行します。 jQuery.event.props.push('dataTransfer'); DropイベントとFile APIとの連携にはevent.dataTransferプロパティを使いますが、jQueryのイベントオブジェクトにはdataTransferが存在しません。このおまじないで、jQueryのeventオブジェクトにブラウザネイティブ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く