書くの遅すぎだろという気がするけれど 2017-11-18 に開催された DevFest Shikoku に参加してきた。東京からの招待枠ということで登壇をしてきた。会場とかほげほげ会場は徳島大学

Machine Learning の Google Developer Expert になった

ちょっと前になっていました。 Google Developer Experts (GDE) というのは Google が外部の開発者を認定する制度です。機械学習分野の GDE は、まだ人数が少ないので

2017-12-23T19:48:18+09:00

Google Cloud Storage に画像データを置くときは TFRecord を使った方が良さそうという教訓

これは TensorFlow Advent Calendar 2017 の 1 日目の記事です。もちろん主張したいことはタイトルの通りです。順を追って、かつドラマチックに説明していきましょう。 TF

2017-12-23T19:49:19+09:00

Jxck (Web)

Site Isolation 及び Web のセキュリティモデルの更新

Origin は Web におけるセキュリティモデルの一つとして、コンテンツ間の Communication に関する境界を定義し、リソースを保護してきた。しかし、 Spectre の発覚以降、 Co

2020-05-22T00:00:00Z

mozaic.fm v3 リリースと Podcast の PWA 化

mozaic.fm をリニューアルし v3 としてリリースした。今回の更新は以下のような変更/修正を実施している。- PWA 化 - before install prompt - Backgrou

2020-05-06T00:00:00Z

Periodic Background Sync 及び Web を Install するということ

メールクライアントや RSS リーダーのようなユースケースを PWA で実装する場合、バックグラウンドで定期的にタスクを実行したいケースがある。このユースケースに特化した API として提案されているの

2020-04-23T00:00:00Z

Scroll to Text Fragment を用いたサイト内検索の実装

Scroll to Text Fragment のユースケースとして、本サイトにサイト内検索を実装した。

2020-03-27T00:00:00Z

牧歌的 Cookie の終焉

Cookie は、ブラウザに一度保存すれば、次からその値を自動的に送ってくるという、非常に都合の良い仕様から始まった。State Less が基本だった Web にセッションの概念をもたらし、今ではこれ

2020-02-25T00:00:00Z

3rd Party Cookie 調査のための Web 広告導入

昨今、特に広告サービスを中心に 3rd Party Cookie を用いたトラッキングについての議論が多く行われている。Safari による ITP や、 Chrome による Privacy Sand

2020-01-31T00:00:00Z

Service Worker の Background Fetch によるメディアのキャッシュ

Podcast を PWA 対応するために、待望だった機能の 1 つが Background Fetch だ。これにより、通常 Range Request で取得するような、大きなファイルを事前にダウン

2020-01-24T00:00:00Z

ブラウザで何が起こっているのかを知る Reporting API と ReportingObserver

Web サービスにおいては通常、 Web サーバから取得できるアクセスログやエラーログを取得し解析する基盤を保有するだろう。しかし、 Web サーバから取得できる情報だけでは、ブラウザで何が起こったの�

2020-01-18T00:00:00Z

2019 年をふりかえる

例年通り 2019 年を振り返る

2019-12-28T00:00:00Z

WebBundle によるコンテンツの結合と WebPackaging

依存コンテンツを 1 つにまとめて配信する WebBundle の仕様策定と実装が進んでいる。これは Signed HTTP Exchange と合わせて WebPackaging を実現するための仕様

2019-11-12T00:00:00Z

Intel NUC で自宅 Ubuntu 開発環境構築と SSH Port Forwarding によるアクセス

家では Mac を使っていたが、やはり Ubuntu 開発環境を作ることにした。前々から気になっていた Intel NUC をベースに Ubuntu 環境を構築。また、外出時もアクセスできるように SS

2019-11-03T00:00:00Z

Scroll To Text Fragment と :~:text

ページ内の特定の位置へのスクロールは、 URL フラグメントと HTML の ID 属性を用いて行われていた。しかし、 ID を持たない要素へのスクロールというユースケースをカバーするために、フラグメン

2019-10-16T00:00:00Z

Noto Sans Hinted と font-feature-settings: 'palt'

Noto Sans のサブセット生成を見なおし、 Noto Sans Hinted から pyftsubset で生成し、ついでに font-feature-settings を有効にした。作業と検証の

2019-10-13T00:00:00Z

Promise.allSettled と Promise.any

`Promise.allSettled()` と `Promise.any()` の仕様策定が進んでいる。両者は近いレイヤの仕様では有るが、作業の進捗には差がある。- Promise.allSettle

2019-08-20T00:00:00Z

WebTransport と WebCodecs そして Web はどこまで "ゲーム化" するか

Transport として HTTP over TCP を基本としていた Web のあり方は大きく代わり、転送するメディアも HTML だけに止まらなくなってきた。その対角線上にあるユースケースとして、

2019-08-18T00:00:00Z

Nullish Coalescing と Optional Chaining

JS における null/undefined の扱い改善するための 2 つの機能が提案されている。- Nullish Coalescing Operator (stage 3)- Optional Ch

2019-08-14T00:00:00Z

Display Locking によるレンダリングの最適化と Async DOM

React や lit-html などにより、 DOM 操作の抽象化に加えて最適化が提供されることが一般的となった。見方を変えれば、本来ブラウザがやるような最適化を、ライブラリが肩代わりしていると捉える

2019-06-16T00:00:00Z

画像最適化戦略 Lazy Loading 編

長らく議論されてきた `` や `` における Lazyload について、仕様と実装が動きを見せている。ここでは、特に画像 `` に注目し、 Lazyloading の議論の変遷を踏まえた上で現状を解

2019-05-20T00:00:00Z

mozaic bootcamp 2019

2019/4/28 - 5/1 の 4 日間で、 mozaic bootcamp 2019 というひたすら Web 技術を叩き込むイベントを開催した。その内容やモチベーションについては、以下で話している

2019-05-12T00:00:00Z

