アプリ風に動くHTML5サイト作成の一例:phpspot開発日誌
Building a Touch-Friendly HTML5 Site Think. Create. Deliver アプリ風に動くHTML5サイト作成の一例。 ムービーを見ていみるとiPad上でかなりスムーズに動いているように見えます。 プロセッサスピードがそれなりにあればこれだけ快適に動くということですね。 というわけで将来的にはもっとプロセッサ速度が上がって確実にHTML5ベースのアプリが多くなりそうな気がしていますが、予めこうしたデモを参考に作成ノウハウを貯めておいてもよいかも。 多くのデベロッパにとってObjectiveCとJavaを覚えてiPhone・Android対応するというのはかなり負担なのでHTML5で出来るものならサクっと対応しちゃいたいですよね。 ハードウェアの進歩のスピードが速いのでHTML5ベースの時代は案外すぐ来てしまうのかも。 既にHTML5ベースでという
HTML5+CSS3で実装された、さまざまなUIエレメントのコレクション
パラグラフ・リスト・見出しなど [ad#ad-2] UIパーツの使い方 下記の3つのステップで、これらのUIを自分のページで利用できます。 IEへの対応 IEにHTML5を理解させるために、2つの重要なファイルを使用します。 <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <link rel="stylesheet" href="ie.css" type="text/css" /> <![endif]--> CSSのインクルード スタイルシートファイルをインクルードしてください。もし使用するエレメントが限られているのであれば、その箇所のみで大丈夫です。 <link rel="stylesheet" href="reset.css"
HTML5完全対応のWordPressのテーマファイル「TwentyTen Five」
WordPress3.xのデフォルトのテーマファイル「Twenty Ten」をHTML5に完全対応させたテーマファイル「TwentyTen Five」を紹介します。 Use HTML5 in WordPress TwentyTen [ad#ad-2] 「Twenty Ten」はWordPressの3.0からのデフォルトの新しいテーマファイルで、doctypeにHTML5が使用されています。しかし、HTML5の新しい要素や属性などは他の箇所には使用されていません。 「TwentyTen Five」は、この「Twenty Ten」をベースに適切な箇所にHTML5の要素や属性を使用したテーマファイルです。 見た目は「Twenty Ten」と同じシンプルなデザインです。
HTML5の新要素をinnerHTMLで生成できないバグを回避する - latest log
IE6〜IE8のinnerHTMLには問題が多く、そのひとつに、HTML5の新要素を食わせると悪夢のようなDOMツリーを生成するというものがあります。 var div = document.createElement("div"); div.innerHTML = "<section>section</section>"; document.body.appendChild(div); 上記のコードを実行すると、body以下にはこのような構造ができてしまいます。 <body> <div> section </SECTION> </div> </body> どうやら、innerHTML に与える文字列を div でラップし、div要素の前に何か一つ以上のダミーの文字列を設定しておき、あとでアンラップすれば上手くいくようです。 http://jsdo.it/uupaa/IEInnerHTMLB
HTML5のcanvasタグで描くグラフ描画ライブラリ「AwesomeChartJS」:phpspot開発日誌
AwesomeChartJS HTML5のcanvasタグで描くグラフ描画ライブラリ「AwesomeChartJS」 データは配列で定義してdrawするだけです。描画コードは次のように美しい。 var mychart = new AwesomeChart('canvas1'); mychart.title = "Product Sales - 2010"; mychart.data = [1532, 3251, 3460, 1180, 6543]; mychart.labels = ["Desktops", "Laptops", "Netbooks", "Tablets", "Smartphones"]; mychart.draw(); IEではフォールバックされていないため動作しませんがiPhoneなどのcanvasタグ対応ブラウザをターゲットとするなら便利に使えそう 関連エントリ Ja
W3C - 『HTML 5 differences from HTML 4』日本語訳 - HTML5.JP
一部、直訳ではなく意訳した部分がございます。原文と表現が異なることがございますので、ご了承ください。この日本語訳は、私が理解を深めるために、自分なりに日本語化したものです。本日本語訳には、翻訳上の誤りがある可能性があります。したがって、内容について一切保証をするものではありません。正確さを求める場合には、必ず原文を参照してください。当方は、この文書によって利用者が被るいかなる損害の責任を負いません。もし誤りなどを見つけたら、当サイトのお問い合わせより連絡いただければ幸いです。 原文URL：http://www.w3.org/TR/2011/WD-html5-diff-20110525// 原文タイトル：HTML 5 differences from HTML 4 - W3C Working Draft 25 May 2011 翻訳日：2011/05/26 最終更新日：2011/05/26
CanvasタグとJavaScriptで3Dのデモを作ってみました | ClockMaker Blog
HTML5というわけではないですが、CavasタグとJavaScriptを使って3Dのデモを作ってみました。 デモを見る ソースコード (［右クリック］→［ソースを見る］を選択) こういうのを見れば「HTML5すごい、Flashいらない」と思う人もいるかもですが、冷静にファーストインプレッションを。同じものを以前Flashで実装したことがありますが（Papervision3D演出サンプルNo.01:羽ばたく蝶々）、両者のデモを比較することでメリット・デメリットが見えてきます。 ＜追記：2013年9月3日＞ Three.jsの最新版rev 60にアップデートしてみました。3年前に作成したときはrev 17だったのですが、別物のライブラリと言わんばかりにほとんどAPIが変わってしまっています。ちなみにTypeScriptで書きなおしています。 デモを見る ソースコード (TypeScript)
iOSやAndroidOS以外にデスクトップでも動くアプリを共通で作れる「Unify」:phpspot開発日誌
Unify Project iOSやAndroidOS以外にデスクトップでも動くアプリを共通で作れる「Unify」 iOSとAndroidOS用にPhoneGapを使って共通化し、更にWindows、MacOS用にAIRでも動くような仕組みを提供してくれるそうです。 アプリ作成に使うのはCSS3やHTML5,JavaScriptといった仕組み。 動作するアプリケーションのデモは次のムービーで確認できます 今後、ますますスマートフォンの市場が盛り上がると思いますが、クロスプラットフォームで動作するものをこうしたもので作り、ターゲットとするマーケットを拡大することが出来ますね。 若干、HTML5のアプリは速度が気になるということもありますが、今後ハードウェアの進化によってストレスのないUIも作れていくと思います。 １つの選択肢として覚えておいてもよいかも 関連エントリ これは注目のHTML5を
iPhoneでも使えるHTML5でGoogleマップみたいに地図や画像表示できる「Tile5」:phpspot開発日誌
Tile5 | Tile5 - HTML5 Mapping and Tiling iPhoneでも使えるHTML5でGoogleマップみたいに地図や画像表示できる「Tile5」。 iPhoneでも使うことができてなかなか便利です。Androidにも対応予定 地図のドラッグ＆ドロップが可能。 地図だけではなく、Flickrの写真を検索して並べてみたもの。 GitHub上にてオープンソースで公開されています。 関連エントリ 見ておくべきHTML5サイト集 HTML5のポテンシャルを感じられる４８のサンプルサイト CSSでスキン作成が可能なHTML5動画プレイヤー実装JSライブラリ「Video JS」
これは見ておくべきHTML5のCanvasを使ったデモ集:phpspot開発日誌
21 Ridiculously Impressive HTML5 Canvas Experiments | Nettuts これは見ておくべきHTML5のCanvasを使った実験集。 ここまで出来るの？っていうサンプルが満載で一度は見ておきたいものばかりです。 8 Bit Color Cycle Particle Letter Animation Particle System Strange Attractors Liquid Particles Fake Floor Reflections 次世代のWEBが楽しみです。 関連エントリ HTML5で動画や音声再生を可能にするライブラリ集 HTML5ベースのTODOリスト「5List」 CSSでクールにデザインされたHTML5動画・音楽プレイヤー実装JS「MediaElement.js」 CSSでスキン作成が可能なHTML5動画プレイヤー実
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5で制作されたサイトをまとめたギャラリーのまとめ
Engadget | Technology News & Reviews
IDEA * IDEA
[JS]HTML5/Canvasを手軽に扱えるようになる実用的なスクリプト -gury
HTML5の勉強に役立つチートシートやリファレンスのまとめ
YouTube人気急上昇
HTML5では何ができるのか、各ブラウザの対応はどうなっているのか、が一目でわかる -What is HTML5?
HTML5, CSS3, jQuery1.4, WordPress3の厳選チートシート集
面白いUIを備えた、HTMLのダミー要素を生成するオンラインサービス -Fillerati
HTML5のオーディオプレイヤーを作るチュートリアル:phpspot開発日誌