ログイン読み込んでいます…

全モダンブラウザ対応のCSS機能が爆増。Chromium版Edgeのもたらす次世代CSS表現 2020年初め、Chromium版のMicrosoft Edge（以下新Edge）がリリースされました。新Edgeは「Microsoft Edge Legacy」（以下Edge Legacy）と比べて多くの機能が使えるようになっており、Chrome・Firefox・Safariのモダンブラウザと遜色ないレベルになっています。 先日5月29日にリリースされた「Windows 10 May 2020 Update」では、Edge Legacyの開発が終了することもアナウンスされており（参考記事「Windows 10 features we’re no longer developing - Windows Deployment」）、今後のWindows標準ブラウザは新Edgeとなっていくでしょう。 ウ

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

モダンブラウザでサポートされているCSSの疑似クラスを使えば、JavaScriptでフォーム状態を監視することなく、CSSで状態を検知できるようになりました。また、HTMLのpattern属性を使えば入力バリデーション機能（※）もつけられます。これらを活用することで以前よりも手軽にインタラクティブなフォームを実現できます。 デモを別ウインドウで再生する ソースコードを確認する ※あくまでform要素への入力バリデーションなので、送信される値に対して保証はありません。送信される値をチェックするにはサーバー側のバリデーションが別途必要になります。 さまざまな状態を選択できる疑似クラス 疑似クラス（Pseudo-classes）はCSSで使えるセレクターの一種で特定の状態の要素を指定できます。:hoverも疑似クラスの1つです。::afterは「疑似要素」と呼ばれ、表記は似ていますが呼び名が違う

Reactでのシングルページアプリケーションを作成していると、必ず意識しなくてはいけないのが状態管理です。Hooks APIの登場により、アプリケーションの状態管理方法にも選択肢が増えてきました。2023年のReactアプリケーションの状態管理方法はどのような選択肢が考えられるでしょうか？ 状態管理の選択肢 Reactの状態管理として本記事でには紹介している手法は下記の4通りになります。 ローカルステート（useState、useReducer）での管理 Hooks APIのuseReducer、useContextを使った管理 Reduxによる管理 Recoilによる管理 状態管理フレームワークは他にも選択肢がありますが、Reduxを紹介します。理由は、候補として挙がるライブラリの中でもっともシェア数が多く、知名度が高いためです。 下図は、主要なReact状態管理フレームワークのダウンロ

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

機能改善だけでなく、非推奨になった機能も多いですね。 2015年〜　ES2015の正式リリース前 2015年6月まではES2015が正式リリースされていなかったため、Reactのコンポーネントの作成にはReact.createClassが使われていました。 React独自のクラスコンポーネントを生成する機能です。 var Component = React.createClass({ render: function() { return ReactDOM.tagName({options, "Hello"}) } }); React.renderComponent( Component(null), document.getElementById("root") ) 2016年〜　クラスコンポーネントの時代 Reactバージョン15.0.0からはReact.createClassはほとん

Adobe XDステート機能を使いこなそう！ ホバー、カルーセル、ハンバーガーメニューの効率的な作り方 AdobeXD2019年11月の大型アップデートで「ステート機能」が登場し、リッチなインタラクションを作成しやすくなりました。従来はアートボードを複数枚組み合わせて表現するしかなかったのですが、ステート機能の登場によって簡単にできるようになっています。 今回はホバーボタン、スライダー、ハンバーガーメニューなど実例を交えながら、ステート機能の基本と一歩進んだ使い方を紹介します。AdobeXDは使っているけどステート機能は触ったことがない、ステート機能をイマイチ使いこなせてないという方はぜひご覧ください。 ステート機能の基本 簡単にステート機能について振り返っていきます。 ボタンなどの要素は、ユーザー操作によって状態が変わることがあります。たとえば、一般的な「いいねボタン」であれば最低でも「

※ CSS Animationに関してはWeb Animation APIを使うことでより簡単にJavaScriptからアニメーションを構築・制御できるようになります。2020年2月時点ではブラウザの実装が不十分でPolyfillを要するため、この記事では対象外としています。 専用ライブラリを使わずにアニメーションを作ろう 各ライブラリは特別な魔法を使っているわけではありません。 原理的にはCSS・SVG・WebGLといった各要素技術をしっかりと習得すれば、専用のライブラリと同等のことができるばかりか、より高い自由度を手に入れながら軽量化を実現できる可能性もあります。 また、専用のライブラリを利用する場合にも、基礎となる原理や各技術の得意不得意を知っていることは大きな武器となるでしょう。 Vue.jsを使ってCSSやSVGのアニメーションを書く とは言え、これらのアニメーションを土台の技術