Web における技術の解釈とエコシステムによる合意形成プロセスについて

「ユーザが意図する挙動」とは何か。技術的に可能であるが「やらない方が良いこと」は、誰がどう決めるのか。Web には仕様、実装、デプロイ、そしてユーザの利用とフィードバックによって、そうした合意がゆるやか

2019-04-26T00:00:00Z

Private Class Field の導入に伴う JS の構文拡張

ECMAScript の Private Class Field の仕様策定と各ブラウザの実装が進んでいる。これにより、従来の JS にはなかった Class の Private フィールドが使えるよう

2019-03-14T00:00:00Z

安全な文字列であると型で検証する Trusted Types について

脆弱性の原因となる DOM 操作の代表例として `elem.innerHTML` や `location.href` などが既に知られている。こうした操作対象(sink) に対して、文字列ベースの代入処

2019-01-27T00:00:00Z

Cache Digest と HTTP2 Server Push の現状

httpbis のチェアである mnot から、 Cache Digest についての現状確認が ML に投稿された。もしこのまま反応がなければ、 Cache Digest は終わり、対ブラウザキャッシ

2019-01-19T00:00:00Z

次世代 Web カンファレンス 2019 開催後記

2019/1/13(日) に、以下で告知した「*次世代 Web カンファレンス*」を開催した。次世代 Web カンファレンス 2019 ��催告知 \| blog.jxck.io前日に初雪が観測されて心

2019-01-15T00:00:00Z

2018 年をふりかえる

例年通り 2018 年を振り返る

2018-12-31T00:00:00Z

WebPackaging の Signed HTTP Exchanges

WebPackaging は以下の 3 つの仕様を組み合わせたユースケースである。- Signed HTTP Exchanges: Signing (コンテンツに署名する)- Bundled HTTP

2018-12-01T00:00:00Z

prefers-color-scheme を用いた Dark Mode 対応と User Preference Media Features

macOS Mojava は OS レベルで Dark Mode に対応した。しかし、 Web コンテンツは依然として白背景黒文字ベースのデザインが多く、結果ブラウザの中だけ眩しいという問題がある。Sa

2018-11-10T00:00:00Z

Cookie の性質を利用した攻撃と Same Site Cookie の効果

Cookie はブラウザによって保存され、紐づいたドメインへのリクエストに自動で付与される。この挙動によって Web におけるセッション管理が実現されている一方、これを悪用した攻撃方法として、 CSRF

2018-10-26T00:00:00Z

Referrer-Policy によるリファラ制御

リファラはリンクなどでページを遷移する際に、遷移元の URL をリクエストの Referer ヘッダに載せる仕様である。この付与はブラウザが自動で行うため、場合によっては非公開として扱っている URL

2018-10-08T00:00:00Z

次世代 Web カンファレンス 2019 開催告知

2019/1/13(日) に、「*次世代 Web カンファレンス*」を開催します。名称: 次世代 Web カンファレンス日時: 2019/1/13(日) 9:00-17:30場所: 法政大学富士見ゲート

2018-09-15T00:00:00Z

Clear-Site-Data Header

Clear-Site-Data Header の実装が進んでいる。このヘッダについて解説する。

2018-07-24T00:00:00Z

Element.toggleAttribute

非常にシンプルかつミッシングピースだった Element.toggleAttribute という仕様が提案された。最近になって各ブラウザが一斉に実装を進め、リリースに向けたアナウンスが出始めている。この

2018-07-20T00:00:00Z

Monthly Web の作り方 2018 年版

筆者がやっている Podcast である mozaic.fm の中で、 Monthly Web という月ごとの Web の動向をまとめる回をやっている。未だに落ち着いたとはいえないが、 2017 年 7

2018-07-18T00:00:00Z

Web Authentication API で FIDO U2F(YubiKey) 認証

