ブラウザーにChromeのデベロッパーツールを埋め込めるReactコンポーネントを作ってみた

2024/04/10 18 users デベロッパーツール デバッグ Rea ブラウザー Chrome

とてもニッチな用途で使えるコンポーネントですがその場のiframeのデバックができるReactコンポーネントを作ってみました！ まずはこちらのポストをご覧ください！ このポストではChromeのデベロッパーツールを開いているわけではなく、ブラウザー内に直接デベロッパーツールが埋め込まれています！ 今回はこのようなRea... 続きを読む

iframe を使って安全にブラウザ拡張機能を実装する - mizdra

2024/02/27 9 users mizdra DOM スク フロントエンドエキスパート 成分

DOMDOM トークス #1 mizdra (みずどら) です 株式会社はてな フロントエンドエキスパートやってます DOM をとりまく ブラウザのセキュリティ の話 DOM 成分ほとんど無いです 「iframe」がちょっと登場するくらい すみません... 皆さんご存知 ツールバーに機能を足したり Webページをカスタマイズしたり Webページにスク... 続きを読む

記事中のURLプレビューを実装した (Cloudflare Pages Functions) | Marginalia

2023/11/23 7 users セルフ 先延ばし パフォーマンス Marginalia 信頼性

記事中のURLプレビューをiframeで表示するためのエンドポイントをCloudflare Pages Functionsで実装した。実はこれまで長らくはてなブログのembed APIを勝手に借りていた。倫理的によろしくない面もあったり、パフォーマンスや信頼性の面でもセルフホストしたいと思っていたが、着手するのを先延ばしにしていた。別に技... 続きを読む

無料のパスワードマネージャー「Bitwarden」には別のサイトを埋め込んでパスワードを盗める欠陥があるとセキュリティ企業が報告

2023/03/09 17 users Bitwarden Flashpoint 欠陥 パスワード

オープンソースの人気パスワードマネージャー「Bitwarden」には、ページの中に別のページを埋め込むiframeを用いてパスワードが盗むことができる欠陥があると、セキュリティ企業のFlashpointが報告しました。Bitwardenは2018年にはこの問題を認識していますが、iframeを使用する正当なサイトに対応するため修正しなかっ... 続きを読む

最初の画像のネイティブLazy-loadを無効にしたWordPress 5.9がリリース | 海外SEO情報ブログ

2022/01/27 6 users ネイティブLazy-load ifr img 中級 リリース

[レベル: 中級] WordPress 5.9 がリリースされました。 このバージョンでは、ページで最初の画像および iframe のネイティブ Lazy-load が無効になっています。 ページ表示速度の向上がサイトによっては期待できます。 WP のネイティブ Lazy-load サポート ネイティブ Lazy-load は、画像の <img> 要素と iframe の <ifr... 続きを読む

全デバイス・全ブラウザで PDF を読みたい - Kaizen Platform 開発者ブログ

2021/07/19 18 users Kaizen Platform PDF 全デバイス SVG

TL;DR PDF を画面に埋め込む方法は、iframe, object, embed, Viewer（3rd party library の利用）がある。 ブラウザネイティブの PDF 表示機能はブラウザ差異が大きいため、PDF を canvas や svg に変換して表示するライブラリやビューアーを利用した方が安定する。 しかし 3rd party library / service の利用はバンド... 続きを読む

画像の遅延読み込みにloading属性とJavaScriptを併用した最大限のパフォーマンスを発揮させる実装方法 | コリス

2020/09/10 251 users コリス アプローチ loading属性 翻訳記事 下記

画像やiframeの遅延読み込みに使用するloading属性と非サポートブラウザ用にJavaScriptを併用した現代的なアプローチで、最大限のパフォーマンスを発揮させる実装方法を紹介します。 Best way to lazy load images for maximum performance by Adrian Bece 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事... 続きを読む

ネイティブLazy-loadのしきい値をChromeが改良。ビューポートからの距離を短くし、遅延読み込みが適用されやすくする | 海外SEO情報ブログ

2020/07/20 7 users ビューポート ネイティブLazy-load しきい値 短縮

[レベル: 上級] Chrome がネイティブ Lazy-load を適用する際のしきい値を Google は改良しました。 ネイティブ Lazy-load を適用する画像/iframe のビューポートからの距離を従来よりも短くしました。 つまり、ネイティブ Lazy-load がより適用されやすくなります。 3000px から 1250px へ短縮 これまでは、ビューポー... 続きを読む

Google Developers Japan: 画面外のイメージおよび iframe を自動的に遅延読み込みする Chrome のライトモードユーザー向け Lazy-loading について

2019/11/19 13 users Chrome 遅延 イメージ 画面外

