Rustでブラウザを操作する「rust-headless-chrome」を試してみた | DevelopersIO
こんにちは。MAD事業部のきんじょーです。 最近Rustの入門書を読んだので、何かに使ってみようと模索していました。 その中で、Rustでヘッドレスブラウザを動かすライブラリを検証したのでこの記事にまとめます。 ヘッドレスブラウザとは ヘッドレスブラウザはGUIを持たないWebブラウザです。 一般的なブラウザと同じく、HTMLを解析しJavaScriptを実行できますが、GUIを持たないため、CLIやプログラム上から操作を行います。 主に以下のような用途で用いられます。 WebアプリケーションのE2Eテストの自動化 Webページのスクリーンショット取得 JavaScriptの自動テスト Webページで行うワークフロー処理の自動化 Webページのクローリング 古くはPhantomJSやCasperJSなどを用いていましたが、現在では主要なブラウザもネイティブでヘッドレスモードを搭載しています
What's New In DevTools (Chrome 94) | Blog | Chrome for Developers
Use DevTools in your preferred language Chrome DevTools now supports more than 80 languages, allowing you to work in your preferred language! Open Settings, then select your preferred language under the Preferences > Language dropdown and reload DevTools. Preferences" width="800" height="494"> Chromium issue: 1163928 New Nest Hub devices in the Device list You can now simulate the dimensions of Ne
ヘッドレスブラウザ＋Puppeteerが使える「Cloudflare Workers Browser Rendering API」がオープンベータに
ヘッドレスブラウザ＋Puppeteerが使える「Cloudflare Workers Browser Rendering API」がオープンベータに Cloudflareは、同社のサーバレス基盤であるCloudflare Workersを通じてヘッドレスブラウザとそれをコントロールするPupeteerを呼び出せる「Workers Browser Rendering API」（以下、Browser Rendering API）のオープンベータを発表しました。 これまではBrowser Rendering APIはクローズドベータとして一般ユーザーには開放されていませんでしたが、オープンベータ化によりウェイトリストに登録したユーザーから利用できるようになると説明されています。 The Workers Browser Rendering API allows developers to prog
Puppeteer と ARIA Handler
先日、社内の技術共有会で https://github.com/puppeteer/recorder という npm パッケージの話が挙がったのだけど、ここで登場する ARIA Handler という機能が面白い内容だったため、それを書いていこうと思う。 https://developers.google.com/web/updates/2020/11/puppetaria で触れられている内容と重複する部分も多いため、先に参考として挙げておく。 また、Puppeteer の Undocumented な機能であったり、CDP の Experimental な機能への言及となるため、その点は承知した上で読んでもらえると。 Puppeteer Recorder@puppeteer/recorder 自体は名前の通り、Headless Chrome ラッパである Puppeteer を使って
LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog この記事は UIT 新春 Tech blog 2023 4日目の記事です。 こんにちは。LINEフロントエンド開発センターの幾野(ikuno)です。普段は LINE NEWS のフロントエンド開発をしています。 LINE NEWS では昨年テストをたくさん書いた 昨年 LINE NEWS ではたくさんテストを書きました。当初 78 ファイルだったテストファイルは半年で 150 ファイルに倍増しました。 テストカバレッジも statements 33.6% から 64.4% まで改善しました。 昨年当初のテストカバレッジ 現在のテストカバレッジ 今回はどういったテストを書いたらうまくいったかについて書いていきます。 テストは意図
こんにちは、クックパッドでエンジニアをやっている @morishin です。入社してわりと長い間 iOS アプリやそのバックエンドの開発を中心にやってきましたが、最近は専らウェブフロントエンドとその基盤をいい感じにするというのをやっています。先日クックパッドウェブサイトのレシピページの OGP 画像を素敵に刷新したのでそのお話をしたいと思います。 ※ ここで OGP 画像と呼んでいるのは Open Graph Protocol で定義されている og:image プロパティに指定する画像のことです。 ※ OGP 画像と呼んでいますが厳密には今回変更したのは Twitter Card (twitter:image) 用の画像のみなので、その他の SNS に表示される画像 (og:image) は変わっていません。 できたもの これまではレシピ作者さんがアップロードされた料理写真を単にクロップ
Introducing OG Image Generation: Fast, dynamic social card images at the Edge – Vercel
We’re excited to announce Vercel OG Image Generation – a new library for generating dynamic social card images. This approach is 5x faster than existing solutions by using Vercel Edge Functions, WebAssembly, and a brand new core library for converting HTML/CSS into SVGs. Dynamic with limitsThe engagement rate of Tweets that embed a card is 40% higher. While creating and sharing static social image
サイトのOGP画像を自動生成する
最近、個人の技術ブログをリニューアルしました（パンダのプログラミングブログ）。 リニューアルの際に、念願だった OG 画像の自動生成を実装してみたところ、意外と簡単にできたのでその方法を紹介します。 OGP画像とは何か OGP 画像の OGPとは Open Graph Protocol の略語で、ある URL のページをリッチなコンテンツで紹介できるというものです。 サイトのタイトルやページのコンテンツをイメージさせる画像などを meta タグを使って HTML に埋め込みページの内容を表現できます。 Twitter や Slack、Line で URL を貼り付けると URL とは別に表示される物がこれにあたります。サイトのページが増えるとページ一つ一つに OGP 画像を用意することは手間がかかります。そこでこの記事では、OGP 画像を自動生成する方法を紹介します。 OGP 画像の作成方
新卒エンジニア研修 2019 Vol.1 こんにちは！5月から始まった新卒・ペパカレ（いわゆる第二新卒）を対象としたエンジニア研修も約２ヶ月が経過しました。そこで今回は振り返りとして、研修内容とこれまでに学んだことや気づいたことを、新卒・ペパカレメンバーが紹介します。 研修内容について 配属先で必要になるWeb開発の基礎スキル習得を目標に、以下の研修を３ヶ月に渡って実施しています。 Webアプリケーション開発研修 セキュリティ研修 フロントエンド研修 インフラ研修 社内エンジニア・デザイナーによる座学 読書会 今回は6月までに行った内容について、それぞれ紹介していきます。 Webアプリケーション開発研修 まずはじめに、Rails Tutorialを教材に、Railsを利用したWebアプリケーション開発の基礎を学びます。研修メンバー全員がRails Tutorialを完走することを目標に、講
Building secure web apps using Web Workers | Mercari Engineering
Security is paramount for our users, and we at mercari strive to provide a snappy and safe platform. We recently introduced an additional layer of defence by adding Web Workers to secure the access token. It now protects the users from various kinds of attacks, including token theft from Cross Site Scripting (XSS), Cross Site Request Forgery (CSRF), prototype pollution, zero-day npm package vulner
GitHub - addyosmani/puppeteer-webperf: Automating Web Performance testing with Puppeteer 🎪
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
GitHub - rsify/pico: Take browser screenshots in Javascript 📸
Pico's goal is to produce high precision screenshots of any viewport entirely client side. This is different from simply capturing a webpage using Puppeteer or a similar tool in that the screenshot taking happens entirely client side. The viewport screenshots include scrolled element scroll states, cross-origin images, input states, web fonts, canvas contents, current video frame contents, and muc
分類については独断です。また、こつこつ「ひとこと説明」を追加していく予定です。 Selenium関連については Awesome Selenium : 素晴しい Selenium ライブラリの数々 - Qiita が参考になります。 FAQ なんで＊＊＊を除いているのか 恣意的に除いていることはないので、編集リクエストかコメントをください GUIテスト自動化ツール モバイル・デスクトップアプリ・ブラウザのうち複数の対象のGUIを操作できるテスト自動化ツール。 有料 インストール型 UFT One QTP(Quick Test Professional)→UFT(Unified Functional Testing)→UFT One Silk Test UFT Oneと同じくMicroFocus製で、UFT Oneのほうがメジャーな印象（筆者主観） Ranorex TestComplete W
分散アジャイルチームについて考える会。またはMuralの負荷試験について #distributed_agile_team #オンライン勉強会 - うさぎ組
COVID-19の影響でIT系の人達はテレワーク導入をすすめているけど、どうなんでしょうね。っていうかんじで勉強会を spring_akiさん、TAKAKING22くんの3人でやってみました。 4月21日と5月5日の2回やり、どちらもLTを数本と、OST(みんなでトピックをきめるディスカッション)。 特に、5月5日は、13:30 - 19:00までのほぼ1日やってみるというものでした。 これらの回の概要、そしてどんなツールをつかったのかを紹介します。またツール選定にあたっておこなった負荷試験のスクリプトも紹介します。 イベント概要 利用したツール Muralは50名付箋のみ同時編集なら余裕、80名以上でもたつく オンラインOSTはいいぞ！ 最後に イベント概要 分散して活動していくアジャイルチームについて議論していく場があればいいなと思って、4月頃に某コミュニティで話していて、特に大きな知
ちまたで話題のChatGPTをVSCodeで動かして、開発環境をイケイケにできるらしいということで早速導入してみました。 zenn.dev VSCodeのChatGPTプラグイン、クラスのDocstrings書かせるのにめちゃくちゃ使える！いろいろうまく使えそうなのでどんどん使っていこう。CopilotでどうでもいいコードをTab連打で爆速で埋めていって、ChatGPTと会話しながらブラッシュアップしていく開発スタイル最高では🤩 pic.twitter.com/odn9MnqaZP— いのいち (@inoichan) 2023年3月18日 しかし、非常に残念なことに、ChatGPTのプラグインを導入した瞬間に当プラグインがマーケットプレースより削除されてしまいました...。 【悲報】ツイート直後にvscode-chatgptがマーケットプレースから削除されたため、最高の開発スタイルが10
こんにちは！SmartHRで文書配付機能の開発を担当している、aanzaiです。 2022年末から2023年2月にかけて、文書配付機能で使用しているPDFのレンダリングライブラリの置き換えを行ったため、具体的にどのように移行したかをご紹介します。 文書配付機能の紹介 文書配付機能（旧:雇用契約）は、SmartHRの最初のオプション機能として開発された機能で、事前に作成した書類テンプレートをもとに、SmartHRに保存された従業員情報を差し込んで書類PDFを作成し、従業員に配付したり、契約書として合意を取ったりすることができる機能です。 書類テンプレートのレイアウトは、ユーザーがWYSIWYGエディタで作成したものがHTMLとして保存されています。書類を配付する際は、このレイアウトHTMLに従業員情報を差し込み、PDFに変換します。 PDFレンダリングライブラリ移行の理由 文書配付機能では、
自社Webサービス上にボタンを配置して、PDFをダウンロードできるようにしたいという要望がありました。しかも 表などのリッチな表現を活用したい 動的に表示する内容が変化し、内容に応じてページ送りをしたい これらは自社Webサービス上のページとしても表示している（しかも認証が必要なページ） という条件でした。react-pdf や html-pdf を使えばできなくはなさそうですが、できるだけスタイルを楽に・デバッグをかんたんに行ないたかったので、別の方法を考えました。 そう、みんな大好きヘッドレスブラウザを活用した方法です。この手の課題のときにはよく手段として上がりますよね。@media print などを使って印刷用に表示する内容の調整もできるし、サービス上のコンポーネントを使ってスタイルできるので非常にかんたんにPDFのコンテンツのスタイルが行なえます。 ただ、問題は認証です。Webサ
こんにちは、SRE(Site Reliability Enginner) の @showwin です。前回の LAPRASインフラチームで避難訓練を行いました の記事に引き継ぎ、今回もSREチームの取り組みの紹介です。 概要2021年2月からSLI, SLOを定めた運用を開始し、約半年が経過しました。導入の背景や、運用開始までの流れ、実際に運用してみて気付いたことをまとめました。 体制としては、SREチームはフルタイム1名、適宜手伝っていただけるメンバー2名で構成されており、アプリケーションエンジニアが9名です。また、サービスの利用者に対してはSLAを提示しておりません。このような状況下において運用されているという前提で読み進めていただけたら幸いです。 SLO導入に至った経緯前任のインフラエンジニアの退職により、2020年9月より私がその役割を引き継いだのですが、なんとなくカッコ良さそうと
［速習］ Puppeteer ～ヘッドレスChromeでテスト＆スクレイピング 第2章ブラウザ操作自動化の基本 ～非同期処理を扱うasync/await関数、自動化の鍵を握るPuppeteerコンポーネント 第2章では、実際にヘッドレスChromeを自動化するうえで必要となる、最新のJavaScriptの構文やPuppeteerのAPIについて解説します。 進化し続けるJavaScript PuppeteerのAPIを解説する前に、第1章の冒頭で掲載したサンプルコードを見返してみましょう。もしかすると、中にはまったく見慣れない構文が見つかったかもしれません。 const puppeteer = require('puppeteer'); (async () => { const browser = await puppeteer.launch(); const page = await b
CIのシークレット変数に1Password CLIを利用する - 24/7 twenty-four seven
CIでいろいろなタスクを自動化していると、CIで必要とするAPIのトークンやアカウント情報など設定しているシークレット変数が増えてきます。 たいていの場合はCIサービスのシークレット変数を利用すればよいですが、サービスによっては一度設定したシークレット変数を見ることができなかったり（GitHub ActionsやCircle CIが該当）、トークンやアカウント情報の更新や追加があったときにCIの変数を更新していくのが大変だったり、シークレット変数のメンテナンスはそこそこ面倒な作業です。 性質上かなり強い権限が設定されているトークンだったりすることもあるので、誰がその値をメンテナンスできるか、という管理の問題もあります。 そこで1Passwordをアカウント情報の共有に使っている組織なら、1PasswordはCLIの操作が提供されているのでCIから1Passwordのアカウント情報を取得する
2021 / 2020 / 2019 JavaScriptライブラリのトレンドを紹介しているbestofjs.orgが、2020年に最もホットであったJavaScriptライブラリのランキングを発表しました。 選考基準は現在のスター数ではなく、『2020年の一年間で増えたスターの数』です。 過去流行っていたけど落ち目となった技術は出てこないので、最近注目されている技術がわかります。 ちなみに2016年の総合ランキング1位はVue.js、2017年の総合ランキング1位はVue.js、2018年の総合ランキング1位はVue.js、2019年の総合ランキング1位はVue.jsです。 以下は2020年のランキング、2020 JavaScript Rising Starsの日本語訳です。 JavaScript ライジングスター 2020 5回目のJavaScript ライジングスターにようこそ！ こ
レガシーサービスにおけるパフォーマンス改善 - 使われていないCSSを削除してくれるCLIを作った話 - Qiita
リクルートテクノロジーズ でフロントエンドエンジニアをしている@SW20_Toshiです。 本記事はRecruit Engineers Advent Calendar 2019 - Adventar 20日目の記事です。 皆様はウェブのパフォーマンスを気にしていますか？ おそらく大抵の方はSQLのチューニングやロジックの改良などをした経験があるのではないでしょうか？ 今回は、レガシーサービスにおけるパフォーマンス改善として、Puppeteerを使って不要なCSSを削除する取り組みを行いました。 ツールはOSSとして公開しているので使ってみてください！ サイボウズ株式会社のこちらの記事には大変お世話になりました！ ありがとうございました！ きっかけ 10年近くABテストや機能追加を繰り返してきたWebサービス.... 1画面に大量のCSSファイルが読み込まれていて、カバレッジ関しては目も当て
Playwright for Python: ブラウザ操作を自動化しよう！ - kakakakakku blog
ブラウザ操作を自動化して，E2E (End to End) テストやスクレイピングをするときに使えるライブラリ Playwright を試す．Playwright の特徴としてまず「クロスブラウザ」があり，Chromium / Firefox / WebKit をサポートしている．また「複数言語」という特徴もあり，Node.js / Python / Java / .NET をサポートしている．今回は Playwright for Python を前提にする． playwright.dev Playwright の前に 過去の経験を思い出すと，Capybara + PhantomJS で E2E テストを実装していた（2015-2016年頃でなつかしい！）．また最近だと Puppeteer や Amazon CloudWatch Synthetics を使う機会も増えている．しかし，個人的
2018年6月2日、PhantomJSのリポジトリがついにアーカイブ化されました。PhantomJSのメインメンテナーは、「より高速かつ安定して動作するヘッドレスChromeが登場したことで、PhantomJSの開発を続ける必要がなくなった」と述べています。 PhantomJSは、TwitterやNetflixでも単体テストやパフォーマンステストで使用されていた、ヘッドレスブラウザのデファクトスタンダードでした。ヘッドレスブラウザとは、GUI（Graphical UserInterface）を必要としないブラウザです。 これまでPhantomJSを使ってきた人たちは、徐々にヘッドレスChromeに切り替え始めています。一方で、「切り替えにどのような作業が必要になるのか」や「いったい何が変わるのか」がわからないといった声を耳にすることもよくあります。 そこで本特集では、ヘッドレスChro
LighthouseをFirebase Functionsから毎日叩いて本番環境のパフォーマンスを計測してみた - SMARTCAMP Engineer Blog
スマートキャンプの笹原です。 みなさんはWebサイトの、特にフロントのパフォーマンス改善を日頃から行っていますか？ 常に意識しているという方もいれば、気が向いたときにたまに見てみるなんてこともあるんじゃないかと思います。 今回はそんなパフォーマンスに常に意識を配れるように、毎日Lighthouseを叩いてみたのでその構成を紹介したいと思います。 Lighthouseとは 要件 処理の流れと制約 実際の構成 1. 定期的にCloud Tasksに各ページごとのTaskをEnqueueする TaskをEnqueueされるCloud Tasksのキュー作成 TaskをEnqueueするFunctionの作成 2. 各ページにLighthouseを実行しBiqQueryに結果を格納する 終わりに Lighthouseとは まずはLighthouseについて簡単な説明です。 Lighthouseとは
Github Actionsで簡単にPuppeteerを使えるaction-puppeteer-scriptを作りました - The Third Law
maku693です。 Github ActionsでPuppeteerを簡単に使えるCustom Actionを作りました。 github.com 最近Github Actions上でブラウザを動かしたくなったのですが、いちいち実行環境を整えるのも面倒なので、サクッとできないものかと調べたところ、意外とPuppeteerをそのまま使えるactionというのは存在しないようだったので、自分で作りました。 使い方はREADMEに書いてありますが、ここでも軽く紹介します。 以下のjobでは、ページのタイトルを取ってきて、それを後続のstepで利用しています。 - id: get-title uses: maku693/action-puppeteer-script@v0 with: script: | const page = await browser.newPage(); await pag
Storybook6をVue.jsのプロジェクトに導入し、新機能であるStorybook Argsを活用してVue.jsのDXを最高にした話 - Qiita
Storybook6をVue.jsのプロジェクトに導入し、新機能であるStorybook Argsを活用してVue.jsのDXを最高にした話JavaScriptVue.jsフロントエンドJeststorybook はじめに 最近iCAREさんの所でVue.jsを一緒にやらせていただいているのですが、フロントの技術スタックがかなりモダンであり、開発体験が良く、ノウハウをどんどん公開して良いと言っていただけたので、その内容を共有するシリーズです. 今回は2日前にリリースされたStorybook6をVue.js + TypeScriptのプロジェクトに導入した話をします(執筆時点). 前置き Storybook自体はずっと使っていたのですが、6系に関してはbetaの頃からrfcとreleaseノートを全て追っかけて追っかけはじめ、使っていました. そしてついにrcが取れたので今回はその内容とiC
Storybook Test ruuner で安定した Visual Regression Testing を行う
はじめに 株式会社ナレッジワーク Engineering Division のわだまる（@wadackel）です。 ナレッジワークの Web フロントエンド開発では、Storybook を活用したコンポーネント開発を行っています。そして、昨年末により良いコンポーネント開発の基盤整備を進めるべく @storybook/test-runner（以降 Storybook Test ruuner）を導入しました。導入目的としては主に、各 Story に対するスモークテスト、play 関数を活用したコンポーネントテストを行うことです。 さらに、ナレッジワークでは前述した通常のコンポーネントテストに加えて、reg-suit と storycap を利用した Visual Regression Testing（以降 VRT）を行っています。 これまでは Storybook を活用したテストは VRT の
slackの反応がないと寂しいので、一気にたくさんリアクションできる「slack最高速でワイワイできるくん」を作った - KAYAC engineers' blog
この記事は、「Tech KAYAC Advent Calendar 2020」の20日目の記事になります。 slackを返して仕事した気になっているみなさんこんにちは！！！ slackに負けるな！！！ いきなりごめんなさい。どうもこんにちは。 KAYACクライアントワーク事業部デザイナーのちゃんちーです。 クライアントワークとして、今や40万人以上が持ってるうんこミュージアムで配られるマイうんこという不思議なものを製造したり、 マイクロワーケーションという実験で、お客さんと川で仕事をしてみたり、 いろんなことをしながらいろんなものを作って暮らしています。 本当はもっと真面目に仕事してます。 いや、本当です。よろしくお願いします。 いきなりですが、slack、使っていますか？ 弊社はというと、バリバリslackでやりとりをしていて、社内のコミュニケーションツールはslackにほぼ集約されてお
// 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 が絡むとプレビューに失敗する。
2020年のオープンソース活動の振り返り記事です。 今までの振り返り。 今年のOSS活動振り返り @ 2019 | Web Scratch 今年のOSS活動振り返り @ 2018 | Web Scratch 今年のOSS活動振り返り @ 2017 | Web Scratch 今年のOSS活動振り返り @ 2016 | Web Scratch 今年のOSS活動振り返り @ 2015 | Web Scratch 今年のOSS活動振り返り @ 2014 | Web Scratch 2020年のGitHubのPublicなContributionsは7000~9000ぐらいを推移していました。 最近はPrivateリポジトリをメモやブックマーク管理などでも使うようになったので、Private比率は増えてPrivateなContributionsは13400でした。 GitHub Issuesを個人
Automate an isolated browser instance with just a few lines of code
Automate an isolated browser instance with just a few lines of code11/16/2022 If you’ve ever created a website that shows any kind of analytics, you’ve probably also thought about adding a “Save Image” or “Save as PDF” button to store and share results. This isn’t as easy as it seems (I can attest to this firsthand) and it’s not long before you go down a rabbit hole of trying 10 different librarie
変更ログ 21/09/04: 「ドメイン駆動設計について DroidKaigi 2017 で登壇しました。」のリンクを追加 -21/08/11: 書籍「the Jargon File」についてのリンクを追加 -21/08/06: C, アセンブリ言語についてのリンクを追加 前書き プログラムを学ぶとき、良質役立ちそうなサイトを探すのにかなりの時間を浪費した。 他の人にはそうなってほしくないので、今まで役立ったサイトを公開する。 なお、強くオススメしたいサイト順に並ばせる。 随時更新予定。 21/08/06: 追記 (この記事はもともと大量のブックマークを処分し依存を絶つのが目的で作成しました。 しかし、ブックマークが便利すぎるので結局依存は断てず、この記事を自分で使うこともほぼなかったため、更新は未定に変更します。) この記事を効率よく使う方法の例： ・リンクを実際に踏んでみて、ざっと吟味
この記事の対象読者 Webフロントエンドのテストコードを雰囲気で書いてる人 この記事の前提 テストフレームワークは Jest の利用を想定しています Jest自体のセットアップや使い方は一切触れていません フロントエンドテスト、慣れてないとハマりがち 経験上、フロントエンドのテストコードを書く際には、慣れていないとハマったり混乱してしまうポイントが多くあると思っています。 僕のdivタグ書き換えるコードがテストだと動かない エラーになるテストなのにパスしちゃう 慣れてくると何でもない部分ではありますが、基本的な考え方や躓きやすい箇所を整理してみました。 フロントエンドのテストコードはNode.js上で実行される フロントエンド開発では、実行環境として主にブラウザを対象とすることが多いでしょう。つまりWindowオブジェクトの利用やDOM操作が可能です。（たとえば location.href
macOS Big Sur betaは初期から使ってみてたんだけど、beta6にしたらDockerまで使えなくなってしまったので、衝動的に まったく新しいmacOS Big Sur betaでは Homebrew→使えません Androidエミュレータ→使えません Docker→使えません VirtualBox→使えません 早く直ってくれないとエンジニアリング活動できないぞ— Yusuke Iwaki (@yi01imagination) 2020年9月17日 こんなTweetしたら思いの外リツイートされまくってしまった。 事実ベースで情報を知りたい人向け に、自分のマシンで起きてることを、雑ではありますがまとめておきます。 （2020/09/18 14:00追記: beta7にするとDocker使えるようになっていました ） 動作環境 2019のMacbook Pro 15インチ。Moj
攻殻機動隊英語版でプラクティス①シャドーイングで喉発音を体感！ - 或る物書きの英語喉と小説まみれのジャズな日々
サブカルチャーの不滅の金字塔であることを多くの人が認めるコンテンツ「攻殻機動隊」は、日本よりむしろ海外で非常に高い評価を受けている。多くの英語吹替版が存在し、それが英語の勉強にもなかなか良いのである。YouTubeで観られる動画を使って英語喉を体感・体得にトライしてみようではないか。 http://kaigai-matome.net/archives/35562830.html 〜公安９課面々の吹替英語はシャドーイングの良質教材だ〜 「攻殻機動隊 THE GHOST IN THE SHELL」はメディアミックスになり過ぎて、パラレルな攻殻が乱立している感があるが、原点は史郎正宗の漫画「攻殻機動隊」からすべてが始まったことを忘れてはいけない。 史郎正宗によって１９８９年に書き始められた漫画が、あくまでも原点だ。その上で、世界的に知られるようになったのは押井守監督の劇場版第一作だ。 劇場版「攻
WebRTCでもE2Eテストをあきらめない - Chatwork Creator's Note
初めましてこんにちは、今年の4月から新卒でフロントエンド開発部に入社した cw-suetake 🐧です。 いきなりですが、WebRTCを利用したビデオチャットなどを開発しているとE2Eテストがほしくなってきませんか？ 開発者一人で開発していると動作確認のために複数のブラウザを起動したり、PCにたくさんのwebカメラやらマイクやらを接続して…それぞれのウィンドウで各種機能が動くか確認して…とにかく動作確認ひとつにしてもやることが多くなりがちです。 そうなってくると、ある程度の動作検証はE2Eテストに任せて楽をしたくなるものです。しかしWebRTCはブラウザ側に実装されているAPIに強く依存していますし、そもそもどうやってカメラやマイクが正しく動作することを保証すればいいのでしょうか？そんな悩みに対しての自分なりの案をご紹介します。 テスト対象 音声とカメラ映像を送受信してオンラインコミュニ
ブラウザ拡張のE2Eテストを検討してみた（Playwright、Puppeteer、Cypress） - Techtouch Developers Blog
この記事はテックタッチアドベントカレンダー 8 日目の記事です。 フロントエンドエンジニアの taka です。Amazon Black Friday でフットウォーマーを買ったのですが、冷え性の自分には最高でした。冷え性の方には是非使ってみてもらいたいです。 今回は、モダンなツールである Playwright と Puppeteer、Cypress を実際に触ってみたので、そこから得られた知見を紹介したいと思います。 要件の整理 一般的な要件 テックタッチ特有の要件 機能ごとの比較 テストツールの有無 複数タブ / ウィンドウ ShadowDOM ブラウザ拡張 要素の特定 スクリーンショット 動画 実行速度 まとめ 要件の整理 テックタッチはブラウザ拡張であるため、一般的な Web アプリケーションとは少し要件が異なってきます。以下に、一般的な要件とテックタッチ特有の要件を書き出しました。
サイボウズフロントエンドエキスパートチームのウェブサイトを作りました | サイボウズ フロントエンドエキスパートチーム
こんにちは、サイボウズフロントエンドエキスパートチームの@__sosukesuzukiです。 サイボウズにはCybozu Inside Outという技術ブログがあります。 それとは別に、この度フロントエンドエキスパートチームとしてウェブサイトを開設することにしました。 この記事では、このウェブサイトを開設することになった経緯と目的、使用した技術について説明します。 経緯 フロントエンドエキスパートチームでは、チームでのコミュニケーションの促進を主な目的としてハッカソンを開催することがあります。 (チームでのハッカソンについてはCybozu Inside Out に投稿されている記事をご覧ください) そのようなハッカソンで、フリーテーマの回がありました。 そこで、SakitoさんとBaHoさんとsosukesuzuki(私)のチームでは、フロントエンドエキスパートチームのウェブサイトを作って
差分指向テスト（DOT: Difference Oriented Testing）という考え方 - MNTSQ Techブログ
はじめに MNTSQ(モンテスキュー)株式会社 フロントエンド担当の安積です。 入社して4ヶ月とちょっと。 コードに取り組もうと入社して、まさに日々格闘しております。 私の後ろの席にはこんなバズ記事書く人や、こんなイカつい記事書く人が座ってまして、そんなプレッシャー期待の中からお送りいたします。 tech.mntsq.co.jp tech.mntsq.co.jp 昨日はこんな記事も公開されています。 tech.mntsq.co.jp はじめに 現在のステータス またはMNTSQ考古学 リファクタリングやるぜっっ！ 仕様書大事だよね 差分指向テストとは テスト環境の概要 テストデータ ブラウザ操作自動化 スクリーンショット比較 Playwriteの操作 ちょっとコードのサンプル 最後に この記事を書いた人 現在のステータス またはMNTSQ考古学 コードベースから見たMNTSQのフロントエン
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
LINE NEWS フロントエンドの自動テストの改善
レシピページのOGP画像を動的に生成する - クックパッド開発者ブログ
新卒エンジニア研修 2019 Vol.1 - Pepabo Tech Portal
テスト自動化関連ツール・ライブラリまとめ - Qiita
削除されてしまったvscode-chatgptを動かす方法 - いのいち勉強日記
文書配付機能でPDFレンダリングのライブラリを置き換えた話 - SmartHR Tech Blog
ヘッドレスブラウザを活用して少しリッチなスタイルのPDFを生成する
LAPRASにおけるSLO運用状況 | LAPRAS株式会社
第2章 ブラウザ操作自動化の基本 ～非同期処理を扱うasync/await関数、自動化の鍵を握るPuppeteerコンポーネント | gihyo.jp
JavaScript ベスト・オブ・ザ・イヤー 2020 - Qiita
第1章 Puppeteerの魅力は何か ～ヘッドレスChromeを自由自在に操る | gihyo.jp
VScode 上で今開いているファイルを Vite でプレビューする拡張を作ったら便利
今年のオープンソース活動振り返り @ 2020
個人的におすすめしたいプログラムの技術サイト - Qiita
フロントエンドテストを雰囲気で書いているとハマりがちなところ - Qiita
mac OS Big Sur beta6にした結果 - YusukeIwakiのブログ