1 - 40 件 / 65件
タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
Webアプリ版Photoshopを実現させた最新Web技術をGoogleが紹介。WebAssemblyのスレッドによる高速化、ストリーミングコンパイル、Web Componentsなど Photoshopは画像の作成や加工といった専門的な用途を目的に、長年にわたって作り込まれた代表的なデスクトップソフトウェアの1つと言えます。 プロフェッショナルな用途を満たす膨大な画像処理の機能を細かく作り込まれたユーザーインターフェイスから操作し、画像の変形や加工、フィルタリングなどの大量の複雑な演算処理が実行されるなど、Webアプリケーションへの移植を難しくする要素が満載です。 それらの困難を克服し、Photoshop Webではデスクトップ版Photoshopでよく使われる一般的な機能を、類似のユーザーインターフェイスでWebに実装し、商用サービスとして提供することに成功しました。 Photosho
AI & MLLearn about artificial intelligence and machine learning across the GitHub ecosystem and the wider industry. Generative AILearn how to build with generative AI. GitHub CopilotChange how you work with GitHub Copilot. LLMsEverything developers need to know about LLMs. Machine learningMachine learning tips, tricks, and best practices. How AI code generation worksExplore the capabilities and be
対象読者 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つの技術の組み合わせによって成り立っ
再利用可能な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
@r2wc/react-to-web-component は React コンポーネントを Web Components に変換するためのライブラリです。このライブラリを使用することで、React コンポーネントを任意の HTML 要素として使用することが可能になります。 @r2wc/react-to-web-component は React コンポーネントを カスタム要素 に変換するためのライブラリです。このライブラリを使用することで、React コンポーネントを任意の HTML 要素として使用することが可能になります。 使い方 例として、以下のような React コンポーネントがあるとします。 import React from "react"; export const HelloWorld = () => { return <p>Hello, World!</p>; }; @r2
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
HTMLにカスタム要素を実現する標準技術Web Components。事例をもとに技術特徴を解説 2024年3月21日 執筆 山内 直 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)に所属するテクニカルライター。出版社を経てフリーランスとして独立。ライター、エディター、デベロッパー、講師業に従事。屋号は「たまデジ。」。著書に『Bootstrap 5 フロントエンド開発の教科書』、『作って学べるHTML+JavaScriptの基本』など。 監修 山田 祥寛 静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代
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つとも独立したライ
ひっそりと @catnose の友人としてZennのマークダウン部分の改善やエディターを開発している@steelydylan です。 ReactやVueなどのフレームワークの影に隠れてあまり注目されていないようにみえるWeb Componentsが今回活躍したのでメモがてら記事にしておこうと思います。 Web Componentsを使うまでのマークダウン表示の問題点 Zennのマークダウンには通常のマークダウン記法に加え独自の記法が存在します。 たとえば、上記の記法でTwitterのウィジェットが表示されます。 まさにこのウィジェットの表示には今回紹介するWeb Componentsの技術の一つであるCustom Elementsが利用されています。 実はZennのマークダウン記法は全てここのソースコードに集約されています笑 Zennではこういったオリジナルの記法を実現するためにマークダウ
DEV Community Follow A space to discuss and keep up software development and manage your software career Future Follow News and discussion of science and technology such as AI, VR, cryptocurrency, quantum computing, and more.
マイクロフロントエンドは、機能やチーム単位でフロントエンドを分割し、柔軟な設計や開発体制を実現する手法として、近年注目を集めています。 本記事では、株式会社マネーフォワードでワークフローエンジン開発を担当されている金子さんに、マイクロフロントエンドの導入背景や、技術選定・設計上の工夫について、詳しくご紹介いただきました。 READYFOR社のマイクロフロントエンド導入事例も別記事で紹介しております。ぜひあわせてご覧ください。 疎結合で得た柔軟性と運用のリアル READYFORのマイクロフロントエンド現在地 マネーフォワードクラウドでは、さまざまな目的でマイクロフロントエンド(MFE)を導入しています。 今回はその中でも、複数サービスで共通して必要とされる承認機能を「共通ワークフロー」として切り出し、開発を進めた事例を紹介します。 マイクロフロントエンド導入の背景マネーフォワードクラウドにお
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
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の仕組みを理解する 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年に新
10年近く前に誕生したWeb Componentsshibu_jp氏(以下、shibu_jp):10分なのに、スライド30枚以上もあるので、ちょっと駆け足でいきます。 まず「お前誰?」ということですが、現在はフューチャー株式会社でコンサルタントをやっています。JavaScript、Go、Pythonをよく書いているのですが、最近はお仕事でFlutterを書いています。 フューチャーは1次請けで、2次請けにも投げないで、開発・実装・運用・設計まで全部やるコンサルタントの会社です。Vue.jsのコアメンバーがいたりもします。今日も会社のチャットで、イベントの裏でワイワイチャットしていたりもします。 ほかには『エキスパートPythonプログラミング 改訂3版』が出るので、今日のイベントを聞かれている方には関係ないかもしれませんが、買っていただけるとうれしいです。 本題に入ります。Web Comp
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
誰にでも、できればやりたくないと思うプロジェクトがあるはずです。コードが管理不能になり、スコープが拡張し、修正の上に修正を重ねる有様。コードが絡まり合い、構造が崩壊。コーディングは混乱を招くことがあります。 そこで責任の所在がはっきりした、シンプルで独立したモジュールです。これを使用することで、プロジェクトはスムーズに進みます。コードをカプセル化すると、実装についての心配も軽減できます。あるインプットが与えられたときにモジュールが何をアウトプットするかが分かっていれば、その目標が「どのように達成されたか」を理解する必要は必ずしもないのです。 モジュールの概念を単一のプログラミング言語で理解するのは、難しいことではありません。しかし、ウェブ開発の世界では、多様な技術を組み合わせることが必要になります。ブラウザはHTML、CSS、JavaScriptを解析し、ページのコンテンツ、スタイル、機能
はじめに あまり知られていないかもしれませんが、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
Join our community of software engineering leaders and aspirational developers. Always stay in-the-know by getting the most important news and exclusive content delivered fresh to your inbox to learn more about at-scale software development.
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 技術でコンポーネントを作る
Interop 2024のFocus Areasの1つに、Web Componentsがあります。このWeb Componentsに関連する機能として、Declarative Shadow DOMやsetHTMLUnsafe、parseHTMLUnsafeが2024年に入って新たにBaselineに追加されました。 これらの機能・Web APIは、サーバーサイドでの宣言的なShadow DOMの構築によるJavaScriptが無効な環境でも動作するWeb Componentsの実現や、クライアントサイドでの動的なDeclarative Shadow DOMの追加によるWeb Componentsの利用範囲の拡大に寄与してくれています。 今回は、このような盛り上がりを見せるWeb Componentsが、Declarative Shadow DOMやsetHTMLUnsafe・parseHT
あなたにとって重要なトピックや同僚の最新情報を入手しましょう最新の洞察とトレンドに関する最新情報を即座に受け取りましょう。 継続的な学習のために、無料のリソースに手軽にアクセスしましょうミニブック、トランスクリプト付き動画、およびトレーニング教材。 記事を保存して、いつでも読むことができます記事をブックマークして、準備ができたらいつでも読めます。
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.
</placeholders>はダミーの画像やテキストを提供するweb componentsです。SVGで生成され、動作も高速です。 使い方もシンプル。勿論ReactやSvelte、VueなどのJSフレームワーク等でも利用可能です。 <script type="module" src="https://unpkg.com/@placeholders/core@0.0.2/dist/esm/placeholders.js"></script> スクリプトを読み込んで <placeholder-image></placeholder-image> このようなタグを使えば良いだけ。 <placeholder-image width="400" height="200" text="Hello World"></placeholder-image> 従来のダミー画像生成サービス同様、サイズ指定や任
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
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
Web components have been around for quite a while, but it feels like they’re having a bit of a moment right now. It turns out that the best selling point for web components was "wait and see." For everyone who didn’t see the benefit of web components over being locked into a specific framework, time is proving to be a great teacher. It’s not just that web components are portable. They’re also web
Disclaimer: This post expresses my opinions, which do not necessarily reflect consensus by the whole Web Components community. A blog post by Ryan Carniato titled "Web Components Are Not the Future" has recently stirred a lot of controversy. A few other JS framework authors pitched in, expressing frustration and disillusionment around Web Components. Some Web Components folks wrote rebuttals, whil
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
Stencilは、Ionic Frameworkチームが開発したWeb Componentsコンパイラです。 開発環境にTypeScript、JSX、VirtualDOM、データバインディング、非同期レンダリングなどのWeb開発技術を網羅しており、ビルド後はWeb標準に準拠したWeb Componentsのソースコードを生成してくれます。 今回はStencilの導入方法を紹介します。 Stencilのインストール 適当なディレクトリで以下のコマンドを実行しましょう。 npm init stencil そうするとStencilが提供するスターターの選択肢がコマンドラインに表示されます(コマンドを実行するにはnpm v6以上が必要です)。 ? Pick a starter » - Use arrow-keys. Return to submit. ionic-pwa Everything yo
monthly yearly 📄 Read-only Add WebPDF.pro interactive pages to your websites. FREE 📧 📚 forum support 📄 read-only pages 💎 vector renderer 🔠 text & link layer 🌐 World-wide Deploy WebPDF.pro on websites/apps with live support! 💳 🧑🏻🚀 live/call support 📝 form fill & save 💎 vector renderer ✨ hi-fi renderer 1️⃣ Site/App Use WebPDF.pro on 1 website/app with email support! 💳 📧 email support
名前だけ知ってたんだけど、なんとなく深入りせずにきていた Web Components について改めて調べてみた。 なお、前提条件として自分には以下の経験があるので、その辺の知識がベースになって差分で理解しようとしている。したがって以下はその辺の知識が説明なしに出てくる。 Vue.js ( v2 / v3 ) / Mithril など Virtual DOM 系フレームワークAngular.js ( v1 )Backbone.js ( jQuery / Underscore )Stimulus ( v2 )Web Componentsは総称MDN の解説によると Web Components | MDN 以下の3つから成る。 Custom ElementsShadow DOMTemplate and Slot ElementGoogle の Web Fundamentals によると Bu
週刊Railsウォッチについて 各記事冒頭には🔗でパーマリンクを置いてあります: 社内やTwitterでの議論などにどうぞ 「つっつきボイス」はRailsウォッチ公開前ドラフトを(鍋のように)社内有志でつっついたときの会話の再構成です👄 お気づきの点がありましたら@hachi8833までメンションをいただければ確認・対応いたします🙏 TechRachoではRubyやRailsなどの最新情報記事を平日に公開しています。TechRacho記事をいち早くお読みになりたい方はTwitterにて@techrachoのフォローをお願いします。また、タグやカテゴリごとにRSSフィードを購読することもできます(例:週刊Railsウォッチタグ) 🔗Rails: 先週の改修(Rails公式ニュースより) 今回は以下の差分のうちChangelogが変更されているものを見繕いました。 コミットログ: Co
ベーシック アドベントカレンダー 5日目です。 Web Components でフォーム周りのカスタムパーツの作り方の解説をします。フォームのカスタムパーツは、プロジェクト内だけでなく汎用的なコンポーネントを自作して外部に配布する王道なコンポーネントな気がします。しかし、普通のコンポーネントと同じようなノリで作っているとハマってしまったところがいくつかあったので、それらを紹介します。 Shadow DOM 内部の入力フォームは autocomplete が効かない <my-login-form></my-login-form> <p>Normal DOM form</p> <form method="post" action="./"> Email: <input type="text" name="id" value=""><br> Password: <input type="pass
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
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
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く