.app 1 .dev 1 #DevFest16 1 #DevFest17 1 #DevFest18 1 #DevFest19 1 #hack4jp 3 A/B Testing 1 A4A 4 Actions on Google 16 Activation Atlas 1 Addy Osmani 1 ADK 2 AdMob 31 Ads 48 Ads API 41 AdWords API 11 Agency 1 AI 10 AIY 3 AIY Vision Kit 2 ALPN 1 AMP 83 AMP Cache 6 AMP for Email 3 AMP SSR 1 AMP Stor... 続きを読む

Google Chromeが混在するコンテンツをデフォルトでブロック、バージョン79〜81で段階をへて仕様変更 | 海外SEO情報ブログ

2019/10/15 28 users デフォルト ブロック https 段階 コンテンツ

[レベル: 上級] HTTPS で配信するページでの混在するコンテンツを Google Chrome がデフォルトでブロックするようになります。 ブロックを解除するオプションがユーザーには提供されます。 仕様変更は段階をへて導入されます。 Google Security Blog がアナウンスしました。 現状は iframe と JavaScript のみ完全ブロッ... 続きを読む

ネイティブLazy-loadをWordPressで簡単実装するプラグインをGoogleが公開 | 海外SEO情報ブログ

2019/09/08 41 users ネイティブLazy-load Loading ライブラリ

[レベル: 中級] ネイティブ Lazy-load を簡単に実装する WordPress 用のプラグインを Google が公開しました。 ネイティブ Lazy-load は JavaScript のライブラリを利用することなく loading 属性を追加するだけで、画像と iframe の遅延読み込みを可能にします。 1 か月前にリリースされた Chrome 76 でサポートされま... 続きを読む

Googleの新技術<portal>タグを試してみた - aoma blog

2019/05/21 76 users Portal Portals ナビゲーショ Google 制約

Portalsとは japan.zdnet.com とのことで、iframeタグとよく似たportalタグができるらしい。 portalタグと<iframe>タグの違いは何かと言えば、Googleの新たなPortalsテクノロジーが<iframe>タグの制約を取り去ったものだというところにある。 Portalsを使用することでユーザーは、埋め込んだコンテンツへのナビゲーショ... 続きを読む

グーグルが発表した新ウェブ技術「Portals」とは--「Google Chrome」向けのウェブナビゲーションシステム - ZDNet Japan

2019/05/20 326 users Portals Portal ローディング 新風 ウェブページ

Googleは米国時間5月7日、年次開発者会議「Google I/O 2019」で、ウェブページのローディングやナビゲーションに新風を吹き込む「Portals」と呼ばれる新たなテクノロジーを発表した。 GoogleによるとPortalsは<portal>という新たなHTMLタグを使って動作するという。このタグの動作は、従来からある<iframe>タグとよく似... 続きを読む

画像最適化戦略 Lazy Loading 編 | blog.jxck.io

2019/05/20 97 users Lazy loading jxck.io INTRO img

created_at: 2019-05-20 updated_at: 2019-05-20 tags: [lazyload,image,performance] Intro 長らく議論されてきた <img> や <iframe> における Lazyload について、仕様と実装が動きを見せている。 ここでは、特に画像 <img> に注目し、 Lazyloading の議論の変遷を踏まえた上で現状を解説する。 画像最適化戦略 PNG/JP... 続きを読む

GoogleがiFrameに代わる遷移タグPortalsをデモ、サイト間の連携を大幅強化へ | TechCrunch Japan

2019/05/08 58 users Portals Portal デモ ナビゲーション 連携

米国時間5月7日、GoogleはPortalsと呼ばれるChromeウェブブラウザ用の新しいページ遷移タグを発表した。このテクノロジーはGoogleがしばらく前から開発を続けてきたもので、機能自体はiFrameとほぼ同様だ。 Googleは「Portalはナビゲーション可能なiFrame」と説明している。従来のiFrameではページ内に別サイトのビュー... 続きを読む

俺の必殺技 ボイスバージョン喜び度100%マシマシ - ねうしとらうたつみうまひつじさるとり押井守い - Radiotalk(ラジオトーク)

2018/11/06 68 users Radiotalk scrolling Embed 必殺技

俺の必殺技 ボイスバージョン喜び度100%マシマシ ねうしとらうたつみうまひつじさるとり押井守い <iframe width="460" height="185" src="https://radiotalk.jp/embed/82363" frameborder="0" scrolling="no" allowfullscreen style="max-width: 100%;"></iframe> 続きを読む

Chromeの新機能がすごい便利！imgやiframeにlazyload属性を加えるだけでLazyLoad対応に | コリス

2018/09/03 315 users コリス LazyLoad img Chrome パフォーマンス

「Blink LazyLoad」と呼ばれるChromeの新機能は、表示領域外の画像やiframe要素のロードを遅延させることで、Webページのパフォーマンスを大幅に向上させます。 LazyLoadは今まではJavaScriptを使用していましたが、ブラウザのネイティブな機能として、imgやiframe要素にlazyload属性を加えるだけで簡単に利用できます。... 続きを読む

CSSの機能を使用してクロスオリジンのiframeから表示内容を読み取るサイドチャネル攻撃 | スラド

