m2O

2014/01/21 (火)

wnp 1.53 における各ブラウザへの対応

|  wnp 1.53 における各ブラウザへの対応 - m2O を含むブックマーク

昨日 wnp 1.53 を公開しました。前回のバージョンからもう一年以上たっているわけですが、改めてサポートしているブラウザの最新バージョンで動かしてみるとなかなか思った通りに動いてくれない、それどころかフリーズして全く再生できないものもありました。

このエントリではそのモダンブラウザ対応について、diff を眺めながらお話ししたいと思います。
特に指定しなければ OSWindows8.1、MacOS X Mavericks です。


「@grant none」を付けました

diff を見て最初に目につくのが @grant ですね。Firefox は起動するのも久しぶりで全然知らなかったのですが、Greasemonkey に wnp を入れてみたら「@grantをつけろよデコ助野郎」とか言われたので付けました。wnp では GM_XX 系のメソッドは使用していないので none でだいじょぶです。

ストレージに使う swf のホストが github.com から github.io に

ああ、ここはモダンブラウザならストレージは localStorage が使われるので関係ないですね。wnp ではプレイヤー設定しか入れてないので影響も少ないと思います。

svg 内のブラウザ判定を削除

現在は鏡面効果も使ってないし、Mac Opera(12以降)で特に問題なかったので削除しました。

前に使っていた鏡面効果の svg どこかにないかなと探したら jottit に残ってました。
って試してみたら ie 以外は左のサムネイル画像部分が表示されませんね。(ie は文字のアニメーションができてないですが。)ローカルに svg を保存したら表示されたので、img 要素に svg を入れてるのがいけないのかもしれません。できなくしてるのかな?

(追記) iframe なら大丈夫みたい。
http://jsrun.it/miya2000/u5pg

Win Chrome33 の IME 問題

これはけっこう大きな問題で、Windows Chrome 33IME がオンの状態で wnp ウィンドウを開くと、キー入力を受け付けない状態になっていました。

最初は何が起こっているのかわからなかったのですが、「A」を何度か押しているとこんな状態に。

f:id:miya2000:20140121210040p:image

といわけで原因は、ポップアップウィンドウを開いた直後に入力ボックス等にフォーカスがあるわけでもないのになぜか IME が有効になっていて、keydown イベントがずっと keyCode=229 になっていたからでした。

こちらで確認できるかと思います。IME を有効にした状態で試してみてください。
http://jsfiddle.net/hRM3G/12/

対策として wnp ウィンドウを開いた直後の focus イベントで、一時的に input 要素を作って focus を与えてすぐに削除するようにしました。
これでおおむねうまくいっているようですが、稀に失敗していたように思います。直るといいですね。

ブラウザ判定に OPR(バージョン15以降の Opera) を追加

Opera とは別物ですからー。

DOM3 KeyboardEvent.repeat を諦める

キーが押しっぱなしになっていることの判定を、以前は KeyboardEvent.repeat プロパティが存在したらそれを使い、なければ JavaScript 側で判定、という処理で行っていました。
ところがこれが OPR (Next/Dev) で全然利かなかったんですね。

で、http://www.javascripter.net/faq/keyboardeventproperties.htm でキーを押しっぱなしにしてみると、どうも repeat というプロパティは存在するけど値はずっと false になってまして。

でー、他のブラウザはどうなんだって試してみたら、ちゃんと実装されてるブラウザが全然無くてびっくりしました。(WinChrome 33 もずっと false。)
も少し調べてみたらFirefox で実装したよっていうお話があって、確かに Firefox Nightly では実装されていました。

とはいえ repeat プロパティが存在してしかもあてにならない値を返すブラウザが既に存在してしまっているのでこれはもう repeat プロパティは使用できないことを意味します。
なので常に JavaScript 側で判定するように修正しました。今後 KeyboardEvent.repeat がきちんと実装されようとずっと repeat プロパティは使われないことになります。なんとも救いのない話です。

iframe.setAttribute('scrolling', 'yes');

ちょっと地味な話なんですが、以前は iframe 作ったら scrolling って動的に変えられなかったように記憶しています。つまりスクロールバーありならありのまま、無しなら無しのまま。それがどのブラウザでもできるようになっていました。wnp の左上のボタンで表示を切り替えるときに使用しています。

ニコニコページ内の !important 地獄

モダンブラウザ対応とは関係がないですが、ちょっとこれは辛かった。

wnp では動画ページにはできるだけ手を入れずに、スタイルも element.style で設定するようにしていました。
なんですが、

