この記事は 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内に定義して
GitHub - gluon-framework/gluon: A new framework for creating desktop apps from websites, using system installed browsers and NodeJS
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?
「【Swift】WKWebViewでJavaScriptのconsole.logを使えるようにする」への2件のフィードバック Yuhさん 一つ質問ですが、このコードってon_clickなどのイベントによるconsole.logも出力できますでしょうか？？ html、javascriptを読み込んだ際に実行されるconsole.logはXcodeのログに出力されたのですが、画面表示後にhtmlのボタン押下などによる契機で動作するconsole.logは表示されないです。。。 もし、解決方法ご存知でしたらご教授いただけないでしょうか？ すいません、スパムコメントが多くて気づきませんでした。 原理的には、イベントハンドラでも動作するはずなのですが、ブラウザの内部でconsole.log関数を元に戻してしまっているのかもしれません。 根本的な解決にはなりませんが、イベントハンドラの最初に「var
フロントエンドが知っておきたいセキュリティについて これからアプリ開発でwebviewで開発したいと言われたフロントエンドエンジニアに読んで欲しい内容です。 アプリからSPAにトークンを渡す方法について記載しています。 関連記事 【OpenID Connect】ログイン情報連携させる時ってどうするの？ https://menta.work/post/detail/13200/0m3pMbwd9CxzqXiTPLTM
At this year’s Build conference in May, we announced the Win32 preview of the WebView2 control powered by the Chromium-based Microsoft Edge. Since then, we have been engaging with the community and partners to collect a great deal of feedback, and delivering SDK updates every six-weeks. To demonstrate the new WebView’s capabilities, we built a sample browser app (we call it WebView2Browser) using
はじめに ログイン認証が必要なWebViewアプリをWKWebViewを使って作る機会がありました。その際にCookie周りで困ることがあったので、共有のために記事を投稿します。 実現したい仕様 ネイティブで作ったログイン画面に認証情報をいれてログインすると、WebページのTOP画面に遷移 TOP画面以降は認証状態を保ったまま、WebView内で様々な画面に遷移 アプリ側は技術的にはこんな感じでいける?? アプリ起動時に、ネイティブで作ったログイン画面を表示 認証情報をリクエストパラメーターとしてログインAPIを叩く ログインAPIでtokenをアプリ内部に保持(tokenは例えばPHPなら、PHPSESSIDに該当) WebViewを扱うViewControllerに遷移して、WKWebViewをinitしてaddSubView init時に、WKWebViewにtokenをCookie
CX事業本部の中安です。まいどです。 本日はiOSアプリ開発の小ネタになりますが、WKWebViewで「長押しによるメニュー表示を止める方法」を書き留めたいと思います。 iPhone や iPad を使っている方ならよく使うと思いますが、 ブラウザ上の文字を長押しすると、下図のようにPCでいうところの右クリックのように範囲選択してコピー等をするためのメニューが表示されます。 これはWKWebView。つまり、アプリ上のWEBビューでも同じ動作をします。 しかし、アプリによってはこのメニュー表示をさせたくないこともあるかもしれません。 今回は、このメニュー表示を制御してみることにしましょう。 前提となる実装 今記事ではUI実装については割愛しますが、 今回作る画面(名前をWebViewControllerとします)では WKWebViewが画面全体に配置されているものとします。 その場合の必
![[Swift]WKWebViewで長押しによるメニュー表示を止める | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/d9c911035d6b7c1c0afb32d4e1e6f2e752169d3a/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2018%2F12%2Feyecatch-swift.png)
AndroidシステムのWebViewを更新できない（アップデートできない）問題および対策方法まとめ（アプリが落ちる問題対策）
Androidスマートフォンで発生した「アプリが開けない」問題の解決策として、各所より「AndroidシステムのWebViewを更新する」という対策が紹介・案内されているものの、「WebViewを更新できない」「WebViewが無効になっている」「Google PlayのWebViewページにボタンが何も表示されない」などの問題が発生し、WebViewを更新したくても更新できない（＝アップデートできない）状態となってしまい、アプリが開けないまま改善されない状態になってしまっているユーザーが多数発生している模様です。 こちらに関連して、「Chromeの無効化」や「Chromeの更新」などの話題も関連しややこしいこととなっているのですが、「WebViewがアップデートできない」といった場合の対処法や、関連する話題についていろいろと紹介するので、自身の当てはまるものを確認しつつ、対処の参考にして
【Flutter】WebView_Flutterを使ってDartとJavaScript間でデータのやりとりをする方法
ホーム / Flutter / 【Flutter】WebView_Flutterを使ってDartとJavaScript間でデータのやりとりをする方法 前回の記事でFlutterにWebViewを使うことができるWebView_Flutterという公式プラグインについてご紹介しました。 今回は、Webview_Flutterを使ってどうやってFlutterアプリ(Dart)とWebページ(JavaScript)間でデータ交換をするのかについて紹介していこうかと思います。 前回同様、あまり情報がなく基本的に私が試した内容を紹介する為、正確な方法なのか正しい認識なのかは少しわからない点もあります。 Webview_Flutterの導入と基本的な使い方については前回の記事をご覧ください。 【Flutter】WebViewを使ってWebサイトとローカルHTMLファイルを表示させる方法 データ交換のや
ステートマシンを活用したWebView-ネイティブ間連携へのアプローチ / An Approach to WebView-Native Communication Using State Machines
iOSDC Japan 2023 day0 18:45~ TrackA で登壇するさいの資料になります。 https://fortee.jp/iosdc-japan-2023/proposal/8a41d745-7906-41ca-b05d-c6551c1d23a8
JavaScript Communication
Did you find this plugin useful? Please consider to make a donation to help improve it! Give a to the Official GitHub repo and leave a on pub.dev. Are you creating an App with this plugin? Add your App to the Showcase page and show it to other people! JavaScript Communication You can communicate with JavaScript and vice-versa. There 3 ways to communicate with JavaScript: JavaScript Handlers;Web Me
FlutterにもWebViewを使うことができるWebView_Flutterという公式プラグインがあります。 この記事では、このプラグインを使ってアプリにWebサイトの表示とアプリの中に実装したローカルHTMLファイルを表示させる方法を紹介します。 pub.dev: https://pub.dev/packages/webview_flutter ただ、WebViewを取り扱っている日本語ドキュメントが少なく、英文もしくは中国語ばっかりだったので（2019年現在）、私のできる範囲で調査した内容をこの記事で紹介します。 私のようにFlutterでWeb技術を搭載したいと考えている人の参考になればと思います。 WebViewをプロジェクトに導入する こちらの記事を参考にさせていただきました Google公式Flutter用WebViewプラグインを一通り使ってみた WebView_Flut
DroidKaigi 2021 で発表 https://www.youtube.com/watch?v=IOnpHyOg5sc 長期的にメンテナンス可能な Android アプリの WebView 画面実装について発表しました。
ロコガイド デザイナーの木村です。最近読んだ「時間術大全」のおかげで生産性が爆上がりして毎日がたのしいです。 先日、トクバイで毎日のお買い物が楽しくなるニュースやレシピが見られる「よみもの」という機能をリリースしました🎉 このプロジェクトでは開発リソースを圧縮するため、早いタイミングで Web View で実装することを決めたのですが、アプリエンジニアから「Web View 大変だよ…」と言われてやったら本当に大変だったので、備忘録も兼ねてデザイナーが Web View を検討する際に考慮しておかないといけないポイントをまとめました。 Web View とはWeb View とは、HTMLやWebコンテンツをアプリ内に直接ロードして表示する仕組みを指します。 ですが、Webコンテンツをアプリ内に表示する方法は Web View 以外にもあります。それぞれメリット・デメリットがあるので、達
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Android WebViewで少し厄介だった実装の紹介 - BASEプロダクトチームブログ
【Swift】WKWebViewでJavaScriptのconsole.logを使えるようにする – 万来工房
フロントエンドが知って おきたいセキュリティについて
WebView2Browser: A rich sample for WebView2
ログイン認証したあとに、WKWebViewでCookieを使ってセッションを保つ方法と失敗例 - Qiita
[Swift]WKWebViewで長押しによるメニュー表示を止める | DevelopersIO
【Flutter】WebViewを使ってWebサイトとローカルHTMLファイルを表示させる方法
2020年代の WebView 実装 / saikou_no_webview_2021
デザイナーが App に Web View を導入するときの覚え書き｜mura24
mamezouya.hatenablog.com
anond.hatelabo.jp
note.com/hamsuta
serai.jp
munakatami.com
akito-takizawa.com