Webのフロントエンドを構成する技術、特にHTMLやCSS、JavaScript、またそれらに関連する話題を扱うBlogです。
PWAで使える（ようになる）機能3選
2015年にPWAが発表されてからすでに3年以上が経過していますが、現状はPWAというワードのみが独り歩きしてしまい、PWA対応することでどんなメリットがあるのかが具体的に分からないという意見をよく耳にします。そこで今回はファイルキャッシュなどのService Workerの機能以外の「インストールされたPWA」で使用できる機能をいくつかご紹介します。
※ご紹介する機能のうち2つはオリジントライアルのため、一般に公開するサイトでは実装しないようお気をつけください。
遂に来る！ Chrome 75にてLazyLoadが正式に実装されるようです🎉
皆さんこんにちは！春から肩書の頭に「リード」が付きましたリードUI開発者の宇賀です！
今後ともどうぞよろしくお願いいたします。
さて、つい先日の話ですがそれよりももっと素晴らしいニュースが飛び込んできました！！😲 なんと、CanaryではないGoogle Chrome 75にて、LazyLoad（遅延読み込み）が正式に実装されるとのこと...！🎉🎉🎉
ページの初期ロードでは見えている必要がない画像の読み込みを遅延させることで、ユーザー体験の質を向上させることができることから、今までもずっと注目されてきた技術です。
Native
-- Addy Osmani (@addyosmani) 2019年4月7日lazy-loading is coming to the web! https://t.co/LgF7F1iMgR
defers offscreen images until the user scrolls near them. Shipping in Chrome ~75 https://t.co/4gR7lvx4zx pic.twitter.com/luCHEfLkKD
これまでの議論や試験的に実装ではlazyloadという名前が使われておりましたが、loadingという名前で実装されることになったようです。対応する要素がimg要素とiframe要素である点はこれまでと変わりありませんね。
「遂に来る！ Chrome 75にてLazyLoadが正式に実装されるようです🎉」の全文を読む
VS CodeとMJMLでレスポンシブなHTMLメールを作成する
さまざまなデバイスに合わせたHTMLメールの作成って大変ですよね。デバイスの幅、メーラー固有のバグ、OS別のバグなど、考えることが多くて作成する前から気がめいってしまうものです。ですが安心してください。レスポンシブHTMLメール用のフレームワーク「MJML」を使えば、そういった悩みから解放されるかもしれません。当社のレスポンシブ Eメール デザインサービスでもこのフレームワークを使用しています。
ということで、今回はMJMLを使用したレスポンシブHTMLメールの作り方をご紹介します。
「VS CodeとMJMLでレスポンシブなHTMLメールを作成する」の全文を読む
教育目的のモブプログラミングを行う際に気を付けること
新年度をひかえ新卒研修のシーズンが迫ってきましたが、時期に限らず「効率的な初学者の教育方法」は通年頭を悩ませる課題の1つです。そこで今回はモブプログラミングを中途採用研修に導入した事例を紹介します。
「教育目的のモブプログラミングを行う際に気を付けること」の全文を読む
PerformanceNavigationTimingインターフェースを使って継続的な改善を
Webサイトのパフォーマンスを改善するには、まずボトルネックを調査、解析し、その結果をもとにコードの最適化、リソースの圧縮、CDNを利用した配信などさまざまな施策を行います。そのためWebサイトが完成した後に「さて、パフォーマンスをあげるか」と対策を始めたら想定していたよりもコストがかかってしまった、という経験をしたことがある方も多いかもしれません。
たしかに常にパフォーマンスに気を配りながら実装することはなかなか難しく、パフォーマンスの改善は後回しにしてしまいがちです。また、外部のプラグインなど自分の目の届かないところで予期せぬ箇所がパフォーマンスを下げていることも少なくありません。そこで今回はNavigation Timing APIに含まれるPerformanceNavigationTimingインターフェースを使用して、どのタイミングでどのくらい時間がかかっているかを計測し、テストを行うことで気づきを与えてくれる仕組みを作ってみます。