組み込み端末のアプリケーションに Electron を採用し開発・運用を行っています。 継続的な機能追加やトラブルサポートを行いながら 3 年が経過したので、Electron を採用した経緯や結果を経験を交えながら共有したいと思います。 組み込み案件自体が初めてでしたのでその話も入っています。 約 700 台ほど導入されており、なかなか大きな案件での採用と思いますので参考になれば幸いです。 ※Electron の基本的な説明は割愛します。 システムについて 一般的に「受付精算機」などと呼ばれ、店頭に何台か並べて設置して自動で受付・精算を行うシステムです。 ホテルの受付端末のイメージです。ハード的にはセルフレジにも近いです。 筐体自体は他社が用意し、弊社はその上に載せる GUI アプリケーションのみを担当しました。 機能 主な機能として 来店受付・整理券発行 予約チェックイン チェックアウト
ヤフーのユーザー5,400万人から"同意"を得るための技術（HTML/CSS/JavaScript）
こんにちは。SWATチームの今谷と、LY会員サービス統括本部の木所です。 LINEとヤフーの会社合併に伴って、LINEヤフー株式会社が提供するサービスを利用するユーザーに「新プライバシーポリシーへの同意」をいただくためのモジュールを開発しました。本記事では、ヤフーのユーザー5,400万人から”同意”を得るための工夫について、実装上の不具合も交えてご紹介します。 なお、ご紹介する内容は、UIT × Bonfire Front-end Meetup #1 での発表が起点となっています。詳細についてより深く知りたい方は、発表資料 や Podcast をあわせてご参照ください。 会社合併と、新プライバシーポリシーのご案内 LINEとヤフー、それぞれで同意モジュールがあります。Web向けのほか、iOS・Androidアプリ向けにも提供しました。 Webの同意モジュールでは「Modal版」と「Ful
こちらは JavaScript Advent Calendar 2024の 25 日目の記事です。 はじめに YouTubeは全画面表示中でもスクロールできて便利ですね[1]。 動画を全画面表示中でもスクロールできる しかし Fullscreen API を用いて動画を全画面にした場合、通常はスクロール不可能なはずです。 YouTube ではどのようにスクロール可能な全画面を実現しているのでしょうか？ 本記事では、その実装方法を解説します（Fullscreen APIとは）。 調査 そもそも Fullscreen API を使っているのか まず YouTube で実際に Fullscreen API を使っているのか調べてみます（擬似的に実現している可能性も無くはないため）。 そのためには、動画を全画面化した後、コンソールにdocument.fullscreenElementと入力します。
ContentsHTMLCSSWeb APIsJavaScriptWeb AppsMediaPrivacySecurityWKWebViewSafari Web ExtensionsWeb InspectorFeedbackAnd More With over 70 additions to WebKit, Safari 15.4 is packed with new web technologies, updates, and fixes. We’ve assembled a huge release as part of our commitment to web developers, and the people who use the web. This is the first big WebKit release of 2022, and we’re just getting
MCP Apps は MCP の拡張機能として、AI エージェントがインタラクティブな UI コンポーネントを返すための標準化された方法を提供します。この記事では MCP Apps の概要と実装方法について解説します。 ChatGPT の Apps SDK や MCP-UI のように AI エージェントがチャット形式の対話だけでなく、インタラクティブな UI を通じてユーザーとやり取りできる仕組みが注目されています。AI エージェントが UI を返すことで、会話の流れの中で以下のような体験を提供できます。 「おすすめのランニングシューズを探して」と尋ねると、複数のシューズの画像と価格が表示され、ユーザーは気に入ったものをクリックしてカートに追加できる ホテルの予約を依頼すると、利用可能な部屋のリストが表示され、ユーザーは日付や人数を選択して予約手続きを進められる 希望にあった賃貸物件を探す
WebKit Features in Safari 16.4
Mar 27, 2023 by Patrick Angle, Marcos Caceres, Razvan Caliman, Jon Davis, Brady Eidson, Timothy Hatcher, Ryosuke Niwa, and Jen Simmons ContentsWeb Push on iOS and iPadOSImprovements for Web AppsWeb ComponentsCSSHTMLJavaScript and WebAssemblyWeb APIImages, Video, and AudioWKWebViewDeveloper ToolingWeb InspectorSafari Web ExtensionsSafari Content BlockersNew Restrictions in Lockdown ModeMore Improve
フレームワークだけじゃない！ 「State of JavaScript 2023」で見直すJavaScriptの人気ライブラリ - レバテックLAB
今回は、用途別にJavaScriptライブラリを紹介します。フレームワークはアプリケーション開発の効率化に欠かせませんが、実際のアプリでは目的や用途に応じてさまざまな機能が要求されるものです。ここでは、JavaScriptに関するサーベイの2023年度版「State of JavaScript 2023: Other Tools」を参考に、一部著者の好みも交えながら、人気のライブラリをピックアップして紹介します。 ▲State of JavaScript 2023: Other Tools（Libraries） なお、Angular、React、Vueといった有名どころもJavaScriptライブラリに分類されますが、本記事ではデータ処理やビジュアルエフェクトなど、特定の目的と機能を持ったライブラリを紹介します。テストやビルドのライブラリも上記サーベイでは人気ですが、それらについては後続の
UI = f(statesⁿ)
“UI is a function of state” is a pretty popular saying in the front-end world. In context (pun intended), that’s typically referring to application or component state. I thought I’d pull that thread a little further and explore all the states that can effect the UI layer… First-party application states Every application whether it’s a to-do list or a shopping cart or some radically complex app wil
はじめに この記事では Claude Code を利用してアプリを開発する過程を共有します。 TL;DR GitHub の任意リポジトリを入力すると、スターを付けたユーザの所在地を世界地図にプロットする Web アプリを作りました。 デモ : https://geostarmap.pages.dev/ リポジトリ：https://github.com/yottahmd/geostarmap なぜ作ったか OSS を開発していると「どの国の開発者に届いているのか」が気になってきます。しかし既存のソフトウェアは、Pythonでローカルで動かす必要があったり、メンテされておらず動かないなどの問題がありました。 そこで「Claude Code に作らせたら、一瞬でできるのでは？」という実験を兼ねて、自分で最小構成のアプリを構築することにしました。 短時間で作った実験アプリなので品質は重視しておりま
WebKit Features in Safari 17.0
Sep 18, 2023 by Jen Simmons and the Safari / WebKit Team Today’s the day for Safari 17.0. It’s now available for iOS 17 and iPadOS 17. [Update September 26th] And now, Safari 17.0 is available for macOS Ventura, and macOS Monterey, and macOS Sonoma. Safari 17.0 is also available in the vision OS Simulator, where you can test your website by downloading the latest beta of Xcode 15, which supports t
Vue.js用ライブラリ『VueUse』はVue.jsの機能である、Composition APIを用いて作られた関数のパッケージです。VueUseの大きな特徴のひとつに、コンポーザブルな関数をまとめたライブラリであるという点が挙げられます。 「コンポーザブルな関数」とはなんでしょう？ コンポーザブルな関数にはどのようなメリットがあるのでしょう？ 本記事はVueUseの使用を通じて、Vue 3から導入されたComposition API、そしてそれを利用したコンポーザブル関数への理解を深める内容となっています。 VueUseとは まずはVueUseの便利さを体感してもらうため、簡単なデモを用意しました。 次のデモはVueUseに含まれているuseMouse()関数を用いています。この関数はマウスの座標を取得し、リアクティブに返すコンポーザブルな関数です。 ▼マウス座標を取得し表示するコンポ
WebKit Features in Safari 17.4
ContentsArchitectural improvementsWeb AppsForm elementsCSSWeb APIJavaScriptMediaSVGWebGLWeb AssemblyWeb InspectorChanges to SafariSafari ExtensionsWeb AuthenticationBug Fixes and moreUpdating to Safari 17.4Feedback Just like Safari 15.4 and Safari 16.4, this March’s release of Safari 17.4 is a significant one for web developers. We’re proud to announce another 46 features and 146 bug fixes. You ca
JSer.info #664 - Rollup 4.0.0がリリースされました。 Release v4.0.0 · rollup/rollup Node.js 14/16のサポート終了、Acornの代わりにSWCをパーサに使うように変更されています。 SWC利用に伴うオプションの削除や非推奨なオプションの削除などが含まれています。 Viteの現在と今後についてがViteConfで発表されています。 動画: https://viteconf.org/23/replay/vite_keynote スライド: State of Vite (ViteConf 2023) ViteはDevビルドにesbuild、ProdビルドにRollupを使うためビルド結果に差異が出やすいなどの問題があります。 そのため、Rollup互換を意識したRolldownというBundlerをRustで開発するという話。
WebKit Features in Safari 18.0
ContentsNew in Safari 18Web apps for MacCSSSpatial WebHTMLJavaScriptWeb APICanvasManaged Media SourceWebRTCHTTPSWebGLWeb InspectorPasskeysSafari ExtensionsApple PayDeprecationsBug Fixes and moreUpdating to Safari 18.0Feedback Safari 18.0 is here. Along with iOS 18, iPadOS 18, macOS Sequoia and visionOS 2, today is the day another 53 web platform features, as well as 25 deprecations and 209 resolve
はじめに WebGPUについて 余談：Vulkanについて WebGPUのネイティブ実装について Silk.NETについて 検証環境 導入するNuGetパッケージ 1. ウィンドウの作成 ※WindowOptionsの値一覧 2. WebGPUの初期化 2-1. unsafeの有効化、パッケージの導入 2-2. 作成するクラス・構造体の説明 2-3. 初期化用ユーティリティクラスの作成 Descriptor（記述子） Struct-Chaining PfnRequestOOOCallback 2-4. 初期化 3. 三角形を表示 3-1. RenderPipelineの作成 3-2. シェーダーの作成 3-3. 描画の実行 参考資料 以下の記事に基づいた内容のプロジェクトをGitHubにアップしました。 動作確認等にご利用ください。 github.com はじめに WebGPUについて W
Last year, we launched a new frontend for MDN. The most noticeable changes were adjustments to our styles; we simplified and unified the MDN design across all of our pages. In truth, the biggest changes were not reader-visible, but rather in the overhauled code that powers our frontend. This post describes what we've done, the technologies we chose, and why we did it at all. MDN's architecture To
Jun 9, 2025 by Jen Simmons, Saron Yitbarek, Jon Davis, Richard Robinson, Eddy Wong, Brandel Zachernuk, Marcos Cáceres, Tim Nguyen, Daniel Liu, Razvan Caliman, Blaze Burg, Qianlang Chen, Brian Weinstein, Aditya Keerthi, Karl Dubost, David Johnson, Luming Yin ContentsSVG IconsEvery site can be a web app on iOS and iPadOSHDR ImagesWebKit in SwiftUI<model> on visionOSImmersive video and audio on visio
WebKit Features in Safari 17.2
ContentsHTMLCSSImages and videoJavaScriptWeb APIWeb AppsWebGLPrivacyWeb InspectorFixes for Interop 2023 and moreUpdating to Safari 17.2Feedback Web technology is constantly moving forward, with both big new features and small subtle adjustments. Nowadays, web developers expect web browsers to update multiple times a year, instead of the once or twice a year typical of the late 2000s — or the once
Jun 6, 2023 by Patrick Angle, Jean-Yves Avenard, Marcos Caceres, Ada Rose Cannon, Eric Carlson, Garrett Davidson, Jon Davis, Karl Dubost, Brady Eidson, Matthew Finkel, Simon Fraser, Brent Fulgham, Rachel Ginsberg, David Johnson, Anne van Kesteren, Mark Lam, Sihui Liu, Justin Michaud, Jer Noble, Tim Nguyen, Ben Nham, Richard Robinson, Michael Saboff, Alexey Shvaika, Jen Simmons, Sam Sneddon, Brando
Jun 10, 2024 by Jen Simmons, Jon Davis, Karl Dubost, Anne van Kesteren, Marcos Cáceres, Ada Rose Canon, Tim Nguyen, Sanjana Aithal, Pascoe, and Garrett Davidson ContentsWebXRCSSWeb apps for MacSafari ExtensionsSpatial mediaHTMLMediaWebRTCPasskeysHTTPSJavaScriptWeb APICanvasWebGLWeb InspectorWKWebViewApple PayDeprecationsBug Fixes and moreHelp us Beta TestFeedback The last year has been a great one
WebKit Features in Safari 18.4
Mar 31, 2025 by Jen Simmons, Saron Yitbarek, Jon Davis, Razvan Caliman, Karl Dubost, Brady Eidson, Elika Etemad, Youenn Fablet, Matthew Finkel, Simon Fraser, Timothy Hatcher, David Johnson, Anne van Kesteren, Daniel Liu, Keith Miller, Rupin Mittal, Tim Nguyen, Pascoe, Abrar Rahman Protyasha, Richard Robinson, Lily Spiniolas, Brandon Stewart, John Wilander and Luming Yin ContentsDeclarative Web Pus
Mozilla's Vision of the Web
In addition to Cookies necessary for this site to function, we’d like your permission to set some additional Cookies to better understand your browsing needs and improve your experience. Rest assured — we value your privacy. Mozilla’s vision for the evolution of the Web March 23, 2022 Mozilla's mission is to ensure that the Internet is a global public resource, open and accessible to all. We belie
Chrome 119 beta brings you CSS relative color syntax, new pseudo-classes, and much more. Unless otherwise noted, changes described apply to the newest Chrome beta channel release for Android, ChromeOS, Linux, macOS, and Windows. Learn more about the features listed here through the provided links or from the list on ChromeStatus.com. Chrome 119 is beta as of October 4, 2023. You can download the l
WebKit Features for Safari 26.2
Safari 26.2 is a big release. Packed with 62 new features, this release aims to make your life as a web developer easier by replacing long-standing frustrations with elegant solutions. You’ll find simpler ways to create common UI patterns with just a few lines of HTML or CSS, and no JavaScript — like auto-growing text fields with CSS field-sizing, and buttons that open/close dialogs and popovers w
After the feature-packed release of Safari 15.4 two months ago, WebKit’s work for this version of Safari focused predominately on polishing existing features and fixing bugs. Safari 15.5 does contain three new technologies for web developers — support for the inert property in HTML; support for the worker-src Content Security Policy directive; and the new minimumViewportInset and maximumViewportIn
WebKit Features in Safari 18.2
Dec 9, 2024 by Jen Simmons, Ada Rose Canon, David Degazio, Yoel Hawa, Etienne Segonzac, and John Wilander ContentsCSSSpatial videos and photosWebXRGenmojiMediaHTMLWebAssemblyWeb APIJavaScriptSecurity and PrivacyWeb InspectorWebDriverWKWebViewBug Fixes and moreUpdating to Safari 18.2Feedback Today marks the arrival of Safari 18.2. With it, WebKit adds 61 new features and 111 resolved issues. Highli
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに この記事では、Claude Codeを活用してSvelteKit + Hono + Cloudflare構成のモダンなWebアプリケーションを構築した体験を共有します。 開発したHPはこれhttps://elanare.jp/ 会社ブログにはClaude君が質問して僕が答える別バージョンの記事もあります https://elanare.jp/blog/company-blog-launch 挨拶と前提 みなさんこんにちはうつ病で休職中の石橋です 3月から休職していて、6月半ばくらいから1日1時間くらいならPCに向き合って作業で
Safari Technology Preview Release 142 is now available for download for macOS Big Sur and macOS Monterey. If you already have Safari Technology Preview installed, you can update in the Software Update pane of System Preferences on macOS. This release covers WebKit revisions 289213-290223. Note: Tab Groups do not sync in this release. Web Inspector Elements Tab Added overlay for visualizing CSS Fle
WebKit Features in Safari 26.0
Sep 15, 2025 by Jen Simmons, Saron Yitbarek, Jon Davis, Tim Nguyen, Blaze Burg, Marcos Cáceres, Razvan Caliman, Qianlang Chen, Karl Dubost, Kiet Ho, David Johnson, Aditya Keerthi, Daniel Liu, Keith Miller, Abrar Rahman Protyasha, Richard Robinson, Kiara Rose, Ahmad Saleem, Anne van Kesteren, Brian Weinstein, Eddy Wong, Luming Yin, Brandel Zachernuk ContentsCSSEvery site can be a web app on iOS and
Safari Technology Preview Release 148 is now available for download for macOS Monterey 12.3 or later and macOS Ventura beta. Updates to Safari Technology Preview are no longer available for macOS Big Sur. If you already have Safari Technology Preview installed, you can update in the Software Update pane of System Preferences on macOS Monterey, or System Settings under General → Software Update on
「USB」をわかりやすく簡単に言えば、ほとんどの場合、キーボード、マウス、音声、動画、ストレージデバイスがすぐに思い浮かぶでしょう。その通りですが、他の種類のユニバーサルシリアルバ (USB) デバイスもあります。 これらの標準化されていないUSBデバイスでは、ユーザー (開発者) がそれらを利用できるようにするには、ハードウェアベンダーがプラットフォーム固有のドライバーとSDKを作成する必要があります。残念ながら、このプラットフォーム固有のコードは、歴史的にこれらのデバイスがWebで使用されるのを妨げてきました。そして、それがWebUSB APIが作成された理由の1つです。このAPIは、USBデバイスサービスをWebに公開する方法を提供するためです。このAPIを使用すると、ハードウェアメーカーは、デバイス用のクロスプラットフォームJavaScriptSDKを構築できます。しかし、最も重要
Webサービスを多言語対応するに当たっては、翻訳者の方とのコミュニケーションがとても大切になります。特に日本語から他の言語に訳す場合、日本語は言葉が短い言語なので多言語化したときにUIが崩れやすいです。 そのため、翻訳者の方にもUIを確認して頂きながら、UIのコンテキストに沿った形でなるべく短い文章に訳してもらう必要があります。 今回、Storybook と Locize というサービスを使って多言語開発の仕組みを整え、その結果とてもスムーズに タイ語版、スペイン語版 をリリースすることができたので、やったことをブログにまとめました。 何も仕組みがない場合 多言語の辞書を開発者が git 管理している場合の、開発フローの一例は以下のようになると思います（日本語 → タイ語に翻訳する場合を想定しています）。 開発者: スプレッドシートで翻訳者に辞書のキーと日本語の文言の一覧を共有 翻訳者:
GitHub - taishi-i/awesome-ChatGPT-repositories: A curated list of resources dedicated to open source GitHub repositories related to ChatGPT and OpenAI API
awesome-chatgpt-api - Curated list of apps and tools that not only use the new ChatGPT API, but also allow users to configure their own API keys, enabling free and on-demand usage of their own quota. awesome-chatgpt-prompts - This repo includes ChatGPT prompt curation to use ChatGPT better. awesome-chatgpt - Curated list of awesome tools, demos, docs for ChatGPT and GPT-3 awesome-totally-open-chat
Here's what you need to know: There’s an update to the expiration date upper limit for cookies already in storage. CSS has new pseudo-classes, relative color syntax and more. Fenced Frames added improvements like ad size macros and others. And there’s plenty more. I’m Adriana Jara. Let’s dive in and see what’s new for developers in Chrome 119. Cookies expiration date. Since Chrome 104 newly create
JupyterLab Changelog — JupyterLab 4.6.0a1 documentation
JupyterLab Changelog# v4.5# JupyterLab 4.5 includes a number of new features (described below), bug fixes, and enhancements. This release is compatible with extensions supporting JupyterLab 4.0. Extension authors are encouraged to consult the Extension Migration Guide which lists deprecations and changes to the public API. Performance and windowing# The default windowing mode is now contentVisibil
Join a VS Code Dev Days event near you to learn about AI-assisted development in VS Code. Update 1.71.1: The update addresses this security issue. Update 1.71.2: The update addresses these issues. Downloads: Windows: x64 Arm64 | Mac: Universal Intel silicon | Linux: deb rpm tarball Arm snap Welcome to the August 2022 release of Visual Studio Code. August is when many of the engineers on VS Code ta
Safari Technology Preview Release 156 is now available for download for macOS Monterey 12.3 or later and macOS Ventura beta. If you already have Safari Technology Preview installed, you can update in the Software Update pane of System Preferences on macOS Monterey, or System Settings under General → Software Update on macOS Ventura. This release includes WebKit changes between: 254352@main…255076@
Update 1.88.1: The update addresses these issues. Downloads: Windows: x64 Arm64 | Mac: Universal Intel silicon | Linux: deb rpm tarball Arm snap Welcome to the March 2024 release of Visual Studio Code. There are many updates in this version that we hope you'll like, some of the key highlights include: Apply custom editor labels - Distinguish between editors with same file names. Locked scrolling -
JSer.info #626 - Remix v1.10.0がリリースされました。 Release v1.10.0 · remix-run/remix @remix-run/routerというReact Routerとの共通基盤となるパッケージを使い再構築されています。 shouldRevalidate関数のサポート、useNavigation/useRevalidator/useRouteLoaderData Hook APIの追加などが追加されています。 React Native 0.71がリリースされました。 React Native 0.71: TypeScript by Default, Flexbox Gap, and more... · React Native Road to 0.71.0 · Discussion #41 · reactwg/react-native-re
はじめに こんなコードを書いていませんか？ .header { height: 80px; } @media (max-width: 768px) { .header { height: 60px; } } .sidebar { width: 300px; } @media (max-width: 768px) { .sidebar { width: 100%; } } 2025年、CSSの開発現場は大きく変化しています。 例のようなビューポートに依存したメディアクエリの乱用は、コードの可読性を下げ、将来的な変更への対応を困難にします。 新しいプロジェクトでこのような実装を続けることは、技術的負債の蓄積になってしまいます。 コンテナクエリやカスケードレイヤーといった新しい仕様は、これらの問題を根本的に解決します。 結果として、より柔軟で保守性の高いコードベースを実現できます。 この記事では
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Electronで組み込み端末向けアプリケーションを開発し3年間運用してみて
なぜYouTubeでは動画を全画面表示しながらスクロールが可能なのか？
New WebKit Features in Safari 15.4
MCP におけるインタラクティブな UI を標準化する拡張機能 MCP Apps の提案
Claude Code で GitHub スターの地理分布を可視化するオープンソースソフトウェアをつくった
VueUseで極めるVue.jsとComposition API - ICS MEDIA
2023-10-10のJS: Rollup 4.0.0、Viteの今後(Rustify Vite)、pnpm v8.9.0
【C#】Silk.NET+WebGPUで三角形を描画する - octo127’s blog
Under the hood of MDN's new frontend
News from WWDC25: WebKit in Safari 26 beta
News from WWDC23: WebKit Features in Safari 17 beta
News from WWDC24: WebKit in Safari 18 beta
Chrome 119 beta | Blog | Chrome for Developers
New WebKit Features in Safari 15.5
実録ClaudeCodeで会社HP立ち上げた全部詳細公開 - Qiita
Release Notes for Safari Technology Preview 142
Release Notes for Safari Technology Preview 148
Web上のUSBデバイスにアクセスする
リアルタイムにUIデザインを確認しながら翻訳できる仕組みを作った話
New in Chrome 119 | Blog | Chrome for Developers
August 2022 (version 1.71)
Release Notes for Safari Technology Preview 156
March 2024 (version 1.88)
2023-01-13のJS: Remix 1.10.0、React Native 0.71、State of JS 2022
モダンCSSに移行すべき6つの古い書き方 【2025年保存版】