Capture audio and video in HTML5 | Articles | web.dev
Capture audio and video in HTML5 Stay organized with collections Save and categorize content based on your preferences. Introduction Audio/Video capture has been the "Holy Grail" of web development for a long time. For many years we've had to rely on browser plugins (Flash or Silverlight) to get the job done. Come on! HTML5 to the rescue. It might not be apparent, but the rise of HTML5 has brought
#3 「あまりApplication cache（cache manifest）のことを甘く見ない方がいい」 Advent Calendar 2012 - KAYAC Engineers' Blog
最近色々あってAndroidと心を通わせられるようになってきたago（@kyo_ago）です。 このエントリは tech.kayac.com Advent Calendar 2012 3日目の記事です。 Application cache（cache manifest）とは WHATWGやW3で議論されているHTML5 Offline Web Applicationの仕様の一部です。 細かい仕様等に関しては最後に参考URLをつけたのでそちらをご覧ください。 ここでは色々誤解の多いApplication cacheの使い方をご紹介したいと思います。 使い方 .appcacheの拡張子に対してtext/cache-manifestのMIMEタイプを設定してください。 .appcacheファイルは以下の形式で作成してください。 CACHE MANIFEST: #更新用ID（日付+連番等） キャッ
★オフライン ウェブ アプリケーション
■オフラインでもウェブアプリケーションを利用可能に HTML5では、インターネットに接続していないオフラインの状態でも、 ユーザーがウェブアプリケーション（ウェブサイト）を利用できるようにするための、 キャッシュマニフェストと呼ばれる仕様が追加されています。 この仕様の基本的な仕組みは、ユーザーがインターネットに接続してウェブアプリケーションを利用した際に、 HTMLファイル・CSSファイル・JavaScriptファイル・画像ファイル…などの ウェブアプリケーションの利用に必要となるファイルをユーザーのローカル環境にダウンロード保存して、 次回からはオフラインでもウェブアプリケーションを利用できるようにするというものです。 このような仕組みでサーバー上のファイルをローカル環境にダウンロード保存することをキャッシュ（CACHE＝貯蔵所・貯蔵物）といいますが、 ウェブアプリケーションをオフライ
HTML5やCSS3を使った次世代表現を学ぶのに役立つコードサンプル
わずか280行程度のJavaScriptで作られ... / JavaScriptで作るいろいろな物理シミュレ... / JavaScriptによる波の物理シミュレーショ...他...全14件
Form Follows Function
Form Follows Function project is a collection of entrancing and engrossing "interactive experiences", each experience has its own unique design and functionality. The award-winning project includes a spinning navigation wheel on the website, with each interactive experience represented by a poster. By clicking on a poster, an interactive experience opens up. Each one is as much a piece of art as i
iPhone、Androidで使える！撮ったその場で画像編集できるHTML5アプリを作ってみよう | DevelopersIO
先日、iOS6のSafariでFile API、HTML Media Captureを試してみました。 これで写真を撮ってすぐに編集できるWebアプリが作れるのではないかと思い、作ってみることにしました。 以下がサンプルのURLです。撮影して画像を表示した後に編集し保存することができます。 画像処理サンプル OSとブラウザに関しては iPhone 5(iOS6)のSafariと Galaxy S3(Android 4.04)の標準ブラウザ で動作確認しました。iOS5系、Android2系ではFile API、HTML Media Captureが使えないので動きません。 PC版Chromeでも試しましたが、ファイルを選択して画像処理できることを確認しました。 他のモバイル用OS、モバイルブラウザに関しては試せないので分かりませんが、 以下のサイトの表でFile APIとHTML Medi
「スマホから指で飛ばしたキャラメルが店の窓に」、ミッドタウンの洋菓子店でXmasイベント
「スマートフォンの画面上でキャラメルをスワイプ（指で滑らせ）して飛ばすと、キャラメルが店のショーウインドウに現れ、ゆっくりと降ってくる。見事ボックスに入ると、実物のキャラメルやクリスマスケーキをプレゼント」---。 ヨックモックが運営する洋菓子店「アンリ・ルルー」の東京ミッドタウン店では2012年11月30日から、マルチスクリーンを活用したイベント「HENRI LE ROUX“Catch the Christmas Caramel！”」を開催している。「幅広い層の集客につながっている」（ヨックモック 営業部 ルルー営業グループ グループ長 田代良則氏）という。 ゲームに参加するためのQRコードは、「アンリ・ルルー」の東京ミッドタウン店の店頭にあるボードに掲載されている。QRコードを読み込み、Webページにアクセスするとゲームに参加できる。ショーウインドウには、プロジェクターの映像によって雪
[HTML5]getUserMedia APIを使ってカメラを表示させてみる – o24ブログ
本日Chromeのバージョン21がリリースされ、getUserMediaが実装されたようです。 getUserMediaを使うと、javascriptを使ってカメラにアクセスできるようなので、やってみました。 参考にしたページは以下 getUserMedia API <body> <video autoplay width="640" height="480"></video> <img src="" width="640" height="480" > <canvas style="display:none;" width="640" height="480"></canvas> <div id="wrapper"> <button id="capture">capture</button> <button id="stop">stop</button> </div> </body> <
![[HTML5]getUserMedia APIを使ってカメラを表示させてみる – o24ブログ](https://cdn-ak-scissors.b.st-hatena.com/image/square/8d71ff5111e05619a10d29bb40d7aebaa75c8fbc/height=288;version=1;width=512/https%3A%2F%2Fs0.wp.com%2Fi%2Fblank.jpg)
Youtubeの動画を背景に
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
★Geolocation API
■Geolocation APIとは Geolocation APIは、ユーザーの位置情報を扱うためのAPIです。 Geolocation APIの登場以前にも携帯端末などで位置情報を扱うことは出来ましたが、 各携帯キャリア独自の規格であったためキャリアごとの仕様に合わせて開発する必要がありました。 Geolocation APIは、ウェブの標準化団体であるW3Cが仕様策定を進める規格であり、JavaScriptで位置情報を取得できるように標準化されています。 すでに、Firefox・Google Chrome・Safariなどの一般的なブラウザでサポートされており、 スマートフォンのようなGPS対応の携帯端末向けのウェブサイトだけではなく、 一般的なブラウザで閲覧するいわゆるPCサイトでもユーザーの位置情報を利用したコンテンツを提供することが可能になっています。 ■どんなしくみ？ Geo
位置情報をブラウザで活用！ Geolocationを使いこなそう
連載目次 HTML（HyperText Markup Language）は、W3C（World Wide Web Consortium）が仕様を管理するマークアップ言語だ。そして、W3Cが勧告し、現在ほとんどのサイトが使用しているHTMLは、HTML 4.01だ。 HTML 4.01の仕様は当時の環境に起因しているが、主に「文書を扱うこと」を目的として1999年に勧告されている。しかし、Web 2.0の概念やAjaxの登場により「文書を扱う」というよりも「アプリケーションを扱う」ことがWebの主目的となり、HTML 4.01でも高機能なWebアプリケーションが構築されるようになった。 その一方で、ブラウザ・ベンダは、HTML 4.01のみでWebアプリケーションを開発することの限界を感じていた。結果としてApple、Mozilla、Operaの3社は、W3Cとは別にWHATWG（Web H
iPhone Webアプリテンプレート（CSS Nite Vol.40 reprise） | Topics | DB - KAYAC Designer's Blog（カヤック デザイナーブログ）
こんにちは。意匠部ME課のtacamyです。 CSS Nite 4周年記念イベント（Vol.40 reprise）にてご紹介した iPhone Webアプリのテンプレートセットを配布します。 イベントの内容はこちらのエントリーをご覧ください。 ダウンロード iphone-tmpl.zip セット内容 index.html HTML5+iPhone用HTML css/iphone.css HTMLの新要素＋iPhone専用CSS js/iphone.js URL&検索バーを消す指定 js/lib/jquery.js jquery apple-touch-icon.png Webクリップアイコン cache.manifest マニフェストファイル .htaccess < dd style="margin-bottom:0.5em;">.manifestのMIMEタイプ設定 viewportにつ
スマホアプリ開発にも役立つHTML5の8つの技術
前回でお伝えしたように、シリコンバレーでは特に昨年あたりから「オープンなWebの技術でスマートフォン向けアプリを開発」という動きが強くなってきています。そして、オープンなWebの技術を語るときに欠かせない存在のひとつとしてHTML5が挙げられます。 今回はスマートフォン向けアプリケーション開発の観点からHTML5をおさらいしてみましょう。 1. HTML5の8つの特徴的な技術 HTML5には「セマンティックス」「オフライン＆ストレージ」「デバイスアクセス」「コネクティビティ」「マルチメディア」「3D、グラフィックス、エフェクト」「パフォーマンス＆インテグレーション」「CSS3」という8つの特徴的な技術があり、各技術を表すロゴも決められています。 以下では特に、これら8つの技術を使うとスマートフォン向けWebブラウザで何ができるのかについて、簡単に振り返ってみたいと思います。 1）セマンティ
このまま行っても儲からない！？HTML5アプリがマネタイズに不向きな５つの理由
htmlの標準化団体であるWorld Wide Web Consortium (通称W3C) の予測では、「2014年まではHTML5の完全な実装は難しいだろう」と言われていた。しかし、既に世の中にはHTML5ベースの素晴らしいアプリが数多く存在する。これは「先進的な画像・動画編集」「画期的なデータストレージ機能」「位置情報のサポート」など、HTML5に従来のやり方よりも遥かに優れている点があるからだろう。 とは言うものの、HTML5（特にアプリ）には乗り越えるべき課題がいくつか残されている。以下「HTML5アプリがマネタイズに不向きな理由」について、５つの点を取り上げてみよう。 1. アプリ発見の難しさ HTML5アプリをなかなか見つけられないのには、大きな理由がある。それは、HTML5アプリを探せるサイトの知名度が低いからだ。もちろん、Facebook App CenterやMozil
jQueryを使用してドラッグ&ドロップでファイルをアップロードできる「Plupload」 | Web活メモ帳
Pluploadはオープンソースのファイルアップローダーで、jQueryを使用してファイルのアップロードやリサイズ処理を行う事が可能になっています。 アップロードには複数のプラットフォームから選択可能で、FlashやSilverlightを使用する事も可能。 作者はTinyMCEの開発者の方だそうです。これは期待できますね。 詳しくは以下 機能 各テクノロジーについて何ができるかは、表にまとめられています。HTML5はJavaScriptだけで画像のリサイズなんかもできちゃうんですね。 以下のような機能があるようです。 複数ファイルのアップロード アップロード進捗状況の表示 最大ファイルサイズの制限 画像のサイズを変更する ユニークなファイル名の指定 複数ファイルのアップロード処理はCMSでは必須なので、こういったライブラリがオープンソースで公開されるのは開発者には嬉しいですね。 ソースも
fu_mou | Green Night Parade EP
fu_mouがやってきた！ヤァ！ヤァ！ヤァ！ 既にフロアアンセムと化しているGreen Night Paradeを引っさげての待ちに待ったリリース。 Preludeから始まる5曲、そしてPandaBoYによるリミックスを含めた全6曲、そうです、音楽ってのはこんなにも楽しいものなんです。 美しく刻まれたLantern Paradeのリミックスからフロア号泣必至のカービィネタアンセムGreen Night Paradeまで、 このEPは僕らにあらゆるポップを提示してくれている。 2011年、5番目の月、12番目の日、今日ここで始まったグリーンに輝く小さなパレードにみんなで笑って涙しよう。 奇跡も、魔法も、あるんだよ。 文章: RE:NDZ a.k.a. kz (livetune)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TECH PROjin
Mobile HTML5
http://ryu-tan.net/blog/?p=285
https://jp.techcrunch.com/2011/01/22/20110121brickify/
