2023年5月にリリースされたGoogle Chrome 113で、次世代WebグラフィックスのJavaScript APIであるWebGPU（ウェブジーピーユー）がデフォルトで利用できるようになりました。ICS MEDIAでは2018年にWebGPUについて紹介していましたが、当時はSafariで開発者向けのフラグを有効にした場合にのみお試しできる実験的機能でした。 デスクトップChrome限定ではありますが、WebGPUが一般ユーザーの環境でも動作できるようになったいま、オリジナルのデモを交えてあらためてWebGPUを紹介します。 この記事で紹介すること WebGPUがChrome 113で標準で利用可能になった WebGPUはモダンな3D APIに直接アクセスすることで、WebGLより高い性能が得られる WebGPUだとドローコールの最適化をしなくても十分に高速 WebGPUはコンピ

ウェブの表現がリッチになるに従い、コーポレートサイトやキャンペーンページのような「普通のウェブページ」でもモーダルダイアログやアコーディオンといった、ちょっと凝ったUIを見かけることが増えてきました。こうしたUIが必要な場合、皆さんはどのように実装していますか？ 2023年3月にモーダルダイアログの実装について聞いたアンケートでは<div>で自前実装派とJSライブラリ利用派で回答が二分されました。 この記事ではリッチで使いやすいUIを実装するための選択肢として「ヘッドレスUI」ライブラリを紹介します。ヘッドレスUIライブラリも大きな括りでは「JSライブラリ利用派」に含まれますが、古くから定番のBootstrapやMaterial UI・Vuetifyなどとはちょっと毛色の違う存在です。 ヘッドレスUIとは？　BootstrapやVuetifyとは何が違う？ ヘッドレスUIとは「デザイン（見

グーグルが開発した画像圧縮ツールSquoosh。フロント開発向けにNode.jsで扱う方法まとめ 『Squooshスクーシュ』というGoogleが開発した画像圧縮ウェブアプリがあります。ブラウザで変換結果を見ながら圧縮設定ができるので、画像圧縮の難しい知識を持たない方でも使いやすいことが特徴です。圧縮だけでなく、WebPなどの各種フォーマットへの変換・リサイズといったこともできる便利ツールです。 このSquooshをNode.jsで扱える『libSquoosh』が存在します。libSquooshは大量の画像を一括で圧縮、WebPへの変換、リサイズなどの処理をこれ1つで完結できるのがポイントです。昨今のウェブはページの読み込み時間が重視される傾向があります。画像のファイルサイズは読み込み時間に大きく影響するため、画像圧縮は重要なテクニックです。libSquooshをwebpack・Viteと

徐々に日本でもメジャーなデザインツールとなっている「Figma」。前回の記事『FigmaのSmart Animateを活用したプロトタイプ入門』では、簡単にアニメーションを実現できる「Smart Animate」機能を紹介しました。 本記事ではデザイン制作とその後のコーディング作業を強力にサポートしてくれる「Auto Layout」について詳しく紹介します。「Auto Layout」はデザインを効率よく進められるだけでなく、デザイン段階でHTML・CSSコーディングの参考になる情報を追加できます。 デザイン段階での使い方はもちろん、Figmaでデザインを受け取ったエンジニアがどう考えて実装していくべきかまで紹介します。デザイナーはもちろん、Figmaで作られたデザインファイルを受け取る可能性があるエンジニアの方も是非ご覧ください。 Auto Layoutとは 「Auto Layout」とは

近年、ウェブ技術の発展により、画像の一部だけを表示する「マスク表現」がよく見られるようになりました。一言でマスクと言っても、アニメーションやインタラクションとの組み合わせによりさまざまな表現が可能です。 また、どの技術を用いるかという選択も重要になります。マスク表現はCSS, SVG, Canvas APIといった技術で実現できますが、それぞれが異なる得意分野をもちます。 本記事の前半では、マスク表現を実現する技術について解説を行います。後半では実践的なマスク表現をいくつか紹介しながら、それぞれの実装方法を紹介します。いままで技術的に難しいと諦めていた表現が、マスクによって実現するヒントになれば幸いです。 ▼マスク表現の例（背景画像の一部を表示している） - Erika Moreira Portfolio マスクとは 本記事で紹介するマスク表現とは、画像の一部を切り抜く手法です。マスキング

