[B! html5][HTML5] hogetatuのブックマーク

世の中のHTML5アプリケーションが糞だから、俺が「初期化」の作り方を教えてやんよ - mizchi's blog

2chまとめみたいなタイトルにしてみた。(してみたかった) HTML5のアーキテクチャと初期化とキャッシュの考え方が、「ウェブエンジニア」は本当に出来てない。とくにソシャゲをウェブビューに貼ってスマホ対応しました系。本当にダメ。じゃあどうするか？基本的に「初期化」の考え方を直せばどうにかなる。 (この記事はBackboneを使うときに考えてることだけど、他でも一緒だと思う) 前提シングルページアプリケーションセマンティクスやSEOは考慮しない基本哲学共通モデルの初期化を徹底的に行うサーバーにリクエストを投げるのは最小限クライアントでサーバーモデルのキャッシュを作り、更新が期待されるまで再取得しない理由いくらDOMの最適化したところでUXに影響が大きいのはサーバーリクエスト(200~2000ms)で、プログラミング段階で辛さがあつまるのは非同期処理の部分。プログラマとし

hogetatu 2013/09/26

HTML5
js

リンク

DOM オブジェクトを Canvas に描画する - HTML: HyperText Markup Language | MDN

セキュリティ上の理由から簡単ではありませんが、HTML など DOM の内容を canvas に描画することができます。この記事は Robert O'Callahan によるブログ記事をもとに、セキュアに、安全に、そして仕様に準拠したかたちでそれを実現する方法を紹介します。概要 HTML をそのまま canvas に描画することはできません。その代わりに、描画したい内容を含む SVG 画像を利用します。描画したい HTML を含む <foreignObject> を作り、その SVG 画像を canvas に描画するのです。描画へのステップ唯一厄介なのが、SVG を作ることです。SVG のための XML を含んだ文字列を作り、次のものを含んだ Blob を生成することです。 "image/svg+xml" という Blob の MIME タイプ <svg> 要素 svg 要素内の <

hogetatu 2013/04/27

リンク

https://jp.techcrunch.com/2013/04/03/20130401famo-us-the-framework-for-fast-and-beautiful-html5-apps-will-be-free-thanks-to-huge-hardware-vendor-interest/

hogetatu 2013/04/04

HTML5

リンク

UnityのプロジェクトからHTML5環境向けアプリをエクポートするSDK「Frost Discovery SDK for Unity 3D」 - 強火で進め

※上の図はこちらから引用。「Frost Discovery SDK for Unity 3D」はFROST.IOのクラウドサービスを使って貰ってる為に作成されたものっぽいです。 UnityのプロジェクトからHTML5環境向けにエクポートするって事はエクポート元になったプロジェクトもそのまま活用出来るのでこの図の様にUnityでビルドしたタブレットアプリとPCのブラウザ上のHTML5アプリとで対戦可能なゲームなんかも簡単に作れそうですね。体験版の配布にも良いかも？ FROST.IO https://www.frost.io/ WebGLにエクポートしたデモはこちらで試せます。 Macの環境で試してみたのですがChromeだと正しく動作しませんでした。 Firefoxではちゃんと動作しました。 WASDキーで移動できるみたいですが三人称視点だと移動できませんでした。Tキーを押して一人称視点に

hogetatu 2013/04/02

3D
HTML5

リンク

HTML5で組んでるならこの魔法のjsも入れておけっていう話

現在、A!@attripさん発で話題になっている「たった2行でIE5.5～IE8をモダンブラウザの挙動にする魔法のJS」という記事。 Webデザイン界隈では当たり前のものですが、実はもうひとつ追加しておくといいかもしれないjsがあったりします。 Photo:html5 By michael pollak IE8以前のブラウザはどうにもこうにも開発者泣かせなわけですが、ie9.jsとcss3-mediaqueries.jsを突っ込むことで、モダンブラウザと同じ挙動にすることができちゃいます。もう少し具体的に書くと、ie9.jsを組み込むことで、 position:fixed;に対応 max-width、max-heightに対応属性セレクタ、擬似クラスに対応 margin:0 auto;でのセンタリングに対応透過PNGに対応 opacityに対応といったことが可能になります。要はCS

hogetatu 2012/12/03

HTML5
css

リンク

[HTML5] CanvasでRetina対応を行う - YoheiM .NET

こんにちは、Canvasでバリバリ仕事中の@yoheiMuneです。最近のWebアプリでCanvasを使っているアプリが多いですが、Retina対応できておらず、にじんだ感じになっているアプリが多々あり。。なので、CanvasでRetina対応できるのかを調べました。今回はその結果を記載したブログとなります。 Canvasで普通に描画するとにじむ Canvasの描画内容をRetinaでない多くのPCブラウザで見る分には問題ないのですが、 iPhoneなどのRetina対応したブラウザで見るとにじんで見えてしまいます。画像などの表示ではRetina対応を行う事が多いですが、 CanvasでもRetina対応する事でにじまずに描画内容を表現できるようです。 CanvasでRetina対応をする方法は、画像のRetina対応の考え方と同じで、描画した内容を1/2のサイズで表示することでキ

hogetatu 2012/10/18

html5
canvas

リンク

HTML5 開発者向け iPhone 5 / iOS 6 での変更点等まとめ

iPhone 5 / iOS 6 における変更点などを、開発者向けにまとめた海外記事がありましたので、簡単にですが日本語にしてご紹介。対訳ではなくて、内容だけ伝わるようにかなり変更していたり、省略もしていますので、詳しくは原文をご確認ください。 iOS 6 がリリースされましたがアップデートされましたか？私はマップアプリをよく使うのですが、早速アップデートした方々の、マップがぁぁという叫びにびびってまだアップデートできておりません… で、まだ私の手元の iPhone 4S では iOS 5 が元気に動いている今日この頃ですが、iPhone 5 / iOS 6 における変更点などを、開発者向けにまとめた海外記事がありましたので、簡単にですが日本語にしてご紹介。対訳ではなくて、内容だけ伝わるようにかなり変更していたり、省略もしていますので、詳しくは原文をご確認ください。原文 iPhone 5