Browserslist でサポートブラウザを設定しよう - BASEプロダクトチームブログ
この記事は BASE Advent Calendar 2021 の 5 日目の記事です。 基盤チームの右京です。 最近ひょんなことから browserslist の設定を見返したのですが「babel や autoprefixer で必要になったので導入した」以上はあまり触れられていなかったため、この機会にいちから見直してみようと思いました。 browserslist? https://github.com/browserslist/browserslist 簡単に言えば、クエリを書くとそれに該当するブラウザをリストで取得できます。babel(preset-env) や autoprefixer はここから取得出来るリストを利用して、必要な変換内容を決定しています。単純にバージョン指定でのクエリが記述できるだけではなく、利用統計に基づく絞り込みも可能となっています。例えば、0.2% 以上のシ
Webに最適なメディアフォーマットを整理する - 2021
macOS 12 Montereyがリリースされました。また2021年09月にはiOS 15もリリースされています。 2020年にリリースされたiOS 14 / macOS 11ではWebPのサポートを開始し、macOS 12ではOpusのサポートを開始しました。 また最近ではGoogle Chrome、FirefoxがAVIFのサポートを開始するなど、新たなメディアフォーマットも登場しています。 そこで2021年現在、Webにおける最適なメディアフォーマットを整理しようと思います。 TL; DR 画像: WebP もしくは SVG 音声: AAC - .mp4 動画: H.264 - AAC - .mp4 もしくは VP9 - AAC - .mp4 最適とは なるべく多くのデバイスとOSとブラウザでデフォルトで使える macOS: Chrome、Firefox、Safari、Edge (
Flutter 2で使えるWebAssemblyレンダラー CanvasKit は本当に高速なのか？ - GMOインターネットグループ グループ研究開発本部
（補足） デスクトップブラウザにおいては、スクリーンサイズに統一性を持たせるために開発ツールで下記端末のスクリーンをエミュレートして検証します。 iPhone 6/7/8 Plus相当（414×736、DPR 3） 4.検証結果 検証時点でのFlutterのバージョンは 2.0.2 です。 CanvasKitは 0.24.0 （https://unpkg.com/[email protected]/bin/canvaskit.wasm）が利用されていました。 それでは各ブラウザにおける結果を見ていきたいと思います。 1.MacBook Pro (13-inch, 2020) , macOS 10.15.7 , Chrome (89.0.4389.82) , Blink パーティクル数4,000あたりから差が出始め、CanvasKitの方が30〜40%程度高いパフォーマンスを出しているように
Microsoft、パスワードマネージャー「オートフィル」を公開 - iPhone Mania
これまでベータプログラムで提供されていたパスワード管理のための「Microsoft オートフィル」が、iPhone、iPad、Mac、Windowsコンピュータ、Androidデバイス向けに正式な機能として公開されました。 パスワードを保存し、自動的に入力 Microsoft オートフィルを使用すると、パスワードを保存して、Windows、macOS、Android、iOS のすべてのデバイスで自動的に入力することができます。 Microsoft オートフィルでは、次の機能を使用できます。 パスワードをオンラインで保存することにより、パスワードを忘れずに済みます アクセスするサイトでパスワードを自動入力することで時間を節約できます 保存されたパスワードにすべてのデバイスでアクセスできます Microsoft オートフィルは、iOSとAndoridデバイスでは「Microsoft Authe
iOSでも100vhをいい具合に調整して画面の高さいっぱいに要素を表示させる
TAK(@tak_dcxi)です。今回もCSSに関する投稿です。 以前このようなツイートをしました。 メインビジュアルなど、画面いっぱいに要素を表示するためにheightやmin-heightに100vhを指定する。そして、iOSで表示確認した時に以下のような問題が起こるわけです…。 iOSのSafariでの100vhが気に食わない問題 iOSのSafariでは100vhの計算にアドレスバーが考慮されていないため、アドレスバー分押し出されて格好悪く表示されます。ちなみにiOSのGoogle Chromeは中身SafariなのであれもSafariです。 この問題に立ち向かうために、実装者はJavaScriptを利用して高さを指定したり、height: 100%;のバケツリレーを行ってアドレスバーまで考慮した画面いっぱいの表示を実現するために頑張ってきたわけです。 そんな中、先程のツイートから
Everything You Ever Wanted to Know About inputmode | CSS-Tricks
Based on my tests, inputmode is indeed supported in Opera Mini and Opera Mobile, which contradicts the Caniuse data above. I’ve reached out to see if we can sync up our findings. But before we go deep into the ins and outs of the attribute, consider that the WHATWG living standard provides inputmode documentation while the W3C 5.2 spec no longer lists it in its contents, which suggests they consid
OAuth2対応したPWAをiOSでホーム画面に追加すると認証が厳しい - yasutomogのブログ
概要 社内アプリをPWAで構築したときのはなし 社内の諸々はGoogleアカウントで管理しているので、認証はGoogleのOAuth2を使用 PWAはNuxt.jsを使って作成し、APIはPHPのLaravel（社内サイトがLaravelを使ってたので流用）を使って作成 Google OAuth 2.0 認証を使用 結論（感想） Nuxt.jsを使うことで、単純なPWA構築はSPAの開発経験者であればいける（キャッシュ機構、バックグラウンド実行、オンラインとオフラインの切替時の制御とか、この辺のナレッジを溜めることでPWA経験者としての優位性が出てくると思う） OAuth2を使用する場合、認証画面を開くときに単純なリダイレクト（ブラウザの別タブで表示される）にするよりかは、window.openで認証画面を開き、認証成功時にwindowを自動で閉じるような流れにするほうが、UI/UX的にい
ただのWebエンジニアがスマホサイトを開発するにあたって知っておきたいこと - Qiita
今更だけど、スマホサイト開発未経験のエンジニアが、スマホサイトを開発して気づいたことやハマったことなどの雑多なまとめです。 対象はiOS, Androidです。 シェア率(日本) 最近の動向など 2014年4月のスマートフォン販売シェア、日本ではiOSがトップ、欧州ではWindows Phoneのシェアが各国で増加（Kantar調査） | juggly.cn Apple、2014年第1四半期において日本スマートフォン市場のシェアを36.6％獲得！ドコモ版iPhoneで大躍進 | gori.me（ゴリミー） 2013年第4四半期 国内携帯電話出荷台数ベンダー別 シェア 2013年第4四半期および2013年 国内携帯電話・スマートフォン市場規模を発表 より iOS, Android共に半々くらいのシェア率で考えれば良さげ。 Androidシェア(世界) iOSのOSは基本的には最新のバージョン
方向音痴でも安心？ 相手までの方向と距離だけを表示する待ち合わせWebサービス「いくよくるよ」
待ち合わせ相手や目的地までの方向と距離だけを表示するWebサービス「いくよくるよ」のβ版が公開されました。現在地情報を送信する端末で利用できます。 右画面のように目的地までの距離や方向に従って歩くだけで待ち合わせ相手に会える 「いくよくるよ」は地図が読めない重度の方向音痴向けに制作され、画面に表示される方向に歩いていくだけで待ち合わせ相手に会えるというサービス。「二人で会うモード」を選んでURLを相手に送り、相手がURLからアプリを起動させると、互いの画面に距離と方位磁針が表示されます。あとは画面に従って歩けばご対面、というシンプルな仕組みです。 目標は場所にも設定できる もう1つの「目的地に行くモード」では、地図画面で「東京タワー」など名前を検索して目的地を設定すると、「二人で会うモード」のように距離と方向が表示されます。 今のところは「超」β版で、Android端末ではまともに動作しな
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
トラッキング規制と代替技術の最新情報まとめ
PWA Beginners 勉強会 #4 A2HSのちょっと深い話v2
Mobile Safari Change log (プロ用) - latest log