WindowsやmacOS、Linuxなどのクロスプラットフォーム対応のデスクトップアプリ開発を容易にするフレームワークとして高い人気を持つフレームワークが「Electron」です。 ElectronはChromiumとNode.jsを用いることで、HTML/CSS/JavaScriptのWebテクノロジーによってデスクトップアプリケーションを開発できるのが最大の特徴です。 いまやElectronは、Visual Studio CodeやMicrosoft Teams、Slack、GitHub Desktop、そして最近話題のNotionなど、さまざまなアプリケーションに採用されています。 このElectronの優れた特徴を備えつつ、よりメモリ消費量が小さくファイルサイズもコンパクトで、高いセキュリティを備え、柔軟なライセンスを実現しようと開発されたのが「Tauri」です。 Tauriは、
特定の端末のみで起こる WebView プチフリーズを Tracing を利用して追った話 - SmartNews Engineering Blog
こんにちは、スマートニュース株式会社の紀平です。 SmartNews のアプリ内では、最近 WebView を使った機能を多数公開しております。そのうちの一つにショッピングチャンネルという機能があるのですが、今日はそのショッピングチャンネルのタイムセール枠で以前発生した、謎のプチフリーズ問題の調査手法をご紹介します。 tl;dr 特定の Android 端末でプチフリーズが発生した 再描画領域を減らすことで現象は改善した Chrome の Tracing 機能を利用し、ブラウザのソースコードまで参照して、ついに根本原因まで突き止めた タイムセールで起こった問題 タイムセールは、SmartNews のショッピングチャンネル内において WebView で提供されている、期間限定のお得な商品をアグリゲーションした機能です。EC サイト各社のご協力の上にご提供しております。内部は HTML5 で開
こんにちは。ソウゾウの Software Engineer の hiroppy です。「連載：「メルカリ Shops」プレオープンまでの開発の裏側」 の最後は、Web フロントエンドの紹介をしたいと思います。メルカリ Shops は既存のメルカリアプリの中に独立した Web アプリケーションとして動いています。本記事では、どのようなライブラリを選定し、どのようにアーキテクチャを設計してきたかを解説します。 なぜ Web なのか？ アプリの上で動いているのであれば、WebView ではなくても良いと感じる人はいると思います。今回採用した 1 つの理由としては、リリースが柔軟な点が挙げられます。iOS/Android の両方に対して開発サイクルを早めることが可能であり、また機能追加やバグ修正が容易です。どのように WebView で動いているかについては、6 日目のメルカリ Shops のため
開かれたインターネットを目指すソフトウェアエンジニアらによって組織された非営利団体・Open Web Advocacy(OWA)が、ユーザーの目が届かない場所でセキュリティやプライバシーを大きなリスクにさらすアプリ内ブラウザについて提言しました。 In-App Browsers: The worst erosion of user choice you haven't heard of - Open Web Advocacy https://open-web-advocacy.org/blog/in-app-browsers-the-worst-erosion-of-user-choice-you-havent-heard-of/ 以下のムービーでは、OWAが危惧しているアプリ内ブラウザの問題点がアニメーションでわかりやすく解説されています。 Open Web Advocacy - In-
とある大規模開発プロジェクトの中で WebView 用のフロントエンドシステム開発を立ち上げて2ヶ月経ちました。Android, iOS専任のエンジニアがいないため、外部協力者の指導のもと、モバイルアプリの画面を WebView で作るためです。 ある程度その営みについて見えてきたものがあるので記事にまとめることにしました。 プロジェクト参加人数は30名以上 プロジェクト自体は4ヶ月前から動いてる このプロジェクトへのフロントエンドチームの参加は1月から 現在 WebView とモバイル・バックエンドなどの結合試験をはじめている 背景 去年12月いまの会社にテックリードとして入社し、前述とは別のプロジェクトでフロントエンドチーム立ち上げを行っていました。同タイミングで、いまの会社に誘ってくれた飲み仲間もテックリード・チームリーダーとして入社しています。フロントエンドチームはこの2名がプロパ
GitHub - webui-dev/webui: Use any web browser as GUI, with your preferred language in the backend and HTML5 in the frontend, all in a lightweight portable lib.
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
Rust製ブラウザエンジンの「Servo」、アプリに組み込み可能なクロスプラットフォーム対応WebView化を目指す。Electron代替を目指す「Tauri」への組み込み実現へ
Rust製ブラウザエンジンの「Servo」、アプリに組み込み可能なクロスプラットフォーム対応WebView化を目指す。Electron代替を目指す「Tauri」への組み込み実現へ Rust製のWebブラウザエンジンとして開発が進められている「Servo」は、Servoをアプリケーションに組み込み可能なクロスプラットフォーム対応WebVeiwとする方向で開発を進め、それをアプリケーションフレームワークのTauriと協力してTauriがサポートする予定であることを発表しました。 TauriはElectronの代替を目指す、Web技術を用いてアプリケーションを開発するためのフレームワークです。 参考：Electron代替を目指すRust製フレームワーク「Tauri」がバージョン1.0に到達、Windows/Mac/Linuxに対応 現在のTauriは、UIのレンダリングエンジンとして、Windo
import { LocalNotifications } from '@capacitor/local-notifications'; LocalNotifications.schedule({ notifications: [ { title: "On sale", body: "Widgets are 10% off. Act fast!", id: 1, schedule: { at: new Date(Date.now() + 1000 * 5) }, sound: null, attachments: null, actionTypeId: "", extra: null } ] });import { Geolocation } from '@capacitor/geolocation'; // get the users current position const pos
マイクロソフト、Chromiumベースの「Microsoft Edge WebView2」.NET正式対応版リリース。バージョンを固定できる「Fixed Version distribution mode」も
マイクロソフト、Chromiumベースの「Microsoft Edge WebView2」.NET正式対応版リリース。バージョンを固定できる「Fixed Version distribution mode」も マイクロソフトは、ネイティブアプリケーションに埋め込めるコンポーネント「Microsoft Edge WebView2」（以下、WebView2）の.NET正式対応版がリリースされました。.NET Core、.NET Framework、WinForms、WPFアプリケーションに対応しています。 10月にはWin32 C/C++対応版が先行して登場しており、.NET対応版の登場が待たれていました。 Today, we are excited to announce that Microsoft Edge WebView2 is Generally Available for prod
Rust+Webフロントの最前線！tauriを試してみた
@Pctg_x8です。 Deno 1.0の登場でRustとWeb関連技術の繋がりがより高まっていく中で、Electronライクな新しいアプリケーションフレームワークである「tauri」を見つけましたのでちょっと触ってみようと思います。 tauriについて 公式サイト: https://tauri.studio/ ※この記事ではv0.9.2をベースに解説しています。 tauriはまだメジャーバージョンが1になっていないため、頻繁にAPIの変更が起こる可能性があります。 概要 フロントはElectronと同じくWebViewですが、ベースの起動プログラム（Main Process）をRustで書くことができるものです。 ElectronではMain ProcessもJavaScript（Node.js）なので、例えば大量のデータを並行してバッと読むとか解析するとかの処理をさせようとすると マル
GmailやLINEなど、一部のAndroidアプリが3月23日朝から正常に起動できなくなっていた問題。米Googleは同日午後3時21分に「問題を修正した」と発表し、Google Playから「WebView」と「Google Chrome」をアップデートするよう呼び掛けている。 朝からGmailやLINEといった主要なアプリが開けない状態が一部ユーザーの間で続いたため、Twitter上では「WebView」「アップデート」「アンインストール」などがトレンド入りするほど話題になった。 今回、さまざまなAndroidアプリで問題を引き起こした「WebView」とは何だろうか。 アプリ内ブラウザのための「部品」 WebViewは端的にいえば、Androidアプリを作るときに、アプリ内でWebコンテンツを表示するための部品だ。 Androidアプリは、基本的にAndroid OS上に用意された
こんにちは、メルカリでフロントエンドエンジニアをしている @karszawa です。 本日はメルカリアドベントカレンダー2019の21日目の記事として「メルカリアプリのWebView向けWebアプリケーションの開発を支えるモック技術」というニッチ（？）な題目の話をさせていただきます。 メルカリアプリでは「取引画面」を代表として、意外と多くの場所で WebView が使われています。 WebView 向けの Web アプリケーション開発は動作環境が特殊で外部依存の多いという点で普通の Web アプリケーション開発よりややこしいです。たとえば、普通の Web アプリケーションはあるアプリが独自に定義した API（ネイティブ API）を呼ぶことはありません。この記事ではそういった難しさを持ったアプリケーションを開発する上で重要な モックの話 をします。 本番環境と開発環境のアプリケーションが参照
Build an optimized, secure, and frontend-independent application for multi-platform deployment.
iOS Privacy: Announcing InAppBrowser.com - see what JavaScript commands get injected through an in-app browser
Last week I published a report on the risks of mobile apps using in-app browsers. Some apps, like Instagram and Facebook, inject JavaScript code into third party websites that cause potential security and privacy risks to the user. I was so happy to see the article featured by major media outlets across the globe, like TheGuardian and The Register, generated a over a million impressions on Twitter
実はiOSのWebView内のHTTPSリクエストは傍受できる(URLProtocol) - Qiita
Chromeの開発ツールにはNetworkという項目があり，ブラウザでサイトにアクセスしたときのHTTP/HTTPSのアクセスのログを見ることができます．APIの動作確認などできるので，Web開発者なら重宝している機能の一つだと思います． とても便利な機能なので，iOSのWKWebViewでも使えたらいいなと思い開発しました． 下記の動画が作ったサンプルなのですが，アプリ内のWKWebViewでGithubにアクセスしたときのHTTPSリクエストすべてをTableViewに表示できるようになっています． こちらが今回作成したサンプルのレポジトリです． https://github.com/tommy19970714/WebKitURLProtocol これはログを表示するだけですが，この技術を応用する例としては，WKWebView上で開いているyahooのホームページ内にある画像をすべて猫
tauri.app Tauri とは Electron代替として作られたRust製のGUIアプリケーション開発ツールキット。 ユーザーは各プラットフォームのWebViewで動くHTML+JavaScriptでUI開発をして、裏側はRustで書いたネイティブバイナリにコンパイルされるプログラムを呼び出す。 実際の実装のイメージが以下で、Electronに使い方は似せられている。 tauri.app Electronは特製ChromiumとNode.jsをユーザーのアプリケーションに同梱することでポータビリティを担保させているのに対して(find /Applications -name "Electron Framework.framework" コマンドを実行してみると大抵どんな環境にもElectronが10匹ぐらい居る) TauriはOSが用意しているWebViewにリンクして、スクリプト
I recently received a tantalizing email from a reader I’ve never met: Sam Henri-Gold. Sam showed me how you can key in a couple write commands in the macOS terminal: defaults write NSGlobalDomain WebKitDeveloperExtras -bool true defaults write -g WebKitDeveloperExtras -bool YES Which will enable a context menu in a system web view: Which lets you trigger the Safari Web Inspector and inspect elemen
id:kikuchy です。 先日、いよいよバクラク申請・経費精算のiOS/Androidアプリがリリースされました！ bakuraku.jp bakuraku.jp こちらの２つのアプリ、現在のところ専任のエンジニアはkikuchy一人だけで開発しています。 そのためか、技術スタックは何なのか、クロスプラットフォームフレームワークの技術を使っているのか、といった質問をたくさんいただきました。 また、LayerXのモバイルアプリ第一号でもあるため、リリースまでにいろいろな準備が必要でした。 当記事では、どんな準備をしてきたのか、使用技術スタックとその選定、開発の苦労話の一部をお伝えできればと思います。 （社内で）初めてのアプリ開発 会社はすでにプロダクトを展開していて、しかしスマホアプリ開発にはまだ手を出していない。 そんな環境でアプリ開発を初めるというのはなかなか珍しい経験だと思います。
// props を持たないファイル名と同名のコンポーネント export default function Sub(props: {name: string}) { return <h1 className="flex"> <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"> Click {props.name} </button> </h1> } // ここが render される export const __PREVIEW__ = () => { return <Sub name="dummy" /> } 他にも .svelte や .html にも対応してる。対応パターンは以下。 注意点として、 dynamic import が絡むとプレビューに失敗する。
Platform Tilt - Mozilla
This dashboard tracks technical issues in major software platforms which disadvantage Firefox relative to the first-party browser. We consider aspects like security, stability, performance, and functionality, and propose changes to create a more level playing field. Further discussion on the live issues can be found in our platform-tilt issue tracker. Rule 2.5.6 of the Apple App Store Review Guide
Android端末で一斉に障害発生？ Yahoo、Google、LINEなどのアプリが立ち上がらず「繰り返し停止」に 3月23日7時30分現在、Android端末でYahoo、Google、LINEなどのアプリが立ち上がらず、「繰り返し停止しています」というエラーがでる、という報告が相次いでいる。 Downdetectorに寄せられているユーザーレポートによれば、7時00分ごろより報告が増加。おそらくAndroidのOSやアプリの更新を自動アップデートに設定しているユーザーに起こっている現象のようで、筆者の端末のうち、自動アップデートをしていないものは通常通り使用できた。アプリの再インストールなどを試してみるのもありだが、一旦静観し、Google公式からのアナウンスを待つ方が得策かもしれない。 追記：「Play ストア」でマイアプリ＆ゲームから「Androidシステムのwebview」を選
GitHub - tauri-apps/tauri: Build smaller, faster, and more secure desktop applications with a web frontend.
Build smaller, faster, and more secure desktop applications with a web frontend.
スタディスト開発ブログ Advent Calendar 2021 8日目の記事です。Hansoku Cloud 開発グループのマネージャーをしている zuckey が担当します。2020年の末にHansoku Cloudという新規事業のアプリケーションをリリースしたのち、そのプロダクトおよびサービスのグロースに力を入れてきました。 本エントリでは、Hansoku Cloud で今年の6月に検討を開始し、9月にリリースにこぎつけたモバイルアプリの開発全般について書きます。 TL;DR“ガワネイティブ” からネイティブAPIへのブリッジ部分を提供してくれるライブラリ Capacitor を利用してiOS / Android向けのモバイルアプリをリリースしたWeb開発者がモバイルアプリを開発するにはどのようなツールを使うにしても、チームで学習を深めていく必要がある。Full Stack なチーム
Electronの代替を目指す軽量なRust製フレームワーク「Tauri」の開発チームは、Tauriで使えるGUIライブラリの初めてのリリース「tauri-egui 0.1.0」をリリースしました。 Today is soon™️ Remember when we promised you the ability to make interactive windows without any HTML/CSS/JS or even a system webview? Now you can! Just click the link below to learn how to try out tauri-egui and integrate into your own app.https://t.co/QECA9Q85Yr — Tauri (@TauriApps) September 19,
Rust製ブラウザエンジンの「Servo」がElectron代替を目指す「Tauri」への組み込みに対応、プロトタイプとして実装
Rust製ブラウザエンジンの「Servo」がElectron代替を目指す「Tauri」への組み込みに対応、プロトタイプとして実装 Linux Foundation傘下でRust製のWebブラウザエンジンとして開発が進められている「Servo」は、Electron代替を目指すフレームワーク「Tauri」への組み込みサポートを、プロトタイプとして実装したことを明らかにしました。 Servo can now be used in an experimental build of WRY, the webview library behind Tauri! More on offscreen rendering, multiple webviews, and other embedding improvements ↓ pic.twitter.com/jElJUusZZU — Servo (@Se
こんにちは、ソウゾウのSoftware Engineerの@gentleです。連載：「メルカリShops」プレオープンまでの開発の裏側の6日目を担当いたします。 メルカリShopsは既存のメルカリアプリの中に独立したWebアプリケーションを組み込む形で開発いたしました。本記事では、Webアプリケーションとして作成されたメルカリShopsを、既存のメルカリアプリでWebViewを使って表示する際のアプリとの連携について解説いたします。 メルカリアプリとの連携 メルカリShopsはメルカリアプリ内に組み込まれておりますが、独立したWebアプリケーションとして存在しており、WebViewにてShopsのWebページを表示する形になっています。しかし、単純にアプリ内でWebページを表示しただけでは、アプリとしてのUI/UXを満たせないため、WebViewとアプリとの連携が必要です。 アプリとの連携
Over the past weeks, we’ve received several questions about the differences between the new WebView2 and Electron. Both teams have the expressed goal of making web-tech the best it can be on the Desktop, and a shared comprehensive comparison is being discussed. Electron and WebView2 are fast-moving and constantly evolving projects. We have assembled a brief snapshot of similarities and differences
こんにちは！アルダグラムでエンジニアをしている渡邊です！ 本記事は株式会社アルダグラム Advent Calendar 2023 1日目の記事です。 早いもので2023年もあと一ヶ月となり、2024年もまもなくです。最近モバイルアプリのクロスプラットフォーム開発では Flutter や Kotlin Multiplatform などをよく見かけます。 しかしクロスプラットフォーム開発といえば... そう WebView を使った方法があります。 これは WebView で HTML を表示させることで Android や iOS などで共通に画面を作成する方法で、モバイルアプリ開発の初期からあった方法です。 プロジェクトの構成や工数、実装難易度によって WebView を使った開発を採用することもあると思いますが、個人的な意見としてそれは選択肢としてアリかと思っています。 最近アプリチーム
今までCapacitor(=WebViewのみ)で実装されていたユビーのモバイルアプリ(Android/iOS)を、React NativeとWebViewを組み合わせたハイブリッドアプリとして刷新しています。その過程で、WebView内で実行されるJavaScriptから、React Native側で定義した関数を型安全に呼び出せるライブラリを実装しました。その使用例と仕組みを紹介します。 使い方 React Native側の実装 まずライブラリをインストールします。Peer dependenciesであるreact-native-webviewとcomlinkも入れてください。 npm install @react-native-webview-rpc/native npm install react-native-webview comlink # peer dependencies
こんにちは！ソウゾウの Software Engineer の@gentleです。連載：メルカリShops 開発の裏側 Vol.2の10日目を担当させていただきます。 メルカリShopsはメルカリのアプリ内でサービスを提供しており、メルカリShopsの機能に直接アクセスするためのディープリンクを実装しています。この記事では主にiOSにおけるディープリンクの基礎的な解説と、メルカリShopsではどのようにディープリンクを使用しているかを解説していきます。 はじめに ディープリンクとは、モバイルアプリの特定の機能に直接アクセスできるURLのことです。なお、ディープリンクにはWebサイトのトップではなく特定のコンテンツのページに直接遷移するURLのことを指す意味もありますが、本記事ではモバイルアプリにおけるディープリンクの話となります。 ディープリンクを使用すると、Webページからアプリを起動し
Upcoming security changes to Google's OAuth 2.0 authorization endpoint in embedded webviews
Upcoming security changes to Google's OAuth 2.0 authorization endpoint in embedded webviews Posted by Badi Azad, Group Product Manager (@badiazad) The Google Identity team is continually working to improve Google Account security and create a safer and more secure experience for our users. As part of that work, we recently introduced a new secure browser policy prohibiting Google OAuth requests in
Update: This post was turned into a talk for State of The Browser in October 2021; you can watch the recording here. Update, The Second: Welp, I was wrong. I assumed that Facebook PMs and engineers were smart. Of course they were going to get found out modifying content via In-App Browsers, just as this post warned they could. It's long past time for Google and Apple to act to curb this abuse via
GitHub - webview/webview: Tiny cross-platform webview library for C/C++/Golang. Uses WebKit (Gtk/Cocoa) and Edge (Windows)
A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
この記事は BASE Advent Calendar 2023 の18日目の記事です。 はじめに こんにちは、Pay IDアプリ開発チームでエンジニアをしている小林(@eijenson)です。 ショッピングアプリ「Pay ID」のAndroid版アプリの開発を担当しています。 本アプリでは一部機能でWebViewを使って実装しています。 そこで少し厄介だった仕様とそれをどう実装したかを紹介していこうと思います。 使用言語/ライブラリのバージョン Kotlin 1.7.10 Jetpack Compose BOM 2023.06.01 今回の画面設計 よくあるMVVMの設計です。 UIはJetpack Composeで書かれています。 WebViewに関してはJetpack Composeでは用意されていないので、AndroidViewを使ってWebViewクラスをCompose内に定義して
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Electronの代替を目指す軽量なRust製フレームワーク「Tauri」、リリース候補版に到達
メルカリShops のフロントエンド | メルカリエンジニアリング
「TikTokは事実上のキーロガー」と専門家、知らないうちにユーザーを侵害する「アプリ内ブラウザ」の脅威とは？
大規模チームの中でフロントエンドを立ち上げて2ヶ月経ったのでまとめる
Androidの「WebView」アップデートに問題か ～複数のアプリで起動不能やエラーの報告相次ぐ【18:10追記】／「WebView」と「Google Chrome」を最新版に更新することで解消
Mozilla、Firefoxなどサードパーティブラウザが技術的不利を強いられていると指摘
「Electron」と「WebView2」はどう違う？ ～「Electron」の開発チームが解説／Windowsならば「WebView2」は魅力だが、「Electron」にまだ一日の長。使い分けも重要に【やじうまの杜】
Capacitor: Webアプリをクロスプラットフォームに展開
Androidアプリ障害の原因になった「WebView」ってなに？
メルカリアプリのWebView向けWebアプリケーションの開発を支えるモック技術
Build smaller, faster, and more secure desktop applications with a web frontend | Tauri Apps
Tauri on mobile 現状確認会 - laiso
Inspecting Web Views in macOS
バクラク申請・経費精算 モバイルアプリ開発の裏側 - LayerX エンジニアブログ
VScode 上で今開いているファイルを Vite でプレビューする拡張を作ったら便利
新しい「Microsoft Teams」アプリが正式版に ～速度は2倍でメモリ使用量は1/2／「React」「WebView2」でゼロから再構築
Android端末で一斉に障害発生？ Yahoo、Google、LINEなどのアプリが立ち上がらず「繰り返し停止」に
AndroidスマートフォンでWebViewの不具合、一部アプリが起動できず
Web開発者のみでCapacitor を利用し、3ヶ月でモバイルアプリをリリースした話と、展望
Electron代替を目指すTauriがGUIライブラリ「tauri-egui 0.1.0」をリリース
Androidアプリのクラッシュを引き起こすWebViewの問題が解決
メルカリShopsのためのWebViewの技術 | メルカリエンジニアリング
WebView2 and Electron | Electron
2024年以降でも Android で WebView ベースのアプリを作るあなたへ
WebViewからReact Nativeの関数を型安全に呼び出す
モバイルアプリにおけるディープリンクとメルカリShopsでの実装 | メルカリエンジニアリング
Hobson's Browser - Infrequently Noted
Android WebViewで少し厄介だった実装の紹介 - BASEプロダクトチームブログ
arrow1953.hatenablog.com
tradenote.xsrv.jp
www.cbnews.jp
www.mixonline.jp
www.soumu.go.jp
www.cbnews.jp