画面サイズだけではなく、デバイスのユーザー設定に対してレスポンシブにできる新しいCSSのメディアクエリーが登場しています。スマートフォンやパソコンで、画面サイズに応じてレイアウトが変化する「レスポンシブ・ウェブ・デザイン」はほとんどのウェブサイトで実装されているでしょう。新しい世代のレスポンシブ手法は、画面サイズだけでなくユーザー設定に対して挙動やスタイルを変更させることができ、ユーザービリティーやアクセシビリティーの向上に役立ちます。 本記事では事例とあわせて最近のレスポンシブ手法を紹介します。 この記事で紹介すること ダークモード対応 モーションの無効化設定 iOSのフォントサイズ変更 ダークモード対応 OSには外観モードの設定項目があります。Windows 10やmacOS、iOS、Androidのいずれもライトモードとダークモードの切り替え機能が提供されています。ライトモード・ダー

ページの背景で動くダイナミックなパーティクルやラインアニメーション、あるいはちょっとした遊びごころの溢れるキャラクターアニメーションなど、webページにクリエイティブな表現を組み込めるようになりたいと考える方はエンジニアにも多いでしょう。 この記事では、基本的なJavaScriptの知識があれば誰でも始められるp5.jsというライブラリを使用して、クリエイティブな作品作りの入門を解説します。 環境面では、フロントエンド開発のデファクト・スタンダードとも言えるVisual Studio Code（以下VS Code）とTypeScriptを使用して、モダンで快適な開発環境を作ります。 環境構築といっても、とくに難しい作業はありません。記事を読みながらぜひ、オリジナルの作品作りにチャレンジしてみてください。 ▼ VS Codeでp5.jsを使って制作している環境の例 クリエイティブ・コーディン

ウェブ業界の当たり前だと思っていることでも、同業他社の人には違う常識があるかもしれません。自分が業界多数の傾向と違うところはどこなのか・・・、この連載ではアンケートデータから国内のウェブ業界の傾向を分析します。 連載第6回目となる本記事ではウェブ業界の「HTMLコーダーにとっての2020年」と題してアンケート結果を紹介します。 HTMLのエディター HTML制作によく使われるエディターはどれでしょう？ アンケートで質問してみました。 805票の回答があり「VS Code」が64.5%、「Atom」が8.8%、「WebStorm」が8.2%、「その他」が18.5%でした。 VS Codeは圧倒的な人気ですね。ICS MEDIAでは記事『VS Codeの拡張機能7選』で紹介しているとおり、無料のソフトウェアなのに開発を便利にする機能がたくさん揃っていて魅力的です。 WebStormの回答者数は

Webにおける表現はどんどん進化しています。Webサイトには当然のように動画が埋め込まれるようになり、CSSやSVG、canvasでのさまざまな表現が頻繁に見られるようになりました。さらにAR、VRといった表現も台頭し筆者も毎日ワクワクしながらインターネットの海を泳いでいます。 その中であまりメジャーではないと感じるのは「音」による表現です。もちろん音を用いた素晴らしいWebサイトはたくさんありますが、環境の制約が視覚表現以上に大きいため多くは見られないのでしょう。 とはいえ、音と視覚表現を組み合わせることによって表現できる世界観、インタラクション、その他諸々は計り知れないと筆者は思っています。今後オーディオなどの技術の進歩によって上記で述べた制約も乗り越えられるようになるかもしれません。時代を先どりしたい読者に向けて、今回の記事ではWebで音を扱う技術Web Audio APIについてお

