端くれプログラマの備忘録 – ページ 99 – 最近はウェブ系アプリ中心、あとWindowsアプリちょっと

[Safari] html5/videoエレメントのイベントを調べる

2014年12月22日2015年8月21日 @84kure

html5/videoエレメントベースの動画プレーヤーがSafariだけうまく動かないとの相談あり。

JavaScriptで書かれたオープンソースの動画プレーヤーで、動画再生機能はvideoエレメントに委ねて、ロード中インジケータの表示やコントロールパネルの表示と制御、プレイリスト機能の追加などをJavaScriptで行っているみたい。JavaScript側ではブラウザから投げられたイベントを受けて処理を行っているので、Safariだけ挙動がおかしいということは他ブラウザとイベントの内容が違うのではないかと予想。

html/videoのイベントをトレースする

ネットを検索したら参考ページが見つかったので以下にリンク。

HTML5のvideo、発生するイベントの順序がブラウザによって違いすぎる – IT-Walker on hatena
http://d.hatena.ne.jp/Syunpei/20090714/1247571541

HMTL5 test room (勉強用：HTML 5の動作テスト)
http://www.openspc2.org/HTML5/test_room/video/

HTML5 videoエレメントのメディアイベントの仕様はW3Cで見つかる。

4.7 Embedded content — HTML5
http://www.w3.org/TR/html5/embedded-content-0.html#mediaevents

前者ページのJavaScriptコードをほぼそのまま頂いて、自分の環境でも試してみようと思う。

<head>
<script type="text/javascript">
function init() {
 var video = document.getElementById("video1");
 [ "loadstart", "progress", "suspend", "load", "abort",
   "error", "emptied", "stalled", "play", "pause",
   "loadedmetadata", "loadeddata", "waiting", "playing", "canplay",
   "canplaythrough", "seeking", "seeked", "timeupdate", "ended",
   "ratechange", "durationchange", "volumechange"
 ].forEach(function(eventName) {
   video.addEventListener(eventName, function() {
     console.log(eventName);
   }, true);
 });
}
</script>
</head>
<body onload="init()">
<video id="video1" controls>
<source src="sample_movie.mp4" type="video/mp4">
</video>
</body>

<head>

function init() {

var video = document.getElementById("video1");

[ "loadstart", "progress", "suspend", "load", "abort",

"error", "emptied", "stalled", "play", "pause",

"loadedmetadata", "loadeddata", "waiting", "playing", "canplay",

"canplaythrough", "seeking", "seeked", "timeupdate", "ended",

"ratechange", "durationchange", "volumechange"

].forEach(function(eventName) {

video.addEventListener(eventName, function() {

console.log(eventName);

}, true);

});

}

</script>

</head>

</video>

</body>

[Safari] パスワード保護されたディレクトリに置いた動画を再生しようとすると再び認証を求められる件

2014年12月21日2015年8月21日 @84kure

Safari限定で面倒な問題が発覚。たぶんWindows版とMac版の両方のSafariで起こる。自分で確かめたのはWindows版だけど、Mac持ちのスタッフに試してもらったら同じ挙動だと言われたので。

症状

サーバーには以下のようにファイルを配置。

protected (BASIC認証必要なディレクトリ)
+- test.html
+- sample_movie.mp4

protected (BASIC認証必要なディレクトリ)

+- test.html

+- sample_movie.mp4

test.htmlには以下のように動画を埋め込む。

<video id="video1" controls>
 <source src="sample_movie.mp4" type="video/mp4">
</video>

</video>

Safariからtest.htmlにアクセスすると、BASIC認証を求められる。これは期待通りの挙動。

認証を通過してtest.htmlを表示すると、再びBASIC認証を求められる。これは期待外。ダイアログボックスの体裁は先ほどとは違って、Windows組み込みの認証ダイアログボックス。

どうして2度の認証を求められるのか？

ウェブブラウザのアクセスログ(XAMPP環境のApache)を見たら一目瞭然。

