2021/6/25 Tech x Marketingの発表資料
こんにちは、スマートニュース株式会社の紀平です。 SmartNews のアプリ内では、最近 WebView を使った機能を多数公開しております。そのうちの一つにショッピングチャンネルという機能があるのですが、今日はそのショッピングチャンネルのタイムセール枠で以前発生した、謎のプチフリーズ問題の調査手法をご紹介します。 tl;dr 特定の Android 端末でプチフリーズが発生した 再描画領域を減らすことで現象は改善した Chrome の Tracing 機能を利用し、ブラウザのソースコードまで参照して、ついに根本原因まで突き止めた タイムセールで起こった問題 タイムセールは、SmartNews のショッピングチャンネル内において WebView で提供されている、期間限定のお得な商品をアグリゲーションした機能です。EC サイト各社のご協力の上にご提供しております。内部は HTML5 で開
最近趣味や仕事の Web アプリケーションでメモリリークに遭遇して、頑張ってメモリリークの原因を突き止めて修正する、ということがあった。その過程でメモリリークについて色々調べて知見が溜まったので、学習資料の紹介という形でアウトプットしてみる *1。 前置き 紹介する記事がかなり偏っていることに注意 冒頭で触れたメモリリークを解決するために読んだ記事をまとめただけなので、内容にそれなりの偏りがある 例えば id:mizdra が遭遇したメモリリークは全てブラウザ上で発生していたものだったので、これから紹介する内容も主にブラウザにおけるメモリリークに焦点を当てたものになる GC がどうメモリをどう解放しているか、何故メモリリークが発生するのかは全てカット 調べれば色々な記事が出てくるので、必要に応じて読んでください 基本的な知識を抑える まずメモリリークとメモリ撹拌の違いを学ぼう どちらも同じ
学部 3, 4 年生向けの特別講義で『ウェブの進化とウェブブラウザ開発の最前線』というタイトルで話をしてきました。 ウェブの進化の歴史を知ることで現在のトレンドについて理解し、またウェブブラウザというグローバルで大規模なソフトウェアの開発の一端を垣間見ることで、ウェブやウェブブラウザの開発に少しでも興味を持ってくれたら良いなぁという気持ちで話をしてきました。 なお歴史観については私の事実誤認も含まれると思うので、間違いを見つけたら教えて下さい :-) 追記 (随時) たくさんの反応を頂きありがとうございます！次回同じような資料を作るときの参考にできるよう、ここにメモしていきます。ウェブは無限に話せる話題があって楽しいですね！ ウェブ以前のハイパーテキストの歴史も取り入れるべきでは？ ありがとうございます！おっしゃるとおりで、ウェブの進化史と言いつつウェブが公開されてからの話しかしていないの
最近Chrome DevToolsについて調べていて発見した便利機能を紹介します。 誰もが使える最高便利な開発マシンChrome DevToolsを使いこなして開発体験を変えましょう！ 1. $0で選択中のDOM要素の取得 特定の要素に何かしたいという時には、要素のIDやclassを確認してConsoleでdocument.querySelector("#xxx")で取得するというのが一般的だと思います。実はそれはカーソル選択と$0で代替できます。 Classや、IDがついていない特定のDOMを取得したい時とかにも使えるので地味に便利です。 手順 カーソルで取得したい要素を選ぶ Consoleタブで$0を入力 最近知ったChrome DevToolsの便利機能① $0 での選択中のDOM要素取得 Elementsタブで選択状態のDOM要素は、Console上で $0 を入力することで取得で
はじめに こんにちは、白川です。 Webアプリケーションは概ね、複数のブラウザに対応する必要があります。 Internet Explorer、Firefox、ChromeなどのPCブラウザだけでなく、 iPhoneやAndroidなどのモバイル/タブレットのブラウザにも対応しないといけなかったり、 同じブラウザでも複数のバージョンに対応する必要があったり、 OSのバージョンの違いにも対応する必要があったりします。 そうなってくると、テストが大変です。 検証が必要なOSとブラウザとバージョンの組合せが増えれば増えるほど、手動でテストを行なうことが大変になっていきます。 しかし、Selenium Gridを使えば、 一つのテストスクリプトで複数の実機のブラウザで自動にテストを実施することが可能となります。 Selenium Gridについて テストスクリプトを実行するサーバからSelenium
このブラウザ バージョンのサポートは終了しました。サポートされているブラウザにアップグレードしてください。
経緯 もともとMouseoverDictionaryという素晴らしいFirefox用辞書があったのですが、Quantumの登場とXULの廃止とともに使えなくなってしまったため、自分用にChrome拡張をつくった次第です。 ソースコード 実装に関わる技術寄りの用語: React, esbuild, chrome.storage.local, chrome.storage.sync, Cross-extension messaging, Hogan, debounce, resizable/draggable, intl.v8BreakIterator, deinja, クロスブラウザ, など。 ※詳細は「Mouse Dictionaryの技術的な話」をご参照ください https://qiita.com/wtetsu/items/2a5568cb0b5a38c003fb 使い方 インストール
Chord Dictionary 音楽のコードの構成音をその場で確認できるChrome拡張機能を作りました。 Chrome ウェブストアに公開しています。 成果物 任意のサイトでコードネームにポインタを当てるとコードの構成音が見れます。 コードが表示されている状態でCtrl+Spaceを押すとコードが再生されます。 コードの構成音をその場で確認できるChrome拡張機能をアップデートしました。ローマ数字表記追加（認識も可）やクリックでの再生機能も追加して最強になってます💪https://t.co/idSgKoc0GE pic.twitter.com/TkvZpkYvko — あっしゅん (@ashcolor06) March 5, 2020 開発 経緯 Mouse Dictionaryをみて音楽のコードでも同じ機能があれば便利なのでは？と思って調べてみると、コードの変換に関してはコード進
Rails アプリケーションの開発において、自分の変更に関係のないテストのせいで CI がコケるとストレスですよね？真っ先に直したくなりますよね？不安定なテストを直すのは大変な労力が要ると思ってませんか？実は、たいていのケースは簡単に再現確認ができるし、不安定になる要因もだいたい決まっているし、ログやスクリーンショットを見れば原因も簡単に特定できるんです！ そんなわけで、日頃不安定なテストを潰している身として知見みたいなものをまとめてみました。 今回利用した環境は次のとおりです。 rails 6.0.0 capybara 3.29.0 selenium-webdriver 3.142.4 rspec-rails 3.8.2 Google Chrome 77.0.3865.75 (headless で使用) ChromeDriver 77.0.3865.40 (f484704e052e0b5
Google ChromeのEngineering ManagerであるAddy Osmani氏による、Chrome 75でリリース予定のloading属性についての解説を紹介します。 loading属性とはブラウザがネイティブで遅延ロードをサポートするもので、img要素やiframe要素を簡単に遅延ロードさせることができます。以前は、lazyload属性として開発されていましたが、loading属性という名前に変わる、とのことです。 Native image lazy-loading for the web! by Addy Osmani 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Chrome 75でリリース予定のloading属性 ブラウザがネイティブで遅延ロードをサポート loading属性とは loading属性の
Progressive Web Apps are coming to the desktop The generic sensor API makes it way easier to get access to device sensors like the accelerometer, gyroscope and more. And BigInts make dealing with big integers way easier. And there's plenty more! I'm Pete LePage. Let's dive in and see what's new for developers in Chrome 67! Want the full list of changes? Check out the Chromium source repository cha
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 転職ナビのフロントエンドを担当しています、@sueshinです。 Livesense - 関 Advent Calendar 2017、22件目をお送りします。 どうぞ宜しくお願いします。 はじめに フロントエンドでよく注目されるJavaScriptではなく、 地味で渋いまるで関節技のような、Google Chrome Devtoolsを使った技術をtipsの形式でまとめました。 免責事項 ショートカットなどは全てMacのキーボード操作にしています。Windowsユーザーは適宜読みかえてください。 Chromeのバージョンは63系に基づ
このポストは Chromium Browser Advent Calendar 2017 の 12/8 分です。先日 Medium に投稿した英語版を翻訳し、日本向けに若干加筆したものになります。 Payment Request API が登場してからというもの、おかげさまで非常に多くの方に興味を持っていただいています。一方、その複雑さから勘違いや、誤った情報を元に盛り上がってしまっているような状況が起きています。この記事では、みなさんの反応を見ている中でよくある誤解を解き、正確な情報を提供しようと思います。 そもそも Payment Request API が何かご存じないという方は、まずここから読んでいただくと良いと思います。 Web Payment API? Chrome Payment API? Google Payment API? # すべて間違いです。正しくは "Paymen
この記事は Docker Advent Calendar 2017 の1日目の記事です。 こんにちは。Emotion Techの子安です。すっかり冬ですね。今日は夜の銀座からお送りします。 なんでもDockerで Dockerに触れるようになって約2年ほど経ちました。最近は技術検証はもちろん、何かをちょっと試したいときなども、新しい環境が必要になるとまずはDockerで構築してみることが当たり前に（自分的には）なってきています。 で、今回はWebからちょこっと何か取ってきたいとき、いわゆるスクレイピングをしたいとき、Dockerがあれば簡単に環境が作れるぞという話をします。 ※なお、スクレイピングは用法・用量を守って正しく行いましょう。あくまで自己責任でお願いしますね。 要件 とあるサイトから情報を抜き出したい ブラウザを操作してサイトを巡回する Docker上に構築する プログラミング言
これは Chromium Browser アドベントカレンダーの一日目の記事です。初日ということで、本記事では Chromium のソースコードを読む上で役に立つであろう、プロジェクトのディレクトリ構成やファイル構成を紹介します。 (2018/04/09) “The Great Blink mv”1 プロジェクトによってついに WebKit ディレクトリが blink ディレクトリにリネームされました。それに伴い本記事の内容を更新しました。差分は以下の通りです。 third_party/WebKit/Source を third_party/blink/renderer に置換。 blink/ 内のファイル名の命名規約を Bar.{cpp,h} から bar.{cc,h} に置換。 置換に伴う説明文の修正。 (2017/12/01) ディレクトリ構成について追記しました。 Chromium
オープンソースのウェブブラウザ Chromium の実装や最近の動向に関するカレンダーです。参加者募集中! :) Chromium is an open-source web browser. These articles will introduce its implementation and the recent trend of the project. Anyone can join. We need more participants! :) Either Japanese or English is OK. Chromium Code Review Advent Calendar: https://qiita.com/advent-calendar/2017/chromium-codereview
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