box-shadowだけじゃない！CSSでできる色々な影の表現と意外に知らない落とし穴 ウェブページのデザインやコーディングをしている人なら、誰でも一度は影をつけたことがあるでしょう。一方でその影にどれほどの表現や技術のバリエーションがあるか、意識したことのある人は少ないかもしれません。 影を付ける方法としてはCSSのbox-shadowが一般ですが、そのほかにもいくつもの技術・手法が存在します。ウェブの世界に限らず、年々変化するデザイントレンドにおいても影の扱いは重要なテーマです。 たとえば少し前に流行したロングシャドウや今年のトレンドとも言われるNeumorphism（ニューモーフィズム）など、ユニークな表現には影のテクニックを活用できるものがたくさんあります。 ▼ CSSで作成したロングシャドウ（画像上部）とニューモーフィズム（画像下部）の例： デモを別ウインドウで表示 デモのソース

「Visual Studio Code（略称：VS Code）」はMicrosoftが提供している無償で高機能なエディターです。標準でも十分な機能は備わっていますが、拡張機能をインストールすることで、より使いやすく自分にあったエディターへとカスタマイズできます。 本記事では、HTMLコーダーやフロントエンドエンジニアに役立つ拡張機能を紹介します。 1. IntelliCode IntelliCodeはMicrosoft謹製の公式プラグイン。AI支援による次世代のコード補完がJavaScriptやTypeScriptで利用できるようになります。APIの一覧がアルファベット順に提示されるのではなく、利用する可能性の高いAPIがAIによって予測されます。 コード補完の様子を次のスクリーションショットでご覧ください。入力候補の「★」マークが付いているところが、補完候補になっているところです。人工知

「Visual Studio Code（略称：VS Code）」はMicrosoftが提供している無償で高機能なエディターです。標準でも十分な機能は備わっていますが、拡張機能をインストールすることで、より使いやすく自分にあったエディターにカスタマイズできます。 前回の記事では、「HTMLコーダー」「フロントエンジニア」に役立つ拡張機能を紹介しました。本記事では、開発者全般の方に役立つ拡張機能を紹介します。 エディターを強化する拡張機能 1. Clipboard Ring テキストを「コピー」や「切り取り（カット）」したものを「貼り付け（ペースト）」する場合に、この拡張機能を入れることで複数件の内容を記憶できます。ctrl+shift+v（⌘+shift+v）を押すごとに過去の情報に切り替えられます。デフォルトでは10件の情報を記憶できますが、設定を変更することで記憶する件数を増やすことも可

「Visual Studio Code（略称：VS Code）」はMicrosoftが提供している無償で高機能なエディターです。標準でも十分な機能は備わっていますが、拡張機能をインストールすることで、より使いやすく自分にあったエディターへとカスタマイズできます。 本記事では、HTMLコーダーやフロントエンドエンジニアに役立つ拡張機能を紹介します。 1. IntelliCode IntelliCodeはMicrosoft謹製の公式プラグイン。AI支援による次世代のコード補完がJavaScriptやTypeScriptで利用できるようになります。APIの一覧がアルファベット順に提示されるのではなく、利用する可能性の高いAPIがAIによって予測されます。 コード補完の様子を次のスクリーションショットでご覧ください。入力候補の「★」マークが付いているところが、補完候補になっているところです。人工知

ウェブの3Dグラフィックスを扱う新しい仕様として提案されているWebGPU。仕様はまだ提案の段階ですが、すでに広く普及しているWebGLと比べて一体なにができるのでしょうか？　本記事ではWebGPUで使用できる筆者イチオシの機能、コンピュートシェーダーについて紹介します。 WebGPUについて詳しくは前回の記事「次世代仕様のWebGPUとは？　」をご覧ください。 ▲WebGPUのコンピュートシェーダーを使って並列ソートの一種である「バイトニックソート」を実行するデモ。CPUとGPUとの実行時間を比較したところ、WebGPUを使った場合は10倍高速な結果となった ▲ランダムな要素が「バイトニックソート」アルゴリズムでソートされていく様子を可視化したデモ。ソートの計算とレンダリングにWebGPUを使用している コンピュートシェーダーとはGPGPUを行うためのシェーダー GPU（グラフィックス・