::1 - - [15/Dec/2014:09:46:56 -0800] "GET /test.html HTTP/1.1" 200 7782 "-" "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/534.57.2 (KHTML, like Gecko) Version/5.1.7 Safari/534.57.2"
::1 - - [15/Dec/2014:09:46:56 -0800] "GET /sample_movie.mp4 HTTP/1.1" 200 463521618 "-" "QuickTime/7.7.6 (qtver=7.7.6;os=Windows NT 6.1Service Pack 1)"

::1 - - [15/Dec/2014:09:46:56 -0800] "GET /test.html HTTP/1.1" 200 7782 "-" "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/534.57.2 (KHTML, like Gecko) Version/5.1.7 Safari/534.57.2"

::1 - - [15/Dec/2014:09:46:56 -0800] "GET /sample_movie.mp4 HTTP/1.1" 200 463521618 "-" "QuickTime/7.7.6 (qtver=7.7.6;os=Windows NT 6.1Service Pack 1)"

おおよそのシナリオは以下の通りで正解だと思う。

Safariはtest.htmlをロードしたら埋め込まれている動画の再生をキックするのだけど、動画再生は外部アプリ(ヘルパーアプリ)であるQuickTimeによって行われる。SafariとQuickTimeは完全に独立したアプリなので、SafariのBasic認証セッションはQuickTimeには引き継がれない。したがって、QuickTimeが動画にアクセスするときには再び認証が求められる。

2度目の認証をスキップするにはどうするか？

２度目の認証をしないようにする仕組みをサーバー側に仕込む必要があるだろうな。独自の認証処理を備えた動画データ送出のスクリプトを作成して、それをパスワード保護されないディレクトリに配置して、認証と動画送出の処理を自前で行うとか。でも、Safariだけのためにそこまでしたくないというのが正直な気持ち。

[Safari] MP4動画再生の挙動を調べる

2014年12月20日2015年8月21日 @84kure

H.264形式のMP4動画ファイルがSafariで再生されないという報告を受けて調べてみる。

テスタはMac版Safariで試しているというが、僕のデスクにはWindowsマシンしか無い。テスタに試してもらったところ、Windows版Safariでも同じ症状だというので、とりあえずWindows版Safariで挙動を確かめてみる。

Windows版Safariをインストール

まずはWindows版Safariをダウンロードしてインストール。「投稿日: 2012/05/09」とあるけど、Windows版はこれが最新みたい。

Windows 用 Safari 5.1.7
http://support.apple.com/kb/dl1531?viewlocale=ja_JP

MP4動画ファイルは再生されず

動画再生にはhtml5のvideoタグを使うが、

<video id="video1" controls>
 <source src="sample_video.mp4">
</video>

</video>

画面真っ白で何も表示されず。

QuickTimeが必須らしい

Safariでの動画再生にはQuickTimeが必須らしいのでインストール。

Apple – QuickTime – ダウンロード
http://www.apple.com/jp/quicktime/download/
QuickTime 7.7.6（Windows XP, Windows Vista or Windows 7)

videoタグのtypeオプションが必要らしい

QuickTimeインストール後に先ほどのhtmlを再度試す。

<video id="video1" controls>
 <source src="sample_video.mp4">
</video>

</video>

今度はコントローラは表示されるが、やはり動画は表示されない。

試しにtypeオプションでquicktime動画と指定したら

<video id="video1" controls>
 <source src="sample_video.mp4" type="video/quicktime">
</video>

</video>

今度は問題なく表示された。Safariはちょっと面倒そう。

[Safari] JavaScriptコンソールを表示するには

2014年12月19日 @84kure

ブラウザ依存のJavaScriptの挙動を調べるために、SafariでJavaScriptコンソールを表示しようとしたのだけど、メニューを探してもそれらしいものが無い。SafariにはJavaScriptコントロールが無いのか？と思ったが、探したら判りにくい場所にあったのでメモ。

