タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
しかし、実際に M92 がリリースされてからは、この機能が壊れたことによる影響が多数報告されていたため、実装者が想定していた以上に影響はあったといえるだろう。 他のブラウザの反応 実際にロールアウトしたのが Chrome/Edge であったため、いつものように「また Google が勝手にやっている」と思う人もいるようだが、実際には他のブラウザも Positive を表明している。 Firefox: https://github.com/whatwg/html/issues/5407#issuecomment-606417807 Safari: https://github.com/whatwg/html/issues/5407#issuecomment-760574422 また、この合意が取れているため、既に仕様にもマージされている。 Add early return to JS dia
【Next.js】Google Analytics も YouTube iframe 埋め込みも公式ライブラリでいけるようになるぞ ちょっと株式会社 Advent Calendar 2023 12 月 24 日の記事です。 みなさんこんにちは、chot Inc. の Web エンジニアです。 Next.js で Google Analytics を導入するとき、どうしていますか？僕は毎度「nextjs google analytics」でググって「こうやるのか〜」と適当に作っています。本当にちゃんと計測されているのか疑心暗鬼です。 また、YouTube の iframe 埋め込みはどうでしょう。普通に iframe を埋め込むと PageSpeed Insights のスコアをごっそり奪っていきます。恐ろしいですね。 これらのサードパーティリソースを SPA である Next.js に導入
The Weight of Data: Rethinking Cloud-Native Systems for the Age of AI
DOMDOM トークス #1 mizdra (みずどら) です 株式会社はてな フロントエンドエキスパートやってます DOM をとりまく ブラウザのセキュリティ の話 DOM 成分ほとんど無いです 「iframe」がちょっと登場するくらい すみません... 皆さんご存知 ツールバーに機能を足したり Webページをカスタマイズしたり Webページにスクリプトを埋め込める機能 Web ページをカスタマイズしたい時によく使う code:content-script.js // ページ中のテキストを真っ赤に document.querySelectorAll('*') .forEach(el => el.style.color = 'red'); (ここまで3分) Chrome 開発チームが「Content Script の中で機密データを保持するな」と言ってる https://groups.go
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
GMOペパボのデータ基盤とデータ活用の現在地 / Current State of GMO Pepabo's Data Infrastructure and Data Utilization
“https://www.youtube.com/embed/16RxJwNwvfQ” Youtubeの動画のURLをWordPressの投稿画面に貼り付けると下のような感じで自動的に動画の埋め込みに変換してくれる これは、URLをこんな感じのhtmlに自動的に変換してくれているから <iframe loading=”lazy” class=”youtube-player” width=”1256″ height=”707″ src=”https://www.youtube.com/embed/16RxJwNwvfQ”></iframe> lazyload WordPressには標準機能でimgタグやiframeタグにloading=”lazy”を追加してくれるので、自分で書かなくてもOK loazyloadというのは動画がページの表示範囲に入ってくるまでは動画を読み込みしないための設定
JSer.info #551 - Yarn 3.0がリリースされました。 Yarn 3.0 🚀🤖 Performances, ESBuild, Better Patches, ... - DEV Community 👩💻👨💻 berry/CHANGELOG.md at master · yarnpkg/berry Node.js 10のサポート終了、.pnp.cjsにリネーム、@yarnpkg/pnpifyを3つのパッケージに分解などの変更を含んでいます。 @yarnpkg/sdks: Editor SDKs @yarnpkg/pnpify: PnPと互換性のないツールを実行するツール @yarnpkg/nm: node_modules linker また、 exportsフィールドのサポート、pnpmライクなハードリンクのサポート、シェル構文のサポート改善、 ESBuil
親サイトにifremeを入れたときにうまく高さが指定できなかったので 参考になるサイトを探しまくりました。 要件 iframe。よくあるyoutube、googlemapではなく、別のサイトのiframe（クロスドメインと言う）。 iframe側の高さが動的に変わる場合（例：記事のタイトルとか、日によって文字数がかわるやつ）高さを固定すると変にスクロールがついてしまい、見た目が悪い。 iframe使ってるってなるべく気づかれたくないときに活用できる サンプルコード <script> window.addEventListener('message', function(e) { var iframe = $("#parentframe"); var eventName = e.data[0]; var data = e.data[1]; switch(eventName) { case '
STORES EC本部のソフトウェアエンジニア @_morihirok です。 STORES ECではクリックジャッキングの脆弱性に対応するため、2021年の2月に他ドメインのサイトからのiframe要素などによる読み込みを制限するアップデートを行いました。 コンテンツセキュリティポリシー（以下CSP）を利用し安全にアップデートを行うことができましたので、今回はその取り組みについてご紹介させていただければと思います。 今回のアップデートに至るまでの背景 STORES ECのバックエンドはRuby on Railsで開発されています。Railsではデフォルトの設定で X-Frame-Options に SAMEORIGIN が指定されているため、「そもそも何もしなくてもクリックジャッキングの脆弱性には対応されているのでは？」と思われる方も多いと思います。 これには歴史的経緯がありまして、 S
あまり使う場面はないと思うのですが、触る機会があったので豆知識的な感じで残しておきたいと思います。通常、iframeは外部のリソースを読み込むため、直接iframeのDOM要素にアクセスできません。そこでjavascriptを使ってifr…
目次 iframeとは iframeをCSSで調整するには iframeの高さを自動調整する方法 まとめ iframeとは iframeとはWebページの中に別のWebページを埋め込む要素です。 <iframe src="sub.html" width="100px" height="100px"></iframe> srcで埋め込むページのアドレスを、widthで幅、heightで高さを指定します。その他のオプションなど、詳しくは以下の記事も参考にしてください MDN – <iframe>:インラインフレーム要素 [PR] Webデザインで副業する方法とは iframeをCSSで調整するには iframeで枠線を指定するframeborder、スクロールバーの表示有無を制御するscrollingは非推奨の属性になっています。枠線を制御するにはcssのborderプロパティを使用しましょう
はじめに iframe表示部分のクリックイベントを取得するという記事で、iframe内のイベントをiframeのcontentWindowに対しaddEventlistenerを登録して親ページで取得する方法を紹介しました。 この記事ではpostMessageを利用してiframeと親ページ間でやり取りする方法を紹介します。 この記事の対象者 ページに埋め込んだiframe要素から情報を取得したい ページに埋め込んだiframe要素と親ページ間で相互間のデータ送受信を行いたい ページにiframe埋め込みをする前提のページを作成して、イベント発生時に親ページに情報を渡したい iframeと親ページ間のデータ送受信 postMessageを利用した送受信の方法 子ページ データを親ページに送信する場合 window.parent.postMessage(message, targetOrig
はじめに こんにちは。HRBrainでオウンドメディアやランディングページの開発を担当している渡邉です。 SalesforceなどのMAツール製のiframeフォームをウェブサイトに埋め込むことがあります。 この記事では、ウェブサイトとiframeが異なるドメインの場合に、iframeからウェブサイトにデータを受け渡す方法について解説しています。 ▼ HRBrainサービスサイトにおけるiframeフォームの事例 クロスオリジンでのiframe操作の制限 iframeとウェブサイトが異なるドメインに存在している場合、ウェブサイトからiframe内の要素に直接アクセスすることができません。 ウェブサイトのURL： example.com iframeのURL： example.net これは、「同一オリジンポリシー」により、セキュリティの観点から、オリジンが異なるページへのアクセスは制限を受
当Webサイト内、Web制作&システム開発サイトの制作実績ページで表示しているWebページのサムネイル。当初はサムネイル自動生成ツールを使用していました。その後、半年前から各々の制作実績のページでレスポンシブ Web デザインによる PC、タブレット、スマホそれぞれの画面を表示するようにしたのですが、サムネイル自動生成ツールではPC画面を縮小して取得することしかできず。仕方なく、それぞれのスクリーンショットを撮って貼り付けてました。 しかし、新しいサイトを追加する度に3種類のスクリーンショットを撮る必要がありますし、時が経つとスクリーンショットが古くなるので定期的に撮り直す必要があり。そこで、少々強引ですが、Webページそのものの PC、タブレット、スマホそれぞれのサイズの画面を、インラインフレーム（ iframe タグ）で埋め込んで表示することにしました。 ただ、それぞれのサイズのWeb
今回は、WebサイトにYouTube動画をレスポンシブ対応して埋め込む方法をご紹介します。 なお、この方法はiframeをWebサイトに埋め込む場合に利用可能なので、Vimeoやその他のサービスでも同様に扱うことができます。 YouTube動画の埋め込みコードの取得方法 YouTubeの埋め込みコードは、動画再生画面の「共有」から「埋め込む」を選択すると、下記のように埋め込み用のコードを表示することができます。 生成された埋め込みコードは、ライブラリやプラグインを入れなくても、HTMLに貼り付けるだけでWebサイト上に簡単にYouTube動画を表示することが可能です。 YouTube動画埋め込みの表示例 YouTubeの埋め込みコードをそのまま貼り付けると、上記のように画面からはみ出してしまったり、width:100%を指定すると黒い空白が生まれてしまったりします。 表示幅が固定されている
こんにちは、daimaです。 本日は異なるクロスドメインでiframeを埋め込んで なおかつ画面を拡縮しても iframeの高さが自動で調整されるように レスポンシブ対応させる方法をご紹介します。 なぜ、この記事を書いたかというと 私が仕事で作ったカラーミーのECサイトに 別ドメインで制作したWordpressのブログサイトの 新着一覧を載せるという仕様があったのですが CORS(オリジン間リソース共有)に引っかかったり iframeだとレスポンシブ時に高さが自動で変わらなかったりで 思った以上に時間を取られてしまったので この記事を書くことで少しでも 同じ問題で悩む方を減らせればと思ったためです。 それではどうぞ。 コード <iframe id="iframe_indexBlog" src="https://◯◯◯.com/newslist" frameborder="0" style=
为什么不用 iframe，这几乎是所有微前端方案第一个...
仕事での話ですが、とある画面からロードしたiframeと呼び出し元との間で、イベントをやり取りしたいケースがありました。 これがなかなかに上手く行かなかったので、最終的にどう解決したのか共有します。 イベントのやり取りが出来なかった理由 クロスドメインの制約に引っかかったからです。 原因はiframeの呼び出し元画面と、iframe側のドメインが異なることにありました。 サブドメイン（aa.example.comとbb.example.com）間だったのですが、それでもダメでした。 stackoverflow.com Window.postMessage() 最終的に行き着いたのが、window.postMessage() です。 MDNの解説を読むと、オリジン間通信を可能にすると記されています。 window.postMessage() は、 Window オブジェクト間で安全にオリジン
アソビューの井上です。 最近とあるSaaSと連携する機能を実装する際に、iframeとpostMessageを活用したのでその内容について個人的な備忘として、また社内外への実装共有も兼ねてまとめてみたいと思います。 前提 今回はアソビュー！のWeb（asoview.com）開発において、あるSaaSと連携する機能を実装する際、FE↔BE↔SaaSもしくはFE↔SaaS間で情報の受け渡しを行う必要がありました。 今回の連携実装では、下記の図のようにフロントエンドからSDKを活用して初期化処理や関数の実行、必要なパラメータを付与した特定パスへのアクセス、コールバックによるリダイレクトなどを行う必要がありました。 単純化すると下記のようなフローになります。 Saas連携フロー 課題 こちらのフローはSaaSの公式のフローではあるのですが、このまま実装に移すといくつかの課題があります。 SaaSが
記事内にA8.netのスポンサーリンクを張っています。 内容は自ら確かめて客観性のある記事を書くように心がけております。 GoogleマップやVimeo、YouTube動画のような外部サービスを埋め込みたいことがよくあります。 昨今はレスポンシブ対応でサイトを作っていることが多いので、ブラウザ横幅に応じて、埋め込み部分も可変する必要があります。 しかしながら、埋め込みコードをそのままコピペするとレスポンシブしないことがよくあります。 今回は、iframeをレスポンシブ対応する方法について、コーディングを解説します。 HTML・CSS初心者の方にはちょっと難しい内容です。 追記：ページ最下段に最近のコードを書きました。aspect-ratioでかんたんになっています。 レスポンシブ対応の基礎知識 レスポンシブ対応の基礎知識をインプットしたい方は、下記記事の「レスポンシブについて」を参照してく
こんにちは。 エンジニアの松村です。 先日、久しぶりに競馬場へ行ってきました。 この秋から一定数の指定席のみが開放され、その席数分入場できるといった形で営業が再開されました。 大勢のファンで賑わっていた、コロナ以前の競馬場の姿とは大きく異なっていましたが、それでも目の前で競走馬が駈ける姿を見れたことが嬉しかったです。 来場されてたい他の方々も、久々の競馬を静かに楽しんでいるようでした。 さて、今回はGoogleMapについてです。 2018年にGoogle Maps APIの仕様が大きく変わり（Google Maps Platform）、サイト上のGoogleMapカスタマイズにはAPIキーが必須となりました。 仕様変更に伴い、iframeに差し替えた方も多いのではないでしょうか。 iframeのGoogleマップは基本的にカスタマイズ出来ないのですが、実はcssで色合いを変更することが可
GA4では外部コンテンツへのリンククリックは計測されますが、HTMLで別のコンテンツを埋め込むiframeタグは対象外です．本記事では，iframeTracker jQueryプラグインとGoogleタグマネージャーを利用した具体的な設定手順を，図解を交えながら丁寧に説明します． 1．はじめにiframe（アイフレーム、インラインフレーム）は，HTMLで記述されたWebページ内に別のWebページやコンテンツを埋め込んで表示するためのタグで， <iframe></iframe>で挟まれたタグです． 例えば，YouTubeの動画を自分のサイトのページ内に組み込んで表示したとき使われたりします．YouTubeで該当する動画ページで，動画の下にある「共有」ボタン（図1の赤枠内参照）をクリックすると，図1のような各種媒体への共有や動画のURLを表示するダイアログボックスが表示されます．ここで「埋め込
iframeで埋め込んだYouTube動画の再生・停止などを、自サイトにはIFrame Player APIのファイルを組み込まずにJavaScriptで動的に操作する方法のメモ。 iframeで取得表示されたYouTubeのwindowオブジェクトを取得し、postMessage()メソッドでAPIのコマンドを送信して操作する。 埋め込むiframeにJavaScript APIの使用を許可するパラメーターを付与。 iframe内で表示している外部サイト(YouTube)のwindowオブジェクトを取得。 取得したwindowオブジェクトにpostMessageメソッドでAPIのコマンドを送信。 HTMLに埋め込みコードとコントローラー要素を記述 iframeの埋め込みコードにAPIの使用を許可するパラメーター「enablejsapi=1」を付与する。このパラメーターを付与しない場合、デ
ページに他ページを埋め込むiframe。 よくYoutubeの動画埋め込みなどに使われるね。 iframeで別ページを埋め込む際の情報のやり取りについて一通り調べたのでまとめてみる。
こんにちは、技術推進部の谷黒と申します。 スパイダープラスでは日々の業務での出来事や向き合った技術的課題を定期的にブログとして発信しております。 さて、今回はiframeをテーマにします。こちらは外部サイトなどをHTML内に埋め込みたい時などに使うことが一般的です。 ご存じの方もいらっしゃると思いますが、iframeはフレーム内の値をフレームの外の世界に渡すことができます。 今回、私たちはヘッドレスなAPIを使わずiframeをデータ受け渡し専用に用いた手法を採用し、機能開発を行いました。その方法を紹介いたします。 背景 私が開発を担当しているBIM（*Building Information Modelingの略で図面上により詳しい属性情報などがついたモデリングのこと）のサービスは、基本機能を提供するSPIDERPLUSとはマイクロサービス的な関係にあり、SPIDERPLUSとは独立した
Developers using COEP can now embed third party iframes that do not use COEP themselves. Iframe credentialless is enabled by default from Chrome version 110. It solves the most common complaint developers working with Cross-Origin-Embedder-Policy (COEP) have: embedding third-party iframes that do not set COEP. Why we need COEP Some web APIs increase the risk of side-channel attacks such as Spectre
JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。
Mission データサイエンス教育総合研究所は、AI・機械学習の教育研究に特化したシンクタンクです。AI・機械学習を中心に、テクノロジーに関する記事を多く掲載しています。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く