ジェネラティブアートという言葉をご存知でしょうか？　アルゴリズムによって作られる芸術作品を指す名称です。Pinterestで「generative art」と検索すると静止画、動画ともにたくさんの作品を見ることができます。 無機質さを感じさせるものもあれば、まるで生きているように感じる作品もあります。創作者たちはどのようなところから着想を得ているのでしょうか？ 彼らの中には数学的な幾何学模様や物理現象、果ては生物が織りなす複雑なパターンをコンピューターで再現することにより作品を作る者もいます。 本記事では特に「生物」に焦点を当てます。生物の複雑な営みを紐解いた背景や、それをアルゴリズムに落とし込むことで可能になった表現を紹介します。 本記事を読むことで日常に潜むあらゆる現象が芸術の種に見える喜びを感じていただければ幸いです。 サンプルはHTML CanvasとJavaScriptで作成して

berry(yarn v2) がそろそろリリースということで、使い込んでみた。その感想や yak-shaving などについて。 このリポジトリ https://github.com/mizchi/berry-typescript-project 日本語での網羅的な解説はこちらの記事がくわしい https://qiita.com/dojineko/items/6f65fde3c47aed8b6318 本記事は pnp の仕組みと webpack, jest, typescript を設定する泥臭い話がメイン。 使ってみた感想 npm とは完全に別系統に進化しつつある。互換があんまりない。 今対応するのは時期尚早でアーリーアダプターだけでよい berry 自体が typescript で書かれているので、typescript 連携は揃っている。ただし @arcanis 氏の手が届く範囲で。

CSSでグラデーションがかけられるようになって久しいですが、ただ2色をつないでいるだけの人も多いのではないでしょうか？　あるいはジェネレーターでコピペして終わりにしてはいないでしょうか？ 実は、値を細く設定することで、グラデーションに留まらない、より豊かな表現を実現できます。工夫すればこんな表現もCSSのみで行えます。 後半の応用例の実装は手入力のCSSでは困難な部分もあるので、SCSSを使って記述しています。SCSSを使うとCSSだけでは難しい処理もスムーズに行え、mixin機能を使えば、面倒な入力手間も省けるので便利です。記事内で紹介しているグラデーションの生成mixinも用意しました。 デモを別ウインドウで再生する 使われているmixinを確認する CSSグラデーションの種類 CSSグラデーションは色を扱うのでbackground-colorプロパティを使いたくなりますが、backg

JavaScriptのモダンな書き方 - ES2020のオプショナルチェーン、null合体演算子、動的import、globalThis等を解説 JavaScriptの仕様であるECMAScriptは年次で仕様が更新されています。ECMAScript 2020（ES2020）は2020年6月にリリースとなりました。現行のすべてのブラウザでES2020の機能は利用できますが、フロントエンドエンジニアにとって使いこなしたい記法ばかりです。 本記事ではES2020に焦点をあて、JavaScriptの新しい記述方法のメリットと使いどころを解説します。 オプショナルチェーン Optional Chaining（オプショナルチェーンやオプショナルチェーニングと呼ばれています）とは、?.構文を用いてnullやundefinedになりうる値へ安全にアクセスできる仕組みです。 利用シーン nullやunde

アプリの方はまだ日本語版のみですが少しずつ改善を続けています。このnoteの中でオススメの英語ツールについて記事を書くと宣言していたものの、なかなか時間がとれず遅くなってしまいすみません。数年前の記事の書き直しではありますが、誤っていた部分を修正し、情報を最新版にして改めて書いてみます。 というわけで、今回は英語の補助ツールの紹介です。知っている人からすれば定番中の定番ではありますが、だからこそ英語を勉強中の方でも設定してしまえばきっと長い間使うことになると思うので、まだ設定していない方はぜひこの機会にやってみてください。パソコンでのGoogle Chromeを使った設定になります。 爆速ポップアップ辞書 英文のドキュメントを読んでいるときに意味を知らない単語が出た場合、いちいち翻訳サイトに飛んだり、辞書を開いたりするのは面倒ですよね。そんなときに使えるのがポップアップ辞書になります。ポッ