body.full_with_browser #external_nicoplayer { width:100%!important; height:100%!important; }

なんてやられるともう element.style では太刀打ちできないわけで、body から full_with_browser クラスを削除したり、style 要素を突っ込んで ON/OFF したりしてます。

window.open() で開くのはタブ? ポップアップ?

タブの挙動なんてどこにも標準化されていないと思うんで、どんな動きになってもしょうがないんですが、だいたいのブラウザは open の第3引数に width とかあったらポップアップで開いてそうでなければタブで開くんじゃないかと思います。

しかしながら、開く元のウィンドウがポップアップだとしたらどうでしょうか。

wnp では動画再生時にログインしていなければログインページを開くようにしています。私としてはそんなので新しい window が開くのはイヤなのでタブに表示したい。なので第3引数を与えずに open していて、これまでは実際にタブに表示されていたのですが、ここでもやはり Chrome と OPR です。別ウィンドウで表示されてしまいました。

で、なんとかタブで表示できないの~って検索すると「A 要素作って Ctrl+Click すればいいよ」って書いてありました。

それでやってみましたが、OPR Release 18 と OPR Next 19 は OK で Chrome 33 と OPR Dev 20 ではやはりポップアップになってしまいました。
まあこの辺りは extension にすれば解決しそうなんですが、簡単にできないのは残念です。

あと OPR Dev 20 はポップアップブロックがどうしても解除できませんでした。何度許可してもブロックされてしまいます。

f:id:miya2000:20140121225548p:image:w400

Mac Safarijavascript:void(0) で開いたウィンドウに iframe でニコニコ動画を開くと元ウィンドウごとフリーズする

他のブラウザでだいたい動作確認が終わり、最後に Safari で動作確認をしようとしたらいつまでも再生が始まらず呼び出しページごとフリーズして、これはなかなかの絶望感でした。

bookmarklet でも再現できたので、興味のある方はお試しください。ニコニコ動画にログインした状態で実行してください。(試すのに Ninjakit は不要です。)

javascript:(function(w,d,f){d=w.document,f=d.body.appendChild(d.createElement('iframe'));f.src='http://www.nicovideo.jp/watch/sm9'})(open('javascript:void(0)','','width=800,height=800'))

この問題はもうどうしようもないだろうと思ってほぼ諦めていたのですが、気まぐれにアドレスを「"javascript:void(0)"」から「""」に変えたら何事もなく動いちゃったので Mac Safari ではそのように修正しています。

「なんで window.open("javascript:void(0)") なの?」というところですが、wnp ではすでに開いている wnp ウィンドウに対して動画を追加するときに window.open の第2引数に同じ名前を指定することで wnp ウィンドウへの参照を取得しています。この「すでに開いている wnp ウィンドウ」に対して何もしないようにアドレスを「"javascript:void(0)"」としているわけです。
なのですが、アドレスを「""」にしても特に問題なかったようです。(これが例えば「"about:blank"」だと、再生中の動画が消えてしまいます。)



以上が今回の修正内容になります。
以下は現在把握している、気になる動作について。



Mac Opera Next のポップアップウィンドウのプレゼンテーションモードが残念

Mac では面倒なので Opera12Next しか確認していないのですが、Next のプレゼンテーションモードが非常に残念です。

通常のタブページはプレゼンテーションモードにすると

f:id:miya2000:20140122000946p:image

以下のようにきれいに全画面表示になるのですが、

f:id:miya2000:20140122000947p:image

これが wnp のようなポップアップウィンドウだと

f:id:miya2000:20140122000948p:image

なんでしょうね、このグレーと白の横棒は。とても残念です。

Chrome, OPR で別々のタブから wnp を起動するとそれぞれで wnp ウィンドウが開いてしまう

Opera 10.10Firefox では別々のタブから wnp の open ボタンを押しても一つしか wnp ウィンドウは開きませんが、Chrome や OPR では open の第2引数に同じ名前を指定していても別のウィンドウが立ち上がってしまいます。
wnp の動作を考えるとちょっとこれは使い物にならない感じです。

タブごとに別プロセスで動いているから難しいのか、また意図的なものなのか、よくわかりません。
extension 化すれば何とかなるんだろーなーとは思ってます。(やらないかなあ...)

Win OPR で wnp ウィンドウ起動後の最初のキーイベントが発生しない

完全にバグでしょう。キーを押すとキーイベントの代わりに focus イベントが発生します。
あとで暇だったら再現ページ作ります。

(2/19追記) ひとつ前の Opera Next 20 から直ったようです。Release 19 では直ってないので 19 では直さないつもりかもしれませんね。



