Webアプリ版Photoshopを実現させた最新Web技術をGoogleが紹介。WebAssemblyのスレッドによる高速化、ストリーミングコンパイル、Web Componentsなど
Webアプリ版Photoshopを実現させた最新Web技術をGoogleが紹介。WebAssemblyのスレッドによる高速化、ストリーミングコンパイル、Web Componentsなど Photoshopは画像の作成や加工といった専門的な用途を目的に、長年にわたって作り込まれた代表的なデスクトップソフトウェアの1つと言えます。 プロフェッショナルな用途を満たす膨大な画像処理の機能を細かく作り込まれたユーザーインターフェイスから操作し、画像の変形や加工、フィルタリングなどの大量の複雑な演算処理が実行されるなど、Webアプリケーションへの移植を難しくする要素が満載です。 それらの困難を克服し、Photoshop Webではデスクトップ版Photoshopでよく使われる一般的な機能を、類似のユーザーインターフェイスでWebに実装し、商用サービスとして提供することに成功しました。 Photosho
EngineeringHow we use Web Components at GitHubAt GitHub, we pride ourselves on delivering a first-class developer experience. A considerable part of our work is on our front end, which we strive to keep as lightweight, fast,… At GitHub, we pride ourselves on delivering a first-class developer experience. A considerable part of our work is on our front end, which we strive to keep as lightweight, f
対象読者 AngularやReactなどのフレームワークに頼らずに再利用可能なHTMLやCSSを整備したいマークアップエンジニア AngularやReactなどのフレームワークとWeb Componentsを併用する利点を学びたいJavaScriptエンジニア 前提環境 筆者の検証環境は以下の通りです。 macOS Monterey 12.4 Google Chrome 102.0.5005.115 Web Componentsを構成する3種のAPI群 前回は、再利用可能なUI部品があることの嬉しさと、ブラウザで再利用可能なUI部品を作るための技術「Web Components」について概要を解説しました。今回はもう少し解像度を高めて、どんな役割のAPIがあるのかを確認していきましょう。まずは前回の復習です。Web Componentsには大別して次の3つの技術の組み合わせによって成り立っ
TL;DR React は単なる UI ライブラリにとどまらず Routing, Bundling, Server Technologies までを統合した技術になろうとしている React Server Components はパフォーマンスだけでなく、「PHP, Ruby on Rails のシンプルなサーバサイド HTML 描画の世界に戻しつつ、サーバサイドとクライアントサイドの実装を同じ技術でシームレスに実装できるようにする」ことができる それにより、開発者から見た複雑さを下げられ、かつエンドユーザは良いパフォーマンス・良い体験を得られる React Server Comonents （以下、RSC）について、インターネット上の記事では主にパフォーマンスについて語られることが多い印象です。しかし、RSC のもう1つ重要な点として、RSC は我々の Web アプリケーション開発の体験
CSS in JSはJavaScriptのコードの中にCSSを書く手法の総称で、CSS Modulesやstyled-componentsなどがよく利用されています。 この記事では、筆者がCSS in JSについて考えてたどり着いた一つの解を紹介します。 また、そのために作ったライブラリreact-wcを紹介します。 Shadow DOMを活用する筆者がたどり着いた考えは、Web Componentsをそのまま使えばいいじゃんというものです。Web ComponentsはいくつかのWeb標準の総称で、特にここで重要なのはShadow DOMです。 CSS in JSが達成すべき目標の一つはスタイルのローカル化（書いたCSSを特定のコンポーネントに対してのみ適用し、他に影響を与えないこと）ですが、Shadow DOMはこの機能を備えたWeb標準ですから、これを利用することでスタイルのローカル
再利用可能なUI部品を組み合わせて画面を構築していくのは、多くのGUIアプリケーションにとって効率の良い開発手法です。ブラウザ向けにも多くのライブラリが再利用性を担保するための工夫を重ねてきましたが、実はブラウザ自身が再利用可能なUI部品を作成するための機能を備えていることはご存知でしょうか。本記事では、Web Componentsという名称で総称されるブラウザの機能について解説します。 対象読者 AngularやReactなどのフレームワークに頼らずに再利用可能なHTMLやCSSを整備したいマークアップエンジニア AngularやReactなどのフレームワークとWeb Componentsを併用する利点を学びたいJavaScriptエンジニア 前提環境 筆者の検証環境は以下の通りです。 macOS Monterey 12.3.1 Google Chrome 100.0.4896.127
CSS in JSはJavaScriptのコード中にCSSを書くプログラミング手法で、styled-componentsなどがメジャーどころです。現代的な開発では、ReactやVueといったフロントエンド用のViewライブラリを使う際にCSS in JSのお世話になることがよくあります。 この記事では、次の時代のCSS in JSはWeb Componentsベースのものになるのではないかという話をします。 Web Componentsの復習 Web ComponentsはいくつかのWeb標準の総称であり、特に重要なのはCustom ElementsやShadow DOMです。いずれも、V1と呼ばれる仕様は全てのモダンブラウザでサポートされています（Safariが一歩遅れていて少し心配ですが）。 https://caniuse.com/custom-elementsv1 https://c
Flutter3 と Amplify UI Components で認証付きのWebページを作ってみました | DevelopersIO
1 はじめに CX事業本部デリバリー部の平内（SIN）です。 Flutterは、iOS・Androidなどで共通したUIを一度に作ることができるフレームワークですが、Webアプリでも利用することができます。 今回は、Amplify UI Components を使用して、簡単に認証付きのWebページを作成してみました。 なお、Flutter対応のAmplify Authenticationは、2022/08/28現在、Developers Previewであり、Flutter SDK 3.0.0以上が必要です。 https://ui.docs.amplify.aws/flutter/connected-components/authenticator https://docs.amplify.aws/lib/auth/getting-started/q/platform/flutter/#
米Salesforce.com、JavaScriptフレームワーク「Lightning Web Components」をオープンソースに | OSDN Magazine
CRM大手の米Salesforce.comは5月29日、JavaScriptフレームワーク「Lightning Web Components（LWC）」をオープンソースで公開したことを発表した。 Lightning Web Componentsは最新のWebスタックを土台としたフレームワークで、ECMAScript 6以上のカスタムエレメント、テンプレートなどを利用してWebクライアントを作成できる。Salesforce.comが2018年12月に発表したもので、各種Webブラウザ上でネイティブに動くという標準のWeb ComponentsベースのUI技術を含む。 フレームワークのエンジンとなるLightning Web Components framework、70種類以上のUIコンポーネントのセットase Lightning Components、Salesforce.comのデータ、
HTMLにカスタム要素を実現する標準技術Web Components。事例をもとに技術特徴を解説 | レバテックラボ（レバテックLAB）
HTMLにカスタム要素を実現する標準技術Web Components。事例をもとに技術特徴を解説 2024年3月21日 執筆 山内 直 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）に所属するテクニカルライター。出版社を経てフリーランスとして独立。ライター、エディター、デベロッパー、講師業に従事。屋号は「たまデジ。」。著書に『Bootstrap 5 フロントエンド開発の教科書』、『作って学べるHTML＋JavaScriptの基本』など。 監修 山田 祥寛 静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代
Web Design System: Migrating Web Components To React | Mercari Engineering
This post is for Day 8 of Mercari Advent Calendar 2022, brought to you by Williams Kwan from Mercari Core team and Faisal Rahman from the Mercari Architect team. Intro Mercari internal design systems power the UI in Mercari web apps. It allows Frontend engineers to implement UI changes quickly by providing UI building blocks. The design system is currently built using Web Components but we are in
lib/Counter.svelteのファイル先頭に<svelte:options tag="my-counter" />を追加してコンポーネントをカスタム要素としてコンパイルするようにします。 tagで指定した文字列が、Web Componentsの名前となります。 <svelte:options tag="my-counter" /> <script lang="ts"> let count: number = 0 const increment = () => { count += 1 } </script> <button on:click={increment}> Clicks: {count} </button> <style> button { font-family: inherit; font-size: inherit; padding: 1em 2em; color:
概要 2021/04/22に新しいWeb Componentsライブラリ、Lit(Lit 2.0)がリリースされ、同日ローンチイベントもYouTubeで生配信されました。 それに伴いPolymer ProjectがLitに改名されロゴが刷新されました。 ウェブサイトも新しく公開されました。チュートリアルとPlaygroundが刷新され、非常に便利になりました。 実装は https://github.com/lit/lit に公開されています。 LitElementとlit-htmlのおさらい 旧Polymer Project（Lit 1.0）では、lit-html(HTMLテンプレートライブラリ)とLitElement(Web Componentsを実装するためのライブラリ)の2つのライブラリが提供されていました。 LitElementにもテンプレート機能があったので、2つとも独立したライ
Lightning Web Components A Blazing Fast, Enterprise-Grade Web Components Foundation To install Lightning Web Components and create an app, use the lwr tool. $ npm init lwr $ npm install $ npm run start Follow the instructions in your terminal. For Select a type of project, choose Single Page App and choose LWC as the variant. For more information, see Get Started with LWR.
やさしく学べるWeb Components 「やさしく学べるWeb Components」発行主旨・内容紹介 「やさしく学べるWeb Components」目次 「やさしく学べるWeb Components」Amazonでの購入はこちら 「やさしく学べるWeb Components」楽天市場での購入はこちら※電子書籍版です。 やさしく学べるWeb Components インプレスグループで電子出版事業を手がけるインプレスR&Dは、「技術書典」や「技術書同人誌博覧会」をはじめとした各種即売会や、勉強会・LT会などで頒布された技術同人誌を底本とした商業書籍を刊行し、技術同人誌の普及と発展に貢献することを目指す「技術の泉シリーズ」最新刊として、大木尊紀氏、水野廉也氏、アサオカアツコ氏、aggre氏著書による、Web Componentsとは何か、どうやって使うのかを解説した「やさしく学べるWeb
ひっそりと @catnose の友人としてZennのマークダウン部分の改善やエディターを開発している@steelydylan です。 ReactやVueなどのフレームワークの影に隠れてあまり注目されていないようにみえるWeb Componentsが今回活躍したのでメモがてら記事にしておこうと思います。 Web Componentsを使うまでのマークダウン表示の問題点 Zennのマークダウンには通常のマークダウン記法に加え独自の記法が存在します。 たとえば、上記の記法でTwitterのウィジェットが表示されます。 まさにこのウィジェットの表示には今回紹介するWeb Componentsの技術の一つであるCustom Elementsが利用されています。 実はZennのマークダウン記法は全てここのソースコードに集約されています笑 Zennではこういったオリジナルの記法を実現するためにマークダウ
GitHub - Polight/lego: 🚀 Low-Tech Web-Components Made Lightweight & Future-Proof.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
# Implementing single-file Web Components Probably everyone who knows the Vue.js framework also heard about its single-file components. This super simple idea allows web developers to define the entire code of a component in one file. It is such a useful solution that an initiative to include this mechanism in browsers has already appeared. However, it seems quite dead as, unfortunately, no progre
React と Web Components で Google Pay の統合が簡単になりました
.app 1 .dev 1 #11WeeksOfAndroid 13 #11WeeksOfAndroid Android TV 1 #Android11 3 #DevFest16 1 #DevFest17 1 #DevFest18 1 #DevFest19 1 #DevFest20 1 #DevFest21 1 #DevFest22 1 #DevFest23 1 #hack4jp 3 11 weeks of Android 2 A MESSAGE FROM OUR CEO 1 A/B Testing 1 A4A 4 Accelerator 6 Accessibility 1 accuracy 1 Actions on Google 16 Activation Atlas 1 address validation API 1 Addy Osmani 1 ADK 2 AdMob 32 Ads
Web Componentsを利用した段階的AngularJS脱出作戦 - builderscon tokyo 2019
Abstract 注: AngularJS: 〜v1.x, Angular: v2〜 (https://angular.jp/guide/releases) かつて一世を風靡したAngularJS もいまでは技術的負債のような扱いを受けるようになりました。2009年から開発が続けられてきましたが、ついに2021年6月をもってセキュリティアップグレードも止まり、完全な開発終了を迎えることになりました。 数多くのWebサイト、Webアプリケーションでは未だにAngularJSを使用したままです。稼ぎ頭のシステムに深く入り込んだフレームワークライブラリは、なかなか簡単に外れてくれません。フルスクラッチで新しく作り直すのは膨大なコストがかかりますし、追加開発を止められない場合には新しい変更にも追従し続ける必要があり、いつまでも終わらないプロジェクトになりかねません。 そこで選択したいのは、現行のシ
この記事は Salesforce Platform Advent Calendar 2019 - Qiita 第24日目の投稿です。 今回は、Lightning Web Components が生まれた経緯についてオブラートに包んでご紹介したいと思います。 Lightning Web Components 発表の衝撃 2018 年末、 Salesforce は Lightning コンポーネントを作成する新たなプログラミングモデルとして Lightning Web Components(LWC) を発表しました。そして誰もが思ったのです。 ーー え？また？？なんで？？？それ必要なの？？？？ そして少し冷静になった人たちは調べ始めました。 ーー っていうか、プログラミングモデルってなんだよ・・・ この 1 年間、Salesforce 上での画面開発は Lightning コンポーネントを開発
The Firefox UI is now built with Web Components - Brian Grinstead
A couple of weeks ago, we landed a commit that took years of effort at Mozilla. It removed “XBL”, which means we’ve completed the process of migrating the Firefox UI to Web Components. It wasn’t easy - but I’ll get to that later. The Firefox UI can be thought of as a very large single page app. It was built with DOM and JS from the start, which was a bold technology choice for a native application
For my first post on dev.to I thought I'd write about a nice, safe topic that's free of controversy: web components. I'm mostly writing this for my future self, so that I have something to point to next time someone asks why I'm a web component skeptic, and why Svelte doesn't compile to custom elements by default. (It can compile to CEs, and it can consume CEs as evidenced by its perfect score on
A few months ago, we introduced Lightning Web Components, a new JavaScript framework that leverages the web standards breakthroughs of the last five years. Today, we are excited to announce the open sourcing of the Lightning Web Components framework, allowing developers to contribute to the roadmap and to use the same framework whether they are building applications on Salesforce or on any other p
Zenn が Web Components を使って tweet を表示するようにしていたので、見習ってこのサイトにも取り入れてみた。 Web Components を利用した Zenn マークダウン部分の改善について 🔗 zenn.dev ZennEditor 内のコード 🔗 github.com 比較 何が良いのか？ 埋め込みコードの良くないところ <blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ほぼだいたい完全に理解した</p>— miyaoka / STUDIO (@miyaoka) <a href="https://twitter.com/miyaoka/status/1346720500387438593?ref_src=twsrc%5Etfw">January 6, 2021</a></bloc
よくある2ペインのレイアウト用コンポーネントを作りつつ、Web Componentsの仕組みを理解する｜masuidrive
よくある2ペインのレイアウト用コンポーネントを作りつつ、Web Componentsの仕組みを理解する Web Componentsを一言で説明すると「HTML/CSSが独立したカスタムタグを作れる仕組み」です。理解するには、まずは素のJavascriptだけでよくある部品を作ってみることが一番だと思います。 多くのサンプルではボタンやアイコンなどの部品を作りますが、今回はflexboxを使ったレイアウト定義のコンポーネントを作ってみます。この部分にはちょっとしたハマりどころがあるのでちょうど良い練習になります。 もう一つハマりやすいのはフォーム部品ですが、これはまた後日書きます。 この記事の前に 「今なら使えるWebComponents」を軽くでも読んでおいてもらえると嬉しいです。 2ペインのレイアウトを考える最初にWebアプリでよくある、左にナビゲーション、右にコンテンツを置く2ペイン
完全招待制のオンラインカンファレンス「PIXIV MEETUP 2023」。「創作活動を、もっと楽しくする。」というミッションを遂行するために、メンバーが普段行っている業務について、自らの言葉で語り、その想いと技術を共有する場です。 mimo氏は、ピクシブのデザインシステム「Charcoal」における、Web向けアイコンライブラリ「@charcoal-ui/icons」の実装について発表しました。全2回。前半は、「Charcoal」の概要と、「@charcoal-ui/icons」がWeb Componentsとして実装されている理由について。 登壇者の自己紹介とアジェンダ紹介 mimo氏：こんにちは。これから、「ピクシブのデザインシステム『Charcoal』アイコンライブラリをつくる」のセッションを始めていきます。 まず自己紹介からさせてください。自分は、mimoと申します。2022年に
「東京Node学園」は、Node.js日本ユーザグループ主催のNode.js勉強会です。36時限目の今回は、オンラインで開催されました。shibu_jp氏は、Web ComponentsライブラリであるLit 2.0の概要と、Web Componentsの部品の作り方を発表しました。 10年近く前に誕生したWeb Components shibu_jp氏（以下、shibu_jp）：10分なのに、スライド30枚以上もあるので、ちょっと駆け足でいきます。 まず「お前誰？」ということですが、現在はフューチャー株式会社でコンサルタントをやっています。JavaScript、Go、Pythonをよく書いているのですが、最近はお仕事でFlutterを書いています。 フューチャーは1次請けで、2次請けにも投げないで、開発・実装・運用・設計まで全部やるコンサルタントの会社です。Vue.jsのコアメンバーがい
GitHub - lamplightdev/aeon: A lightweight date picker built with web components that can be used anywhere
A lightweight date time picker built with web components that can be used anywhere No dependencies 🌞 - a standalone vanilla JS web component Lightweight 🌱 - 5kb gzipped Use anywhere 🌍 - use standalone or directly in your framework of choice with no wrappers Progressive enhancement 🥞 - if the code fails to load, fallbacks to a native picker or a simple text box Accessible 👨👩👧👦 - works w
はじめに あまり知られていないかもしれませんが、Svelteを使ってWeb Componentsを開発することができます。 本記事ではSvelteを使ってWeb Componentsを開発するやり方を紹介したいと思います。 Web Componentsとは webcomponents.orgから引用 Web Componentsは、WebプラットフォームAPIのセットで、WebページやWebアプリケーションで使用する、新しいカスタム、再利用可能な、カプセル化されたHTMLタグを作成することを可能にします。カスタムコンポーネントとウィジェットはWeb Componentsの標準に基づいて構築され、モダンブラウザで動作し、HTMLで動作するあらゆるJavaScriptライブラリやフレームワークで使用することができます。 Web Componentsは、既存のWeb標準をベースにしています。We
Web Components update - more time to upgrade to v1 APIs | Blog | Chrome for Developers
The Web Components v1 APIs are a web platform standard that has shipped in Chrome, Safari, Firefox, and (soon) Edge. The v1 APIs are used by literally millions of sites, reaching billions of users daily. Developers using the draft v0 APIs provided valuable feedback that influenced the specifications. But the v0 APIs were only supported by Chrome. In order to ensure interoperability, late last year
1 から Design System を作る場合にも、色々参考にするのが手っ取り早い。 Web Components にも色々問題は依然あれど、既に先人によるオープンソースなレポジトリがあるので、代表的なものを一覧にしてみる。 @ionic/core https://github.com/ionic-team/ionic-framework/tree/master/core ionic core は ionic チームが ionic frmework で使うコンポーネントを Web Component で実装した Design System。ionic は基本的に � モバイルアプリケーションを作るためのツールなのでそれ用に機能が最適化されているきらいはあるが、汎用的な部分の実装手段など参考になる部分は多い。 Stencil という Web Components 技術でコンポーネントを作る
Spring BootによるAPIバックエンド構築実践ガイド 第2版 何千人もの開発者が、InfoQのミニブック「Practical Guide to Building an API Back End with Spring Boot」から、Spring Bootを使ったREST API構築の基礎を学んだ。この本では、出版時に新しくリリースされたバージョンである Spring Boot 2 を使用している。しかし、Spring Boot3が最近リリースされ、重要な変...
CSSLab - Web Components Made Easy
Web Design CatalystCSSLab offers a selection of beautiful components that can be easily slotted into any of your web projects. Learn More
Web Components Will Outlive Your JavaScript Framework | jakelazaroff.com
If you're anything like me, when you're starting a project, there's a paralyzing period of indecision while you try to figure out how to build it. In the JavaScript world, that usually boils down to picking a framework. Do you go with Ol' Reliable, a.k.a. React? Something slimmer and trendier, like Svelte or Solid? How about kicking it old school with a server-side framework and HTMX? When I was w
【2024年版】Web Components詳細入門ガイド
誰にでも、できればやりたくないと思うプロジェクトがあるはずです。コードが管理不能になり、スコープが拡張し、修正の上に修正を重ねる有様。コードが絡まり合い、構造が崩壊。コーディングは混乱を招くことがあります。 そこで責任の所在がはっきりした、シンプルで独立したモジュールです。これを使用することで、プロジェクトはスムーズに進みます。コードをカプセル化すると、実装についての心配も軽減できます。あるインプットが与えられたときにモジュールが何をアウトプットするかが分かっていれば、その目標が「どのように達成されたか」を理解する必要は必ずしもないのです。 モジュールの概念を単一のプログラミング言語で理解するのは、難しいことではありません。しかし、ウェブ開発の世界では、多様な技術を組み合わせることが必要になります。ブラウザはHTML、CSS、JavaScriptを解析し、ページのコンテンツ、スタイル、機能
Easy to UseBased on web standards - just HTML! Future-proof. Easy to add to your project. LightweightTiny - come with a minimal footprint. Modular - take only the parts you need. Fast - built with performance in mind.
Open Web Components
Open Web Components Open Web Components provides guides, tools and libraries for developing web components Why Open Web Components? Smart Defaults Enjoy the peace of mind that comes from having a well-known default solution for almost everything. From linting to testing to demos to publishing - have the full experience. Awesome Generators Get up and running quickly with opinionated generators, or
クサアプリを支えるWeb Components を作った
GitHub のマイページのトップに生えている草のデザインで、いろいろなものを可視化できる Web Components, weed365 を作りました。 例えば、東京における Covid-19 の感染者数はこのように表示できます。 <weed-365 date="2021-05-14" kusas='{ ... // 中略 "2021-05-03": 592, "2021-05-04": 530, "2021-05-05": 604, "2021-05-06": 589, "2021-05-07": 598, "2021-05-08": 496, "2021-05-09": 431, "2021-05-10": 405, "2021-05-11": 363, "2021-05-12": 254, }' ></weed-365> <weed-365 date="2021-05-15" ku
HTML Web Components
I think the word “component” in “web components” confused a lot of people — at least it did me. “Web components” sounded like the web platform’s equivalent to “React components”. JSX had <MyComponent> and now the web had <my-component>. But when you try building web components the same way you build React components, it’s easy to get frustrated and give up because web components don’t work like Re
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
How we use Web Components at GitHub
フレームワークに頼らない！ フロントエンド技術「Web Components」のAPIを学ぼう
React Server Components は Web アプリ開発にどのような変化をもたらすか
react-wc: Web ComponentsとReactで実現するCSS in JSの形 - uhyo/blog
進化し続けるフロントエンド技術「Web Components」はライブラリ不要！――気軽に始めて開発の生産性を高めよう
次の時代のCSS in JSはWeb Componentsを従える
SvelteでWeb Componentsを作成し、CDNから配布して使う
Introducing "Lit" for Web Components
Lightning Web Components foundation - OSS Documentation
「Web Components」を優しく解説した一冊 - mojiru【もじをもじる】
Web Componentsを利用したZennマークダウン部分の改善について
Implementing single-file Web Components
Lightning Web Components はなぜ生まれたのか？ - Qiita
Why I don't use web components
Introducing Lightning Web Components Open Source
埋め込みTweetをWeb Componentsで描画するようにした
デザインシステムにおけるアイコンライブラリ実装の紆余曲折 ピクシブがWeb Componentsを選択した理由
React UIで人気の「Material You」がLitで実装予定 今度こそ流行って欲しいWeb Components
SvelteではじめるWeb Components開発 - Qiita
Web Componentsで作られているDesign System ライブラリ - nekobatoken
Githubが複雑なアプリケーションでWeb Componentsの開発を容易にするCatalystをリリース
Hello from UI5 Web Components | UI5 Web Components