初心者のためのWeb標準技術2015年8月27日に行われたHTML5ビギナーズ勉強会の「初心者のためのWeb標準技術」のセッションの資料です。
Picturefill
The picture element, srcset and sizes attributes, and associated features allow web developers to deliver an appropriate image to every user depending on a variety of conditions like screen size, viewport size, screen resolution, and more. Picturefill enables support for the picture element and associated features in browsers that do not yet support them, so you can start using them today! Picture
picture要素の関連仕様って今どうなってるんだっけ？を調べたメモ
<picture> どうなった 勤め先がモバイルに注力していたこともあり、レスポンシブもへったくれもない世界を生きてきた。そのせいで、その類の情報にかなり疎くなっていたので、現状を軽く調査してみた次第。 HTMLでの画像リソース読み込み分岐の必要性 CSS には Media Queries があるので、Viewport の width であったりデバイスのピクセル密度であったりを条件にして background プロパティの指定をすれば対応できる。 反面、<img> 要素と src 属性にはそのような仕組みがないため、Media Queries で可能な条件で同じようにやろうと思うと、JavaScript で DOMContentLoaded のあとに"頑張って"操作するか、バックエンドで UserAgent に応じて"賢く"返す仕組みを用意しなければならない。 WebP のような画像形式
KiriTalk
説明 APIの仕様の変更により今は動作しない可能性があります。 マイクから「（ｷﾘｯ」とした発言を取得して（単なる音声取得）、復唱する単純なジョークツールです。 複数人がいる場所で使うと、自分の発言が復唱されるため、気恥しくて面白いです。 自分がどんだけ普段「（ｷﾘｯ」と気恥しいバカげた発言をしているか、客観的に再認識し、自分を見つめ直すことができる有効なツールでもあります。 マイクとスピーカーが必要です。マイクをセットして、本ページを開くと「マイクへのアクセスを求めています」とブラウザの上の方に表示されるので、「許可」してください。 このツールは、「WebRTC」と「Web Audio API」を使用して、HTML5だけで実現しています（ｷﾘｯ Tips マイクから取得した音の音量の閾値をみて音声録音をしているため、動作しない場合はマイク音量を大きくするか、大きめに発言してください。 逆
HTML5の音声関連 API の利用方法について調べてみた
<h3 class="center">音を鳴らしてみる<br/>「音の生成」→「音の出力」</h3> ### 音を鳴らす //ベースとなるオブジェクト window.AudioContext = window.AudioContext || window.webkitAudioContext; //safari対応 <span class="hot">var audioContext = new AudioContext();</span> //「音の生成」 <span class="hot">var osciillatorNode = audioContext.createOscillator();</span> //「音源」→「音の出力」 <span class="hot">osciillatorNode.connect( audioContext.destination );</sp
wri.peで学ぶ、イマドキのWebアプリの作りかた（前編）
エキスパートが手がけたプロダクトを題材に技術的な解説を行っていくシリーズ連載、今回は wri.peです。 難しい機能の実装や、先進的なAPIの利用を通じて、執筆者が得たノウハウを余すところなく紹介していきます。 HTML5を活用したメモ帳アプリ [wri.pe] 最近、仕事で作っているミイルが忙しかったり、趣味で作っているMobiRubyがなかなか進まなかったりして、個人でWebサービス的なモノを作っていない事が自分としてちょっと気になっていました。 そこで息抜きとして、ゴールデンウイークに集中してWebサービスを一つ作ろう！と思い立ち、wri.peというWebサービスの開発に着手しました。 wri.peは自分が使いたいと思えるメモ帳を作ったので、下記の様な特徴を持っています。 Markdownフォーマットをサポート Gmailの様なアーカイブ機能 全文検索 カレンダーへのマッピング iP
新しい picture 要素の仕様が公開、レスポンシブ・イメージ最新動向
HTML5 extension （HTML5 拡張仕様） として策定されている picture 要素に関して、最新の仕様が年明け、1月 2日に公開されましたので簡単に紹介。 所謂、レスポンシブ・イメージ （Responsive images） のお話ですが、HTML5 extension （HTML5 拡張仕様） として策定されている picture 要素に関して、最新の仕様 （Editor's Draft） が年明け、1月 2日に公開されました。 ちょっと時間が経ってしまいました （10日以上、下書きのままで放置されていたのはナイショ） が紹介と、レスポンシブ・イメージ関連の最新動向を簡単にまとめてみます。 The picture Element, Editor's Draft, 2 January 2014 ちなみに、1つ前の仕様は下記になります。 The picture elemen
ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013
Canvas、WebGL、WebRTC、WebSocketなど、HTML5の花形スターとも言えるモテ系APIは、常に世間の注目を集めている。これらAPIを使いこなせるウェブディベロッパーはどこからも引っ張りだこだろう。しかし、注目度が低いながらも、今後のウェブを支える（かもしれない）最新のAPIが数多く存在する。このようなAPIは派手さが足りないゆえに話題になることもない。しかし、これら非モテ系のAPIも含めてHTML5だ。 本セッションでは、ありきたりのモテ系APIに飽きたマニアな貴方のために、普段は陽の当たらないAPIを一挙紹介する。もちろん、どれかのブラウザーに実装されているAPIのみだ。今から使おうと思えば使えないことはない。そして、W3Cにて仕様策定が始まって日が浅いため、明日にはどうなるか分からない。無くなるかもしれないし、大幅に変更されてしまうかもしれない。今覚えても役に立た
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