以上です。(久々で疲れた。)

トラックバック - http://orera.g.hatena.ne.jp/miya2000/20140121

2014/01/20 (月)

wnp 1.53 Ginza 対応

|  wnp 1.53 Ginza 対応 - m2O を含むブックマーク

wnp 1.53 です。ずいぶん遅くなりましたが Ginza プレイヤーとモダンブラウザに対応しました。いくつかのモダンブラウザで動作が違うところがありますが、動画の視聴には問題ないと思います。

このバージョンから ie を動作確認対象から外しました。というのも、ie の手元の最新版(11)には User JavaScript 相当の機能が無く、bookmarklet もそのままでは動かせないためです。

機能面での変更はありません。
このバージョンは以下のブラウザで動作確認しました。

インストールは以下からお願いします。
wnp - m2O - チーム俺等


あとでモダンブラウザごとの対応内容と動作が違う点についてまとめようと思いますが、とりあえず先に結論を言うとこちらの意図通りに動くモダンブラウザは Firefox だけです。さすがに歴史があるといった感じですね。

最も非推奨なのは OPR (バージョン15以降のOpera) で、Win 版 では wnp ウィンドウを開いた後の最初のキーボード入力を受け付けない不具合を確認しています。使用する場合は最初だけ2回入力するか、マウスでページにフォーカスを与えてください。あと Mac 版ではポップアップウィンドウのプレゼンテーションモードが残念とか。

あと、一応対策はしているのですが、動画再生開始時に音が出ないことがあるかもしれません。その場合はボリュームを上下すると鳴ると思います。
その他、不具合ありましたらコメントか @miya2000 までご連絡ください。

そんなわけで Ginza でも動くようになりました。今年もよろしくお願いします。

トラックバック - http://orera.g.hatena.ne.jp/miya2000/20140120

2013/06/23 (日)

<script> を含む要素に innerHTML += するとどうなるか

|  <script> を含む要素に innerHTML += するとどうなるか - m2O を含むブックマーク

こんな HTML があるとします。いったいどんな動きになるでしょう?

<aside id="pc_ch_top_468x60_north" class="ads_nicovideo ads_header size_468x60">
    <script>document.getElementById('pc_ch_top_468x60_north').innerHTML += 'AAA!';</script>
</aside>

「a += b」は「a = a + b」の短縮表記なので

document.getElementById('pc_ch_top_468x60_north').innerHTML = " <script>document.getElementById('pc_ch_top_468x60_north').innerHTML += 'AAA!';</script> " + 'AAA!';

と同じ意味です。
要するに innerHTML に <script> を代入するとそれが実行されるかどうか、という問いになります。もし実行されるとしたらこの script だと無限再帰になって死んでしまいますからゆゆしき問題です。


というわけで実際に動かしてみました。

http://jsdo.it/miya2000/ndUU

身の回りのブラウザ(Opera(10.10, 12, Next15), Chrome27, Firefox21, ie10) ではどれも再実行はされず、「AAA!」が1つだけ表示される結果になりました。

これがどこかの仕様で決まっている動きなのかどうかわからないですが、意図的に script を実行させようとしたら上記のようなコードにはならないと思いますので、安全側に倒した挙動になっていると思います。つまり何も問題はありませんでした。



で、ここからが Opera クオリティ。
以下のようにコードを上に追加してみましょう。

<script>
document.addEventListener('DOMNodeInserted', function() {}, false);
</script>

<aside id="pc_ch_top_468x60_north" class="ads_nicovideo ads_header size_468x60">
    <script>document.getElementById('pc_ch_top_468x60_north').innerHTML += 'AAA!'</script>
</aside>

http://jsdo.it/miya2000/ofvz

なんと DOMNodeInserted イベントリスナを追加しただけで、script が再実行されて「AAA!」がいくつも出力されるようになってしまいました!
(Opera Next15 は大丈夫でした。)


そういうわけで DOMNodeInserted イベントを監視する User Javascript を使用していると、ニコニコチャンネルのトップページ広告がわらわらと増えていく現象が起こっていました。
原因がわかって対応もしたのでもう大丈夫なんですが、http://ads.nicovideo.jp/assets/js/ads-2.js の 234 行目あたりは修正した方がいいんじゃないかな、と思います。

--

というか普通はこうですかね。

<aside id="pc_ch_top_468x60_north" class="ads_nicovideo ads_header size_468x60"></aside>
<script>document.getElementById('pc_ch_top_468x60_north').innerHTML += 'AAA!';</script>

 

