カテゴリー : 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

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

カンタンに画面共有できるサービス join.me がペアプロやMTGにとっても便利

join.me というサクッと画面共有できるサービスがめっちゃ便利で、メルカリのエンジニアさんたちがペアプログラミングに使っているという話を聞いて 本日 MTG で使ってみました。

join-me

本日の MTG は Backlog と Github issue を眺めながら来週の開発タスクの工数算出するという内容でした。「この機能は開発工数 3 時間で、レビューや QA に 2 時間ぐらい掛かるかな?」というような内容を話しながら、手元で issue に comment したり Backlog に工数を入力していました。この手元の作業を大きめの外部ディスプレイに出力せずに、画面共有することができるのはとても便利でした。

使い方については、

とかに詳しく書かれていますので、そちらを参考にしてください。

とても簡単にスクリーンキャストができてとても便利でした。動作も重たくなく、スムーズに使えるのでオススメです。

スクリーンショットの撮り方を解説している take-a-screenshot.org がカスタマーサポートに便利!

スクリーンショットの撮り方をデバイスごとに丁寧に解説している take-a-screenshot.org がカスタマーサポートに便利そうなのでご紹介します。

take-a-screenshot-org

対応デバイス一覧

  • Mac
  • Windows
  • iOS
  • Android
  • KDE
  • GNOME
  • Websites

スクリーンショットの撮り方すら分からないユーザのカスタマーサポート対応をスムーズにこなすために、とても重宝しているサービスです。

カスタマーサポートからの不具合報告の対応に Support Details がめっちゃ使える

カスタマーサポートからの自社サービスについての不具合報告の対応に Support Details というサービスがめっちゃ使えます。

ここにアクセスしてもらうと、PC環境(OS、ブラウザ、IPアドレス、JavaScriptやCookieの設定など)が分かります。

http://supportdetails.com/

supportdetails

ページ上部にあるフォームから直接メール送信することもできるので、OS やブラウザの種類やバージョンを調べ方がわからないユーザーのサポートに役立つこと間違いなしです。

HipChat の面白い絵文字 emoticons(エモーティコン)のまとめサイト

HipChat の emoticons(エモーティコン)という、面白い絵文字がまとめてあるサイトがあったのでご紹介します。

HipChat emoticons

HipChat-emoticons

しかし、使いドコロが謎なエモーティコンがたくさんありますね・・・

色んなフレームワークのベンチマークを確認できる「TechEmpower Framework Benchmarks」

色んなフレームワークのベンチマークを確認できる「TechEmpower Framework Benchmarks」が便利だったのでメモ。

TechEmpower Framework Benchmarks

例えば、下記のように PHP のフレームワークに絞って、ベンチマークを確認できます。

techempower-benchmarks-php

[引用元]:PHP Framework Round 6 results – TechEmpower Framework Benchmarks