週明けに出回った、Microsoft EdgeがChromiumベースになるという話について、Microsoftからアナウンスがあった。 Microsoft Edge: Making the web better through more open source collaboration - Windows Experience Blog For the past few years, Microsoft has meaningfully increased participation in the open source software (OSS) community, becoming one of the world’s largest supporters of OSS projects. Today we’re announcing that we intend to ado

さっきAutoprefixerの設定でいろいろ阿呆なことをして、まあそれは解決して、ついでにリリースノートを見ていたら6.6.0でこんな機能が入っていたのを知る。 With Autoprefixer 6.6 you can specify browsers in package.json to reduce config files: { "private": true, "devDependencies": { "autoprefixer": "^6.6.0", "postcss": "^5.2.6" }, "browserslist": [ "last 2 versions", "ie 9" ] } Note that we highly recommend specifying browsers in browserslist config or in package.json in

サイボウズの採用情報ページを見ていた。 サイボウズ | 採用情報（新卒・キャリア） といっても受けるとかではなく、ただ性格悪いことを思っていただけなんだけど。 Kintoneのセクションでアプリっぽいアイコンたちが右から左へと流れているんだけど、それがガタガタとしている。するするしていない。するするさせたい。 というわけで、何が起こっているのかを調べてみようかと。何回かにわけて書くよ。 その1 ― 何が起こっているのか調べる その2 ― 調べながら直しながらするするさせる その3 ― ちょっとしたことや他のブラウザでもするするさせる アニメーションの実装を調べる あとのことを考えて、Chrome DevToolsを使う。 まず、該当の流れるアイコンのところで右クリックしてinspectする。Elementsパネルで、<div class="icon"> という要素がハイライトされる。div

8月末のことなんだけれど、WHATWG HTMLの仕様書がGitHubに移った。 [whatwg] HTML spec now on GitHub (from Ian Hickson on 2015-08-27) 体制も少し変わって、HixieがひとりでやっていたHTML仕様の作業にAnneやDomenicなども直接関わるようになった。Issuesでの議論やPull Requestの受け付けも始まり、だいぶモダンな策定環境になった。 これまでのWHATWG HTMLとHTML5仕様書 これまでのWHATWG HTMLは長らくSubversionサーバで運用されていた（もしかするとCVS時代もあったかも）。 HTML仕様書は基本的に1枚のHTMLファイルに書かれていて、それをツールで切り出しmultipage版やPDF版、Web Developer Editionなどを生成していた（あ、<p

Chrome 38が出て<picture>が有効になったので、いくつか記事を訳した。 レスポンシブイメージのネイティブサポート - HTML5 Rocks Dev.Opera — ネイティブサポートされたレスポンシブ・イメージ Dev.Opera — レスポンシブ・イメージ：ユースケースと入門用のコードサンプル HTML5 Rocksのは<picture>の簡単な使い方をざっと紹介。Dev.Operaのネイティブうんぬんは<picture>と<img srcset>, <img sizes>を細かく説明。もひとつのDev.Operaのサンプルのやつはユースケースごとに組み合わせをいろいろ書いたサンプル。それぞれ少しずつ違っている。おすすめは2つ目。ちょっと長いけど、書いているのがBlink, WebKitで<picture>とかを実装しているYoavなので。 以下いろいろ。 だいたい<im

JavaScriptファイルをスクリプトから非同期で読み込むパターンは古い、という話を目にしたのはもう半年前のこと。 言ったのはIlya Grigorik。月末のGoogle Japanでのイベント、月初のHTTP2ConferenceにくるWebパフォーマンス界のすごいひとですよ。 Script-injected "async scripts" considered harmful - igvita.com 件のパターンは、スクリプトで動的に script を生成して、そこに読み込みたいJavaScriptファイルをぶっこんで読み込むというもの。 <script> var script = document.createElement('script'); script.src = "//somehost.com/awesome-widget.js"; document.getEleme

blink-devにこんなメッセージが。 Intent to implement: 'contact' meta extension Contact Meta Extensions たとえばおさいふ落とした時に銀行やカード会社に連絡とかしづらいから、電話番号、メールアドレス、住所を <meta name="contact"> なるものにぶっこんで、緊急な際にそのWebサイトに行く→ブラウザのメニューから「Call」ですぐ連絡できるよ！といったアイデアの実現をSamsungが考えているようで。そうですか…… なんでもこの電話、メール、住所のタプルは複数指定できるらしい。 <meta name="contact" content="Chicago: +1-555-555-5555 abc@xyz.com '5844 South Oak Street, Chicago, Illinois'; B