2018/06/03 45 users SlashGear スラド mix-blend-mode

CSSの「 mix-blend-mode 」プロパティを使い、クロスオリジンのiframeに表示されている内容を読み取ることが可能なサイドチャネル攻撃について、発見者の一人が解説している( Evonideの記事 、 Ars Technicaの記事 、 SlashGearの記事 )。 Webページがクロスオリジンのiframe内のDOM要素にアクセスすることはデフォルトで禁じられているが、ifram... 続きを読む

iframe で複数の管理画面を1つの統一されたサイトに見せるパターンのまとめ | RakSul Tech Blog

2018/01/30 42 users サーバサイド パターン RakSul Tech Blog

こんにちは。エンジニアの 二串 です。普段はサーバサイドの開発をしていますが、今日は最近仕事で取り組んだフロントよりの話になっています。 iframe を使って複数の管理画面サイトをあたかも1つの統一されたサイトとして見せるパターンをまとめます。 iframe を使って別サイトをはめ込むことは簡単ですが、実際複数ページあるサイトをはめ込もうとすると、ただ iframe を使うだけでは力不足です。例... 続きを読む

iframeのコンテンツに合わせてJavaScriptで自動的に高さを調整する方法 – Rriver

2017/11/19 63 users メディアクエリ Rriver ウインドウ幅 作業 ページ

レスポンシブなコンテンツをiframeでページに埋め込んでスクロールさせないように表示するとウィンドウ幅によってコンテンツの高さが変わるので、親フレームで高さを調整しないとコンテンツが隠れてしまう場合があります。iframeを埋め込んでいる親フレームにメディアクエリを書けば調整できますが、かなり非効率的な作業です。 先日、JavaScriptを使った方法を見つけたのでこのブログでもシェアします。ち... 続きを読む

[CSS]YouTubeなどの動画をレスポンシブ対応で実装する現在主流とこれからのテクニック | コリス

2017/05/19 162 users YouTube コリス padding CSS div

動画は拡大縮小が簡単な画像とは異なり、アスペクト比を維持したままレスポンシブ対応で埋め込むと、幅のサイズだけが変わり、高さがそのままになってしまいます。 この問題を解決するには、動画を配置するiframeをdivなどの親コンテナで内包し、アスペクト比にあった高さをpaddingで指定し、親コンテナのサイズに合わせて動画のサイズを変更させます。 動画をレスポンシブ対応で実装する現在主流となっているテ... 続きを読む

Google Playに132本の不正アプリ、開発環境を悪用する手口が浮上 - ITmedia エンタープライズ

2017/03/03 31 users 手口 浮上 ITmedia エンタープライズ 不正アプリ 媒介

プラットフォームをマルウェアの「媒介」に利用して、知らないうちにマルウェアを他のプラットフォームに拡散させようとする手口が浮上している。 セキュリティ企業のPalo Alto Networksは3月1日、Google Playで配信されていたAndroidアプリ132本に隠しiFrameが仕込まれ、不正なドメインにリンクされているのが見つかったと伝えた。問題のアプリは既にGoogle Playから... 続きを読む

ブログカードとテキストリンクのクリック率を実測・比較した結果 | NaeNote

2017/02/28 30 users 趣旨 NaeNote プロ 実測 枠外

はてなブログではブログカードのクリックを検知できなかった 以前「ブログカードは死ぬほどクリックされない」という説に対して異を唱えたことがありました。 クリックされていないのではなく、 技術的な理由でクリックが検知できていないだけだ というのがこの記事の趣旨です。 はてなブログのブログカードはiframeを使っている iframeの枠内と枠外は別サイト扱い そのためブログカードのクリックを枠外のブロ... 続きを読む

iframeのサイズをコンテンツに応じて自動リサイズを出来るようにする「Iframe-resizer」:phpspot開発日誌

2015/09/09 64 users phpspot開発日誌 自動リサイズ コンテンツ サイズ

iframeのサイズをコンテンツに応じて自動リサイズを出来るようにする「Iframe-resizer」 2015年09月09日- Iframe-resizer by davidjbradshaw　デモ iframeのサイズをコンテンツに応じて自動リサイズを出来るようにする「Iframe-resizer」。 iframeってお手軽に使えるんですが、iframe内外のJSが連携するのは別ページであるの... 続きを読む

(K)GoogleMapをサイトに埋め込んでオリジナルアイコンを設置した時の最低限の設定 | web(K)campus

2015/07/22 48 users オリジナルアイコン Campus GoogleMap 横幅

(K)GoogleMapをサイトに埋め込んでオリジナルアイコンを設置した時の最低限の設定 2015年02月18日 web GoogleMAP, 覚え書き コーポレートサイトや飲食店のサイトなどの定番コンテンツ「Access」にGoogleMAPを埋め込むのはよくあることですが、通常のGoogleMAPからiframeで地図を埋め込むこともできますが、横幅と縦幅ぐらいのカスタマイズしかできないので、... 続きを読む