[@JSConf.jp おかわり Node学園46時限目](https://nodejs.connpass.com/event/344588/)にて発表した資料です。

Ubie プロダクトプラットフォーム所属の nerocrux です。今回は Ubie において、 LINE ログインを成功させるために工夫したことをいくつか紹介したいと思います。 面白いこともすごいこともやってないし、対象読者もよくわかりませんが、興味があったら読んでみてください。 はじめに 症状検索エンジン「ユビー」について Ubie では、症状検索エンジン「ユビー」（以下、ユビーと呼ぶ）という一般ユーザー向けのサービスを展開しています。ユーザーが簡単な質問を回答することで、関連する病名や、適切な受診先情報を得ることができるサービスとなっています。 ユビーは Web ブラウザ経由で利用されることが多いですが、iOS / Android のネイティブアプリも提供しています。 ユーザーがユビーを利用する際に、ユビーのアカウントを作成することで、一貫性のある問診・受診・受診後のフォローアップ体

iOSのブラウザ（Safari、Chromeなどなど）で体験の良いWYSIWYGエディタを作るのは無理ゲーである。色々と理由はあるが、いちばん辛いのはバーチャルキーボード（オンスクリーンキーボード）を表示したときの挙動だと思っている。 キーボードが表示されているときにposition: fixedが効かない WYSIWYGエディタではテキストの装飾や画像挿入などのボタンを画面のどこかに固定したくなることが多い。 しかし、iOS Safariではキーボードが表示されているときにposition: fixedなどのCSSだけで画面上に何かを固定させることが難しい。 position: fixedとbottom: 0 やtop: 0を使っても要素が画面に固定されない仕様となっている（これはposition: stickyにしても同じ）。 ワークアラウンドも上手く動かない noteやscrapbo

We are finally able to let you in on a secret: in January we successfully ran the first WebContainer projects on Safari. Today we are excited to announce that WebContainers run on Safari, iOS, and iPadOS 🥳 Starting with iOS 16.4, you can enjoy the interactive code examples and playgrounds right from an iPhone or iPad. Safari support is now in beta, and we’d love to extend a warm invitation to you

LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog TL;DR:2022にフロントエンド開発で最も考慮すべきユーザー環境は、パフォーマンスでは低スペックのAndroid端末、標準仕様では2年前のSafari、そしてネットワークでは４Gです。それに対してはJSへの過剰依存などが原因で主にパフォーマンスの面でのウェブ全体の対応がよくありません。 こんにちは！LINEフロントエンド開発室のダバロス アランです。この記事のタイトルを見て「釣りタイトルですね〜」と考えている方がいると思いますが今回に限ってはそれを大目に見てください。それはなぜかと言いますと、2021年から2022年にかけて私たちフロントエンドエンジニアが全体的に考え方を改める必要が出るほど大きな変化がありました。 その変

フィンガープリントやオンライン詐欺を特定するためのAPIを提供するFingerprintJSが、Apple純正ブラウザのSafariにはGoogleアカウント情報が任意のウェブサイトに漏えいする脆弱性が存在すると指摘しています。 Exploiting IndexedDB API information leaks in Safari 15 https://fingerprintjs.com/blog/indexeddb-api-browser-vulnerability-safari-15/ Safari 15 bug can leak your recent browsing activity and personal identifiers - The Verge https://www.theverge.com/2022/1/16/22886809/safari-15-bug-lea

著者情報 : kota-yata.com プレゼン動画 : https://www.youtube.com/watch?v=BcaPCnWZuvY

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Firefox / Safari 先日Appleが、Safariは幾つかのWebAPIに対応しないと公言しました。 日本語記事も幾つか出ています。 しかし、どのサイトも対応しないAPIの一覧を並べてはいるのですが、それぞれのAPIが具体的にどのようなものなのかを記載した記事が見当たらなかったので、以下はそれらについて調べてみたものです。 対応しない理由 a threat to user privacy、すなわち、あくまでブラウザフィンガープリントなどの手段によって個人を特定・追跡できてしまうからという理由です。 セキュリティ的にも問題な

初報を聞いたとき、描画系だけ blink に入れ替えて処理系は V8 使わず ChakraCore などに入れ替えるのかな、と思っていたが、どうも V8、というか chromium 一式を使うらしい。 正直に言って、Edge が死ぬことに、そこまで強く思うところはない。Edge は内部的に自身のベンダープレフィックスで webkit と名乗るぐらい (標準ではなく) webkit との互換性の意識が高いので、お前自分のことを webkit だと思ってるもんな、みたいな気持ちがあった。 webkit みたいなブラウザが消えて、webkit 後継のブラウザをベースに作り直される。開発者として追うべきは、個別の実装ではなく依然として標準仕様であって、それだけの話。 リリースサイクル 僕が思うに、 MS の抱えていた真の問題は、Windows に紐付けられたリリースサイクルとサポートにあって、Wi

Intro macOS Mojava は OS レベルで Dark Mode に対応した。 しかし、 Web コンテンツは依然として白背景黒文字ベースのデザインが多く、結果ブラウザの中だけ眩しいという問題がある。 Safari TP69 では、これにメディアクエリで対応するための prefers-color-scheme が実装された。 これを用いた DarkMode 対応と、本ブログの DarkMode 対応、および策定中の User Preference Media Features について解説する。 Update 画像の対応について追記した Code Block の対応について追記した 2019/1 に Chrome の Intents が出された。 Intent to Implement: Media Queries: prefers-color-scheme feature I

Intro 筆者がやっている Podcast である mozaic.fm の中で、 Monthly Web という月ごとの Web の動向をまとめる回をやっている。 未だに落ち着いたとはいえないが、 2017 年 7 月に初めてから 1 年続けたので、結果として現状どうなっているかをログに残す。 Monthly Web mozaic.fm は、 Web について「今何が起こっているのか」「これからどうなっていくのか」を議論するための Podcast である。 そこでは、ゲストをお呼びし、特定のテーマについて議論をするということを行ってきた。 しかし、このテーマの設定と消化よりもよほど早い勢いで、多くの重大なトピックが日々生まれており、その大局的な流れを扱うことはできないかずっと考えていた。 通常回が「縦を深く掘る」議論であるとすれば、「横の流れを繋ぐ」部分の議論を行うことができれば、議論す

Update 2018/3/1 : Safari 11.0.3 の UA を追記 2018/4/16: Safari 11.1 の UA を追記 2018/5/1 : OS のバージョンは固定されなくなった件を追記 2 月に方針が変更され、OS のバージョンは固定されなくなった。 このため、iOS のバージョンアップにより発生するバグなどを回避する道は残されたことになる。 一方 Webkit のバージョンは(予定では 605.1.15 に)固定されることになりそうだ。詳細は、以下を参照。 Safari の UA 文字列が固定されて固定されなくなったおはなし - fragmentary Intro 少し前に Safari Technology Preview 46 がリリースされた。 Service Worker のアナウンスに目がそちらに盗まれている一方、しれっと以下の一文がある。 Fro

はじめまして、開発基盤部フロントエンドエキスパートチームの小林(@koba04)です。 チームメンバーがまだひとりなので、仲間を募集中です！ macOS High Sierra及びiOS11のSafariで導入されたIntelligent Tracking Preventionについて紹介します。 詳細は、下記のWebKitのブログに書かれていますが、Intelligent Tracking Preventionはクロスサイトトラッキングを制限することを目的とした機能です。 Intelligent Tracking Prevention クロスサイトトラッキングとは まず最初にクロスサイトトラッキングとは、複数サイト間でのユーザーの行動をトラッキングすることです。 クロスサイトトラッキングを行うには、トラッキングしたいサイトに、Cookieを設定した共通のリソースを埋め込みます。 これによ

webpackを使ったサイト、極端にデバッグしずらい (外部ライブラリが eval(文字列) の形で埋め込まれる)ので、はっきり言って大キライだったりする— コラーゲンたっぷりさん (@uupaa) 2017年4月19日 見知らぬコードが minifyされ、さらに eval されているのをデバッグしろとか、暴力にも等しい要求なんだよね。そりゃキライになるよ— コラーゲンたっぷりさん (@uupaa) 2017年4月19日 「環境Aの言語Bで書かれたコードを言語Fに変換した、環境C/D/Eで動くと思うのでデバッグしろ」というのも極端にデバッグしづらいという理由から避けるようにしている。 デバッガビリティに問題がある環境は、心がすり減るのでイヤ(時給1万円なら頑張る— コラーゲンたっぷりさん (@uupaa) 2017年4月19日 js minifyあるある A「パフォーマンスに問題があるので

この記事は Selenium/Appium Advent Calendar 2015 の23日目の記事です。 スマートフォン向けの Web UI テストを行う為のツールとして，Chrome Developer Tool, Safari Responsive Design Mode（以下まとめて『開発者モード』）があります． ※本当の開発者モードは、DOM とか Network とかその他色々……っていう細かい突っ込みは無しでお願い致します。 これ単体だけでも非常に便利で，もはやスマートフォン向け Web 開発のためには欠かせないツールになっていますね． 開発者モードは以下のようなことをやってくれるツールです。 端末の画面解像度（例：幅1080ｘ高1920）をシミュレーションした上で，画面上に表示できる程度の縮尺（50%とか）で表示 サーバーにリクエストする際の User Agent 文字列

Webkit の Bugzilla で強烈なバグが報告されていると、同僚に教えて頂いた。 あまり話題になっていないものの、単純ゆえに強烈なバグだと思ったので Qiita にも公開しておく。 https://bugs.webkit.org/show_bug.cgi?id=151354 にそのバグ報告が上がっている。 最初に Google+ でやりとり があった模様。 URL のクエリ文字列から値を取り出す関数が正常に動作していないことから発覚したようだ。 その後は、簡単なテストケースに落とし込まれ jsfiddle というサイトにテストケースが公開されている。 Safari でこのページを開くと、実際に JavaScript を実行して確認できるようになっている。 続報 (2015.12.14) この記事を上げてすぐに Bugzilla の方で進展があった。 Yusuke SUZUKI さん

HTML5も昨年正式勧告となり次のHTMLを目指し色々と楽しんでいると思いますが各ブラウザの実装状況は今日時点でどうなっているでしょうと去年とまったく同じで。このエントリーは「HTML5 Advent Calendar 2015」12月1日の記事です。 HTML5 TESTとは HTML5 TESTとは555のチェックポイントから各ブラウザの実装状況をチャックするツールです。これは W3C が行っているものではなく github アカウント"NielsLeenheer"氏によるものです。 HTML5test - How well does your browser support HTML5? NielsLeenheer/html5test · GitHub ブラウザを点数評価してみる Google Chrome [バージョン 46.0.2490.86 (64-bit)] 昨年： Goog

追記: このエントリを投稿してから3日後に Google から AMP が発表されました。AMP は 既存の HTML/CSS/JavaScript の機能を制限することで、ページの表示パフォーマンスを改善するものです。AMP で書かれたページは Google 検索ランキングにおける特典が受けられるといった情報もあります。AMPの実装方法

さてさて、JavaScriptで「日本語入力がON & 変換確定時に何か処理をしたい」と考えました。「日本語の変換が確定した」という情報を得なくてはなりません。キーイベントを受け取ることで、日本語入力中 / 変換確定 の区別は可能なんだろうか。 手元にある、いくつかのブラウザで挙動を調べてみた。 Firefox 3.6.x (Gecko 1.9.2) : Mac OS X , Windows , Linux(Xubuntu) 日本語変換中は、全てのキーで keydown,keypress,keyup,全てのイベントを受け取らない。 確定のエンターキーを押したときのキーアップイベントから復活。 Internet Explorer 8 日本語入力中、keydownにはキーコード"229"が、keyupには押したキーのキーコードが返ってくる。キープレスイベントは発生しない。 日本語変換中の 複数