Web Authentication(WebAuthN) API の策定と実装が進んでいる。これを用いると、 FIDO(Fast IDentity Online) U2F(Universal Secon

2018-05-15T00:00:00Z

Layered APIs と High Level API の標準化指針

Extensible Web Manifest 以降、標準化作業は Low Level API にフォーカスし、一定の成果が出ている。そこで、これらをベースとし、よりアプリレイヤの需要を満たすための H

2018-05-01T00:00:00Z

Linux で出力を別の shell に pts 経由で表示する

tmux, screen, terminal のタブなど、 shell を複数起動する方法はいくつかある。Linux では、 pts を経由すれば、ある shell の出力を簡単に別の shell で表

2018-04-30T00:00:00Z

Certificate Transparency の仕組みと HPKP から Expect-CT への移行

本サイトは HPKP (public-key-pins-report-only) に対応していた。しかし、 HPKP はその運用性の問題などもあり、 Chrome はすでに deprecate するアナ

2018-03-27T00:00:00Z

Feature Policy による Permission Delegation

ブラウザの機能を制限する Feature Policy の実装が進みつつある。Feature Policy は、ブラウザが持つ機能について選択的に許可/制限を行う API だ。AMP のように特定の機能

2018-03-08T00:00:00Z

WebFont の WOFF2 対応によるサイズ最適化

Safari 10.0 から WOFF2 がサポートされており、これをもって IE 以外のメジャーブラウザではサポートが揃いつつある。本サイトは WOFF 形式での Web Font を提供しているが、

2018-02-13T00:00:00Z

Safari による User-Agent 固定化と Web における Feature Detection

少し前に Safari Technology Preview 46 がリリースされた。Service Worker のアナウンスに目がそちらに盗まれている一方、しれっと以下の一文��ある。> Froz

2018-01-17T00:00:00Z

Apple の AOM 加盟と AV1 への期待

Apple が Alliance for Open Media に加盟したという報道があった。もし、このまま Safari が AV1 をサポートするまで至れば、 WebRTC のコーデック戦争に一旦の

2018-01-15T00:00:00Z

record to map in Erlang

Record を Map に変換するだけのマクロ

2018-01-14T00:00:00Z

Form で submit されたデータの収集と FormData & URLSearchParams

`` の onsubmit をフックして、入力された値を `` から集めて送るといった処理はよくある。このとき、 submit されたデータの収拾方法はいくつかある。submit に限らず、そのイベント

2018-01-13T00:00:00Z

Bookmarklet という一番身近な自動化技術

「��回やるなら bookmarklet にでもすれば?」と言ったら、後輩が「そんな便利なことできたんですね、知りませんでした」と言ってた。そんな時代にこそ、今更だれも解説しないであろう、 bookma

2018-01-12T00:00:00Z

SDP の Unified Plan と Plan B

新年早々、 Blink Dev で Unified Plan の Intent to Implement という嬉しい知らせが届いた。Intent to Implement: WebRTC Unifie

2018-01-05T00:00:00Z

2017 年を振り返る

例年通り、今年を振り返る。

2017-12-31T00:00:00Z

ResizeObserver による変更検知と Element Query

ResizeObserver の ship が進みつつある。この仕様の解説および、 ElementQuery / ContainerQuery について解説する。Resize Observer 1

2017-12-30T00:00:00Z

WHATWG の IPR Policy と Governance Structure

WHATWG が IPR Policy と Governance Structure についての更新を発表した。おおまかな流れと、これによって引き起されそうな変化について解説する。

2017-12-12T00:00:00Z

Font Display プロパティを用いた FOIT/FOUT 最適化

Web Font 読み込み中の HTML 表示については、ブラウザデフォルトの挙動に依存していた。フォントファイルサイズが大きい場合は、 FOIT/FOUT の問題が顕著になり、 JS を用いた回避策が

2017-12-06T00:00:00Z

Houdini Paint API

Houdini で議論されている CSS Paint API が Chrome Canary で flag 付きで実装されている。デモの実装を通して、関連仕様を含めた以下の 4 つのドラフトを解説する。

2017-10-31T00:00:00Z

CSS Rhythmic Sizing で Vertical Rhythm

タイポグラフィに関連したデザイン手法の 1 つに Vertical Rhythm がある。そして、現在 CSS でそれを簡単に実現するための CSS Rhythmic Sizing という仕様が提案され

2017-10-09T00:00:00Z

予約済みドメイン (.example, .localhost, .test) について

特別なドメインとして予約され、特定の用途で使用可能なドメインとして、 `.example` `.localhost` `.test` などがある。`localhost` の Draft や、 gTLD

2017-09-27T00:00:00Z

ブラウザで適当なランダム文字列

テストや仮実装で、適当なランダム文字列が欲しい場合に便利なスニペット。

2017-09-26T00:00:00Z

Foreign Fetch が削除されそうな理由と Cookie の double keying

以前、本ブログでも紹介した Foreign Fetch が、仕様から削除される方向で進んでいる。Foreign Fetch による Micro Service Workers \| blog.jxck.

2017-09-19T00:00:00Z

Brotli を用いた静的コンテンツ配信最適化と Accept-Encoding: br について

High Sierra に乗る Safari 11 で Brotli 対応がされるということで、メジャーブラウザの Brotli 対応が概ね揃うことになる。そこで、本サイトも Brotli による静的コ

2017-08-19T00:00:00Z

.mjs とは何か、またはモジュールベース JS とエコシステムの今後

長いこと議論になっていた ES Modules の Node における扱いに一応の決着が付き、 `.mjs` という拡張子が採択された。この拡張子の意味と、今後ブラウザと合わせて Universal J

2017-08-15T00:00:00Z

Promise.prototype.finally

Promise.prototype.finally の仕様が TC39 stage 3 となり、 Safari TP37 で先行実装が入った。tc39/proposal-promise-finally

2017-08-10T00:00:00Z

Service Worker の Navigation Preload による表示遅延回避

Service Worker で Fetch を Proxy する場合、 Fetch 発生時に SW が起動し��いなければ、その起動を待つ必要が出る。そして、この SW の起動には無視できない時間がか

2017-08-05T00:00:00Z

Fetch の中断と Promise のキャンセル方法の標準化

XHR から `fetch()` に積極的に移行しづらかった最大のミッシングピースとして、中断できないという問題があった。これは、 `fetch()` が選んだ Promise ベースのインタフェースに

2017-07-19T00:00:00Z

ネットワーク中立性について #NetNeutrality

ductionUS では #NetNeutrality について話題になっている一方、日本ではさほど話題になってないように思う。インターネットを基盤としている Web 開発者にとっても、いつまで他人事で

2017-07-14T00:00:00Z

EventTarget の継承可能化による EventEmitter の代替

念願だった EventTarget の constructible/subclassable が DOM の仕様にマージされた。これにより、いわゆる EventEmitter のブラウザ移植が不要にな

2017-07-10T00:00:00Z

ES Modules への橋渡しとしての nomodule 属性

ブラウザにおける新機能の利用においては、非対応ブラウザの考慮も必要となる。ES Modules の利用におい��も、いかに非対応ブラウザでフォールバックの手段を提供するかが課題となっていた。今回は、

2017-06-21T00:00:00Z

Web Budget API と Web に導入されつつある Budget と Cost の概念

PWA の普及により、バックグラウンド処理をいかに制限するかといった課題が生まれた。その対策として、バックグラウンド処理における Budget と Cost の概念が提案され、それを扱う Budget

2017-06-12T00:00:00Z

Safari 11.0 will support WebRTC

Safari 11 のアップデートに、待望だった WebRTC がリストされた。

2017-06-06T00:00:00Z

WebRTC 1.0 に向けたロ��ドマップ

Google の Product Manager である Huib Kleinhout が、 disscuss-webrtc の ML に以下のような投稿をした。Completing WebRTC 1.

2017-05-22T00:00:00Z

gen_fsm から gen_statem へ

Erlang/OTP 19 から、 gen_fsm の後継として gen_statem が導入された。OTP の内部でも ssl などはすでに gen_statem に移行している。このビヘイビアの概要

2017-05-18T00:00:00Z

Web Share API

Web Share API が Origin Trials を卒業したという知らせが届いた。コンテンツを他のサービスなどと連携するこの API について紹介する。

2017-05-10T00:00:00Z

JavaScript における文字コードと「文字数」の数え方

textarea などに入力された文字数を、 JS で数えたい場合がある。ここで `.length` を数えるだけではダメな理由は、文字コードや JS の内部表現の話を理解する必要がある。多言語や絵文字

2017-03-02T00:00:00Z

Monthly Web 2017/02

今月の Web メモ

2017-02-21T00:00:00Z

Polyfill のあり方と Web の進化と協調するためのガイドライン

W3C の TAG から、主にブラウザ API の Polyfill に関するドキュメントが公開された。Polyfills and the evolution of the WebPolyfill は便

2017-02-17T00:00:00Z

CSP Report 収集と実レポートの考察

このブログで CSP レポートの収集を開始してもうすぐ 1 ��になる。現状、対象ドメイン内で `` は一切提供しておらず、大半が静的に生成されたページであるが、この条件でも、かなり多くのレポートが集ま

2017-02-13T00:00:00Z

Monthly Web 2017/01

月一メモ

2017-01-27T00:00:00Z

mixed contents 対応を促進する CSP ディレクティブ

HTTPS 移行の問題点の一つに、 mixed contents への対応がある。逆に mixed contents の発生を恐れ、 HTTPS に移行できないサービスもあるだろう。本エントリでは mi

2017-01-10T00:00:00Z

2016 年を振り返る

例年通り、今年を振り返る。

2016-12-31T00:00:00Z

HTTP の新しいステータスコード 103 Early Hints

これは、 http2 Advent Calendar 2016 の 16 日目の記事である。HTTP に新しいステータスコード `103 Early Hints` が追加されようとしている。HTTP/1

2016-12-16T00:00:00Z

Foreign Fetch による Micro Service Workers

Service Worker に Foreign Fetch という機能が提案されている。この機能があるとクロスオリジンへの fetch をフックできる Service Worker を、その対象オリジ

2016-12-12T00:00:00Z

Link rel=serviceworker ヘッダによる API やアセットの Offline 対応

Service Worker を登録する方法は現状 3 つある。HTML meta タグでの追加ならば、 Service Worker を追加するためだけの JS であれば不要になる。HTTP ヘッダで

2016-12-11T00:00:00Z

Node v7 で入った WHATWG URL 実装について

Node v7.0.0 が公開され、今回のリリースで WHATWG URL の実装が Experimental として入った。既に標準で含まれていた url module との違いや、 URL API

2016-10-27T00:00:00Z

Web 標準化のフィードバックサイクルを円滑にする Origin Trials について

ブラウザに追加される新しい機能に対して、 Vender Prefix の代替となる Origin Trials の導入が徐々に始まっている。今回は、これまでの Vender Prefix の問題点と、代

2016-09-29T00:00:00Z

Google Developer Experts (GDE) になりました

Google の中の人からお声がけ頂き、 Google Developer Experts (GDE) に Web Technologies の Expert として Join することになりました。

2016-08-30T00:00:00Z

「Socket.IO は必要か?」または「WebSocket は通るのか?」問題について 2016 年版

「Socket.IO 使ったほうがいいですか?」という主旨の質問をもらった。これは、 WebSocket が繋がらない環境に向けて、フォールバック機能を有する Socket.IO にしておいた方が良い

2016-08-22T00:00:00Z

SQL でファイル検索するコマンド selects を書いた話

UNIX コマンドを SQL で抽出できるツール qq を作った。というエントリを読んで、そういえば似たようなものを作ってたなと思い出した。自分の dotfiles の中にある、便利コマンド集の中にあ

2016-08-05T00:00:00Z

Fetch での Stream を用いたプログレス取得とキャンセル

WHATWG が定義する Fetch API は、出たばかりの仕様では、途中でのキャンセルや、プログレスイベントの取得が含まれていなかった。しかし、後の更新で fetch 結果の Response Bo

2016-07-21T00:00:00Z

Cache-Control の Immutable 拡張によるリロード時のキャッシュ最適化

ブラウザはリロード時に、 max-age に満たないキャッシュを持っていても Conditional GET によってキャッシュの Validate (有効性の問い合わせ)を行う。Cache-Contr

2016-07-12T00:00:00Z

Intersection Observer を用いた要素出現検出の最適化

スクロールによる DOM 要素の出現などを効率よく検知するため、新しく Intersection Observer という API が追加された。この API の使い方と、本サイトへの適用について記す。

2016-06-25T00:00:00Z

mozaic.fm の v2 のリリースと Podcast の実装と移行

mozaic.fm をリニューアルし、 v2 としてリリースした。今回の更新のモチベーションは大きく分けて 2 つある。- tumblr を捨てたかった- feedburner を捨てたかったこれによる

2016-06-20T00:00:00Z

リンクのへの rel=noopener 付与による Tabnabbing 対策

本サイト以下全ての `target=_blank` 付きのリンクに `rel="noopener noreferrer"` の付与を実施した。このプロパティの意味と、これが無い場��のフィッシング詐欺

2016-06-12T00:00:00Z

Passive Event Listeners によるスクロールの改善

DOM のイベントリスナの仕様に Passive Event Listeners というオプションが追加された。このオプションは、主にモバイルなどでのスクロールの詰まり(Scroll Jank) を解決

2016-06-09T00:00:00Z

中級者向け Service Worker Tutorial

Service Worker の初心者向けのチュートリアルや、使ってみた系のエントリも増えてきました。しかし、 Service Worker は通常のブラウザ用 JS の開発と少し経路が違い、慣れるまで

2016-04-24T00:00:00Z

Stale-While-Revalidate ヘッダによるブラウザキャッシュの非同期更新

システムにおいてキャッシュの設計は永遠の課題であり、 Web のパフォーマンスにおいても非常に重要である。Web では、 HTTP ヘッダを用いてブラウザやプロキシにキャッシュの制御を指定する。Stal

2016-04-16T00:00:00Z

HTTP Strict Transport Security(HSTS) 対応

本サイトにて HTTP Strict Transport Security (HSTS) を有効化した。`includeSubdomains` を用いた `*.jxck.io` 全体への適用および、ブラ

2016-04-11T00:00:00Z

Public Key Pinning for HTTP(HPKP) 対応と report-uri.io でのレポート収集

本サイトにて Public Key Pinning for HTTP を有効化した。CSP 同様、まずは Report-Only を設定し、HPKP Report についても、 report-uri.i

2016-04-09T00:00:00Z

Content Security Policy(CSP) 対応と report-uri.io でのレポート収集

本サイトにて Content Security Policy を有効化した。まずは Report Only にて導入し、段階的にポリシーとコンテンツを修正していく方針をとる。CSP Report につい

2016-03-30T00:00:00Z

画像最適化戦略 SVG/Font 編

本サイトで使用している UI アイコン系の画像を、ギリギリまで最適化した手書き SVG に置き換えた(ただしソースは *観賞用* なので、インデントは残す)。また、装飾に画像ではなく CSS の con

2016-03-27T00:00:00Z

画像最適化戦略 WebP 編

本サイトの PNG/JPEG で提供している画像については、よりサイズが小さくなりやすい WebP 形式を提供し、対応ブラウザに配布するようにした。フォーマットを出し分けるため、画像の指定は `` 要素

2016-03-26T00:00:00Z

画像最適化戦略 Picture 編

本サイトで使用している PNG/JPEG 画像を、対応デバイスと、 Device Pixel Ratio に対して最適なサイズで出し分けるために、 `` 要素を適用した。画像最適化シリーズ第 2 回目の

2016-03-25T00:00:00Z

画像最適化戦略 PNG/JPEG 編

本サイトで使用している PNG/JPEG 画像に対し、メタデータ削除、減色、リサイズなど基本的な最適化処理の適用戦略と、その方法および結果について。画像最適化シリーズ第 1 回目のエントリである。1.

2016-03-24T00:00:00Z

Noto Sans の Web Font 対応とサブセットによる最適化

このサイトのフォントに Web Font を適用することにした。フォントには Google と Adobe が協同で開発した Noto Sans CJK JP を採用した。また、このサイトでは使用しない

2016-03-14T00:00:00Z

Preload を用いたリソースプリローディングの最適化

Preload を指定する `` の仕様が公開されており、現在 Chrome Canary に実装されている。この仕様のモチベーションについて、 Chrome 開発者の Yoav Weiss 氏のブログ

2016-03-04T00:00:00Z

JSON-LD と Open Graph で構造化メタデータ対応

本サイトのメタ情報を整理するため、 HTML ��メタタグの整理、 JSON-LD による schema.org 対応、 Facebook, Twitter を主とした Open Graph 対応を実

2016-02-26T00:00:00Z

zopfli で静的コンテンツの gzip 配信と Content/Transfer-Encoding について

HTTP では `Accept-Encoding` と `Content-Encoding` でのネゴシエーションにより、 gz などで圧縮したコンテンツを転送することができる。本サイトでは zopfl

2016-02-17T00:00:00Z

HTTP2 を前提とした HTML+CSS コンポーネントのレンダリングパス最適化について

Chrome が予定している `` の挙動の変更について、 Google Chrome チー��の Jake が、興味深いブログを上げている。The future of loading CSSこの内容は

2016-02-15T00:00:00Z

Resource Hints API でリソースの投機的取得

Resource Hints とは現在提案されている以下のドラフトであり、ブラウザに「次に必要となるリソースを教える」ことで、投機的な取得を行う API 群である。https://w3c.github.

2016-02-11T00:00:00Z

Atom の RSS Feed 対応

このブログの Atom feed を吐くようにした。右上の feed アイコンから登録できる。

2016-02-09T00:00:00Z

h2o で https/2 のデプロイと設定

土台がだいたいできたので、このサイトを h2o にデプロイした話。

2016-02-08T00:00:00Z

AMP HTML 対応

Google が推奨する仕様である AMP HTML に、このブログを対応した。言いたいことは色々あるが、とりあえず非常に難しかったため、その対応方法や感想などを残す。

2016-02-01T00:00:00Z

HTML の省略によるサイズ最適化

本サイト blog.jxck.io 以下については、 Markdown から静的ファイルを生成するスタイルで作��している。この変換時に以前から思っていた *HTML の最適化* を実施することにした

2016-01-28T00:00:00Z

Blog を移転しました

長いことはてなをメインにし、他にも Qiita や Tumblr を使って色々書いて来たが、そろそろ自分のドメインに全部集約していこうかと思う。

2016-01-27T00:00:00Z

Masataka Yakura (Web)

Microsoft EdgeのChromium移行とか

週明けに出回った、Microsoft EdgeがChromiumベースになるという話について、Microsoftからアナウンスがあった。Microsoft Edge: Making the web be

Fri, 07 Dec 2018 06:19:02 +0900

SafariのUA文字列が固定されて固定されなくなったおはなし

Jxckが以前、SafariのUA文字列が固定されたというのを書いていた。Safari による User-Agent 固定化と Web における Feature Detection | blog.jxc

Mon, 16 Apr 2018 08:30:00 +0900

Chromeでボタンをクリックしたときのフォーカスリング

geckotangが「Chromeでボタンをマウスでクリックしたときにフォーカスリングが出たり出なかったりするのなんで」と言っていて、なんかお前調べろよ的な感じだったので調べることにした。使うのはcs.

Mon, 09 Apr 2018 08:30:00 +0900

Autoprefixerのブラウザ指定をpackage.jsonの`browserlist`からする

さっきAutoprefixerの設定でいろいろ阿呆なことをして、まあそれは解決して、ついでにリリースノートを見ていたら6.6.0でこんな機能が入っていたのを知る。With Autoprefixer 6.

Tue, 14 Feb 2017 07:30:00 +0900

するするさせたい：サイボウズ採用情報のアニメーション（その3）

サイボウズ採用情報のアニメーションがするするしてないので調べた件、今回は雑記。その1 ― 何が起こっているのか調べるその2 ― 調べながら直しながらするするさせるその3 ― ちょっとしたことや他のブラウ

Mon, 16 May 2016 06:51:15 +0900

するするさせたい：サイボウズ採用情報のアニメーション（その2）

サイボウズの採用情報ページにあるアニメーションがするするしていない。ので前回は何がおこってるのか見てみた。今回はするするさせられないか、がんばってみる。その1 ― 何が起こっているのか調べるその2 ―

Fri, 13 May 2016 14:30:00 +0900

するするさせたい：サイボウズ採用情報のアニメーション（その1）

サイボウズの採用情報ページを見ていた。サイボウズ | 採用情報（新卒・キャリア）といっても受けるとかではなく、ただ性格悪いことを思っていただけなんだけど。Kintoneのセクションでアプリっぽいアイコン

Thu, 12 May 2016 08:30:00 +0900

するするさせたい

昨年くらいからWebの描画まわりのパフォーマンスについて調べたりしている。何をしたいのかと言うと、するするさせたい。するする？あくまで自分の傾向なんだけど、読み込まれるまで時間がかかるというよりは、ペー

Tue, 01 Mar 2016 20:58:31 +0900

Progressive Web Appsとは

Chrome Dev Summitに来ている。今年のChrome Dev Summitは日ごとにテーマが分かれていて、初日がProgressive Web Apps、2日目がRAILらしい。RAILはG

Wed, 18 Nov 2015 05:39:39 +0900

すこし開かれたWHATWG HTML

8月末のことなんだけれど、WHATWG HTMLの仕様書がGitHubに移った。[whatwg] HTML spec now on GitHub (from Ian Hickson on 2015-08

Mon, 05 Oct 2015 07:30:00 +0900

Content ScriptsなChrome拡張をFirefox拡張に

追記（2015-10-16）：WebExtensionsの発表これを書いた数ヶ月後の8月21日、Mozillaが今後のアドオンをWebExtensionsというChrome拡張APIベースなものに移行し

Fri, 01 May 2015 19:23:39 +0900

FirefoxのCSS Unprefixing Service

追記（2016-09-23）：-webkit-接頭辞のサポートを一部のサイトのみ対象とする方針はその後方針転換し、すべてのサイトを対象とすべく必要な機能やエイリアスの実装が行われ、Firefox 49で

Fri, 24 Apr 2015 21:18:49 +0900

SassScriptでリスト関数を拡張する

その昔Sassに凝っていたころに書いたメモを見つけた。供養のために公開。当時のSassにはセパレータ判別の関数とかなかったので、今は特に必要ないものもあるね。時間経ったね。グラデーションのmixinを書

Fri, 20 Feb 2015 01:26:29 +0900

Android Wearを半年使ってみたので雑感

Google I/OでLG G Watchを手に入れてから半年、Android Wearの感想を改めて。使って1ヶ月後に書いたGoogle+の投稿と変わらないところもあるけど。腕時計を再発見するLG G

Wed, 31 Dec 2014 16:03:06 +0900

Firefoxおめでとう＆みんな開発版つかおうよ

Firefox 1.0のリリースから10年経った。おめでとうございます。リリース前のことだけど、WikipediaのFirefoxの記事をちょこちょこいじっていて、FirebirdからFirefoxに名

Thu, 13 Nov 2014 00:07:50 +0900

まわり雑感その1

Chrome 38が出て<picture>が有効になったので、いくつか記事を訳した。レスポンシブイメージのネイティブサポート - HTML5 RocksDev.Opera — ネイティブサポ

Fri, 31 Oct 2014 09:07:18 +0900

でJavaScriptの非同期読み込みを

JavaScriptファイルをスクリプトから非同期で読み込むパターンは古い、という話を目にしたのはもう半年前のこと。言ったのはIlya Grigorik。月末のGoogle Japanでのイベント、月初

Tue, 14 Oct 2014 06:17:13 +0900

-webkit-alt プロパティ

PUAアイコンフォントのアクセシビリティ - Unreviewedこれを読んでいて、内容とはまったく関係ないのだけれど -webkit-alt プロパティのことを思い出した。昨年11月に実装されたgen

Fri, 19 Sep 2014 20:02:30 +0900

meta-contactを使わずに連絡先をマークアップできないか

blink-devにこんなメッセージが。Intent to implement: 'contact' meta extensionContact Meta Extensionsたとえばおさいふ落とした時

Tue, 12 Aug 2014 01:18:14 +0900

ServiceWorkerの記事を書いた＆所感

HTML5 Experts.jpにServiceWorkerの記事を書いた。Google I/O 2014──ServiceWorkerでネイティブアプリとの差を縮めようGoogle I/Oで見たSer

Thu, 31 Jul 2014 23:29:48 +0900

表現のコンポーネントとエレメント指向

Google I/Oに行ってきたのでそれ関連の話題を。Paper Elementsのエフェクト要素Material Designというデザイン言語が出て、そのWebへの適用手段としてPolymerのPa

Mon, 30 Jun 2014 23:59:00 +0900

Safari 8?の機能予想

WWDC直前ということでSafariの話題を。といってもネタは3週間以上も前のもの。5月8日に「safari-538.34-branch」というWebKitのブランチが切られた。Changeset 16

Sat, 31 May 2014 22:56:08 +0900

新しいiPhoneの解像度とCSSピクセル幅を考える

そろそろSafari 8?のベースになるWebKitのブランチが切られるかなと思って待っていたら月末になってしまった。ネタがないのでiPhoneの噂話でもしよう。新iPhoneの画面解像度は？まず、確か

Wed, 30 Apr 2014 21:09:46 +0900

Sassでlinear-gradient()のmixinをつくるその6

このエントリはCSS Preprocessor Advent Calendar 2012の記事の続編です。察せ。Sass 3.3がついにリリースされました。リリースされないものだと思っていましたがよかっ

Mon, 10 Mar 2014 18:59:24 +0900

WOFF 2.0 Evaluation ReportとBrotli

いつだったかにWOFF2のことを書いた。WebFonts WGのrecharter: より高い圧縮率を備えたWOFF 2.0の検討タイトルかたいな！その後どうなったのかなと思いつつもめんどくて調べてなか

Wed, 05 Feb 2014 02:26:08 +0900

システムの文字サイズを取得できないものか

80歳の方にiPad Airを使わせてみた方のエントリを読んだ。実録・80歳の祖父母にiPadを贈った話｜ポッケのなかみ母とNexus 7ちょうど年末年始の帰省時に母（60くらいだったかな？）にNe

Fri, 31 Jan 2014 21:07:17 +0900

Web技術について書くときの媒体の違いを考える

このエントリはEditors' & Writers' Advent Calendar 2013の12日目のやつです。これまでいろんな媒体で、HTMLやらCSSやらに関することを書いて、そして書か

Thu, 12 Dec 2013 18:00:41 +0900

all, initial, unsetでCSSのリセットと継承回避をする

追記（2018年4月13日）：紹介した機能の実装が進みました（Can I use：allプロパティ、initial、unset��。一方で文中で取り上げたScoped Stylesheetsは仕様から

Wed, 11 Dec 2013 18:37:18 +0900

WebプラットフォームのこれからとExtensible Web

この記事はFrontrend Advent Calendar 2013の8日目の記事です。昨日岐阜県にてHTML5 Conference 2013 in Gifuというイベントがありまして、そちらでWe

Sun, 08 Dec 2013 23:50:00 +0900

SVGヤバイ 2013冬

Chrome 31がStableになって久しい。何が変わったのか思い出せないんだけど、ひとつだけ覚えてるのがこちら。(@156422) - b87d44f — Allow SVG images to n

Wed, 27 Nov 2013 19:08:57 +0900

Yasushi Ando (Chrome)

Yoichiro Tanaka (Chrome, AoG)

Manjaro Linuxでアップデート後にSDDMがクラッシュ

Ryzen7 3700xやGeForce 2060を搭載して3月中旬に組んだ自作PCですが、OSとしてManjaro Linux（KDE版）を入れて使っていました。Manjaro Linuxではローリン

Tue, 12 May 2020 00:00:00 +0900

なぜオンライン授業でテレビを使わないのか？

2020年5月9日現在、多くの子供達が学校に登校できていません。我が娘もその中の一人です。幸いなことに、娘が入学した学校ではZoomなどを使ったオンライン授業が開始されていて、午前中はしっかりと4時限分

Sat, 09 May 2020 00:00:00 +0900

庭に咲いていたサクラソウ

新型コロナウイルス感染症の蔓延の影響で、外出自粛が続いています。幸いなことに、僕の家の庭は田舎なので広く、僕の父が庭で山野草を手がけています。今年も綺麗なサクラソウが数多く花を開かせました。本当に綺麗な

Tue, 05 May 2020 00:00:00 +0900

猫が駆け抜ける統合開発環境

僕が普段使っている統合開発環境では、最近「猫が駆け抜ける」ようになりました。こんな風に。僕の周りの人々はかなり高い確率で Visual Source Code を使っているようなんだけど、僕は Ecli

Sun, 26 Apr 2020 00:00:00 +0900

久々に自作PCを組んだ話

Dell XPS 13 2-in-1 7390を昨年の10月に買ってから、メモリ32GBな環境にすっかり慣れてしまいました。さらに、Archlinuxにもすっかり慣れてしまって、WindowsやMacに

Mon, 16 Mar 2020 00:00:00 +0900

Actions on Googleの統計情報をBigQueryにエクスポートする方法

Actions on Googleを使って、Googleアシスタント向けに開発者は機能拡張を行うことができます。その代表格が、会話型のアクションです。オッケーグーグル、○○につないで。はい、こち

Fri, 06 Mar 2020 00:00:00 +0900

異なるプロジェクト間でのDatastoreエンティティのコピーの方法

Google Cloud Platform（GCP）の代表的なデータベースの一つであるCloud Datastore。GCPの使い方として、例えばStaging環境とProduction環境を別々のGC

Mon, 17 Feb 2020 00:00:00 +0900

Slack BoltとFirebase Functionsは相性が悪い

4, 5年前から Slack BOT のコードを書いている気がしますが、長らく Hubot の Ruby 実装である Ruboty を使ってきました。ただ、Ruboty だと他の BOT の開発について

Sun, 16 Feb 2020 00:00:00 +0900

2019年を振り返って

さて、今年2019年も残すところ数時間で終わりです。いつも通り、2019年の自分を簡単に振り返ります。娘が6歳になりました我が娘も6歳、幼稚園年長さんになりました。すっかりお姉さんです。今年の娘は、僕も

Tue, 31 Dec 2019 00:00:00 +0900

株式会社ディー・エヌ・エーを退職します

今日11月29日は、株式会社ディー・エヌ・エー（DeNA）の最終出社日でした。退職日は12月末です。2017年6月からなので、なんだかんだ2年半くらいは在籍していたことになります。僕の今までの経歴の中で

Fri, 29 Nov 2019 00:00:00 +0900

Keisuke Oohashi (Cloud)

Singo Ishimura (Cloud)

Atsushi Nakamura (Cloud)

Satoru Nakamura (GCP)

Tetsuhiro Ueda (Cloud, Flutter)

Shinichi Ogawa (GAE, Apps)

Google MapがiPhoneX対応？

iPhoneX対応したとのことです。それなのに、下部のSafe Areaが… スクショだと角の丸に隠れた部分がわかりにくいので、実機を直接写してみると… ...

Sun, 03 Dec 2017 03:02:06 +0900

iOS11の通知リストのバグ

こんな感じで、無意味な空白の領域ができてしまうことがある。一度通知を閉じて再度表示し直すと、消えている。 ...

Tue, 21 Nov 2017 12:00:07 +0900

note.muのアプリ

note.muを使い始めているのだけど、アプリを使っていて気づいたこと。これはアルバムというか、記事をまとめるためのフォルダの詳細画面。これに対するメニューがコレ。 ...

Sat, 18 Nov 2017 17:55:45 +0900

Spaceeが定額サービスを開始

以前レポートをした「1時間50円」「ワンコイン会議室」など、最近広告でよく見かける Spacee が定額サービスを開始するようです。 ...

Sat, 18 Nov 2017 03:41:23 +0900

15年ぶりくらい…

お菓子ですが。大阪から東京に引っ越して17年ほど経ちまして、長いことお目にかかっていなかったけど、時々食べたくなるお菓子です。満月ポン！なんだか萌え絵パッケージまであるという。 ...

Sun, 12 Nov 2017 22:05:52 +0900

Spaceeを使ってみた

「1時間50円」「ワンコイン会議室」など、最近広告でよく見かける Spacee を使ってみました。 ...

Sat, 11 Nov 2017 03:51:53 +0900

ヘッドセット

最近ヘッドセットを変えたんですけど、今までいくつかや使ってきてやっぱりAnkerのが好きだったのでタイムセールもあったし買ってみました。私の場合は音質よりも連続使用時間の長さなんですが、さすがはAnk.

Wed, 08 Nov 2017 12:00:02 +0900

Standland

iPhoneX向けの特集にも出てますね！Standland - Flask LLP

Sun, 05 Nov 2017 18:20:35 +0900

Tumblr 登録から10年

最初のPostが2007年11月2日だったようなので、今日で登録から丁度10年目のようです(*´∀｀)https://shin1ogawa.tumblr.com/post/18138420/itpr..

Thu, 02 Nov 2017 23:00:27 +0900

shin1ogawa:iOS11のトランジションのバグiPhone8でのiOS11で、トランジションがちらつくバグが気になる。最初のアップデートの11.0.1にしても状況は変わらない。あらゆる箇所の...

shin1ogawa:iOS11のトランジションのバグiPhone8でのiOS11で、トランジションがちらつくバグが気になる。最初のアップデートの11.0.1にしても状況は変わらない。あらゆる箇所の..

Sat, 28 Oct 2017 03:22:22 +0900

iOSのアプリケーション履歴のバグホームボタンダブルタップでアプリケーションの履歴を表示できて、そこからアプリケーションを前面に復帰することができます。この時、前面に復帰したアプリケーションは当然その履...

iOSのアプリケーション履歴のバグホームボタンダブルタップでアプリケーションの履歴を表示できて、そこからアプリケーションを前面に復帰することができます。この時、前面に復帰したアプリケーションは当然その履

Tue, 24 Oct 2017 12:00:26 +0900

VALUのシェアボタンのバグ普段はiOSのシェアメニューを使うので、ウェブページ内に配置されたシェアボタンは使わないのですが、たまたま使ってみたサイトがバグってました。Twitter、Facebook、...

VALUのシェアボタンのバグ普段はiOSのシェアメニューを使うので、ウェブページ内に配置されたシェアボタンは使わないのですが、たまたま使ってみたサイトがバグってました。Twitter、Facebook、

Sat, 21 Oct 2017 12:00:18 +0900

リリースノートアプリのアップデートの説明文、面白いものも多いですよね。このブログサービスのtumblrもなかなか面白い部類ですが。クスッとさせてくれるものも多いです。そんな中。これはテーマパークのゾンビ...

リリースノートアプリのアップデートの説明文、面白いものも多いですよね。このブログサービスのtumblrもなかなか面白い部類ですが。クスッとさせてくれるものも多いです。そんな中。これはテーマパークのゾンビ

Fri, 20 Oct 2017 12:00:19 +0900

5時間500円一人カラオケのワンカラのいくつかの店舗で、朝7-12時の5時間の間、500円固定のコースが始まっていました。無料WiFiがあってビデオ会議とかでも使えるし、便利な人には便利かもですね。中は...

5時間500円一人カラオケのワンカラのいくつかの店舗で、朝7-12時の5時間の間、500円固定のコースが始まっていました。無料WiFiがあってビデオ会議とかでも使えるし、便利な人には便利かもですね。中は

Wed, 11 Oct 2017 12:00:19 +0900

TumblrのQueue機能いつも使っているんですが、どの画面で確認できたっけ？確か設定画面だったよな、と思ったけど、見つからず。一旦Queueの確認は諦めて、一つエントリを書いて見たら、やっぱり設定画...

TumblrのQueue機能いつも使っているんですが、どの画面で確認できたっけ？確か設定画面だったよな、と思ったけど、見つからず。一旦Queueの確認は諦めて、一つエントリを書いて見たら、やっぱり設定画

Wed, 04 Oct 2017 12:00:15 +0900

バッテリーの消費ポケモンGOは25分で16%！て事は…1時間で40%消費しちゃうんですね。

Wed, 04 Oct 2017 00:55:42 +0900

Yukio Andoh (Maps)

Nobuya Sato (Product Design)