Google I/Oに行ってきたのでそれ関連の話題を。 Paper Elementsのエフェクト要素 Material Designというデザイン言語が出て、そのWebへの適用手段としてPolymerのPaper elementsが発表された。 CodeLabsでもPolymerとPaper ElementsでTodoリストアプリをPolymerとPaper Elementsで作るというコースがあった。この中に、エフェクトを指定するステップがある。ここでほーと思ったのが、影をキャストする際にはpaper-shadowを、波紋の効果を出すpaper-rippleを使うこと。エフェクトが要素になっているのだ。 表現が必ず要素化されているわけでもない。固定化されたツールバーがあって、スクロールし始めた際に下のコンテンツから浮き出るような表現をMaterial Designではwaterfallと

WWDC直前ということでSafariの話題を。 といってもネタは3週間以上も前のもの。5月8日に「safari-538.34-branch」というWebKitのブランチが切られた。 Changeset 168485 – WebKit — New Branch 昨年も書いたのだけど、これまでの動きから考えてこれが次のSafariのもとになるブランチのはず。というわけでコミットログとかから次のSafariを予想しようかと。 WebKitのMac portで有効にされる機能は、FeatureDefines.xcconfig というファイルで管理されている。これらはビルドフラグなので、有効にされてないとナイトリーでも使えない。あと、ランタイムフラグもあるらしいんだけどこれは詳しく知らない。 Safari 8に入りそうなもの 538ブランチのFeatureDefines.xcconfigで有効にされ

そろそろSafari 8?のベースになるWebKitのブランチが切られるかなと思って待っていたら月末になってしまった。ネタがないのでiPhoneの噂話でもしよう。 新iPhoneの画面解像度は？ まず、確かな情報筋（）によると、4.7インチと5.5インチのモデルが出ると。 4.7インチは750×1334らしい。現行iPhoneのディスプレイと同じ326ppiなものを4.7インチにするとこうなると。5.5インチだとフルHDな1080×1920らしい。こちらは新しいディスプレイで401ppiだって。 さて、5.5インチについてはまだわかるんだけど、4.7インチの謎解像度はないのではないかと思っている。というのはデバイス非依存ピクセルを想像すると2つのモデルで幅が異なる可能性が高いから。同じディスプレイが使えるという製造観点での利点や理由はあれど、アプリとかの観点から考えると煩わしすぎるわけです

いつだったかにWOFF2のことを書いた。 WebFonts WGのrecharter: より高い圧縮率を備えたWOFF 2.0の検討 タイトルかたいな！ その後どうなったのかなと思いつつもめんどくて調べてなかったんだけど、1月末にWOFF 2.0 Evaluation Reportというのが出た。WOFF2で検討されている圧縮の仕組みなどについて調べたレポートとのこと。 Transition request: First public working draft of WOFF 2.0 Evaluation Report WOFF 2.0 Evaluation Report 以下、2013年夏くらいからの話題なので新しくないよ。 LZMAはやめたらしい GoogleによってWOFF 2.0の元になる仕組みが提案された当初、圧縮アルゴリズムはLZMAを使うことになっていた。ただ、高圧縮率の犠

Chrome 31がStableになって久しい。何が変わったのか思い出せないんだけど、ひとつだけ覚えてるのがこちら。 (@156422) - b87d44f — Allow SVG images to not taint the canvas with drawImage/drawPattern WebKitのパッチをマージしたものらしい。ちょっとずつ離れているらしいけど、まだお互い共有できるパッチもあるんだね。 さて、このパッチによって、CanvasでSVG画像をdrawImage()などで描画したとき、条件によってはそのCanvasがtaintされなくなった。 Tainted Canvasとは CanvasにはdrawImage()など、画像をCanvasに描画するメソッドがある。ここで、スクリプトとsame-originではないとこにある画像を描画してしまうと、セキュリティ上の都合か

以前CSS-Tricksの記事で知ったAutoprefixerというの、ようやく試してみた。 ai/autoprefixer Autoprefixer: A Postprocessor for Dealing with Vendor Prefixes in the Best Possible Way | CSS-Tricks CSS-Tricksの記事読んだほうがいいと思うけど、月一のブログ更新ノルマのためここでも書いとく。 かしこい「ポスト」プロセッサ Autoprefixerはその名前からある程度想像できる通り、ベンダー接頭辞を自動的につけたりしてくれるユーティリティ。CSSファイルを作るのではなく、CSSファイルを処理するので、ポストプロセッサと言っている。 接頭辞まわりは、すでにCompassとかのライブラリでmixinなどが用意されてるので、べつに必要ないじゃんと思うかもしれない

追記 (2013-08-13): WWDCでの発表にて、いくつか予想が外れたのが分かったので、短い答え合わせのエントリを書いた。あわせてSafariに懸念していることも書いたので、それもどうぞ。 Safari 7予想：答え合わせなど Safariでせつなくならないために何かしたい 以下は元記事。 WWDCが近いので新しいSafariの予想をしようかと。 来週まで待って確定的な情報を書いてもよかったけど、まあいいや。 たぶん7月に出る 新しいバージョンが「Safari 7」になるのかわかんないから、Apple風に「新しいSafari」と書くね。 ここ2回のメジャーバージョン（5.1, 6.0）は、7月下旬にリリースされている。なので今回も、WWDCでお披露目＋Developer Previewのリリース、7月の同時期に正式版リリースされると予想。 ここ1, 2ヶ月のWebKitでのApple

