リアルタイム通信用のコネクションをタブ間で共有してまとめる
これはなんらかのアドベントカレンダーの何日目かの記事だったりしません。 KOBA789 です。仕事では人工衛星の搭載ソフトウェアを書いたり、人工衛星の管制システムのソフトウェアを書いたりしています。 先日、こういうツイ……ポストをしたらちょっとバズりました。意外と興味持ってくれる人が多かったので、それに関連するオタク早口記事でも書くかぁと思って筆を執っています。 うちの人工衛星の開発ツールはウェブ技術でできている 前述のポストは管制システムについてですが、開発用ツール（C2A DevTools）もまた React + TypeScript でできています。 まぁ画面見てもなにがなんだかという感じだと思いますが、UNIX サーバーで top コマンド叩いたときの内容と、サーバーのログが合体したみたいなものが表示されていると思ってください。 これらの数値は gRPC-web の Server-
console.log() の代わりにdevtoolsのLogpointsを使う - Qiita
Logpointsを使おう Webフロントエンドの開発をする際、デバッグ目的で「特定の処理が実行された」ということを確認するために console.log() を使うことは多いと思います。しかし、Google Chrome や Microsoft Edge で利用可能な Logpoints を利用することで、 console.log() を使わずともコンソールにメッセージを出力することが可能です。 なぜLogpointsを使うの？ Logpoints を使うのには以下のメリットがあります。 デバッグや動作確認のためにコードを変更する必要が無い console.log() を誤ってcommitに含めてしまう心配が無い console.log() を入れた後に再ビルドやホットリロードを待つ必要が無い どうやってLogpointsを使うの？ logpoints は以下のように使用します。 Chr
Chrome113でHTTPヘッダを上書きしていろんな状態をお試しできる - hogashi.*
Chrome 113 で、 DevTools の Network ペインで HTTP ヘッダを好きなように編集して、いろんな状態をお試しできるようになっている。 What's New in DevTools (Chrome 113) - Chrome Developers で紹介されている。 GitHub から example.com を fetch してみる GitHub の CSP ヘッダを上書き example.com の CORS のヘッダを上書き 途中で指定したフォルダの中身は何？ 上書きをやめるには？ 感想 GitHub から example.com を fetch してみる 試しに、 CSP で外部への通信がそれなりに制限されている GitHub から、 example.com への fetch を成功させてみる (外部サイトへの通信は、認証情報や秘密の情報の漏洩などに気をつ
JavaScriptホワイトボックス暗号とLINE Chromeのセキュリティ強化の裏話
LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog LINE株式会社およびヤフー株式会社は、2022年11月17日・18日の2日間にわたり、技術カンファレンス「Tech-Verse 2022」をオンライン（ライブストリーミング形式）にて開催しました。特別連載企画「Tech-Verse 2022 アフターインタビュー」では、発表内容をさらに深掘りし、発表で触れられなかった内容や裏話について登壇者たちにインタビューします。今回の対象セッションは「JavaScriptホワイトボックス暗号とLINE Chromeのセキュリティ強化」です。 LINEが提供するアプリケーションはさまざまなプラットフォームで動作しています。ネイティブであれWebであれ、すべての環境で高いレベルのセキュリティ
最新のchromeでも動くオレオレ証明書のつくりかた 2022/11 - Qiita
ワイ 「chromeのアップデートきてるやんけ」 ワイ 「アップデート、ポチ〜〜」 ワイdocker 「ギギギ」 ワイchrome 「この(オレオレ)証明書は無効でっせ」 ワイ 「ほわっ！」 ※ バージョン: 107.0.5304.87（Official Build） （arm64） ローカル開発環境でもhttpsで開発したいよね 選択肢としてはオレオレ証明書を無理やりこれはちゃんとした証明書だから！って覚えさせるしかない 今まではLinuxでつくってたオレオレ証明書(10年有効)でやってたのに、chromeをアップデートしたら無効になった・・・ どうしたものか・・・ いつものグーグル先生に聞いてみる なんかそれっぽいのはあるけど、決定的な答えなのかどうかは現段階ではわからない・・・ しょうがない、やるしかないな・・・ stakater/ssl-certs-generatorというdock
ブラウザ自動操作技術の深層へ、直接触れて学ぶ WebDriver と Chrome DevTools Protocol
ウェブアプリケーションの開発においてE2Eテストの自動化は身近なトピックです。SeleniumやPuppetter、PlaywrightやAppiumなどがブラウザ・ネイティブアプリの自動操作のOSSとしてよく挙げられます。しかし、それらの裏側はご存知でしょうか？ 本トークではこれらのツールの背後…
ブラウザレンダリング入門〜知ることで見える世界〜 - Qiita
はじめに 『レンダリングの仕組みなんて知らなくても、ブラウザが勝手にやってくれるじゃん！』 当時駆け出しのエンジニアだった私はそう思っていました。 実際、当時の私はレンダリングの『レ』の字も知りませんでしたが、特に業務上で問題はありませんでした。 しかし、その時は突然訪れました。 クライアントの要望でアニメーションを多彩に取り入れた案件を実装した際に、テスト段階で一部ブラウザ（S○f○ri、E○ge）でアニメーションがひどい状況になっていることが発覚しました。 (開発中はChromeで確認を行っており、Chromeでは特に問題はなかったので発覚が遅れました。) それからは、狂ったようにパフォーマンスの改善方法をググり、修正する日々が続きました。（最終的には、なんとかマルチブラウザでの動作も担保し、納品まで完了しました。） その案件が落ち着いた後、改めて自分の調べたことを振り返ると、局所的な
PythonでSeleniumを使ってスクレイピング (基礎) - Qiita
スクレイピングを勉強しようと思い立って、Selenium を使ってでブラウザを操作してみたので、軽くまとめておこうと思います。 使用したもの Selenium 自動でブラウザを操作する為のライブラリ Chrome ブラウザ ブラウザに合わせたドライバーを用意する ブラウザを操作するには、各ブラウザに合わせてドライバーを用意する必要があります。 今回は Chrome を使用するので 公式サイトから ChromeDriver をダウンロードします。 Selenium をインストール pip で selenium を インストール pip install selenium webページを開いてみる ブラウザを開く webdriver.Chrome(driver_path) webページを開く driver.get(URL) webページを閉じる driver.close() ブラウザを終了 (全
Web Audio APIの闇 - Qiita
HTML5でゲームやリッチなコンテンツを作る上で欠かせない「Web Audio API」 しかしコイツがなかなか・・・モバイルでの特殊実装やメモリ使用量まわりで色々と闇を抱えていて・・・ ということで闇を見つけ次第、検証結果や対処方法など記録を残していきます。 iOS SafariはBGMなどの自動再生ができない iOS Safariは以下ようなコードでサウンドの自動再生ができない const AudioContext = window.AudioContext || window.webkitAudioContext; const ctx = new AudioContext(); const request = new XMLHttpRequest(); const url = 'https://zprodev.github.io/web-audio-test/assets/Campf
Seleniumでスクリプトを書くのに使える記録ツールあれこれ | MagicPod Tech Blog | MagicPod: AIテスト自動化プラットフォーム
Seleniumの記録・再生ツールといえばSelenium IDEやSelenium Builderが有名ですが、これらのツールはFirefox55以降動作しなくなっていました※1。そこでSeleniumプロジェクトチームによって新バージョンの開発が進められ、先日ついに、Chromeで動作する新しいSelenium IDEのバージョン1.0がリリースされました。 今日は、この新しいSelenium IDEをはじめとする、無料で使える様々なSeleniumスクリプトの記録ツールについてご紹介します。 なおこの記事では、プログラマー向けに、「プログラミング言語によるスクリプト作成の補助ツール」という観点から各種ツールを比較します。プログラミング言語でスクリプトを書く場合も、スクリプト記録ツールは下記のような用途に活用でき、非常に便利です。 ブラウザ上の要素のロケータ※2 を簡単に取得する テス
アプリを使わなくてもPush通知が来る！
3月9日に発表されたGoogle Chromeの最新ベータ版v42.0.2311.22でPush APIがサポートされニュースになりました。早速このPush APIをGoogle Chromeのサンプルを使って試してみたので、そのレビューを書きたいと思います。VASILYでインターンをしている茨木です。 3月9日に発表されたGoogle Chromeの最新ベータ版v42.0.2311.22でPush APIがサポートされニュースになりました。ブラウザからスマホにプッシュ通知が送れるというものです。 スマホ向けウェブサービスをやっている方ならみんな気になるこの機能、早速試してみました。かなりシンプルなので皆さんもぜひ触ってみてください。 以下のサンプルやサイトを参考にしました。 〇サイト http://updates.html5rocks.com/2015/03/push-not
Web表示の高速化を実現するSPDYとHTTP/2.0の標準化 | IIJの技術 | インターネットイニシアティブ（IIJ）
はじめに SPDY(スピーディと読みます)は、GoogleがWebの表示を高速化するために開発した、新しいプロトコルです。新しいと言っても、今後普及が見込まれるような新技術ではなく、既に実用化され多くの方が日常的に利用しています。 現在ChromeやFirefox、Operaのブラウザを使われている方は、Googleのサービスやtwitterにアクセスしていると、実は全く気付かないうちに、このプロトコルを利用しています。 SPDYは2010年6月にリリースされたChromeのバージョン6安定版からデフォルトで有効になっており、Chrome利用者はこの新技術を3年以上も利用していることになります。 一般のユーザはSPDYを使っているかどうか、どうしたらわかるのでしょうか？ Chromeでは、"SPDY Indicator"という便利な拡張機能を提供しています。また同種のツールは、Firefo
Ginger 英文チェッカー
Ginger Pageとは？ 英文でのビジネスメールやSNSなど、毎日の英語に必要な翻訳や英文校正の機能がワンクリックで実行できます。 さらに、類語検索や復習機能もワンクリックで使えて英語の学習にも最適です。 ＜8つの機能＞ Write （文法・スペルチェッカー） Translate （翻訳） Define （辞書） Synonym（類語検索） Favorites（お気に入り） Personal Trainer（復習） Phrase of the day（今日の英語） Personal Dictionary（マイ辞書）> ※Android版には、予測変換機能、キーボード搭載, iOS版には、キーボード搭載 Ginger Pageの特長 Ginger Pageは、世界で最もダウンロードされているマルチ英語ツールです。 必要な機能がすべて 翻訳や英文チェッカー、辞書機能、類語検索など、Ging
ビギナー向けデバッグツールで効率的に開発しよう
主要なブラウザ「Chrome・Safari・Firefox・Internet Explorer」のビギナー向けデバッグツールが紹介された勉強会のエッセンスをお届けする。 2013年3月21日、新宿で行われたhtml5j.org主催の第37回HTML5とか勉強会に参加してきました。 今回のテーマはビギナー向けデバッグツール特集ということで主要なブラウザ「Chrome・Safari・Firefox・Internet Explorer」のデバッグツールに加え「Adobe Edge Inspect・Edge Reflow」の紹介が行われました。 筆者もそうですが、普段何となくデバッグツールを使っている方が多いと思います。しかしデバッグツールは、上手に活用することでWebサイト・アプリケーションの効率的な開発を行ったり、パフォーマンスチューニングの際に問題となる部分を素早く特定できたりする便利なツー
Mac/PCからのAndroid上のブラウザのリモートデバッグのまとめ - Nothing ventured, nothing gained.
スマートフォンやタブレットが主流になりつつあるが、それらモバイルデバイスでWebのデバッグするのは楽ではない。User Agent文字列を変更してモバイルデバイス上のブラウザの振りをしたMacやPCのブラウザからデバッグする方法もあるが、モバイルデバイスのブラウザの機能がMacやPCと同一ではなく、モバイル特有の状況もあるため、モバイルデバイスそのものを使った状態でデバッグしなければいけないことも多い。 そのような際に使われるのがリモートデバッグだ。 Mac/PCとAndroidの両方にブラウザを提供している主流ブラウザとしてはChrome、Firefox、Operaがあるが、このリモートデバッグ機能はこの3種のブラウザすべてに備わっている。また、ブラウザ開発元ではないが、Adobeもリモートデバッグ機能を提供している。すでに使っている人も多いと思うし、それぞれ多くの情報が提供されているの
briccolog » スマホサイト支援ツール「Adobe Shadow」使用レポート
外苑前のWEB制作会社ブリコルールのスタッフによる、役に立つ情報から役に立たない情報まで。いろんなところにアンテナ張ってるつもりです。 Adobeからスマホサイトの制作支援ツール Adobe Shadowが公開されました！ Adobe Shadow | preview mobile web – Adobe Labs 概要については上条氏のブログに詳しいです。 スマホサイト制作を支援する Adobe Shadow の Labs リリース 1 公開 – akihiro kamijo まだLabsリリースなので正式版ではないようですが、非常に便利そうな印象だったので、早速使ってみました。 必要な環境 PC Windows 7 またはMac OS X v10.6, 10.7 WEBブラウザ Google Chrome Chrome用の拡張機能を介してスマホ側を操作します。今のところ、他
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - devlooped/chromium: Run a portable Chromium using dotnet 6+ and nuget.
Laravelとテストについて