httpでアクセスしたいのにhttpsへリダイレクトされて悩んだ（HSTSまたはStrict-Transport-Securityの沼） - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
Chromeの新機能がすごい便利！imgやiframeにlazyload属性を加えるだけでLazyLoad対応に
「Blink LazyLoad」と呼ばれるChromeの新機能は、表示領域外の画像やiframe要素のロードを遅延させることで、Webページのパフォーマンスを大幅に向上させます。 LazyLoadは今まではJavaScriptを使用していましたが、ブラウザのネイティブな機能として、imgやiframe要素にlazyload属性を加えるだけで簡単に利用できます。 「Blink LazyLoad」の機能と使い方、注意点を紹介します。 A Native Lazy Load for the Web 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 「Blink LazyLoad」の機能 セキュアなLazyLoadのポリシー 後方互換性 LazyLoadの有効化 参考資料 終わりに 「Blink LazyLoad」の機能 重要度の低いコンテ
パスワードに依存しない認証「WebAuthn」をChrome/Firefox/Edgeが実装開始、W3Cが標準化。Webはパスワードに依存しないより安全で便利なものへ
Google、Mozilla、マイクロソフトが「WebAuthn」の実装を開始。これによって「FIDO2」の普及が期待され、Webブラウザから指紋認証や顔認証などで簡単にWebサイトへのログインや支払いの承認といった操作が実現されそうだ。 多くのWebアプリケーションは、ユーザーの認証にユーザー名とパスワードの組み合わせを用いています。 しかしユーザー名とパスワードの組合わせを用いる方法にはさまざまな問題が指摘されています。身近なところでは、安全なパスワードを生成することの手間や、安全性を高めるためにパスワードの使い回しを避けようとした結果発生する多数のパスワードを管理することの手間などがあげられます。 そしてこうしたパスワードの不便さが結果としてパスワードの使い回しを引き起こし、いずれかのサイトで万が一パスワードが流出した場合にはそれを基にしたリスト型攻撃が有効になってしまう、などの状況
Webブラウザの操作をJavaScriptで自動化。Headless Chromeのフレームワーク「Puppeteer」がバージョン1.0に到達。ChromeのDevToolsチームが開発
UIを持たずスクリプトから操作可能なWebブラウザのHeadless Chromeを利用するためのフレームワーク「Puppeteer」がバージョン1.0に到達した。Webアプリケーションの自動テストなどに利用可能だ。 GoogleのWebブラウザ「Chrome」は、ユーザーインターフェイスを持たずコマンドラインやリモートデバッグ機能を通じてWebブラウザを操作できる「Headless Chrome」機能を備えています。この機能は2017年6月にリリースされた「Chrome 59」から実現されたものです。 Headless Chromeを利用すると人間がWebブラウザをマウスやキーボードで操作することなく、プログラムでHeadless Chromeを起動し、特定のWebページを読み込み、画面キャプチャの取得や、指定された場所をクリックし、値を入力し結果を取得する、といった操作を自動的に行わせ
全モダンブラウザで使えるJavaScriptのdynamic import（動的読み込み） - Qiita
JavaScriptでは他のJSファイルを読み込みES Modulesという仕組みがあり、Chrome、Edge、Safariなどブラウザのサポートが拡大しつつあります（参考記事「JavaScriptでモジュールを使う時代に！ ブラウザで覚えるES Modules入門」）。 さらに、モジュールをimport()を使って「関数のように」呼び出すためのdynamic importという仕組みが2020年に公開されるECMAScriptの仕様で導入されます（tc39/proposal-dynamic-import）。Google Chrome、Firefox、Safariではではモジュールのdynamic importに対応しており、ブラウザでその挙動を確認できます。 dynamic importのメリットは、任意のタイミングでモジュールを読み込めること。たとえば、ページの初期表示に必要なJav
Pegmatite - PlantUMLを画像化するGoogle Chrome機能拡張
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました かつて信望者が多く、そして使われなくなってしまったUMLですが、個人的には技術的には悪くないと感じています。問題はシステム開発と密接に（スケルトンコード出力など）しすぎたことでしょう。 システムを可視化したり、図化するのは良いことです。そこで使ってみたいのがPegmatite、PlantUMLをドローしてくれるChrome機能拡張です。 Pegmatiteの使い方 サンプルのテキストです。こうしたテキストがあったとします。 そうすると自動的にUMLにしてくれます。 同様にこうしたテキストがあったとします。 こんなシーケンス図に自動展開されます。 Pegmatiteを使えばテキストでUMLとしての記述を行うPlantUMLを簡単にWebブラウザ上で確認できるようになります。専用ツール
Tamper Chrome - HTTPリクエストを編集するセキュリティチェック
Webのセキュリティをテストする際に、通常ではありえないリクエスト内容を送ったりすることがあります。しかし一からリクエストを作成するのは大変ですし、毎回指定するのも面倒です。 そこで使ってみたいのがTamper Chromeになります。すでに実行したHTTPリクエストをベースとして、編集して実行できます。 Tamper Chromeの使い方 インストールするとDeveloper ToolsにTamperの項目が追加されます。 実際に処理を行うのはChrome Appになります。 OKを押すと実行します。 Tamper Chromeを使えばちゃんと実行できるHTTPリクエストをベースとして、新しい形でリクエストを作成できます。ヘッダーの追加などもできますので、ヘッダーを読んで処理を行っているシステムなどをチェックする際に使えるでしょう。 Tamper ChromeはGoogle Chrome
「Google Chrome 58」はIndexedDB 2.0やフルスクリーン版プログレッシブウェブアプリに対応
Googleがウェブブラウザ・Google Chromeの安定版「58.0.3029.81」をリリースしました。新機能追加のほか、脆弱性修正が29件行われています。 New in Chrome 58 | Web | Google Developers https://developers.google.com/web/updates/2017/04/nic58 更新内容をウェブチーム所属のPete LePageさんが語る映像も公開されています。 Chrome 58: IndexedDB 2.0, display: fullscreen and New Options for Sandboxed iFrames - YouTube 大きな変更の1点目は「IndexedDB 2.0」のフルサポート。アップデートを容易にするためにリファクタリング後にオブジェクトストアやインデックスの名前
なにこれ、スゴすぎる！ブラウザで行った操作を記録し、さらに完全再生もできるChromeの機能拡張 -Wildfire
ページをどのくらいスクロールし、どこをクリックするのか、マウスやキーボードをどのように操作し、コンテンツを見るのか、ブラウザで行った操作を記録し、さらに完全再生もできるChromeの機能拡張を紹介します。 ユーザビリティテストに利用するだけでなく、操作を編集・再生することもできるので、プレゼンなどでページの操作を再現することも可能です。 Wildfire Wildfireの特徴 Wildfireのインストール Wildfireの使い方 Wildfireの特徴 Wildfireはユーザーがページをどのように操作するのか、どのように見るのか、手軽にユーザビリティテストができるChromeの機能拡張です。また、アクションをシミュレーションし、新しいデザインの確認にも利用できます。 ブラウザで表示したページのアクションを記録します。 記録したアクションは、すべて再生可能。 アクションを編集し、シミ
Chromeブラウザ上でAndroidアプリを動かす - k4zy no blog
2日ほど前に、このようなニュースが出てました。 2017年新発売のChromebookはすべて最初からAndroidアプリをサポート、Google Play Storeをいきなり利用できる 私の知る限り、いくつかのChormeOS端末では、既にGooglePlayStoreが利用可能です。ChromeOSで動くならChromeブラウザでも動きそうですよね。 調べるとChromeのExtensionでARC welderというものが提供されています。 ARC welderは2015年頃にリリースされたようで、そういえば一度試した記憶があります。その時の印象は微妙でしたが、最近改めて使ってみるとかなり改善されています。実用段階です。 導入 公式のドキュメントはこちらです。Getting Started with ARC ARC welderからインストールするとchrome://apps/ に
2016年11月のデスクトップブラウザシェア、Chromeが55%と圧倒 : IT速報
Net Applicationsから2016年11月のデスクトップブラウザシェアが発表された。 11月はChromeとFirefoxがシェアを増やし、Microsoft Internet Explorer、Microsoft Edge、Safariがシェアを減らした。Chromeのシェアは55%を突破し、引き続き増加する傾向を見せている。 Microsoft Internet Explorerのユーザーの減少幅がMicrosoft Edgeのユーザー増加に結びついておらず、代わりにChromeやFirefoxへユーザーが流れている。 http://news.mynavi.jp/news/2016/12/03/141/
音声認識入門！Web Speech APIを使いChromeブラウザを音声操作するWebアプリ開発術を公開！ -
どうも、まさとらん（@0310lan）です。 みなさんは、音声認識を活用していますか？ 例えば、iOSの「Siri」と会話してみたり、Androidなら「OK Google」と喋って検索した経験があるのではないでしょうか？ 今回は、このような音声認識を利用し、PCのChromeブラウザに喋りかけることで動作するサンプルデモのチュートリアルをご紹介しようと思います！ ■音声認識に必要なAPIとは？ まず最初に必要なのが、自分の「声」を音声として認識してくれるAPIなのですが、実はPCのChromeブラウザであれば今すぐJavaScriptから利用できるようになっています。 Web Speech API：ブラウザ対応状況 「Web Speech API」を使うことで、特別なツールをインストールしたり、余計なライブラリを読み込む必要は無いわけです。 ちなみに、このAPIには大きく分けて「音声認識
Espruino Web IDE - Google Chromeの上でIoTデバイスを開発
JavaScriptの利用幅が広がっています。元々Webブラウザくらいだったのがサーバサイドで動き、スマートフォンでも動き、さらに小さなIoTデバイスでも動くようになっています。 今回紹介するEspruino Web IDEはEspruinoというIoTデバイスに対応したコードを書くためのWeb IDEになります。 Espruino Web IDEの使い方 メイン画面です。右側にJavaScriptのコードがありますが、LED1とあるのが特徴的です。コード的に500msごとにLDEのオン/オフを繰り返すようです。 コードをデプロイするポートを選択できます。 ブロックを使ったビジュアルプログラミング環境も用意されています。 ブロックは多数用意されているので、それらをつないで処理を書いていきます。 Espruino Web IDEはEspruinoとのことですが、ライブラリや実行環境さえあれば
Simple Docker UI - Chrome Web Store
Simple Docker UI is an unofficial developer tool for monitoring and managing Docker containers. GUI for Docker (also available for Windows, Mac and Linux check https://github.com/felixgborrego/docker-ui-chrome-app) Main features: * Garbage collection for unused images, Keeping only the once used by a container. * Garbage collection for unused containers. Removing containers that haven't been in us
hayato
Hayato Ito Software Engineer at Google LinkedIn Chronology GitHub: github.com/hayatoito Twitter: @hayatoito, @shadow_hayato (inactive) Technical Advisor for Kings' Viking (王様達のヴァイキングの技術監修): 1, 2, 3 Red Coder 2024 出版のお知らせ 「普通の人が資産運用で99点をとる方法とその考え方」 2021 Resource loading with Content Addressable Bundles 2020 普通の人が資産運用で99点をとる方法とその考え方 2018 Imperative Shadow DOM Distribution API Google にソフトウェアエンジニアとして入
Generator Chrome Extension - Google Chrome機能拡張のベースを生成
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Google Chromeがいくら便利だと言っても、全ユーザがデフォルトの機能で満足できるわけではありません。Chromeの利便性はサードパーティー製の機能拡張によって支えられている面が大きいでしょう。 そこで今回はGoogle Chrome機能拡張を作る際に使えるGenerator Chrome Extensionを紹介します。 Generator Chrome Extensionの使い方 Generator Chrome ExtensionはYeomanやgulpを使ってセットアップします。 まず必要なライブラリをインストールします。 npm install --global yo gulp bower そしてGenerator Chrome Extensionをインストールし
グーグルChrome、ページ読み込みがぐっと速くなる
ぐっとぐぐっと、ぐーぐるっと読込みスピードアップ。 Chromeユーザーに嬉しいニュース。グーグルが提供するウェブブラウザChromeが、まさに今スピードアップしようとしています。新たな圧縮アルゴリズムが準備され、今までよりも25％、ページ読み込み速度があがるようになるとのこと。 この新たなアルゴリズムはBrotliと呼ばれ、現状のChromeで採用されている旧型Zopfliに取って代わるもの。前から開発されていましたが、ようやく完成し、リリースの準備がととのったところ。グーグル曰く｢まったく新しいデータフォーマット｣とのことで、 HTMLもCSSもJSだって、とにかく読み込むのが速いと自信をみせています。グーグルは、通信料が少ない格安データプランを使うモバイルユーザーや、バッテリーが気になるモバイルユーザーにも、Chrome改善で大きな利益があると語ります。 Chromeアップグレードは
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「Google Chrome 61」が正式版に ～モジュール機能や“WebUSB”をサポート／Android版ではOSの共有機能を呼び出すための“Web Share API”を追加
[翻訳]Chrome デベロッパーコンソール 意外と知られていない10の機能 - Qiita![[翻訳]Chrome デベロッパーコンソール 意外と知られていない10の機能 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/d66c1a02fb93900a9716449f341729577217e372/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnMzLWFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkZxaWl0YS1pbWFnZS1zdG9yZSUyRjAlMkY3OTM5NCUyRjJlNzBkMTE3YTQ4MjBmM2FjOGEwNmZhZmQ5YmVjYjI1NWMwZjU3NmIlMkZsYXJnZS5wbmclM0YxNTcxNTc0ODM4P2l4bGliPXJiLTQuMC4wJmFyPTElM0ExJmZpdD1jcm9wJm1hc2s9ZWxsaXBzZSZmbT1wbmczMiZzPTdlYThiZmI4ZGM0MDhjMmEyYWMwMmU4ZWUzZjVmMjE2%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D7004c0d648296aaa6c311c99747ccf9a%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCJUU3JUJGJUJCJUU4JUE4JUIzJTVEQ2hyb21lJTIwJUUzJTgzJTg3JUUzJTgzJTk5JUUzJTgzJUFEJUUzJTgzJTgzJUUzJTgzJTkxJUUzJTgzJUJDJUUzJTgyJUIzJUUzJTgzJUIzJUUzJTgyJUJEJUUzJTgzJUJDJUUzJTgzJUFCJUUzJTgwJTgwJUU2JTg0JThGJUU1JUE0JTk2JUUzJTgxJUE4JUU3JTlGJUE1JUUzJTgyJTg5JUUzJTgyJThDJUUzJTgxJUE2JUUzJTgxJTg0JUUzJTgxJUFBJUUzJTgxJTg0MTAlRTMlODElQUUlRTYlQTklOUYlRTglODMlQkQmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtcGFkPTAmcz1hMGJiNDZhYjE3NjUyMDRiMGVjMzc0ZmE2NDk1MjZlMw%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBhb3NobzIzNSZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1wYWQ9MCZzPTZmYjA1ZDdjODFmM2E5YjBjYjY3M2M1ODMyODdjNWQ5%26blend-x%3D242%26blend-y%3D454%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26txt64%3DaW4g5qCq5byP5Lya56S-44O044Kh44Or56CU56m25omA%26txt-x%3D242%26txt-y%3D539%26txt-width%3D838%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%25231E2121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D28%26s%3D21ce0c6477b75e478147573d9beabc27)
JavascriptのChromeでのデバッグ方法個人的まとめ2016 - Qiita