トラックバック - http://orera.g.hatena.ne.jp/miya2000/20130623

2012/07/07 (土)

wnp 1.52

|  wnp 1.52  - m2O を含むブックマーク

原宿プレイヤーで動画が読み込めなくなった問題に対応しました。

diff を見てもらうとわかると思いますが、動画を読み込む前に flvplayer.ext_setVideoSize('fit'); を実行していたのが問題だったようです。今までは再生できていましたから、flvplayer 側に変更があったのでしょう。(でも、今更原宿プレイヤーを修正?)

で、この処理は動画の再生が始まる時に「フルスクリーンモードを終了するには Esc キーを推します。」が表示されないように事前にフルスクリーンモードにしておくものなんですが、今回もう少し調整して Chrome でも大丈夫になったのと、それとは別に動画の最初にノイズが入るケースが軽減されたんじゃないかと思います。

インストールは以下からお願いします。
wnp - m2O - チーム俺等

トラックバック - http://orera.g.hatena.ne.jp/miya2000/20120707

2012/06/21 (木)

wnp 1.51 ZeroWatch 対応

|  wnp 1.51 ZeroWatch 対応 - m2O を含むブックマーク

wnp 1.51 です。5月の ニコニコ超会議から公開された Zero バージョン(ZeroWatch) に対応しました。

操作に関わる変更や機能の変更はありません。
バグの修正やいくつかの機能改善(リダイレクト用のリンク(rd.nicovideo.jp)にもボタンを表示するようにするなど)を行っています。

このバージョンは以下のブラウザで動作確認しています。

インストールは以下からお願いします。
wnp - m2O - チーム俺等


ZeroWatch 対応をやってみて思ったこと

先日「「ZeroWatch」がより軽く!使いやすく!フィードバックを大幅反映」なんて発表がありましたが、いやはや、僕が常用している Opera10.10 ではそれでも重すぎて使い物にならなくて、キーボード操作の反応が分単位で遅れるレベルです。Opera10 で使う方(私しかいないと思いますが)は原宿推奨です。

なのですが、最新のブラウザならぼちぼち快適だったので、ブラウザの進化に驚くとともに、ニコニコ動画の開発やってらっしゃる方はあんまり古いPCとか古いブラウザとか気にせずやってるのかなーと思いました。


ZeroWatch でちょっと変わったところ


ZeroWatch の UI で大幅に変わったと思えるのがコントロールの部分ですね。
動画の再生・停止・シークなどを行う部分はマウスオーバーで動画の下部に重ねて表示されるようになり、コメントも動画の中央に重ねて表示…だったのがとても批判を受けて、設定で動画の下に表示できるようになりました。

wnp では後者の設定だと、「コントロール表示」に当たる操作で、最初の画像のようにコメント入力欄が表示されます。
デフォルトの設定だとその次の画像のように画面中央あたりに表示されますが、あまりオススメしません。
(なんと ie だと入力欄にフォーカスしようとしたらコメント欄が消えてしまいますっ)


見た目のちょっとした変更

ロード中の待ち受け画面に使っている svg を変えてみました。

前は背景が真っ白けでちょっとまぶしかったので少しだけグレーに。
それからサムネイル画像を鏡面反射させていたのをやめて影付きに。

もっと今風のおしゃれな感じにしたいのですけど、その手の能力が無くて... いずれはボタンとかも変えたいと思っています。


f:id:miya2000:20120621212541p:image:w400

これもどうでもいいところなんですが、再生していない状態の背景をグラデーションにしました(Opera10 では対応してないですけど)。
再生してる間は気にならないんですが、動画を見ているうちに寝落ちした時なんかで、起きて最初に見る画面がグレー一色なのは味気ない、というよりちょっと怖いと感じたんですよね。
これでちょっとはマシかなあと思います。

(色加減はやはり iPod classic を参考にしました。)



あとはだいたい同じ

あとはだいたい同じになってると思います。

ZeroWatch でも画像のようにウィンドウをちっちゃくリサイズできますし、1個先の動画の事前ロード、Windows なら F11 でフルスクリーンもそのままで、自分では今のところストレス無く使えています。

今回のリリースはこんな感じです。
不具合や要望などありましたらコメント欄か @miya2000 までお願いします。

--

作業の途中で「えれくとりっく・えんじぇぅ」を久しぶりに見たんですが、曲もそうですが絵もすごくかわいくてイイんですね!
古い動画もまた見てみようと思いました。


トラックバック - http://orera.g.hatena.ne.jp/miya2000/20120621