“開発”メニューを表示する

[編集]-[設定]メニューを選択して、ダイアログボックスの[詳細]ペインを表示する。

[メニューバーに”開発”メニューを表示]をチェックしてダイアログボックスを閉じる。

すると[開発]メニューが表示されるようになる。

[エラーコンソールを表示]メニューを選択すればJavaScriptコンソールが表示される。

[Windows] Tera TermでSSH鍵ペアを生成する

2014年12月18日2021年9月4日 @84kure

WindowsにはSSH鍵ペアを生成するコマンドが用意されていないので、何かアプリを使う必要がある。以前はPuTTY付属のPuTTYgenで作ったけど、Tera Termでも作れるらしい。

Tera TermにおけるSSH鍵の生成方法

Tera Termを起動して[Setup]-[SSH KeyGenerator…]メニューを選択すると、[TTSSH: Key Generator]ダイアログボックスが表示される。

[Generate]をクリックしてから、キーパスフレーズを入力。そして、[Save public key]と[Save private key]をそれぞれクリックして、鍵データをファイルに保存すればよい。

[Unix] システム情報を調べるには

2014年12月17日2015年8月21日 @84kure

CPUのタイプを表示する

$ uname -m
X86_64

1 2	$ uname -m X86_64

PCのホスト名を表示する

$ uname -n
web

1 2	$ uname -n web

カーネルのバージョンを表示する

$ uname -r
3.2.0-4-amd64

1 2	$ uname -r 3.2.0-4-amd64

OS名を表示する

$ uname -s
Linux

1 2	$ uname -s Linux

OSのリリース日を表示する

$ uname -v
#1 SMP Debian 3.2.51-1

1 2	$ uname -v #1 SMP Debian 3.2.51-1

全ての情報を表示する

$ uname -a
Linux www01 3.2.0-4-amd64 #1 SMP Debian 3.2.51-1 x86_64 GNU/Linux

1 2	$ uname -a Linux www01 3.2.0-4-amd64 #1 SMP Debian 3.2.51-1 x86_64 GNU/Linux

Debianのバージョンを表示する

$ cat /etc/debian_version
7.3

1 2	$ cat /etc/debian_version 7.3

Ubuntuのバージョンを表示する

$ cat /etc/issue
Ubuntu 14.04.1 LTS n l
$ cat /etc/lsb-release
DISTRIB_ID=Ubuntu
DISTRIB_RELEASE=14.04
DISTRIB_CODENAME=trusty
DISTRIB_DESCRIPTION="Ubuntu 14.04.1 LTS"

$ cat /etc/issue

Ubuntu 14.04.1 LTS n l

$ cat /etc/lsb-release

DISTRIB_ID=Ubuntu

DISTRIB_RELEASE=14.04

DISTRIB_CODENAME=trusty

DISTRIB_DESCRIPTION="Ubuntu 14.04.1 LTS"

参考サイト

カーネルのバージョンなどのシステム情報を調べるには
http://www.atmarkit.co.jp/flinux/rensai/linuxtips/068infokernelver.html

[PHP] Webサーバーのユーザ名を取得するには

2014年12月16日2015年8月21日 @84kure

以下のようなスクリプトを書いてブラウザからアクセスしたらいい。

<?php echo `whoami`; ?>

1	<?php echo `whoami`; ?>

結果例

apache

apache

[VirtualBox] ビューモードの切り替え方法

2014年12月15日 @84kure

VirtualBoxのビューモードの切り替えは[ビュー]メニューから行う。

あるいは下表に示すショートカットキーを使って。

モード	ショートカットキー
フルスクリーンモード	Host + F
シームレスモード	Host + L
スケールモード	Host + C
ゲストOSの画面を自動リサイズ	Host + G
ウィンドウのサイズを調整	Host + A

[Host]は、[Oracle VM VirtualBox マネージャ]ウィンドウの[ファイル]-[環境設定…]メニューの[入力]ペインで設定するキーで、デフォルトは右コントロールキー。

