2024年以降でも Android で WebView ベースのアプリを作るあなたへ
こんにちは！アルダグラムでエンジニアをしている渡邊です！ 本記事は株式会社アルダグラム Advent Calendar 2023 1日目の記事です。 早いもので2023年もあと一ヶ月となり、2024年もまもなくです。最近モバイルアプリのクロスプラットフォーム開発では Flutter や Kotlin Multiplatform などをよく見かけます。 しかしクロスプラットフォーム開発といえば... そう WebView を使った方法があります。 これは WebView で HTML を表示させることで Android や iOS などで共通に画面を作成する方法で、モバイルアプリ開発の初期からあった方法です。 プロジェクトの構成や工数、実装難易度によって WebView を使った開発を採用することもあると思いますが、個人的な意見としてそれは選択肢としてアリかと思っています。 最近アプリチーム
VScode 上で今開いているファイルを Vite でプレビューする拡張を作ったら便利
// 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 が絡むとプレビューに失敗する。
特定の端末のみで起こる WebView プチフリーズを Tracing を利用して追った話 - SmartNews Engineering Blog
こんにちは、スマートニュース株式会社の紀平です。 SmartNews のアプリ内では、最近 WebView を使った機能を多数公開しております。そのうちの一つにショッピングチャンネルという機能があるのですが、今日はそのショッピングチャンネルのタイムセール枠で以前発生した、謎のプチフリーズ問題の調査手法をご紹介します。 tl;dr 特定の Android 端末でプチフリーズが発生した 再描画領域を減らすことで現象は改善した Chrome の Tracing 機能を利用し、ブラウザのソースコードまで参照して、ついに根本原因まで突き止めた タイムセールで起こった問題 タイムセールは、SmartNews のショッピングチャンネル内において WebView で提供されている、期間限定のお得な商品をアグリゲーションした機能です。EC サイト各社のご協力の上にご提供しております。内部は HTML5 で開
[Swift]WKWebViewで長押しによるメニュー表示を止める | DevelopersIO
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)
やっと UIWebView から WKWebView に乗り換えられる話 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは〜！ モバイルチームの向井田です。 iOS の UIWebView が deprecated になって数年、弊社の iOS アプリもようやく WKWebView に移行できるようになりました。 そこで、今回は私たちが WKWebView に乗り換えられるようになった理由を語っていきます。 TL;DR iOS12 から WKWebView でクライアント証明書を使ったSSL通信が正常に動作するようになりました。 kintone モバイルのリニューアル kintone モバイルが大幅リニューアルし、UIを一新しました 🎉 https://kintone.cybozu.co.jp/update/main/2019-05.html リニューアルを期に、コードを Objective-C から Swift ベースに書き直しています。 kintone モバイルは JavaScript カスタ
Google Play StoreでPWAを配信できるらしい | Hypertext Candy
この記事では、先日 Medium に公開された Maximiliano Firtman 氏による記事『Google Play Store now open for Progressive Web Apps 😱』を要約して感想などを加えています。 記事のタイトルを訳すと『Google Play ストアで PWA を配信できるようになった 😱』という感じでしょうか。Web エンジニアとしては惹かれるタイトルですよね。ただ私は Android 事情には疎いですし、結局どういうことなのか？記事を読んでまとめてみようと思いました。 まとめると Android 向け Chrome のバージョン72から Trusted Web Activity が実装された。 ネイティブアプリ内で Web アプリを起動する新しい仕組み。WebView など既存の同種の仕組みの欠点を補っている。よりネイティブと We
スマートフォン用サイトを制作するデザイナーさんに伝えたいWebブラウザのViewport(表示領域)の話。エンジニアにも役立つかも。 Part2｜Takumi Hasegawa (unshift)｜note
スマートフォン用サイトを制作するデザイナーさんに伝えたいWebブラウザのViewport(表示領域)の話。エンジニアにも役立つかも。 Part2 今回は ・少し厄介なランドスケープ時のViewportの高さの話 ・かゆいところに手が届きそうで届かないCSSのvw/vhの話 ・これまた厄介なアプリ内ブラウザ (WebView)でのvhの話 の三本立てでお送りしたいと思います。 ・・・ 少し厄介なランドスケープ時のViewportの高さの話Webコンテンツ閲覧中に、スマートフォンを横向きで使うシチュエーションって個人的にはそんなにないですが、全画面 (html, bodyのwidth, heightが100%)のコンテンツだったり、キービジュアルをViewportに合わせた大きさにする、といったようなコンテンツではランドスケープ時の挙動に注意が必要です。 Android Chromeの場合 A
WebViewを使って面倒なことから逃げよう
WebViewで面倒なコンポーネントを対応しませんか？ リポジトリはこちら -> https://github.com/watanabeyu/webview-example
メルカリのフロントエンドチームが、どんな開発体制で技術選定しているのか聞いてきた！
日米通算1億ダウンロードで日本最大フリマアプリ「メルカリ」。今回はメルカリの小嶋仁司さん、坂本結衣さんにメルカリのフロントエンドエンジニアたちがどんな技術や体制で開発しているのか、HTML5 Experts.jp白石俊平編集長が直撃インタビューしてきました！ メルカリで重要な役割を果たしているWebView 白石：お二人は、メルカリでどんなお仕事をされているんですか？ 小嶋：私は2015年10月に入社して、アプリケーション内のWebViewページの開発を担当してきました。具体的には大規模なトラフィックがある取引画面や、配送サービス「メルカリ便」に新たな運送会社を追加したり、「大型らくらくメルカリ便」の配送機能を拡大したり、集荷サービスなどの開発も行いました。 白石：ビジネス的に重要な部分を作っていらしたんですね。 小嶋：技術としてはいわゆるHTML5、CSS3、JavaScriptを使った
Android4系端末のTLS1.1&1.2対応について - Qiita
各バージョンの対応状況 Androidの各バージョンにおいてTLSの対応状況は以下のようになっています。 ※ Template:ウェブブラウザにおけるTLS/SSLの対応状況の変化より 5.0以降については「TLS / SSL のデフォルトの構成の変更」にも記載の通り、デフォルトで有効になっています。 Android4.0.4未満については非対応ですが、4.1から4.4.4については規定で無効となっています。本記事ではこれを有効にする方法について書いていきます。 参考：SSLSocket：Default configuration for different Android versions GooglePlayサービス経由でセキュリティプロバイダをアップデートする 公式の「SSLの脆弱性攻撃から保護するためにセキュリティプロバイダをアップデートする」へ記載の通り、 GooglePlayサ
Android 7.0 NougatではWebViewの機能をChromeが提供 | juggly.cn
Google が Android 7.0 Nougat で WebView の機能を Chrome に統合していることを Android Deelopers サイトで明らかにしました。 WebView は、サードパーティの Android アプリで WEB コンテンツをレンダリングするための仕組みです。Android 6.x までの Android には Chrome とは別のアプリ「Android System WebView」として提供されています。 つまり、Chrome 51 からは、端末が Android 7.0 Nougat の場合は WebView がなくても Chrome が同等の機能を提供するので、WebView アプリは不要になり、メモリの消費量が削減され、最新版へのアップデートといったメンテも不要になります。 Android 7.0 Nougat ではデフォルトで We
Android 7.0で「WebView」が無効のまま有効にすることさえできない理由 | juggly.cn
2023年12月 (1) 2023年11月 (116) 2023年10月 (79) 2023年9月 (28) 2023年8月 (7) 2023年7月 (6) 2023年6月 (101) 2023年5月 (229) 2023年4月 (201) 2023年3月 (206) 2023年2月 (147) 2023年1月 (193) 2022年12月 (146) 2022年11月 (54) 2022年10月 (1) 2022年9月 (1) 2022年8月 (1) 2022年7月 (3) 2022年6月 (1) 2021年9月 (1) 2021年8月 (8) 2021年6月 (3) 2021年4月 (4) 2021年3月 (6) 2021年2月 (1) 2021年1月 (3) 2020年12月 (2) 2020年11月 (2) 2020年10月 (5) 2020年9月 (12) 2020年8月 (40
Android 7.0でChromeがWebViewを提供するようになった仕組み - Qiita
Android 7.0からはChromeがWebViewを提供する みたいのはあちこちでバズってる割に、中身の仕組みをちゃんと書いた記事は殆ど見ません。 個人的にはとても残念に思います。 ということで、中を見てみました。 まずは、Lollipopまでのおさらい WebViewのAPIを提供するのが、WebViewFactoryProviderで、 WebViewFactory::getProvider のなかで ネイティブ側の準備：libwebviewchromium.soの探索とロード パッケージ名はgetWebViewPackageName()で取得 Java API側の準備：WebviewProviderの生成と初期化 WebViewChromiumFactoryProviderが内部でWebViewDelegateを実装する みたいな流れの処理があります。 ソースレベルで見たければ
YJTC18 C-2 Webの資産を活かしたアプリシフト
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
React Native(iOS)で結構使えるWKWebView - Qiita
せっかくReact NativeなのにWebView使うの？って言われそうですが、過去のWeb資産をそのまま使えるので、Markdownエディタの表示機能で採用するなど適材適所で使っていくのはありだと思います。 しかし、オフィシャルのWebviewはUIWebviewを使っているので、ブラウザの下に出てくるナビゲーションバーを消せないなど常にフルスクリーンのWebviewを使いたいときなどは使うことができません。 そこで、今回説明するのがreact-native-wkwebviewというもライブラリです。それでは見ていきましょう。 Nativeライブラリを使うのでExpoユーザはejectする必要があります。要件を整理して必要な場合に使いましょう Installation READMEは、npm installとrnpmを使ってますが、今風に下記のようにします。 $ yarn add re
Google I/O 2017 に行ってきました - Hatena Developer Blog
はじめに みなさま、こんにちは。株式会社はてなの id:funnelbit です。はてなでは Android アプリ、また最近では iOS アプリの開発に携わっています。 さて、Google は毎年5月に Google I/O という開発者向けイベントを開催しています。今年も現地時刻で5月17日から開催されました。Google I/O は抽選でチケットが決まる仕組みで、僕はこれまで当選することはなかったのですが、この度運良く Google I/O 2017 に行く事ができ、現地で発表と空気感を味わってきましたので、（少し前の話題になりますが）その一部を共有したいと思います。 今回の Google I/O では去年に引き続き機械学習を軸にした機能を押してきており、さらに AI にシフトしていくと強く明言。もはや「どのプラットフォームでソフトウェアを作る」かはさほど重要ではなく、いかなる環境に
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web on Android | Chrome for Developers
Chromiumベースの「Microsoft Edge」をアプリに組み込める「WebView2 SDK」が初の更新／ネイティブ＆Webのハイブリッドアプリ開発を加速
Windows 10に“Edge”エンジンを利用した“WebView”が導入へ ～Windows Developer Day／新しいアプリケーション形式「MSIX」や、「Adaptive Cards 1.0」なども発表
SlackはどうやってBrowserViewに乗り換えたのか / How Slack move from webview to BrowserView
