スマートフォン向けページに最適な meta viewport の指定で迷う
スマートフォンでページが見やすくなるように、metaタグでviewportを指定。 試行錯誤の結果、以下の書式に決定。 <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"> viewportの属性の内容は以下の通り。 ・width デフォルトの幅は 980、範囲は [200, 10,000]。 つまり、viewportが指定されていない場合は、デフォルトは幅980pxでページが表示されるので、表示コンテンツが小さくなり、見にくくなる。 ・height デフォルトの高さは、width と縦横比から計算され、範囲は [223, 10,000]。 ・initial-scale ページが最初に読み込まれるときの拡大率。デフォルトではページ
CSS3のtransformをIE8でも使いたい
こんばんは、martinです。FirefoxやWebKit系のSafari、グーグルのChromeなどは、CSS3の魅力的な機能を色々取り入れています。中でも、CSS3のtransform やドロップシャドウ系は、ブログで写真を見せる場合などに凝った演出が出来るので、仕様が正式に決まるのが待ち遠しいですね(そう言えば、ボックスのドロップシャドウ box-shadowですが、CSS3の勧告候補から消えた のかなぁ)。便利な仕様だとは思うのですが。 ちなみに、transformとは「変形」のことで、CSSのみで画像やらボックスやらを自在に回転させたり、ゆがませたりできる優れものです。で、例によってIE系はCSS3の対応は遅れています。とは言っても（これまたいつものように）transformに関しては、IEは実にIE5.5の時から似たようなものを実装していました ！ なので、それらを駆使すれば、
setTransform(a, b, c, d, e, f)－Canvasリファレンス
setTransform(a, b, c, d, e, f)メソッドのそれぞれの引数は、 setTransform(伸縮x, 傾斜y, 傾斜x, 伸縮y, 移動x, 移動y)となります。 何も変形しない場合の引数の値は、setTransform(1, 0, 0, 1, 0, 0)となります。 setTransform()メソッドでは、 scale()・ rotate()・ translate() をまとめて指定することができます。 rotate()は回転ですが、setTransform()の引数に三角関数を利用して伸縮と傾斜を組み合わせることで回転結果を得られます。 それぞれの個別メソッドとsetTransform()メソッドとの関係は以下の通りです。 scale(x, y)は、setTransform(x, 0, 0, y, 0, 0)と同じ rotate(angle)は、setTran
Web Workersで遊んでみた - NullPointer's
HTML5を含む次世代Web規格の一環として、ページ描画・処理のバックグラウンドで処理を実行できるWeb Workersという仕様が策定されています。 Web Workers Using web workers - MDC 既にFirefox 3.5やSafari 4等では一部の機能が実装されているそうなので試してみました。Web Workersでエラトステネスの篩を実行し、素数を探す簡単なJavaScriptです。普通JavaScript実行中はブラウザ操作ができなくなりますが、Web Workersを使うと、ページ描画とは別スレッドで実行されるため、ブラウザが固まりません。 https://nullpon.moe/dev/sample/html5/workers/ Safari 4のNitroエンジンの処理速度は異常ですね…、1000000以下の最大素数の計算でFirefoxと比べて約
)
DOM ストレージの概要
このブラウザーはサポートされなくなりました。 Microsoft Edge にアップグレードすると、最新の機能、セキュリティ更新プログラム、およびテクニカル サポートを利用できます。 DOM ストレージ API には、ドキュメント オブジェクト モデル (DOM) を使用してクライアント サイド データをセキュアに保存するための関連メカニズムとして、 sessionStorage および localStorage の 2 つが含まれています。 これらのオブジェクトは Internet Explorer 8 で導入されました。 メモ : Internet Explorer の従来のバージョンでは、永続的なデータ記憶域の実装に userData 動作が使用されていました。 このトピックは、次の各セクションで構成されています。 DOM ストレージについて DOM ストレージのスクリプティング オ
css3のtransitionプロパティでアニメーションサンプルをいろいろ作ってみた
css3のアニメーションプロパティ、transitionがとても面白いので何となくアニメーションのサンプルを色々と作ってみました。まだ対応ブラウザは少ないですが、将来の為に予習してみたのでシェア。 css3のtransitionプロパティは変化を与えるプロパティです。アニメーションを実装できるプロパティはtransitionとanimetionがあり、後者のほうが「アニメーション」としての位置付けっぽいのですが、今回は何となくtransitionを使用しました。 プロパティ：-webkit-transition対応ブラウザ：webkit系(GoogleChrome、Safari等)JavaScript：未使用（※ソース閲覧の部分はjsを使っています） 一応アニメーション以外（角丸など）は-mozも入れています。 サンプルなので「-webkit-transition: *s ease-in-
たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE
IE6/7/8でもCSS3の角丸、ボックスシャドウ、グラデーション、マルチバックグランドなどを使えるようにするbehaviorスクリプトを紹介します。
Poturi : SVG
SVGとは SVG（Scalable Vector Graphics）は、XMLベースのベクターグラフィックスです。テキストファイルなので、簡単な図形ならばエディタだけでさっと描けてしまいます。JavaScriptやCGIなどとの連携もしやすく、Flashよりもずっと手軽なので、大きな可能性を秘めていると思います。 OperaとFirefoxはSVGに正式対応しています。Firefoxはまだ開発段階のようで一部の機能が使えません。現段階ではOperaの表示が一番安定しているようです。IEでは、AdobeのSVG Viewerをインストールすると表示できるようになります（2005年で開発が止まっています）。 参考URL Scalable Vector Graphics (SVG) 1.1 Specification Scalable Vector Graphics (SVG) 1.1 仕様（
WebKitの３D回転をざっくりまとめてみた - livedoor Blog（ブログ）
MobileWebKitで要素を回転させる系のCSSをざっくりまとめてみました。PC版のsafariではまだ実装されていないみたいです。iPhone/Android向けサイトで使ってみるといいと思います。 CSS Transform/Transitionの基本 -webkit-transformで２次元や３次元の位置や角度、倍率を規定する。-webkit-transitionで-webkit-transformが変化する時のアニメーションを規定する。 流れとしては-webkit-transitionを決めた後に-webkit-transformを変化させる感じ。 javascriptから操作する時は-を省略して二文字目以降を大文字にする。 CSS:-webkit-backface-visibility:hidden; JS:hogehoge.style.webkitBackfa
[JS]IE6/7/8でもCSS3が使えるようになるスクリプト -IE-CSS3
<textarea name="code" class="css" cols="60" rows="5"> .box { -moz-border-radius: 15px; /* Firefox */ -webkit-border-radius: 15px; /* Safari and Chrome */ border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */ -moz-box-shadow: 10px 10px 20px #000; /* Firefox */ -webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */ box-shadow: 10px 10px 20
localStorageの挙動と簡単なラッパー - Block Rockin’ Codes
[追記] テストのソースだけを見られる様に、gistに張りました。 gist:542451 localStorageを使ってちょっとやってみたいことが有るので、まずはlocalStorageを色々使って見ようと思ったのですが、思った以上にブラウザごとの挙動に差があって、イベントどころかだだ値を取り出すだけでも、色々気をつける必要があることが分かりました。 以下は、手元の Mac に有った FireFox 3.6.8 Chrome 5.0.375.126 Sagari 5.0 (6533.16) の環境で試した結果です。 格納出来るデータ W3Cの仕様ではJSのオブジェクトであれば一通り格納出来るように定めているらしいですが、現在は単なる文字列しか入らない物が多いようです。 なので、オブジェクトを格納するためには、JSONをシリアライズして入れる形になると思います。 Native JSON
iOS 4.2×localStorageで作るGPSレコーダー (1/5)
iOS 4.2が出て3か月ほど経過しました。iOS 4.2ではJavaScriptで加速度センサーを扱えるなど便利になった反面、以前に比べて不便になった面もあります。1つが、内蔵データベースであるSQLiteです。HTML5の仕様からWeb SQL Databaseが廃止されたためでしょうか、iOS 4.2ではJavaScriptからSQLiteへのアクセスができなくなりました。そのため、本連載の第2回で作成した、SQLiteを使ったGPSレコーダーは動作しなくなっています。
jQTouchとHTML5のlocalStorageでwikiみたいなの作った（w3c widget化も） - Born Neet
約一ヶ月ぶりのエントリ…完全に暑さに負けてますね^^ というわけで今日は日曜出勤の振替休日を利用して、 最近Ext.jsに合流したりで話題のjQTouchを触ってみました。 そしてできあがったのが、このwikiもどきです。 wiki5 説明 触っていただければ使い方はなんとなくわかると思います。 ただ、Mobile Safari以外では一切動きません。 （iOS4上では動作未確認です。） また、タップが効かない、ボタンがアクティブのままになる、 画面が真っ黒になる等、全体的に挙動が安定していません。 （はい、テスト不足です。） どうにもならなくなったときは「wiki5/index.html?clear」にアクセスすれば、 初期化されます。 あと、ついでですがw3c widgetにもしてみました。 cloud readerで動作することを軽く確認しています。 wiki5 中身の解説は暑いので
グーグルがHTML5のMicrodataに早くも対応
Microdataは、HTMLにメタデータを埋め込むための記述方法です。HTML5の仕様の一部として策定が開始され、現在はW3CのHTML5仕様からは独立した仕様となっています。 そのMicrodataをグーグルが読み取って「リッチスニペット」に利用すると、ブログ「Google Webmaster Central Blog」のエントリ「Microdata support for Rich Snippets」で明らかにしました。 リッチスニペットのデータとしてMicrodataを読み込み リッチスニペットとは、検索結果に表示される情報です（ただしすべての結果に表示されるわけではありません）。 上記の例（グーグルのリッチスニペットのページから）では、ネット上のレビュー記事をグーグルが自動的に集計して、星の数を表示しています。 このリッチスニペットを構成するために、グーグルはネット上のさまざまな
Ajaxページへのパーマリンクを#!なしで実現する - yamasaのネタ帳
TwitterやFacebookのURLには、なぜ#!が含まれるのか (SEOとAjaxのおいしい関係) - kazuhoのメモ置き場 Ajaxを多用しつつパーマリンクも提供しているサイトのURLは、「#!ほげほげ」のような形式になっていることがよくあります。上の記事に書かれているように、これにはちゃんと理由があるわけなんですが、やっぱり「#!なんてのが含まれるURLは格好悪い」と感じる人も多いようです。 そこで、「#!ほげほげ」なんてURLを使わなくてもAjaxの画面遷移を実現する、Session HistoryというHTML5の機能を紹介します。 Session history demo ChromeやSafariで上のページにアクセスし、地図をドラッグしてみてください。地図を動かすたびにURLが変化しているのに気づくでしょう。そこでブラウザの戻るや進むキーを押すと、地図の移動履歴を辿
The HTML5 test - How well does your browser support HTML5?
HTML5test how well does your browser support HTML5? Your browser Other browsers Compare News Device Lab About the test The HTML5 test score is an indication of how well your browser supports the HTML5 standard and related specifications. Find out which parts of HTML5 are supported by your browser today and compare the results with other browsers. The HTML5 test does not try to test all of the new
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Alteredq: A WebGL Ninja - Frontend Web Developer, Oxfordshire, UK - Matt Hobbs)
userData Behavior (A, ABBR, ACRONYM, ...)
Mr Speaker presents: Parcycle. A HTML5 Canvas Particle System
Mr.doob
