[B! HTML5] typistaのブックマーク

typista id:typista

HTML5に関するtypistaのブックマーク (6)

[HTML5] <input type="file">のデザインをもっと簡単に変更 - Qiita
<input type="file"> そのものにはCSSが効かず、スタイルを変更できません。そこで、<input> 自体は非表示にし、<label> で修飾します。サンプルソース <style> label { color: white; background-color: red; padding: 6px; border-radius: 12px; } </style> <label for="file_photo"> ＋写真を選択 <input type="file" id="file_photo" style="display:none;"> </label>
typista 2015/12/14
HTML5

pocket2twitter
リンク
[HTML5] MediaStream APIを使ったライブチャットを作ってみよう | DevelopersIO
MediaStream APIとは WebRTC (Web Real-Time Communication)で定義されているAPIの一つで、ローカルのWebカメラやマイクからストリームデータを取得するためのAPIです。MediaStream APIの詳細はW3Cでドラフトが公開されています。 http://dev.w3.org/2011/webrtc/editor/getusermedia.html MediaStream APIでは、通信時のストリームについて定義されています。これによって、Webカメラから取得した画像やマイクから取得した音声は、加工することが可能です。 MediaStream APIの使い方今回はMediaStream APIの中で定義されている getUserMedia メソッドを使います。最初にnavigator.getUserMedia関数が使えるか確認します
typista 2015/05/05
HTML5

pocket2twitter
リンク
[HTML5]アウトラインで迷わない！ sectionと見出しについて
webcre8はHTML5を勉強中です(APIだとかCanvasだとかはまだです)。当ブログWEBCRE8.jpもHTML5を用いた自作テーマで作成されています。皆さんもコーディングしていて「これはどう書くのがベストなんだ？」「これであってるのか？」と迷う事ってよくありますよね。 HTML5でコーディングしていて最近ホントにこれでいいのか？と迷っていたのはsectionと見出しについて。コーディングレベルのHTML5でよく取り沙汰されるアウトラインの話題ですね。これについて何人かのweb制作者、特に@HissyNCさんと@kojika17さんと話をしてみたことも含めて、HTML5のアウトラインについて今までのwebcre8と同じように「…つまりどういうことだってばよ？」と混乱している人の為にわかりやすく整理してみようかなーと思います。厳密な解説はこの記事を読まずとももっと信頼できる文
typista 2014/06/14
HTML5

pocket2twitter
リンク
[HTML5] Drag and Drop API のこと
HTML5のドラッグ＆ドロップはこれ書いてる時点でFirefox、Chrome、IEが対応。しかしIEの場合はFileReaderとデータURI未対応だから全く面白みがない。 Drag出来るといってもMooToolsやjQueryなどで実装するようなぬるぬる動かすようなものではなく、 html5.jpのチェックページにあるツールのように、右から左へ受け流すようなことしか出来ない。 jQueryとの比較がこのサイトで見れる。故にshapeshed.comのデモみたく、ゴミ箱にドキュメントを捨てたり、カートに商品を入れたりする用途には向いているが自由奔放にドラッグさせるとなるとFrameworkの力を借りるより他ない。サンプルでよく見るのはコンピューターにあるファイルをブラウザウィンドウにドラッグして、そのファイルの中身をFileAPIで読み込んでこねこねするっていうやつだと思う。
typista 2013/07/31
Drag and Drop API のこと

HTML5
リンク
[HTML5] 利用端末のLocalStorageの容量を調べられるページを紹介します - YoheiM .NET
こんにちは、@yoheiMuneです。 LocalStorageの容量を調べる為のサイトを作りました。今日は、そのご紹介をさせて頂ければと思い、ブログを書きました。 HTML5 LocalStorageとは HTML5のLocalStorageとは、ブラウザ上でデータを永続的に保存できる仕組みです。 JavaScriptから簡単にデータの永続化やデータの取得をすることが可能です。 ■ローカルストレージのサンプル - ローカルストレージを使ったデータの保存／読み出し＠YoheiM.NET - LocalStorageに格納するデータを暗号化する＠YoheiM.NET - Canvasに描画した画像をLocalStorageに保存＠YoheiM.NET 簡単にデータを永続化できるのですが、いくつか問題があります。その問題の一つが保存可能容量です。W3Cの仕様書では、ドメイン毎に５MBが一つ
typista 2013/07/10
利用端末のLocalStorageの容量を調べられるページを紹介します

HTML5
リンク
[HTML5] アプリケーションキャッシュの使い方
アプリケーションキャッシュは指定したファイルをローカルにキャッシュさせることで、表示の高速化やオフラインでの動作を可能にするものです。ブラウザでもその効果は体感できるが、一番威力を発揮するのはスマートフォン環境。特に速度の遅い3G回線下にあるiPhoneで使うと、まるでWifiを使っているような気分が得られます。導入方法あちこちで語られまくってて今更感あるけど一応…。マニフェストファイルの作成まずは何をキャッシュするのか指定するマニフェストファイルを作ります。 UTF-8のテキストファイルを開いたら、拡張子を “.appcache” にして適当な名前を付けて保存。保存する場所はアプリケーションのルートでいいと思います。保存したらテキストファイルの先頭に CACHE MANIFEST と追加。目印なので忘れずに。その後にキャッシュするものとしないものの設定を書きます。ま
typista 2013/07/10
アプリケーションキャッシュの使い方

HTML5
リンク
1