Chrome 28がBetaに移った。表面上とくに違いはないだろうけれど、BlinkなChromeですよ。 さて、タイトルで言ったとおりの変更がBlinkに行われた。 144cc4f (@149832) - chromium/blink — Include scrollbar size in @media width/height M28に入るかなと思って試したんだけど、そう動かなかったのでこれはM29からになりそう。Stableまでは3ヶ月ほど猶予があるから、入らなくてよかったかも。 ええと、どういうことかというと、もし、 RWDなどメディアクエリーを使うサイトを作っていて クエリで width (あるいは height) を使っていて ChromeもしくはSafariをメインに作っていて そのサイトをFirefox, Opera, IEでテストしていない という場合、ブレークポイント前

WebKit絡みの話が続く…… 接頭辞のついた実装、レガシーな機能を削除したいときに「それらに依存したコンテンツに影響する」というのが懸念される。こういった理由もあって、WebKitでは接頭辞付きの機能は、接頭辞なしの機能が実装されても基本的に保持されて続けている。 Mozillaは削ることに頑張っていて、-moz-border-radius や -moz-box-shadowを始めけっこう削っている。ただ、消したら影響が思ったより大きくて戻したなんてものもある。Node.hasAttributes() とか、window.mozIndexedDB とか。 この、機能を削ることができない空気や、機能を削ってもバックアウトされてしまうのは、削りたい機能に依存したページがどれくらいあるかを知る手立てがなかったからなのかなと。 FeatureObserver登場 ここにひとつ進展があったのが20

なぜなに篇とWebプラットフォーム篇ではBlinkに至った背景や、Blinkの互換性への取り組みについてだーっと書いた。 今回はBlinkの登場が何にどんな影響を与えるか、だらだら考えてみる。 Chrome すでに色々書いてはいるけれど。 WebKitから離れ、Chrome専用エンジンとなるので、これまでWebKitでは合意を得られなかった機能について抵抗なく入れられるのはGoogleにとってはよいことだろう。Pointer EventsとかIME APIとか。Launch Processのもとでだけど、試験実装は進めやすくなる。 WebKitから離れることでの最大の損失は、WebKitに参加している人のタレントだろう。BlinkチームのQ&Aセッションによると、BlinkとWebKitとの間に「フォーマルな関係」はないとのこと。パッチを自動的にやりとりするような仕組みは用意されないから、

W3CのTAGメンバーにもなったGoogleのAlex Russelが、Webサイトで使われている要素、ARIA roles/states, microformats, schema.orgの型などを調べてまとめるためのChrome拡張をつくった。 Meaningless: towards a real-world web semantics observatory Chrome Web Store - Home HTMLの議論などで、要素の意味などに関する議論は絶えない。「〇〇が足りない」とかね。ただ、だれも充分なデータを持っていない。というわけで作ったそう。 集まったデータは http://meaningless-stats.appspot.com/global で見られる。上位の要素にcode, varがあったりと、まだだいぶ偏っている感じだけど……（たぶん仕様書にアクセスしまくって

何の役に立つか自分でもさっぱりわからないと思いながら、ここ1年半ほどGoogle Spreadsheetsにブラウザのアップデート情報を記録している。 Browser Updates できるだけ情報を入れてるけど、抜けも結構ある。ChromeはStable Channelが入ったマシンがないので細かい情報はないし、Firefox ESRとかは要らんだろうと思って入れてない。 さて、もともとデスクトップだけだったんだけど、最近Chrome for AndroidとOpera Beta（Chromiumベース）が出たので追加し始めた。Opera Betaには chrome://versionみたいなのがなくてしんどい…… それで、UA文字列にバリエーションがけっこうあって複雑だなあと思ったので、ちょっと書いてく。 スマートフォンとタブレット まず、スマートフォンとタブレットでUA文字列が少し違

各所で既報だろうけれど、OperaがWebKitへの移行を発表した。 Opera gears up at 300 million users 300 million users and move to WebKit WebKitベースのモバイルブラウザを発表という噂があって、ああモバイルだけかと思ったら全部だと。驚いた。そりゃ去年夏ごろから人が離れたり、PrestoのWeb標準実装ドキュメントが更新されなかったりするわけだ。ふむ。 “WebKit”とあるけれど、Operaソースの発表を読む限り、どうやらChromium portっぽい。Chromiumベースに独自のOpera portを作ったりはないよねえ…… ChromiumベースでどれくらいOperaフレーバーが出るのだろう。拡張もChromeベースとなるとUIもそんなに変えられないだろうし、Chromeに似たものになるのかな。デスク