2. 自己紹介 • Kazuaki Hidaka • クックパッド株式会社(2013/02∼) Androidとか担当 • @kaa facebook • Android以前はFlashやっていました。
The World Wide Web Consortium (W3C) develops standards and guidelines to help everyone build a web based on the principles of accessibility, internationalization, privacy and security. Working with stakeholders of the Web A range of organizations join the World Wide Web Consortium as Members to work with us to drive the direction of core web technologies and exchange ideas with industry and resear
制限 同時に再生できる音源は1ファイルのみ 再生できるタイミングはユーザイベントのハンドラ内だけ プリロード不可 OS自体のサイレントモードと連動せず BGMを流すだけならこんな方法も $('<div>BGMを再生しますか？</div>').appendTo('body').click(function () { $(this).remove(); (new Audio('bgm.mp3')).play(); }); $('body').on('click', 'a', function (e) { e.preventDefault(); $.get($(this).attr('href')).success(function (html) { $('body').html(''); $('body').append($(html).find('body')); }) });
こんにちわ。HTMLファイ部のふちがみです。 HTML5のすごいコンテンツやニュースをキャッチアップしきれない！知らないところでバズってる！と悔しい思いをしている方も多いと思います。そこで、ミーハーなファイ部のメンバーに「どうやって情報収集をしているか」を聞いてみたのでまとめてみました。 ソーシャルブックマーク キーワード「HTML5」を含む新着エントリー - はてなブックマーク キーワード「CSS」を含む新着エントリー - はてなブックマーク キーワード「javascript」を含む新着エントリー - はてなブックマーク コミュニティー html5j.org | Google グループ ニュースサイト HTML5/CSS3の情報をクリップ！ :: dotHTML5 dotHTML5のtwitterもフォローしておくとGOOD ゲーム・ガジェット系 Kotaku JAPAN｜ザ・ゲーム情報
<nav id="header-navigation"> <ul> <li><a href="/#header-navigation">item1</a></li> <li><a href="/#header-navigation">item2</a></li> <li><a href="/#header-navigation">item3</a></li> <li><a href="/#header-navigation">item4</a></li> <li><a href="/#header-navigation">item5</a></li> </ul> </nav> nav#header-navigation > ul { padding: 0.4em 0; background-color: hsl(210, 30%, 60%); background-image: -webk
ブラウザから新年のご挨拶！お正月気分を味わえる、ちょっと贅沢なコンテンツ集。ブラウザ凧揚げ ブラウザをドラッグして 上手に凧を上げてみよう。 リズム餅つき アドレス欄を流れる □と■が合わさったら タイミングを合わせて クリックしよう！ ローディング初日の出 いつもの見慣れた ローディングが、 初日の出になりました。 ラジオだるま だるまの目が ラジオボタンに。 目に墨を入れて、 願掛けしよう。 スクロールやぶさめ スクロールで弓を引き、 一等真ん中を 射ぬいてみよう。 世界のあけおめ 世界のみんなに 新年のご挨拶を。 書き初めの窓 新年の抱負を、 ブラウザにしたためよう。 反転おみくじ 画面をドラッグ・ 反転させて、 今年の運勢を占おう。 初夢スロット 一富士二鷹三茄子。 初夢スロットで、 年の初めの運試し。 ポップアップ駅伝 マウスをクリックして カチカチ走ろう。 チェックボックスに龍
HTML5 Advent Calendarの2日目です。 本当は3日目の担当だったけど、代打(?)で2日目も書いている。もちろん3日目の記事も書く。 「HTML5 Advent Calendar」はこんな感じの取り組み。まだ空きがあるので、よかったらどうぞ。 今年は、HTML5もAdvent Calendarやります！ 本来のAdvent Calendarとは、12月1日からクリスマスの25日まで、カードに作られた窓を1日に1つずつ開けていくというものです。一方、技術系のAdvent Calendarは、12月1日から25日までの間、毎日違う人が特定のテーマに沿ってブログ記事を書くというものです。もちろん、ここでのテーマは「HTML5」になります。HTML5に関することならなんでもOKです！ このイベントに参加した順番が、そのままブログを公開する日付とします。 是非、みなさん一緒にわいわい
Google Developer Day 2011に参加しました。 参加したセッションのメモを書いときます。 (追記 2012/01/14) Googleから動画が公開されました。 http://www.youtube.com/watch?v=MY06xnSZyaw:moive ※このセッションで解説された内容に一部変更点があるとのことなので、こちらも合わせて参照下さい。 (追記ここまで) HTML5 のオフライン機能(Eiji Kitamura) @agektmr 東京 - Google Developer Day 2011 http://www.google.com/intl/ja/events/developerday/2011/tokyo/agenda/session_1001.html スライド 動的なデータの保存 Web Storage (localStorage / sess
iPhoneがでた当初はWebApp押しだったAppleも3Gを出してからすぐにネイティブアプリに手のひらを返してしまって、WebAppはすっかり影がさしてしまいました。 それでも、jQTouchやSencha Touch、jQuery mobileなどWebAppの開発支援となるJavascriptライブラリが登場して一部では盛り上がったりもしています。PhoneGapみたいにWebAppをネイティブにパブリッシュするツールや、Titanium MobileのようにWeb言語ベースで開発してネイティブにするものもありますし、いろいろですね。 iOS4までのMobile SafariではCSSの一部のプロパティが使えなかったりで、よりリッチなWebAppをつくろうと思えばJavascript必要でした。 先日公開されたiOS5では今まで「なんで使えないの？」といったところが少し修正されて、
去年作ったジャンプゲームをGAEのページへ移行した。 横スクロールジャンプゲーム | 無職のHTML5 Canvas 音が出るゲームなのだが、音声ファイル絡みで問題が発生した。 1. 音声ファイルだと認識されない deployした時に、MIMEタイプが不明と表示され、再生できなかった。 以下のように app.yaml に設定することで、ちゃんと認識された。 - url: /sound/(.+\.ogg) static_files: sound/\1 upload: sound/(.+\.ogg) mime_type: audio/ogg - url: /sound/(.+\.mp3) static_files: sound/\1 upload: sound/(.+\.mp3) mime_type: audio/mpeg 2. Google Chromeでの再生がおかしい Firefoxでは
HTML5 で、ブラウザの機能として「音」を再生する仕様が追加されました 音を再生するには、<audio src="..." autoplay> を HTML に埋め込むか、new Audio(src).play() とします。 仕様 ⇒ http://www.w3.org/TR/html5/video.html クロスブラウザ化する上での問題は2つ 1. 古いブラウザ向けに Silverlight(XAML) や Flash を使い、それらの違いも吸収しなければならない。 2. サポートしているコーデックの違いを吸収する仕掛けも必要。 Browser uu("Audio") HTML5Audio SilverlightAudio FlashAudio Firefox3.0 mp3 - mp3 mp3 Firefox3.5+ mp3,ogg,wav ogg wav mp3 mp3 Safa
画像をプレビューするために、サーバへアップロードする必要がなくなります*1。 html fileのアップロードフォームにonchangeを仕込んでおきます。 あとは、プレビュー表示用の要素だけ準備。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <form> <input type="file" name="file" onchange="preview(this)" /> </form> <hr /> <b>preview:</b><br /> <div id="preview_field"></div> </body> </html> javascript function preview(ele) { if (!ele.files.length) return; // ファイル未選択 var f
W3Cで標準化が進められている「File API」を使うと、指定したローカルファイルのファイル情報やファイルの中身（データ）をJavaScriptで取得できます。今回のJavaScriptラボはこのFile APIを使って、ブラウザー上にファイルの内容を表示してみましょう。テキストファイルの内容をそのまま表示するサンプルと、バイナリファイルを16進数データの羅列（バイナリダンプ、ダンプリスト）として表示するサンプルを作成します。 File APIの対応ブラウザー File APIは2010年10月現在、以下のブラウザーで利用できます。 Firefox 3.6 / 4β Google Chrome 6 このほか、Safari 5が、File APIを使ったファイル情報（ファイル名やファイルサイズなど）の取得に対応していますが、ファイル内容へのアクセスはできないので今回作成するサンプルは動作し
HTML5で手軽に扱えるようになったSVG（Scalable Vector Graphics）。前回は、HTML5文書内に埋め込まれたインラインSVGをJavaScriptで制御する方法を紹介しました。今回はJavaScriptとSVGを使ってシューティングゲームを作成します。 SVGアニメーション ゲームの作成に入る前に、SVG図形をアニメーションさせる方法を説明します。SVGには図形の位置やサイズをアニメーションさせる<anime>タグが用意されています。<anime>を使うとアニメーションが簡単に実現できます。 SVGアニメーションはアニメーションさせたい図形の子ノードに<anime>タグを記述し、変化させる属性値を指定します。指定できる主な属性名を以下の表に示します。
Multi-touch web development Stay organized with collections Save and categorize content based on your preferences. Introduction Mobile devices such as smartphones and tablets usually have a capacitive touch-sensitive screen to capture interactions made with the user's fingers. As the mobile web evolves to enable increasingly sophisticated applications, web developers need a way to handle these eve
Create a page flip effect with HTML5 canvas | Tutorial | .net magazine HTML5で超リアルなページめくり効果を実装するチュートリアルとサンプル。 canvasなんかも活用しつつ次のようにリアルに実現できちゃってます。Chromeなんかでは超なめらかでした。 Flashじゃなくてもできちゃうんですね。 ライブデモ 実装のためのコードがチュートリアル形式で解説されていますが、このテクニックは色々と使えそうですね。 関連エントリ CSS3を使った驚きのデモいろいろ２５種類 画面をスワイプさせてページ送りができるWordPressプラグイン「iPad Swipe」 iPadのブラウザ上で電子書籍風のめくる操作を可能にするJavaScript
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
