するするさせたい：サイボウズ採用情報のアニメーション（その3） - fragmentary
サイボウズ採用情報のアニメーションがするするしてないので調べた件、今回は雑記。 その1 ― 何が起こっているのか調べる その2 ― 調べながら直しながらするするさせる その3 ― ちょっとしたことや他のブラウザでもするするさせる 描画領域とPaint Flashing その1でPaint flashingを見たときにはアイコンの周りに枠がついていたのに、その2で描画領域を見たら文書全体で起こっていたたのをふしぎに思ったひとがいるかもしれない。 これはPaint flashingの説明 Hightlights areas of the page that need to be repainted というのをよく読むといいかも。緑色になったところは「再描画が必要になったところ」、paint invalidationを指している。なので変化していない箇所は緑色にならなかったわけだ。 Chrome
するするさせたい：サイボウズ採用情報のアニメーション（その2） - fragmentary
サイボウズの採用情報ページにあるアニメーションがするするしていない。ので前回は何がおこってるのか見てみた。 今回はするするさせられないか、がんばってみる。 その1 ― 何が起こっているのか調べる その2 ― 調べながら直しながらするするさせる その3 ― ちょっとしたことや他のブラウザでもするするさせる アニメーションを止める まず、いまのjQueryベースなアニメーションを止める。 コンソールに以下をぶっこめばアニメーションが止まって、背景も初期位置に戻る。 jQuery('.icon').stop().css('backgroundPosition', '') チェーンもできるしjQueryべんりだね。 CSSアニメーションにしてみる jQueryのアニメーションを別の方法に書き換えるわけだけど、今は2010年代も後半だ。使うならCSSアニメーションしかない。とくに右から左へ一方向って
するするさせたい：サイボウズ採用情報のアニメーション（その1） - fragmentary
サイボウズの採用情報ページを見ていた。 サイボウズ | 採用情報（新卒・キャリア） といっても受けるとかではなく、ただ性格悪いことを思っていただけなんだけど。 Kintoneのセクションでアプリっぽいアイコンたちが右から左へと流れているんだけど、それがガタガタとしている。するするしていない。するするさせたい。 というわけで、何が起こっているのかを調べてみようかと。何回かにわけて書くよ。 その1 ― 何が起こっているのか調べる その2 ― 調べながら直しながらするするさせる その3 ― ちょっとしたことや他のブラウザでもするするさせる アニメーションの実装を調べる あとのことを考えて、Chrome DevToolsを使う。 まず、該当の流れるアイコンのところで右クリックしてinspectする。Elementsパネルで、<div class="icon"> という要素がハイライトされる。div
Progressive Web Appsとは - fragmentary
Chrome Dev Summitに来ている。 今年のChrome Dev Summitは日ごとにテーマが分かれていて、初日がProgressive Web Apps、2日目がRAILらしい。RAILはGooglerがちまちまと話してるけど、前者についてはまだそんな離されてない気がする。 というわけでセッション聞きながらなんとなく書いてみよう（なのでセッションまとめではないよ）。 アプリに「なっていく」「Web」 Progressive Web Appsは、Alex Russell先生が6月にブログで提唱して、そこからプロモートしているもの。“progressive”を訳すと「漸進的」やら「進行性」とかになるけれど、そのまま訳すより「アプリになっていくWeb」と砕いて解釈するとわかりやすそう。 アプリに「なっていく」とは何かなんだけど、Webアプリが「使ってるうちにネイティブアプリと同じよ
すこし開かれたWHATWG HTML - fragmentary
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
<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
<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
表現のコンポーネントとエレメント指向 - fragmentary
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と
新しい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モジュールで定義
WebプラットフォームのこれからとExtensible Web - fragmentary
この記事はFrontrend Advent Calendar 2013の8日目の記事です。 昨日岐阜県にてHTML5 Conference 2013 in Gifuというイベントがありまして、そちらでWebプラットフォーム動向についてお話させていただきました。スライドはこちら。 2013年のWebプラットフォーム 相変わらずふんにゃりした話しかできず心苦しい。 Extensible Webが実行に移った2013年 今年はOperaのWebKitChromium移行、Blink登場、IE11で互換機能を非推奨に、など、ブラウザの動きが大きくて、あまりWeb標準周りで大きなニュースがなかったように思います。あったらあったで面倒なんですが（たぶん良いニュースはない）。ただ、思ったよりずっと動きが速いなと思ったのが、Extensible Web関連です。 「低レベルなのモデル・APIをつくり、高レ
Autoprefixer ― CSSのベンダー接頭辞をいろいろする - fragmentary
以前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などが用意されてるので、べつに必要ないじゃんと思うかもしれない
Webはlossy+alphaを手に入れられるのか - fragmentary
Chrome Canary（今のところM30）でアルファチャネル付きWebMが実験的にサポートされたとのこと。 Alpha transparency in Chrome video ビデオ見ると妙な気味悪さがあって面白い。ドラッグ＆ドロップしたり背景変えたりね。静止画だとふつうにできてたことが動画でもできると、世界広がるんだって思った。映像つくるの大変そうだけど。 って、これ静止画でもまだできてないのか。少なくともWebには、非可逆圧縮＋アルファチャネルがないんだった。というわけで、ちょっと思い出したことを書こうかと。 非可逆圧縮＋アルファチャネル Webで透過する画像フォーマットといえば、GIFかPNGになる。どちらも可逆圧縮なので、写真みたく色数が多くなりがちなものには適さないとされている（GIFは色数にけっこうな制限もあるし）。Web開発でも多分長らく、「写真はJPEG」とされている
Safariでせつなくならないために何かしたい - fragmentary
Safariについて言いたかったことを言えてなかったので、もう一本だけ。 ひとことで言うと、「バグ見つけたら報告して、5月までに直してもらおう」と。 5月を逃すとせつない なんでSafariに気をかけてるかというと、モバイル端末での影響力（シェア）が大きいから。WWDCではモバイルWebでのマーケットシェアのうちiPhoneが60％、タブレットWebではiPadが82％と言っていた。ソースわかんないけど、デスクトップみたく低くないことは確実かと思われる。 影響力があるけど、リリースサイクルが長い。ここがとても気にかかる。 Safari 7予想エントリで、Safariの元になるWebKitが5月にブランチされていることを書いた。これはMac portの話なのでOS XのSafariの予想だったんだけど、iOSのSafariもこれまでのバージョンのUA文字列から判断するに、WebKitのバージ
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でテストしていない という場合、ブレークポイント前
さよなら -apple- に -khtml- - fragmentary
3月半ばに書いてそのままになってた下書きを発見。 なんで放置してたんだっけ……引用多すぎるからかな。まあいい。 WebKitにこんな変更が加わった。 Changeset 146025 – WebKit ― Legacy CSS vendor prefixes should only work for Dashboard 先日Paulが公開した “WebKit for Developers” （日本語訳）を読んだHacker Newsの読者があることに気がついた。 "CSS parsing is the same, though. Slurping up your CSS and turning it into CSSOM’s pretty standard. Yeah, though Chrome accepts just the -webkit- prefix whereas Apple
Chromeの新エンジンBlink ― なぜなに篇 - fragmentary
4月3日、GoogleがChromeに使っていたWebKitをフォークした新しいエンジンBlinkを発表した。 …だいぶ出遅れたのでとても書きづらいけれど、自分の理解のために書く。ただいろいろあるので、まずはWebKitをフォークするに至った経緯と、Blinkの概要について。 追記 (2013-04-30)：別途ふたつエントリを書いたのでそちらもどうぞ。 Chromeの新エンジンBlink ― Webプラットフォーム篇 Chromeの新エンジンBlink ― どうなるんだろう篇 “Chromium port”としての負担 アナウンスしたAdam Barth曰く、Chrome開発時点でのWebKit採用は正しく、WebKitも大きく成長したと。 Chromium Blog: Blink: A rendering engine for the Chromium project ただ、開発を続け
モバイル系ブラウザのUA文字列 - fragmentary
何の役に立つか自分でもさっぱりわからないと思いながら、ここ1年半ほどGoogle Spreadsheetsにブラウザのアップデート情報を記録している。 Browser Updates できるだけ情報を入れてるけど、抜けも結構ある。ChromeはStable Channelが入ったマシンがないので細かい情報はないし、Firefox ESRとかは要らんだろうと思って入れてない。 さて、もともとデスクトップだけだったんだけど、最近Chrome for AndroidとOpera Beta（Chromiumベース）が出たので追加し始めた。Opera Betaには chrome://versionみたいなのがなくてしんどい…… それで、UA文字列にバリエーションがけっこうあって複雑だなあと思ったので、ちょっと書いてく。 スマートフォンとタブレット まず、スマートフォンとタブレットでUA文字列が少し違
すでにある機能の廃止は難しい - fragmentary
OperaがWebKitの接頭辞を…というのは、まあとりあえずは中の人からの報告を待っておくとして。 さて、WebKitプロジェクトは接頭辞についてどう考えているんだろうか。先週やっていたWebKit Contributor Meetingで接頭辞などについて取り上げたセッションがあったらしい。 Deprecating features and vendor prefixes 機能の廃止、接頭辞の削除と、ふたつトピックがあったので、ふたつに分けて書く。 機能は廃止できるのか この前WebKitは接頭辞をエイリアスとして残す方針があると書いた。もう少し広げてかくと、既存のコンテンツが依存している機能は、接頭辞の有無にかかわらず、削除せず残しておく感じだ。カジュアルに使われやすいCSSの機能は、たぶん削除されることは今後もほぼないと考えている。 けれど、APIについては実装を削除している場合も
Sassでlinear-gradient()のmixinをつくる その5 - fragmentary
CSS Preprocessor Advent Calendar 2012の記事の続編…というか完結編です。 3月まで持ち越すつもりはなかったのに…… Part 7: あとはもう、まとめる 今回はPart 4, Part 5, Part 6で作ったmixinをひとつのmixinにします。どのmixinも type-of() 関数で、mixinの最初の引数を調べて処理を分岐する作りになっているので、分岐先の処理を統合するだけですね。 // config $lg_support_prefixes: '-webkit-'; $lg_support_webkit_gradient: true; $lg_support_svg_gradient: true; @mixin linear-gradient( $first, $rest... ) { $prefixes: $lg_support_pre
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
