初演: 2018/02/15 デブサミ2018 15-D-1 ハッシュタグ: #devsumi #devsumiD https://togetter.com/li/1199564
弁護士検索や無料法律相談などのサービスを運営する弁護士ドットコム。その弁護士ドットコムはアクセシビリティエンジニアを採用し、本格的にWebアクセシビリティの向上に乗り出したという。本連載では、弁護士ドットコムがどのようにアクセシビリティ向上に向けどのように実装していたのか、リアルタイムでお届けしていきます。初回の今回は、「狙い」を紹介します。 筆者は、アクセシビリティに関する著書もある元ビジネス・アーキテクツの太田良典氏。本題の前に、まずは「アクセシビリティ」について簡単に説明しておきます。 アクセシビリティは障害者に限った話ではない全盲の人もWebを使っているんですよ 私がこう言うと、「全盲の人がどうやってWebを使うの?」と驚かれることがあります。Webは実にさまざまな人が、さまざまな状況で利用しており、あまり知られていない使われ方をされていることもあります。たとえば以下のような使われ
(この記事は3分で読めます) ServiceWorkerは、ブラウザネットワークのプロキシであり、ブラウザの通信をインターセプトすることが主な目的です。 ServiceWorkerは、Push通知のためだけではありません。昨年秋に日経新聞1やdev.toで話題になったServiceWorkerは、リソースキャッシュの用途です。 既存のAngularアプリケーションにこのリソースキャッシュを導入します。 TL;DL ServiceWorkerのリソースキャッシュにフォーカスする。 既存のAngularアプリケーションを4ステップで調理する。 阿部寛さんのホームページ2と実食勝負する。 味の秘訣を解説する レシピ Angular-CLIで作成されたプロジェクト ×1 Angular5.0.0~ ×1 Angular-CLI1.6.0~3 ×1 chrome49〜 ×1 (~00:30) Ser
ブラウザごとの差異を吸収してデフォルトのスタイルを提供する「normalize.css」をモダンブラウザ用に最適化したスタイルシートを紹介します。 「box-sizing: border-box;」の採用など、今の実装方法に最適化されています。 modern-normalize -GitHub modern-normalizeの特徴 modern-normalizeの使い方 modern-normalizeの中身 modern-normalize.min.css modern-normalizeの特徴 modern-normalizeは、ブラウザごとの差異を吸収してデフォルトのスタイルを提供する「normalize.css」をモダンブラウザ用に最適化したスタイルシートです。 normalize.cssとの相違点 軽量で、コンパクト。 最新のモダンブラウザをサポート。 「box-sizing
レスポンシブなレイアウトにはメディアクエリが欠かせないわけですが、CSS GridやFlexboxを使えばメディアクエリなしでもレスポンシブなレイアウトが可能です。メディアクエリが全くいらなくなるということはないと思いますが、CSS GridとFlexboxを使えば、メディアクエリの記述を減らす方法があります。しかもコンテンツの幅に合わせて中身のレイアウトを調整するようなエレメント・クエリ的な使い方も、ある程度なら実現できます。 応用すれば今後のレスポンシブなレイアウトのCSSの組み方を変えてしまうような方法です。 ※デモはFirefox 58.0.2、Chrome 64.0.3282.140、Safari 11.0.3でテストしています。 CSS Gridを使ったレスポンシブレイアウト CSS Gridで以下の2つのCSS関数を使うと、メディアクエリなしでレスポンシブなレイアウトが実現で
本記事ではChrome内蔵のプロファイリングツール、tracingの活用方法を紹介する。 本記事は私の個人的な意見に基づき書かれております。私の所属する組織、団体には一切の関係はありません。 はじめに Chromeは誕生以来、常に最速のブラウザを目指して開発されてきた。しかし処理速度を向上させようと頑張ると、うっかりメモリ使用量や電力消費量を犠牲にしてしまう可能性がある。特にAndroidのような携帯端末ではメモリや電池寿命の制約が強く、あらゆるデバイスで最高の使い心地のChromeを目指す上では、これらのトレードオフを実際のデータで深く理解した上で開発の意思決定をする必要がある。 このような背景から、処理速度・メモリ使用・電力消費をはじめ、あらゆるパフォーマンスデータを時系列で統合的に理解出来るように開発されたのがChrome内蔵プロファイリングツール、tracingである。 多機能が故
こんにちは。仕事上で chrome://tracing (about:tracing) を使う必要が出たので、私の知っている限りの情報をここでまとめることにしました。 chrome://tracing の情報は世の中にあまりありません。もし記事中に間違いを見つけられたり、より良い利用方法をご存知の方は、ぜひ @tkihira まで教えてください。よろしくお願いします! なお実際は隠し機能ではなく、ただあまり知られていないだけです。公式の情報は https://www.chromium.org/developers/how-tos/trace-event-profiling-tool ここから辿れると思います。 注意 この機能は、Chrome のインスタンス全体のプロファイルを取るものです。不用意に実行すると、すべての Chrome のタブを巻き込んで落ちます。記事中では Chrome Ca
サンプルコード webpackしたコンポーネントを非同期でレンダリングする(Code Spliting) 参考:Code Splitting for React Router with Webpack and HMR プロジェクトが大きくなってくるとwebpack.jsでコンパイルしたbundle.jsが肥大化します。 bundle.jsが肥大化するとbundle.jsの読み込みに時間がかかってしまい、初回のページの表示が遅くなります(SPAの欠点) そこでAsyncComponentを作成して、非同期リソース読み込みを行います。 import React from 'react' // 遅延レンダリングを行うコンポーネント export default (loader, collection) => ( class AsyncComponent extends React.Compone
モダンJavascriptの世界において、過去とうまく付き合っていくためにはトランスパイルやPolyfillといったものから逃れることは不可能といっても過言ではないでしょう。 (まだjQuery全盛の世界線で時が止まっている方は、「イマドキのJavaScriptの書き方2018」などを今すぐ読んでください。お願いします。) また、今はBabelという便利なものがあるので、とりあえず みたいに入れてしまえば、細かいことを気にすることなくいい感じに、古いブラウザでも動くコードを生成できる環境を用意できるようになりました。 ただ、Babelでとりあえず変換すれば動作してしまうが故に、細かい設定を見直さなかったり、そもそもどういった処理がなされているのかを理解していなかったり、ということも多々あるように思えます。(あくまで自分調べ) ので、今回は 「Babelのトランスパイルがどのように行われてい
CSSアニメーションを調べていたらWeb Animations APIというJavaScriptで同じことができることがわかったので、勉強も兼ねて簡単なライブラリを作ってみました。この記事はその時得た知識のまとめです。 Web Animations APIについて CSSのAnimationsとTransitionsをJavaScriptで実現できるAPIです。 現在は、ChromeとFirefoxで実装が進められています。 Safari(WebKit)とEdgeについてはTodoには入ってますが、まだ実装されていません。 web-animations-jsというpolyfillがあるので、そちらを使うとSafariやEdgeでも使えます。 成果物 今回作成したライブラリはパルス(波紋)のアニメーションです。 CSSアニメーションでも簡単に実装できます。これをJavaScriptでやります
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く