[VirtualBox] 共有フォルダを設定する

2014年12月14日 @84kure

VirtualBoxでは、ホストとゲストの間で共有フォルダを設定できる。共有フォルダは、ホストとゲストの間で手軽にファイルを受け渡しするのに役に立つ。

共有フォルダの設定は、[Oracle VM VirtualBox マネージャ]ウィンドウの[設定]アイコンをクリックして行うのだが、初めて共有フォルダを設定しようとしたら以下のメッセージが表示された。

これは、共有フォルダを有効にするためには[VirtualBox Guest Additions]と呼ばれる追加ソフトが必要だと言っている、

VirtualBox Gurst Additions のインストール方法

以下に僕が行った設定手順を覚え書きしておく。ちなみに、ゲストはWindows 7。

1. ゲストOSが稼動している状態で、[Devices]-[Insert Guest Additions CD Image…]メニューを選択する。

2. エクスプローラを起動してCDドライブを開く。

すると、CDドライブにメディアが入っているように見えるはず。

3. [VBoxWindowsAdditions]をダブルクリックする。

すると、[Oracle VM VirtualBox Guest Additions 4.3.18]のインストーラが実行される。

4. デフォルト設定でインストールを完了し、リブートを促されたらリブートする。

これで共有フォルダの利用が可能になるので、最初に戻って共有フォルダを設定すればよい。

参考サイト

VirtualBox 共有フォルダー設定 – ホストとゲスト間でフォルダーを共有 – PC設定のカルマ
http://pc-karuma.net/virtualbox-folder-share/

VirtualBoxの使い方 – Guest Additions のインストール – PC設定のカルマ
http://pc-karuma.net/virtualbox-install-guest-additions/

[Unix] Windows版のnslookupで名前解決する

2014年12月13日2021年9月4日 @84kure

nslookupはネームサーバーに名前解決の問い合わせを行うコマンド。自分はネームサーバーの設定を行っているわけではないので、このコマンドを頻繁に使うわけではないけど、サイトに接続できないなどのトラブル発生時にはIPアドレスを引いたりするのに使うことはある。

Unix版と同等の機能を備えたnslookupコマンドがWindowsにも標準で含まれている。

以下簡単にメモ。

コマンドラインから起動

c:Temp> nslookup
Default Server: xxx.example.com
Address: xxx.xxx.xxx.xxx
>

c:Temp> nslookup

Default Server: xxx.example.com

Address: xxx.xxx.xxx.xxx

正引き

> yahoo.com
Server: xxx.example.com
Address: xxx.xxx.xxx.xxx

Non-authoritative answer:
Name: yahoo.com
Addresses: 206.190.36.45
           98.139.183.24
           98.138.253.109

> yahoo.com

Server: xxx.example.com

Address: xxx.xxx.xxx.xxx

Non-authoritative answer:

Name: yahoo.com

Addresses: 206.190.36.45

98.139.183.24

98.138.253.109

逆引き

> 206.190.36.45
Server: xxx.example.com
Address: xxx.xxx.xxx.xxx

Name: ir1.fp.vip.gp1.yahoo.com
Address: 206.190.36.45

> 206.190.36.45

Server: xxx.example.com

Address: xxx.xxx.xxx.xxx

Name: ir1.fp.vip.gp1.yahoo.com

Address: 206.190.36.45

ネームサーバー変更

> server 8.8.8.8
Default Server: google-public-dns.a.google.com
Address: 8.8.8.8

> server 8.8.8.8

Default Server: google-public-dns.a.google.com

Address: 8.8.8.8

終了してコマンドラインへ戻る

> exit
C:Temp>

1 2	> exit C:Temp>

Windows TIPS：nslookupの基本的な使い方（イントラネット編） – ＠IT
http://www.atmarkit.co.jp/ait/articles/0307/19/news003.html