ブラウザ拡張Selenium IDEで ユーザー操作を記録・再現できる！ UIテストの自動化に活用しよう Selenium IDE（セレニウム・アイディーイー）とは、ブラウザ操作を記録・再現できるChrome、Firefoxで利用可能な拡張機能（アドオン）です。 手軽に記録・再現ができるため、アイデア次第で色々な使い方ができます。筆者は、会社の打刻操作（社内サイトへアクセス → ログイン → 打刻ページへ遷移 → 打刻ボタンをクリック）を記録し、自動実行することでいち早く出社ができるようにしていました。 その他にも開発時に繰り返し行うようなデバッグ作業やルーティーン作業を記録することで、以下のような活用もできます。 入力フォームなどに文字を入力する操作を記録しておき、自動入力させる。 ゲームやSPAのデバッグ時に、スタート画面からデバッグしたい画面までの移動操作を記録しておき、任意の画面へ

SVGアニメーションを用いると、さまざまなサイズのディスプレイで印象的なマイクロインタラクションを実現できます。マイクロインタラクションの導入によってUI改善に役立てているケースもあるでしょう（参考「SVGで始めるマイクロインタラクション入門」）。SVGでアニメーションを実装するには、CSSを使う方法、JavaScriptを使う方法、動画作成ソフトを使う方法等、さまざまなアプローチがあります。 今回は、コーダー、フロントエンドエンジニア、デザイナーの分野別のSVGアニメーションのアプローチ方法を挙げ、その特徴と具体的な実装方法について紹介します。 CSSでSVGアニメーションを実現する方法（コーダー向け） コーダーにオススメするSVGアニメーション実現方法の1つは、CSSプロパティを使う方法です。 SVGはCSSプロパティによってグラフィックの形状を変更できます。たとえば、次のコードでは、

webpack（ウェブパック）とはJSファイルをまとめる高機能なモジュールバンドラー。まとめることでウェブページのHTTPリクエストの数を減らしたり、高度なウェブアプリケーションの開発に役立ちます。 連載ではTypeScriptやBabelなどのES2015+の環境構築、ReactなどのJSライブラリの設定方法を網羅。サンプルファイルで詳しく解説します。 webpackの入門記事は他のサイトにもありますが、対象バージョンが古くて使えなかったりします。検索結果の上位の野良記事を参照にしたら古いバージョンの内容ばかり。解説記事通りにやったのにうまく動かない･･･なんて困った方も多いのではないでしょうか。本記事は常に最新版に対応させているので、安心して読み進めてください。 ※本記事では2023年3月現在のwebpack 5（2020年10月リリース）以上で解説しています。 本記事で解説しているこ

ウェブサーバーのコンテナーを作成 # docker-compose.ymlのwebコンテナ部分を抜粋 web: build: ./web ports: - "80:80" - "443:443" volumes_from: - app volumes: - ./web/nginx.conf:/etc/nginx/nginx.conf ウェブサーバーは前回の記事で作成したDockerfileを利用します。webという名前のフォルダーにDockerfileとnginx.confを格納し、Dockerfileを格納したフォルダーのパスをbuildで指定してください。ただし、ウェブサーバーの設定ファイル（nginx.conf）は外部化しておきたいため、volumesでwebフォルダーに格納したnginx.confをコンテナー内（/etc/nginx/nginx.conf）にマウントします。 ngi

最新版！ Lottieアニメーションの実装方法 - Lottie-Player編 4月5日公開澤田 悠♥ 35

HTMLのアニメーション実装に役立つさまざまなJavaScriptライブラリがあります。前回の記事「現場で使えるアニメーション系JSライブラリまとめ」ではJSライブラリ7種類の特徴を紹介しましたが、本記事ではそれらのパフォーマンスを比較します。 JSライブラリのパフォーマンスが良いほど、たくさんのアニメーションがあっても滑らかに動きます。また、パフォーマンスがよければCPUへの負荷が低くなるため、サイト訪問者のスマートフォンの消費電力にも優しいとも言えます。ウェブ制作者はJSライブラリのパフォーマンスにも気を配りたいものです。 今回検証したJSライブラリ アニメーション（トゥイーン）用のJSライブラリやテクノロジーとして次の9種類で比較しました。バージョンは2022年5月現在の最新版を利用。ウェブページ用途の①DOM版と、ハイパフォーマンス用途の②WebGL版の2通りの方法で検証しています