search、tel、url、email以外は対応状況が微妙です。 week、colorのみiPhone・Androidに対応していませんでした。 numberはFirefoxは対応していませんが、iPhoneでキー配列が数字になるため、適宜使用したいところです。 フォームの見た目 各typeを対応ブラウザで見た時の見た目の参考です。 今回はMac Chromeのキャプチャですが、各ブラウザによって多少デザインや仕様が変わります。 対応していないブラウザはどうなる？ 各ブラウザで対応していないtypeはtype=”text”で生成されます。 rangeとcolor以外はなんとかなりますね。 バリデートの実用性は？ Safariはバリデートが機能していないようでしたし、仕様も不親切な点が見受けられました。 各ブラウザのバラバラな対応状況を考えると、実用出来るのはまだ先のように思います。 バリ
以前、HTML5でカメラやGPSなどスマートフォンならではの機能がどこまで使えるのか調べました。 最近、iPhone5を買ったので今度はiOS6のSafariでサポートされたHTML5の機能を試して見ようと思います。 試したのは以下の5つです。iPhoneで確認できるようにサンプルを作ったので試してみて下さい。 ファイルアクセス(File API)とカメラ(HTML Media Capture) 音声処理・合成(Web Audio API) アニメーション(Animation Timing API) CSS Filter Effects Remote Debugger ■ファイルアクセス(File API)とカメラ(HTML Media Capture) ファイルアクセスとカメラ連携のサンプルです。iOS6ではFile APIの書き方でカメラも使えました。 [ファイルを選択]ボタンを押すと
Flashのエンジニアとして著名なGrant Skinner氏が開発している、「CreateJS」の公式サイトがオープンしました。 http://www.createjs.com/ CreateJSはHTML5を介してリッチなインタラクティブコンテンツの制作をサポートする、JavaScriptライブラリとツールのスイートです。CreateJS SuiteにはEaselJS、TweenJS、SoundJS、PreloadJS、とZoeのツールがあります。 私のブログでもEaselJS、TweenJSを使ったインタラクティブコンテンツのデモを幾つか制作して紹介してきましたが、Flashで培われた技術がそのまま利用できる点で非常に使い勝手のいいツール群だと思っています。 EaselJSとTweenJSでテキストエフェクト EaselJSを使った流体パーティクル入門 今回は公式サイトで明らかになっ
Flash, HTML5スマートフォンの普及が進む中、iPhone には Flash が搭載されず、Android 版 Flash は開発停止になるなど、遅かれ早かれ Web 上から Flash が消えていき、リッチな表現は HTML5 に置き換わっていくことは確実となりました。「これからは HTML5 だ」という印象を世間に強く与えたのが、2009 年の Google I/O でした。Google I/O 2009 レポート グーグルが賭けるHTML 5の未来 − ＠ITGoogle はそれ以降、多くのサービスに HTML5 を取り入れてきました。しかし、いまだに Flash を利用しているサービスがいくつかあります。この記事では HTML5 化していない、または、できていない 5 つの Google のサービスを通してどのこで Flash が使われているのかなぜ Flash が使われて
第20回 RIAコンソーシアム・ビジネスセミナー「Flash」はその役割を終えたのか～今後のRIA開発を考える～ http://www.riac.jp/2012/01/bflash-ria.html でつかった資料Read less
ここ最近、【Web屋限定】Flash・Silverlightお葬式会場 HTML5大勝利ｗｗｗ | 教えて！はかどる速報はてなブックマーク - HTML5はFlashの3倍重かった! 描画パフォーマンスの比較 | ClockMaker Blogあたりボーっと見ていると、「Flash が重い」→「Flash なくなれ」といった話が出てくる。けども、叩くべきはそこじゃないような気がして twitter につぶやいていたのをこちらにも転載しつつ補足しておく。クソ重い Flash サイトについて 「Flash クソ重い、消えろ」と言ってる人、Flash が消えて HTML5 でクソ重い広告サイトが作られるようになったときに何て言うんだろう。 2012-02-23 00:18:13 via web 忌むべきはプラットフォームではなく、重くても良しとする広告主と制作会社。 2012-02-23 00:
最近のHTML5の盛り上がりには勢いがありますが、実際の所HTML5はどうなのか気になったので描画パフォーマンスを測定してみました。上記のグラフが結果ですが、HTML5で一番よい実装よりもFlashのほうが3倍弱高速という結果がでました。ブラウザによってはFlashのほうがHTML5より18倍も高速という結果もでています。 さらに言えば、HTML5の描画パフォーマンスが最も良かったのはSafariですが、ブラウザによってはそれの15%ぐらいのパフォーマンスしかでないブラウザもあり処理速度にばらつきが大きいのが特徴でした。ですが、Flashはどのブラウザでもスコアの振れ幅が小さくブラウザ間の処理速度は安定しているように思います(プラグインなので当然といえば当然の結果ですが)。 検証デモ HTML5やFlashと言っても様々な実装方法があるので、よく使われる方法を幾つか用意して検証しています。
HTML5にはXHTML版の記法も用意されていて、XMLが好きな人でも書けるようになっています。が、色々見ていたら「実体参照が使えない」という問題があるようで。。 「<」(<)とか「&」(&)とかの実体参照はXMLの基本仕様に入ってるので問題ありませんが、「」(©)や「≫」(»)、さらには空白( )など、追加の実体参照はXHTML5では使えません。 なにせこの辺の特殊文字はDTDに書かれてるので、外部DTDを指定しないXHTML5では構文エラーになってしまうのです。 そんなわけで、これらの文字を使いたいときは「©」()のように、エンティティコードを直接指定して書くことになります。うおお面倒くさっ！ XHTML5 移行メモ 必死の Web ハッカーへの推奨事項: <、>、&、"、' を除き、名前指
HTML5のCanvasをFlashライクに使えるようにするJavaScriptライブラリ「EaselJS」と「TweenJS」を使ってデモを作ってみました。 demo 今回のブログ記事では「EaselJS」と「TweenJS」の使い方をデモの作り方を通して紹介します。 ライブラリの紹介 「EaselJS」と「TweenJS」はFlashのエンジニアとして著名なGrant Skinner氏が開発しているJavaScriptライブラリです。「EaselJS」がHTML5 CanvasをFlashライクに使うためのライブラリで、「TweenJS」が汎用的なトゥイーンライブラリです。 ▲EaselJS HTML5のCanvas要素はHTML上に自由に描画することのできる新しい要素で、工夫することでFlashのように豊かな表現を作ることができます。ただCanvasではJavaScriptでちょっと
丸坊主なのに寝癖が付く男、正宗です。前回の記事「Actionscript3erが覚えるJavascriptでのクラス開発まとめ」でjavascriptをActionscript3ライクに書く方法をまとめてみたので、今度は練習がてらHTML5をさわってみました。 WebGL版です。 クリックで別ウインドウで開きます。 画像クリックすると別ウインドウで開きます。 うまく動かない場合はWebGLを使わない素のCanvasレンダリングも作ってみましたのでこちらのリンク先を参照してください。 スクロールで3D空間をうねうね動く的なことがやりたいんだろうな、って思ってもらえたらうれしいです。ちなみに背景には旅行の思い出の写真をあしらって、ナイスな感じに仕上げました。 ソースは適当にほじくって見てみてください。 今回は、はじめてHTML5を触ってみた中でわかったことを書きたいと思います。 HTML5でJ
最近のHTML5やWebブラウザのAPIの進化はけっこうすごくて、普通にサウンドプログラミングもできるようになってきました。そんなわけでシンセサイザーアプリを作ってみました。 サウンドを扱う方法はいくつかあるみたいですが、Google Chromeで使えるWeb Audio APIがEQやディレイなどあらかじめ用意されていて良さげなので使いました。 http://aikelab.net/websynth/ まだ、バグもけっこうあるのでじょじょにブラッシュアップしていきます。 Chrome以外では動かないと思うので試せない人はこちらの動画をどうぞ。 Google API Expertが解説するHTML5ガイドブック 作者: 羽田野太巳,白石俊平,古籏一浩,太田昌吾 出版社/メーカー: インプレスジャパン 発売日: 2010/09/16 メディア: 単行本（ソフトカバー） この商品を含むブログ
2012年のHTML5、CSS3、JavaScriptはこうなる〜実際のサービス事例で考えるHTML5の近未来 : ATND 2012/01/20 2012年のHTML5、CSS3、JavaScriptはこうなる〜実際のサービス事例で考えるHTML5の近未来 #html5semi - Togetter (写真：神保町駅改札前) HTML5関連ネタはやろうやろうと思いつつ個人的にはリーチ出来てない分野でして、ちょっくら拝見してきました。ちなみに上記の募集サイト、凄い人気で200人の定員に一時は倍の400人が登録すると言う事態に。HTML5人気は凄いですね〜。 開催開場は株式会社オプト１F大会議室＠神保町。この日は朝から雪が降るなどして天候が崩れていましたが、夕方〜開催の頃には問題無く止んでおりました。しかし外は寒かった！(>_<) 入場時の状況で5分程遅れて本編スタート。以下メモです。 基調
6. • 現在の要素数は108 • 30種類の新要素 • 14種類の既存要素が変化 • time要素、hgroup要素、data要素 （WHATWG HTMLのみ）などが争 点。 HTML5マークアップ 7. • リッチな入力フォーム、新たなフォーム要素、宣 言的なバリデーションなど。 date datetime datetime-local month week time number range email url search tel color HTML5 Forms 8. • HTMLにマシンリーダブルなデータを埋 め込むための仕様 <div itemscope> <p>お名前: <span itemprop="name">白石</span></p> <p> : <time itemprop="birthDate">1978/03/24</time> </p> </div> HT
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
