カテゴリー : WebService

Refused to display https://www.youtube.com/watch?v=xxx in a frame because it set X-Frame-Options to SAMEORIGIN. の解決方法

YouTube の動画ページの URL をそのまま iframe タグの src に指定すると、

Refused to display ‘https://www.youtube.com/watch?v=xxx’ in a frame because it set ‘X-Frame-Options’ to ‘SAMEORIGIN’.

というエラーが発生してしまいます。

Refused to display 'https://www.youtube.com/watch?v=xxx' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.

間違った iframe src

<iframe src="https://www.youtube.com/watch?v=xxx"></iframe>

YouTube の [共有] – [埋め込みコード] に記載されている https://www.youtube.com/embed/xxx という形式の埋め込み用 URL を使えばエラーが発生しなくなります。

YouTube 埋め込みコード

正しい iframe src

<iframe src="https://www.youtube.com/embed/xxx"></iframe>

以上です。

プライバシーツール Ghostery を使ってるユーザから外部トラッキングサービスを使いすぎというクレームがきた

Ghostery を使っているユーザから「トラッキングサービスを何個も埋め込みすぎだから減らしてほしい」というお問い合せがありました。

お使いのブラウザに対応した拡張機能をインストールするとトラッキングサービスの一覧がページの右下に表示されます。

当ブログだと下記の画像のような感じでした。

ghostery

Web サービス開発をする上でこういう視点も持っておきたいと改めて感じました。


参考情報

[Tumblr] 独自ドメインの設定方法

Tumblr でキャンペーンサイトを制作するために、独自ドメインを設定したのですが、設定ページが分かりにくかったので備忘録として記事にしました。

基本的に Tumblr 公式サイトを読めば必要な内容はそろっています。ただ、スクリーンショットが無いと分かりにくいので2つ目のブログ記事がその点を補ってくれています。

独自ドメインの設定は数分で終わると思いきや、Tumblr 側のドメインのテストに通らずエラーメッセージが表示されました。

Tumblr-domain-test

1日経ってもテストが通らなかったので Tumblr ヘルプページ から問い合わせて、もう1日後に再び試してみると Tumblr のダッシュボードから独自ドメインを無事に設定することができました。

nslookup コマンドで確認すると canonical name = domains.tumblr.com. を確認できるので、Tumblr のドメインテストの処理がキャッシュか何かしていたのでしょうか。

管理画面は特定のブラウザだけサポートして開発コストを削減しよう

Web サービスの開発にマルチブラウザ対応は付きものですが、管理画面まで対応する必要はないと思ってます。

ユーザに提供する機能は Chrome/Firefox/Safari/IE の最新版ぐらいはサポートして、社内向けの管理機能は Chrome だけサポートするなどして開発コストを削減するのがいいんじゃないでしょうか。

SNSのシェア用URLをカンタンに生成できる social-share-urls

SNS のシェア用 URL をカンタンに生成できる social-share-urls が便利だったのでご紹介します。

シェア用の URL を生成する Web サイトがあるわけではなく、github 上に公開されている repository を clone して使います。

$ git clone git@github.com:bradvin/social-share-urls.git
Cloning into 'social-share-urls'...
remote: Counting objects: 59, done.
remote: Total 59 (delta 0), reused 0 (delta 0), pack-reused 59
Receiving objects: 100% (59/59), 19.70 KiB | 0 bytes/s, done.
Resolving deltas: 100% (23/23), done.
Checking connectivity... done
 
$ open social-share-urls/generator.htm

プロジェクト直下にある generator.htm を開くと下記のような画面が表示されます。

必要な情報を埋めて generate ボタンをクリックすると各 SNS のシェア用 URL が生成されます。

Social-Link-Generator

各サービス公式の情報ではないので動かなくなったりするかもしれませんが、一括生成してくれるのは便利なので使っていきたいと思います。