するするさせたい：サイボウズ採用情報のアニメーション（その1） - fragmentary
サイボウズの採用情報ページを見ていた。 サイボウズ | 採用情報（新卒・キャリア） といっても受けるとかではなく、ただ性格悪いことを思っていただけなんだけど。 Kintoneのセクションでアプリっぽいアイコンたちが右から左へと流れているんだけど、それがガタガタとしている。するするしていない。するするさせたい。 というわけで、何が起こっているのかを調べてみようかと。何回かにわけて書くよ。 その1 ― 何が起こっているのか調べる その2 ― 調べながら直しながらするするさせる その3 ― ちょっとしたことや他のブラウザでもするするさせる アニメーションの実装を調べる あとのことを考えて、Chrome DevToolsを使う。 まず、該当の流れるアイコンのところで右クリックしてinspectする。Elementsパネルで、<div class="icon"> という要素がハイライトされる。div
<script async>でJavaScriptの非同期読み込みを - fragmentary
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
<picture>まわり雑感 その1 - fragmentary
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
新しいiPhoneの解像度とCSSピクセル幅を考える - fragmentary
そろそろ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つのモデルで幅が異なる可能性が高いから。同じディスプレイが使えるという製造観点での利点や理由はあれど、アプリとかの観点から考えると煩わしすぎるわけです
all, initial, unsetでCSSのリセットと継承回避をする - fragmentary
追記（2018年4月13日）：紹介した機能の実装が進みました（Can I use：allプロパティ、initial、unset）。 一方で文中で取り上げたScoped Stylesheetsは仕様から削除されてしまいました。 このエントリはCSS Property Advent Calendar 2013の10日目のものです。 すみませんすみません日付勘違いしてました。ほんと申し訳ありません…… 今回はradial-gradient()のMixin…は作りません。プロパティじゃないしね。ふつうのプロパティと値についてご紹介しようかと。 CSS Cascading & Inheritanceのall, initial, unset Firefox 27あたりからallプロパティとunset値なんてものが実装されました。CSSのCascading and Inheritanceモジュールで定義
FirefoxにCSS Variables機能拡張etc.──2013年12月のブラウザ動向
FirefoxにCSS Variables機能拡張etc.──2013年12月のブラウザ動向 矢倉 眞隆（myakura） 今月より、ブラウザ関連のニュース、とりわけレンダリングエンジンに実装されたWebプラットフォーム機能について取り上げる月一の連載を開始したいと思います。1月も後半ですが、2013年12月の話題を取り上げます。 注：MozillaやChromeのコミットログを主な情報元としているため、ここで紹介する機能がすぐに使えるとは限りません。 Firefox ― CSS Variablesをはじめ、機能拡張いろいろ 12月に「おおっ」と思ったのは、Firefoxでした。CSS Variablesなど目を引く機能が追加されました。Multiline Flexboxや開発者ツールのCSS Source Mapsなど、これが入ってくれたら助かると思った機能もサポートされました。 CSS
Blinkでメディアクエリーのwidth/heightがスクロールバーを含むように - fragmentary
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でテストしていない という場合、ブレークポイント前
新しいSafariについて予想する - fragmentary
追記 (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の新エンジンBlink ― どうなるんだろう篇 - fragmentary
なぜなに篇とWebプラットフォーム篇ではBlinkに至った背景や、Blinkの互換性への取り組みについてだーっと書いた。 今回はBlinkの登場が何にどんな影響を与えるか、だらだら考えてみる。 Chrome すでに色々書いてはいるけれど。 WebKitから離れ、Chrome専用エンジンとなるので、これまでWebKitでは合意を得られなかった機能について抵抗なく入れられるのはGoogleにとってはよいことだろう。Pointer EventsとかIME APIとか。Launch Processのもとでだけど、試験実装は進めやすくなる。 WebKitから離れることでの最大の損失は、WebKitに参加している人のタレントだろう。BlinkチームのQ&Aセッションによると、BlinkとWebKitとの間に「フォーマルな関係」はないとのこと。パッチを自動的にやりとりするような仕組みは用意されないから、
Chromeの新エンジンBlink ― Webプラットフォーム篇 - fragmentary
よいサブタイトルが思いつかなかった。 Blinkでは、HTMLとかCSSとかDOMなどへの機能追加について、互換性、オープン標準、透明性を重視したガイドラインが設けられ、それが強くアピールされている。 Throughout this transition, we’ll collaborate closely with other browser vendors to move the web forward and preserve the compatibility that made it a successful ecosystem. In that spirit, we’ve set strong guidelines for new features that emphasize standards, interoperability, conformance testing a
Meaningless ― Web semanticsの観測 - fragmentary
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があったりと、まだだいぶ偏っている感じだけど……（たぶん仕様書にアクセスしまくって
モバイル系ブラウザのUA文字列 - fragmentary
何の役に立つか自分でもさっぱりわからないと思いながら、ここ1年半ほどGoogle Spreadsheetsにブラウザのアップデート情報を記録している。 Browser Updates できるだけ情報を入れてるけど、抜けも結構ある。ChromeはStable Channelが入ったマシンがないので細かい情報はないし、Firefox ESRとかは要らんだろうと思って入れてない。 さて、もともとデスクトップだけだったんだけど、最近Chrome for AndroidとOpera Beta（Chromiumベース）が出たので追加し始めた。Opera Betaには chrome://versionみたいなのがなくてしんどい…… それで、UA文字列にバリエーションがけっこうあって複雑だなあと思ったので、ちょっと書いてく。 スマートフォンとタブレット まず、スマートフォンとタブレットでUA文字列が少し違
OperaのWebKit移行 - fragmentary
各所で既報だろうけれど、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に似たものになるのかな。デスク
Sassでlinear-gradient()のmixinをつくる その2 - fragmentary
誰がうれしいのかわからない、CSS Preprocessor Advent Calendar 2012の記事の第2弾です。 今回は -webkit-gradient() への変換について書こうと思ったのですが、ひとつ忘れてたことがあったので、それについて書きます。 Part 4 ― type_of() で処理を振り分け 前回は「方向なし」「キーワード」「角度」別に3つのmixinを定義しました。分けるとそれぞれ何をやってるかがわかりやすいのですが、やはり使うことを考えると一つにまとめたいもの。そこで、ひとつのmixin内で処理を振り分けることにします。 やり方ですが、Sassの type_of() 関数を使います。mixinの引数を第一引数と可変長引数のふたつにわけ、第一引数の型を判定します。 @mixin lg-compound($first, $rest...) { $prefixes
Sassでlinear-gradient()のmixinをつくる - fragmentary
このエントリはCSS Preprocessor Advent Calendar 2012、13日目のエントリです。 Sassを本格的に使い始めてもう6ヶ月経つのですが、まだまだだなあと思うこと多々です。 というわけで、勉強のためCSSのグラデーションを出力するmixinを書いてみました。 Part 0 ― linear-gradient() の構成 CSS Image Values仕様の linear-gradient() は、グラデーションの「方向」に、色と位置の組からなる「カラーストップ」が続くという構成になってます。 linear-gradient( direction, colorstop1, colorstop2, ... ) さて、今日のImage Values仕様の linear-gradient() と、接頭辞つきの -prefixed-linear-gradient()
HTMLに提案中のmain要素 - fragmentary
12月になった。HTML5とCanvas APIのCRが出る。 Transition Request: HTML5 as Candidate Recommendation Transition Request: HTML Canvas 2D Context as Candidate Recommendation MicrodataはRDFaコミュニティのキャンペーンにより遅れそう。わからんけど。altのやつとかもそうかな。やれやれだ。 さて、一緒に出るかはわからないけれど、<main>要素の提案がextension specとして公開されることは決まった。 request to publish main element extension specification as a FPWD Re: CfC: to publish main element specification as a
HTMLとかCSSとかAPIとか
2012年9月8日に開催されたHTML5 Conference 2012でお話したときのスライドです。 スライドを見る
Plan 2014 ― HTML 5.1とか拡張仕様とか - fragmentary
ひゃっ、HTML 5.1ときましたか。 Getting HTML5 to Recommendation in 2014 - W3C Blog Getting HTML5 to Recommendation in 2014 2014年に勧告するためにはどうすればいいかあれこれ考えて、「HTML 5.0を2014年に、HTML 5.1を2016年にそれぞれ勧告する」という計画が提案されたと。まだ提案段階なので、決定事項ではない。 Plan 2014 要約はChairのひとがしてくれている。こんな感じかな。 Charterを改定して、HTML 5.0を2014Q4に、HTML 5.1を2016Q4に勧告するということを書く CR exit criteriaに沿って、テストが必要だと思われる機能のテストに集中する 他との折衝も考えつつモジュールの考え方を導入し、仕様の大きさと複雑さを抑える さて、
HTMLのsrcset属性 - fragmentary
まだfirst draftなので変わるかもしれないけれど、そういうのが入った。 7102. <img srcset> - first draft HTML - srcset attribute このまえWebKitに実装された-webkit-image-setと似たような感じ。提案したのがHoberなので似てるのも当然か。 srcsetの書き方 値にはURL＋デスクリプタのセットを書く。セットはimage candidate stringと呼ばれている。 デスクリプタは今のところ3つだけ定義されている。 w viewportの幅 h viewportの高 x デバイスピクセル比 仕様だと"maximum"と言ってるんだけど、アルゴリズムをみるとなんかおかしい。ココら辺は直ってくだろう。 wとhは-webkit-image-setにはなかったような。提案してもCSSWGは「メディアクエリーで
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
BOOT_COMPLETEDが受信出来ない - Google グループ