太陽と影を動かし、実在しない鳥の写真まで生み出す。 嘘写真まで見破る人工知能の進化 (Adobe MAX 2019での研究発表) 米アドビシステムズが主催のクリエイティビティ・カンファレンス「Adobe MAX 2019」（ロサンゼルス）。2日目の11月5日は「スニークス」と題してAdobeの研究中の技術が発表されました。スニークスはAdobe MAXで最大の盛り上がりをみせる恒例の人気イベントです。 現時点では製品に未搭載であるものの、将来的に製品に組み込まれるかもしれない技術。いままでもスニークスで発表された技術のいくつかはCreative Cloudの製品に組み込まれています。今年はハリウッド映画をテーマとしたステージ装飾のなか、アドビの若手エンジニア12名が発表しました。 太陽の位置は後から修正できる 太陽の影を自在に操れる技術「Light Right Sneaks」。静止写真に対

おそらく多くのWebデザイナーが待ち望んだであろうiPad版のPhotoshopがリリースされました。 私はiPad Pro 9.7インチモデルでさっそく使用してみたのですが、なかなか驚きの完成度だったのでどのようなアプリか紹介したいと思います。 著者は 神速Photoshop [Webデザイン編] をはじめとしたPhotoshopやIllustratorの解説書を書いている @Stocker_jp です。 まずは写真補正から 一眼レフカメラで取り込んだ写真を現像しようとRAWデータを開こうとしても、Photoshopアプリでは開くことができません。 先にLightroomアプリで現像しJPEG形式で書き出す必要があります。 続いてPhotoshopアプリで明るさやコントラストの強さを微調整しようとトーンカーブ補正を探したのですが［調整レイヤー］一覧の中にありませんでした。 さすがに何かの

前回、リアルなタピオカを作りましたが、今回は目玉焼きを作りました。コードはあまり整理されていませんが、そこはご了承ください。 #完成品はこちら See the Pen sunny-side up by Nishihara (@Nishihara) on CodePen. 概要 基本的な作り方は前回と同様、円形グラデーション（background-image: radial-gradient()）とフィルターのぼかし（filter: blur()）を駆使して作っています。前回になかった要素としては、凹の字型でなめらかにつなぐ要素を追加しています。 本体を作る .shiromi { background-color: $shiromi; z-index: 1; &-body1 { width: 150px; height: 150px; border-radius: 50%; position

ウェブのリッチな表現としてスクロールに応じたエフェクトがあります。これまでJavaScriptのscrollイベントで実装していましたが、Intersection Observer APIを使うとより効率的に実装できます。ブラウザーのサポートも拡充し、今後は標準となる技術でしょう。 ▼スクロールで目次の色が変わるエフェクト 本記事ではIntersection Observer APIの使い方と実践例を解説します。 特定の位置で発火する従来の手法 これまで、特定の位置で発火するイベントにはscrollイベントを使う必要がありました。以下のコードは、あらかじめページ上部からの距離を取得し、スクロール量が規定に達したところで発火させる手法です。 window.addEventListener("scroll", () => { const srollVal = window.pageYOffse

今日ではwebサイトでも積極的に3Dおよびインタラクティブな手法が用いられています。これによって画面に入りこむような、より没入感のある体験が可能となりました。商品を3D化して360度から見られるwebサイトなど見たことはないでしょうか。 一方で、インタラクティブな3Dコンテンツを作るには導入の敷居が高く感じられ、尻込みしてしまう方も多いでしょう。その敷居を下げてくれるのが『cablesケーブルス』です。 cablesは開発はundevというベルリン/ケルンが拠点のデザインスタジオが行っており、ブラウザ上で視覚的にプログラミングが行えるツールです。インタラクティブな3Dコンテンツの作成を簡単に行うことができ、デザイナーにもエンジニアにも使いやすいツールとなっています。面倒なセットアップも必要ありません。 ▼ 編集画面の例 本記事ではcablesを極めればどんなコンテンツが作れるかを紹介し、簡

ウェブのフロントエンド開発に役立つライブラリとして、VueとReact、Angularがよく取り上げられます。これらのライブラリは、SPA（シングルページアプリケーション）の開発に役立つ多くの機能を持っています。 フレームワークを選定するには、「人気だから使う」という短絡的な理由で選択をするのは望ましくありません。設計思想や機能の種類、学習コストなどの観点で、プロダクト・プロジェクトチームへの適性を検討するのがセオリーです。幸いにも、それぞれを比較した記事がウェブに数多くあり、選定のヒントを簡単に得ることができます。 一方、機能面の比較ばかりが取り上げられ、性能面で紹介されている記事が少ないように見受けられます。記事『サービスにおいて速さこそが神である｜深津 貴之』でも紹介されているように、昨今のウェブはスピードが求められる時代でもあり、ライブラリの性能評価の記事があってもよいのではないで