Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? ゴールデンウィークのはじめ（4月29日）に投稿された以下のツイートですが、5月7日20時において、1,938.8万件の表示ということで、非常に注目されていることが分かります。 我が名はアシタカ！スタバのFreeWi-Fiを使いながら会社の機密情報を扱う仕事をしてたら全部抜かれた。どうすればよい！ pic.twitter.com/e26L1Bj32Z — スタバでMacを開くエンジニア (@MacopeninSUTABA) April 29, 2023 これに対して、私は以下のようにツイートしましたが、 これ入社試験の問題にしようかな。『
株式会社リクルート エンジニアコース新人研修の内容を公開します！（2021年度版） | リクルート テックブログ
こんにちは！ Webフロントエンドエンジニアの眞野 隼輔です。 毎年大きな反響を頂いている、エンジニアコースの新人研修の内容を紹介させていただきます。 研修の概要 リクルートでは、エンジニアコースでスペシャリスト採用された新卒のエンジニアを対象に、現場で培われた「本当に必要な生きた知識・技術」を取り入れた新人研修を開催しています。 前半は研修では各分野に長けた社員による講義形式の技術研修を行い、後半は仮配属という形でそれぞれ別の部署に配属されて実際の業務を経験するOJTとなっています。 この技術研修はそのほとんどが内製されており、ベテラン社員による経験を元にした講義を通して生きた知識・技術を獲得できます。また、実際に手を動かす演習型の講義ではベテラン社員からのレビューやフィードバックを得られるため、知識の定着や更なる成長へと繋がります。 本年度の技術研修も、昨年度に引き続きフルリモートでの
2023年後半頃から、ブラウザの「戻る」ボタンを押すと、訪問したおぼえのないページが表示されることが増えた。そういうページは大抵、記事風の広告やサイト内の記事へのリンクが大量に並ぶという構成になっている。こんなレイアウトになってることが多い。 この手法はブラウザバック広告とかブラウザバックレコメンド (あるいはレコメンデーション) とか呼ばれており、国内外の複数のWeb広告会社がこれを提供しているようだ。 たとえば、こちらはGMOアドマーケティングの “TAXEL” が提供しているブラウザバックレコメンド。 【新たな収益・回遊源が誕生！】ブラウザバックレコメンド サイトから離れてしまうユーザーに対し、広告やレコメンド記事を表示させることで、収益化や内部回遊に繋げることを目的としているフォーマットになります。 ……というのがセールスポイントらしいのだが、サイトから離れる人は、サイトから離れた
ブラウザレンダリングの仕組み
Webの用語を100秒で解説するチャンネルを作りました！ よかったらチェックしてみてください！ はじめに 以前書いた記事「Webページがブラウザに表示されるまでに何が起こるのか？」で ブラウザレンダリングについて詳細に知りたいという意見をいただいたので、調べてまとめてみました。 全体図 レンダリングの大まかな流れです。 HTMLのダウンロード サーバから送られてきたHTMLをダウンロードします。 HTMLの解析 サーバから送られてきたHTMLファイルは、「0」と「1」でできたデータになっています。 ブラウザは、サーバから受け取ったデータをそのままHTMLとして解釈することはできないので、自分で扱うことができる形、つまりDOMに変換する必要があります。この作業を 解析 ( Parse ) と言います。 HTMLをダウンロードしたら、すぐにこの解析作業に入ります。作業は以下のようなステップにな
ブラウザ版はてなブックマークで「マイナス評価」ボタンを試験導入します - はてなブックマーク開発ブログ
いつもはてなブックマークをご利用いただき誠にありがとうございます。はてなブックマーク開発チーム、ディレクターのid:yone-yamaです。 本日よりブラウザ版はてなブックマークで、「マイナス評価」ボタンの試験導入を行います。 この変更は、以下の告知内でも触れている通り、ブックマークコメントの健全化を目的とした施策の一環となります。 bookmark.hatenastaff.com 「マイナス評価」ボタンについて 「マイナス評価」ボタンは、ブラウザ版はてなブックマークのコメント一覧ページに、各ブックマークコメントごとに表示されるボタンです。はてなスターとは異なり、1つのコメントに対して1回のみ押すことができます。 使い方としては、コメントの内容や表現に疑義や違和感があるなど、ご自身にとって望ましくないと感じるコメントに対してご利用いただくことを想定しています。 この「マイナス評価」ボタンは
合計はショートカットキー一つで出せる（EXCEL） 江ノ島： EXCELで合計出すとき、このボタン押すじゃないですか 「ホーム」にあるオートSUMボタン ほり： やるやる！ 石川： え、知らなかった。「=SUM(…」って手打ちしてた 江ノ島： それでもいいんですけど、どっちも面倒じゃないですか。 実は shift + alt + = を押すと… 江ノ島： 自動的にSUMが入るんですよ 林： ほんとだ！入った！ ほり： かっこいい！ 石川： そうだったのか…。行（縦）方向と列方向、両方できるな。 江ノ島： 合計よく使うので、一回一回ボタン押すよりこっちの方が早いです。 ほり： こういうの全部覚えたい。 江ノ島： ショートカットキー全部まとめた表とかあるじゃないですか。 それをデスクトップの壁紙にしてる人とかいるじゃないですか。 林： うん。 江ノ島： しゃらくせえ！と思います。 石川： あは
Intro こういうタイトルを付けるのはあまり好きではないが、あえてこのようにした。 「ブラウザでキャッシュがヒットしない」 以下は、Web における Caching の FAQ だ。 サーバで Cache-Control を付与したのにキャッシュがヒットしない サーバで ETag を付与したのに If-None-Match が送られない サーバで Last-Modified を付与したのに If-Modified-Since が送られない 先日も、筆者が書いた MDN の Cache セクションで「記述が間違っているのでは?」と同様の質問を受けた。 Issue about the Age response header and the term "Reload" · Issue #29294 · mdn/content https://github.com/mdn/content/iss
Chrome拡張 つくりかた 令和最新版
数年ぶりにChrome拡張のつくりかたを調べた。 本当に何も分からなかったので、Twitterで「2022年にChrome拡張つくりたかったら何見て学べばいい？」とつぶやいてみたところ、何人かの人が教えてくれた。教えてもらった中から幾つかのリンク先を紹介するような形で記述していく。 Create a Vite-React Chrome Extension in 90 seconds - DEV Community 2022年時点だと比較的新しめのフロントエンド向けツールであるviteと、viteのChrome拡張向けプラグインである@crxjs/vite-pluginを使ってChrome拡張をつくってみよう、という記事。今回自分は主にこれを参考にしながら開発を進めた。Reactと言っているが、自分のChrome拡張ではUIは存在しなかったので、Reactに関する部分は読み飛ばして、vite
以下の公開計測会でやったものを個別に解説してみる。 細かいテクニックが多いのだが、それを可能な限りテキストとスクショで解説したい。使い方の解説が中心で、どういう意味があるかは解説しない。 Chrome131時点のスクリーンショットで、後で読む場合は頻繁にUIが変わっている点に注意。大事なのは意図。 宣伝: これを御社のサイトで解説する仕事をやっています。 デモのURL これに意味はなく、今日偶然見ていただけで意図はない。関係ないがエッジランナーズは最高のアニメ。 DevTools を開く F12 or 右クリックから「検証」 DevTools > Lighthouse この状態で計測 このとき、新しいプロファイルを作ったりして、可能な限り Chrome拡張が入ってない状態にすること。Chrome拡張による処理も計測に含まれてしまう。 Lighthouse レポートの読み方 点数部分にマウス
NTT 東日本 - IPA 「シン・テレワークシステム」 - HTML5 版 Web クライアントの公開について
NTT 東日本 - IPA 「シン・テレワークシステム」 Beta 7 および HTML5 版 Web クライアントの公開について トップ | 中間報告 | 自治体テレワーク for LGWAN | HTML5 Web 版クライアント (Mac, Chromebook 対応) | バージョン履歴 | ダウンロード | ユーザー数グラフ 入門 - 今すぐ使ってみよう | クライアント検疫機能・MAC アドレス認証機能 | 二要素認証・ワンタイムパスワード (OTP) 機能 | マイナンバーカードを用いたユーザー認証機能 | 仮想マルチディスプレイ機能 行政情報システムでの利用 | 組織 LAN におけるポリシー規制サーバー設置 | 企業システムにおける VM・HDD クローン対応 | Wake on LAN リモート電源 ON 機能 | 画面撮影・キャプチャ防止のための電子透かし機能 FAQ
これはもう実質AGIでは? AIが勝手にブラウザを操作していろいろやってくれちゃう BrowserUseが爆誕｜shi3z
今日もいつものようにシラスでデイリーAIニュースを配信していると、とんでもないものにでくわした。 もうタイトルに書いてあるけど、AIが勝手にブラウザを操作して色々やってくれてしまう、その名もBrowserUseだ。 インストールは超簡単。 macなら以下の二行だけだ。 $ pip install browser-use $ playwright install使うのも超簡単だが、コマンドラインに落ちるのが怖い人々には簡単に見えないかもしれない。環境変数のOPENAI_API_KEYとかにAPIキーを入れておくこと。 $ python >>> from langchain_openai import ChatOpenAI >>> from browser_use import Agent INFO [browser_use] BrowserUse logging setup complete
{ "manifest_version": 3, "name": "Create markdown link", "version": "1.0.0", "icons": { "16": "logo/16.png", "48": "logo/48.png", "128": "logo/128.png" }, "description": "Create markdown link from selected text", "content_scripts": [{ "matches": ["<all_urls>"], "js": [ "content.js" ] }] } manifest_version 拡張機能が使用するマニフェストファイル形式のバージョンを指定します。現在のバージョンは3です。 早ければバージョン2は2024年6月以降に廃止され、無効になりインストール/使用できなくな
If you are AkiraToriyama
もし鳥山明なら: Birth_Year: Birth_Month:
Explore DOM Events
There are many categories of events including user events such as 'click' and system events such as 'DOMContentLoaded'.
細切れ保存にさようなら。スクロールスクリーンショットを撮る方法（Android・iOS・Win・Mac・Chromebook）
細切れ保存にさようなら。スクロールスクリーンショットを撮る方法（Android・iOS・Win・Mac・Chromebook）2022.02.04 21:00263,321 David Nield - GIZMODO US ［原文］ （ satomi ） ページ全体を保存したい。そんなとき覚えてると便利なのが｢スクロールスクリーンショット｣。 ふつうのスクリーンショットは見えてる範囲までしか撮れませんけど、スクロールスクリーンショットなら上から下まで一発で取得が可能です。Webページはもちろん、文書やメニューもこの方法で大丈夫。撮ってスクロールして、また撮ってスクロールして、一番下まで撮ったら全部つなぎ合わせて…という手間がかかりません。 手順は細切れのスクショと少し異なります。OS別に見ていきましょう。 Androidでスクロールスクリーンショットを撮る方法スクロールスクリーンショットは
ある日、コードレビュー中ワイ ワイ「さぁ、今日も同僚のコードをレビューしていくでぇ」 ワイ「まずは新卒のT君のコードを読んでいこか」 ワイ「どれどれ…」 ワイ「ん？なんやこの??っていう書き方は…？」 ワイ「ググってみよか…」 ワイ「JavaScript ??と入力して、検索ボタンをポチッとな」 ワイ「…あれ？それらしい検索結果が出てこんな…」 ワイ「ぐぬぬ、記号関係はググりづらいこともあるんやな…」 ワイ「これじゃあ今日はもう、酒飲んで寝るしかないやないか…」 〜飲酒、そして就寝へ…〜 では JavaScript で ?? の検索方法はどうしたらいいのか？ ここに１つの解答を示しておきます！ 「javascript double question mark」と検索すること です。 この記事はどうやったら自分の欲しい情報が効率よく見つけられるのか試行錯誤してきて身についたググり力を紹介して
「JavaScriptで要素をドラッグして移動する簡単な方法」という記事が初耳だらけだった件 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
新しいプログラミング言語やライブラリ、フレームワークを学ぶには、実際にそれらを試して挙動などを見てみることが大事ですが、実行環境を用意するのは手間がかかります。 そこで役立つのが、いわゆる「プレイグラウンド」と呼ばれる、Webブラウザでプログラミング言語やライブラリ、フレームワークをすぐに試すことができるサービスです。 主要なプログラミング言語の公式サイトには、実際にその言語をすぐに試せるプレイグラウンドが用意されていることも多く、また公式サイト以外にもネット上にはさまざまなプレイグラウンドがあります。 プレイグラウンドを使えば、気軽にいろんなプログラミング言語やライブラリ、フレームワークを試せます。 この記事ではそうしたプレイグラウンドをまとめてみました。ここで紹介したプレイグラウンドの他にも、あなたのお気に入りのプレイグラウンドがあればX/Twitterやブックマークのコメント、メール
LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog TL;DR:2022にフロントエンド開発で最も考慮すべきユーザー環境は、パフォーマンスでは低スペックのAndroid端末、標準仕様では2年前のSafari、そしてネットワークでは４Gです。それに対してはJSへの過剰依存などが原因で主にパフォーマンスの面でのウェブ全体の対応がよくありません。 こんにちは！LINEフロントエンド開発室のダバロス アランです。この記事のタイトルを見て「釣りタイトルですね〜」と考えている方がいると思いますが今回に限ってはそれを大目に見てください。それはなぜかと言いますと、2021年から2022年にかけて私たちフロントエンドエンジニアが全体的に考え方を改める必要が出るほど大きな変化がありました。 その変
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
7/27（水）開催の「TechFeed Experts Night#1 〜 Web標準 / CSS / Webアクセシビリティを語ろう」で発表した内容です https://techfeed.io/events/techfeed-experts-night-20220727 スライド内のリンクがク…
TechCrunch Daily News Every weekday and Sunday, you can get the best of TechCrunch’s coverage. Startups Weekly Startups are the core of TechCrunch, so get our best coverage delivered weekly.
Intro Fetch API の実装が広まり、IE もリタイアを迎えたことで、今後忘れ去られていくことになるだろう XMLHttpRequest について。 どのように始まり、どのように広まり、どのように使われなくなっていくのか。その間に残した多大な功績を残す。 XMLHttpRequest の始まり この名前は非常に長いため、通常 XHR と略される。 この API は、現在の Web API のように W3C/WHATWG による標準化を経て策定された API ではない。Microsoft によるいわゆる独自実装の API として始まり、後追いで標準化される。 したがって、Web API の中でもかなり異質な命名である XHR が、XmlHttpRequest でも XMLHTTPRequest でもなく XMLHttpRequest である理由も、Microsoft の命名規則に「
人に優しいフォームを作ろう、特に日本人に
皆さん、フォーム作ってますか？ Webサイトやアプリを作るにあたって避けられないのがForm作成、多くの方が autocomplete を設定するなど、より使いやすいフォームを作成するために尽力されていることと思います。 一方で、悪気なく書いたコードでより使いにくいフォームになってしまっている例が世の中には多く見られます(特に銀行系) 今回は、よくあるフォームの実装を例に、(特に日本語話者にとって)より使いやすいフォームにするためのちょっとした仕様や私が考える対策を書いていこうと思います。 忙しい方のために最初に書いておくと、この記事に書いてあることの多くは autocomplete の仕様を意識した実装をしましょう の一言に集約されます。 多くの方にとっては「何を当たり前のことを」と思われる項目も多いかとは思いますが、当たり前のことがされていないフォームが世の中には多すぎるので、少しでも
Google Lensでテキストをスキャン いきなりですが、グーグルクローム関連の小ネタを３つ紹介。 Google Lensでテキストをスキャン 二窓検索機能 タブ検索 まず一つ目は、 現実世界にある文字・テキストを スマホのGoogle Lensのアプリで読み取り文字起こしして、 PCのGoogle Chromeに飛ばすというライフハック。 パソコンで作業してるときけっこう使えます。 まずはグーグルレンズで文字を読み込み、 場所・範囲を選択。 そして 上記画像の下部に「パソコンにコピー」ってあるのわかりますかね？？ これをタップすれば、Google Chromeにコピーされ、 あとは PC上でCtrl+V コピペできるようになります。 例として上記画像の、サンタナのアルバム『キャラバンサライ』ライナーノーツから。 肉体は溶けて宇宙に変わる 宇宙は溶けて静寂の音に変わる 音は溶けてまばゆい
去年からフロントエンドのパフォーマンスについて断続的に学んでいるが、自分の頭のなかにある知識はどれも断片的で、まとまりを欠いているような感覚があった。 知識と知識がつながっておらず、各施策が何のために行われるのかも、必ずしも自明ではなかった。何となく「パフォーマンスに効果がある」と言ってしまうが、それが何を指しているのかは実は曖昧だった。 このような状態では新しい知識を得ていくのが難しいというか、効率的に行えないように思えた。議論の背景が分からないし、文脈や問題意識を上手く掴めないから。何の話をしているのかよく分からない、という状態になりがち。書かれてあることの意味は分かっても論旨を掴めているわけではないから、自分のなかに定着しない。 そこで、現時点で自分が知っていることを整理して、自分なりに分類しておくことにした。 当たり前だが、どのテクニックがどの程度有効なのかは、状況によって違う。
Real World HTTPでも紹介したネタですが、お仕事で受けている技術コンサル中に質問をいただいた時に、微妙に本で紹介した内容では少し足りなかったので、改めて整理のためにブログ記事にしてみました。次回、本が改訂されることがあればこのブログエントリーの内容も入れて加筆したいと思います。 Real World HTTPだとGoを使っていましたが、フロントとサーバーを同時にいじるので、本エントリーではNext.jsをサンプルに使います。Next.jsでプロジェクトを作って（npx create-next-app@latest –ts)、適当なプロジェクト名を入れてアプリケーションの雛形を作っておいてください。 Next.jsでは、1つのスクリプトファイルを作成すると、それがサーバーAPI(/pages/api以下)と、フロントの画面(/pages/以下のapi以外)になります。Next.j
このように、Cookie自体はいきなり誰かの個人情報・プライバシーに触れる仕組みではありません。あくまでアクセスを識別するための技術です。また、ECサイトやSNSのように、利用者を識別して動作しなければならないWebサイトではCookieはかならず必要になります。 サードパーティークッキーって？ 今回話題になっているのは、「サードパーティークッキー (3rd Party Cookie)」です。これもCookieの一種なのですが、ここまで出てきたものと少し扱いが異なります。それは、Cookieが複数のWebサイトをまたがって利用されるという点です。 サードパーティーCookieの説明のために、A社のWebサイト、B社のWebサイトという、無関係な二つのWebサイトがある事にしましょう。そして、ここにP社のWebサイトを追加します。P社のWebサイトと書きましたが、ここで想定しているのは、A社
SPAセキュリティ超入門 | ドクセル
スライド概要 SPA(Single Page Application)の普及が一層進んでおり、従来型のMPAを知らないウェブ開発者も生まれつつあるようです。SPA対応のフレームワークでは基本的な脆弱性については対策機能が用意されていますが、それにも関わらず、脆弱性診断等で基本的な脆弱性が指摘されるケースはむしろ増えつつあります。 本セッションでは、LaravelとReactで開発したアプリケーションをモデルとして、SQLインジェクション、クロスサイトスクリプティング、認可制御不備等の脆弱性の実例を紹介しながら、現実的な対策について紹介します。LaravelやReact以外のフレームワーク利用者にも役立つ説明を心がけます。 PHPカンファレンス2022での講演資料です。 PHPカンファレンスでの動画URL https://www.youtube.com/watch?v=jZ6sWyGxcCs
FirefoxでYoutubeを見続けるとどうなるか タスクマネージャを開いてFirefoxでYoutubeを見てみると、おかしいことがわかります。 動画を見ているだけなのにSSDへの書き込みが連続して発生するのです。 試しに後述のabout:configでbrowser.cache.disk.parent_directoryでキャッシュの位置をUSBメモリなどにしてみるとよくわかります。 またキャッシュされた内容はアドレスバーにabout:cacheと入力すると確認できます。 そしてわかったこと。 なんとFirefoxはYoutube動画をすべてディスクキャッシュとしてため込んでいるのです。 動画なんて何度も見ることは少ないのでキャッシュする意味は少ないはずです。 これではSSDの書き込みが延々と発生し、SSDの寿命に影響が出そうです。 Firefoxのキャッシュの仕組み アドレスバーに
無料でChrome・Firefoxの操作を自動化＆ファイルのアップロードやデスクトップの操作もできる「UI.Vision」
業務には「同じ作業の繰り返し」がつきものですが、何度も同じ作業を繰り返していると「こういう単純作業を任せるために機械ってものが生まれたんじゃないのか？」と思うわけです。無料のChrome・Firefoxの拡張機能「UI.Vision」を使うと操作を自動化できるマクロが組めて単純作業がラクチンになるとのことなので、実際に使っていました。 Open-Source RPA and Web Automation Tools for macOS, Linux and Windows https://ui.vision/ というわけで、実際にUI.Visionを使ってみます。Chrome版とFirefox版は、それぞれ以下の公式拡張機能ストアからダウンロード可能です。 UI.Vision RPA - Chrome ウェブストア https://chrome.google.com/webstore/de
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フリーWi-Fiを使ったら秘密情報を抜かれる経路にはどのようなものがあるか - Qiita
ブラウザの履歴を操作して「戻る」ボタンで広告を出すやつについて - コーヒーサーバは香炉である
ちいさな Web ブラウザを作ってみよう
Internet Explorer 11 はサポートを終了しました。長年のご愛顧ありがとうございました。 - Windows Blog for Japan
SUM関数一発入力、あらゆる繰り返し操作をF4キーひとつで済ます～Officeの技・実用編
ブラウザでリロードしながらキャッシュの挙動を確認してる全ての開発者へ | blog.jxck.io
「DeepL Write」が登場 ～翻訳ではなく、より正確・自然な文章提案に特化したAI／Webブラウザーさえあれば誰でも無料で利用可能
DevTools の使い方を可能な限りスクショ付きで解説してみる
ブラウザで遊べる無料の配達ゲーム『Messenger』が大注目浴びる。小さな惑星の小さな街でお届けもの - AUTOMATON
超簡単にChromeの拡張機能を作ってみる【誰でもできるよ】 - Qiita
こんなの絶対騙される……古いURL形式を使った巧妙な詐欺リンクの偽装方法が話題に／なるほど、頭いいなぁ【やじうまの杜】
ググり力、それはエンジニアには必須の能力である - Qiita
プログラミング言語をすぐに試せる「プレイグラウンド」まとめ。2024年版
2022年におけるフロントエンド開発のベースライン
browser-use やばいです - Qiita
2022年のモダンCSS改
TechCrunch | Startup and Technology News
XMLHttpRequest とはなんだったのか | blog.jxck.io
はじめに | ちいさな Web ブラウザを作ってみよう
アップルの「気をそらす項目を非表示」から感じるウェブ広告への危機感 | HON[.]jp News Blog
![アップルの「気をそらす項目を非表示」から感じるウェブ広告への危機感 | HON[.]jp News Blog](https://cdn-ak-scissors.b.st-hatena.com/image/square/e7b18c96e3a29f1ca70194e885581615c98c3086/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fhon.jp%2Fnews%2Fwp-content%2Fuploads%2F2024%2F09%2Fimage.jpg)
【特集】 Edgeがいつの間にか高機能に？これはChromeより便利かも
グーグルレンズの「パソコンにコピー」が地味に便利だという話 - 世界のねじを巻くブログ
Firefoxのユーザー、約3年で4600万人減……その理由を考察したレポートが海外で話題に【やじうまWatch】
フロントエンドのパフォーマンスチューニングを俯瞰する - 30歳からのプログラミング
ファイルダウンロード完全マスター | フューチャー技術ブログ
「サードパーティークッキーの廃止の撤回」ってどういうこと？ | IIJ Engineers Blog
FirefoxでYoutube見続けるとSSDが早死にする問題とその対処法
president.jp
azukiazusa.dev
labworks.digitalcube.jp
otonanswer.jp
labworks.digitalcube.jp
serina1.ht.gob.jp