Archive : 2008-08

AUG
31

NicoComeAccelerator.user.js

Published:2008-08-31 03:04:59 UTC

VOCALOIDでニコニコ動画流星群【完成版】‐ニコニコ動画(夏)の勢いの速さを目の当たりにして、昔作ったグリモンスクリプトをもう一度作りなおしてみた。

内容はコメントのリロード間隔を3秒に縮めるというもの。どんどん流れてゆくコメ、ガンガン上がる再生数・マイリス数を眺めるのは結構面白いものがある。

// ==UserScript==
// @name           NicoComeAccelerator
// @namespace      http://www.sharplab.net/
// @include        http://www.nicovideo.jp/watch/*
// @require        http://svn.coderepos.org/share/lang/javascript/userscripts/GM_Libs/noriaki/NicoNicoPlayerWrapper/NNPW-20080824.1.js
// ==/UserScript==
var player = new NicoNicoPlayer();
player.onReady(function(video_info) {
	this.val("HTTP_INTERVAL","3000");
	this.val("HTTP_INTERVAL_SHORT","3000");
	this.val("HTTP_INTERVAL_ECONOMY","3000");
	this.val("HTTP_INTERVAL_SHORT_ECONOMY","3000");
});

やっぱりこれもSharpLab.:ニコ動の動画プレーヤー操作用ライブラリを使ってみた。のエントリのときと同じく、時折「Security Manager vetoed action」というエラーに悩まされるわけだけど、何が再現条件なんだろう…。

image WindowsLiveWriterの編集画面にウェブサイトのテーマを適用する場合、テーマが崩れて困ることがあります。例えばこのサイトの新デザインもWLW対策を取らなければ右SSのように酷い状態になってしまいます。むしろ、崩れなければ僥倖で(打率一割ぐらいかなぁ…)、自分は崩れた時の対応を織り込んでサイトの製作期間を見積るようにしています。

崩れる原因

さて、WLWの編集画面ではなぜテーマが崩れてしまうのでしょうか?WLWの描画エンジンがアホの子だから?ノー。WLWのエンジンはTridentです。確かにTridentはアホの子ではありますが、少なくともデファクトスタンダードであるIEと同じ表示になるわけですから、ここでは問題になりません。

image答は「WLWが編集画面に読み込むページのソースでは記事に関係のない部分、つまりタイトルと本文以外の部分の要素を全て削除してしまうから」です。WLWが取得してきたテーマはC:Users<ユーザー名>AppDataRoamingWindows Live Writerblogtemplates<ブログのGUID?>のどこかに保存されているのですが、それをFirebugでツリー表示したのが左のSSです。 ん~、見事なまでのふたこぶラクダ。タイトルの要素と、本文の要素、そしてそれらを囲む要素だけしか残っていません。ヘッダーやフッター、サイドバーは情け容赦なく消されています。visibility:hiddenが適用されているのではなく、要素自体が残っていません。これにより、その消された要素にレイアウトが依存しているテーマは表示が崩れてしまうのです。このサイトの新デザインも、消された要素によってfloatをclearしていた個所があったので、本文部を囲っているfloat要素の高さがゼロになり、白い背景が伸びずその下の暗色の横ストライプが見えてしまっていました。

対策

では、こんな時どうするか。WLWは諦めてしまうにはあまりに便利で惜しいソフトです。何とか対策を考えてみましょう。

対策1:サイトのテーマを全面的に修正する

ページのHTMLの構造を書き換える、floatは必ずclearfixでクリアする、など八方手を尽くしてWLW上では消えてしまう要素への依存をなくし、WLW Compatibleなテーマに書き換えるという方策です。これはサイトの設計時点で取り組まないと難しいでしょう。確実ですが、サイトの表現力にも影響を与えますし、本末転倒な気がします。

対策2:WLWがテーマをDLする時だけサイトのデザインを差し替える

WLWがテーマをDLする時を見計らって、その時だけstyle属性などでガチガチに固めてWLW対策をしたテーマに差し替えるという方法です。どうせ回り込ませるはずだった要素が消えてしまうなら、その時はfloatも辞めてしまえ、とか対策をします。差し替えはマニュアル操作でもよいですが、WordPressのようにテーマがプログラマブルな場合は、WLWに設定するホームページのURLにwlwcompatiblemode=onなどの適当なgetパラメタを追加し、テーマの側でそのようなパラメタが付加された場合だけWLW対策用のCSSを追加で読み込ませる、といった方法を採ることもできます。(WLWはテーマをWLWの設定でサイトのホームページとして指定したURLの内容から生成するので。)ちなみに自分はこの方法を使っています。

対策3:ダウンロードされたテーマの書き換え

ダウンロードされたテーマはC:Users<ユーザー名>AppDataRoamingWindows Live Writerblogtemplates<BlogのGUID?>に保存されると述べましたが、これを編集することでも対処できるようです。ただ、WLWの想定していない操作なので、副作用もあるかもしてないので、注意して行った方が良いでしょう。また、自動でWLWがテーマをウェブサイトから再読み込みして上書きしてしまう場合もあるらしいので、その点にも注意してバックアップを取るなりの対策が必要でしょう。

テーマのDLに失敗する場合

エントリの本題からは少しずれますが、テーマのDLに失敗する場合の原因とその対策で自分が知っているものを一セット紹介してみます。

前述の通り、WLWはテーマをWLWの設定でサイトのホームページとして指定したURLの内容から生成するようです。このとき、ホームページとして設定されたURLに最新記事が表示されない場合は、WLWはどこがタイトルに置き換えるべきところで、どこが本文に置き換えるべきところか判断がつかず、テーマの生成に失敗してしまいます。例えば、WordPressでホームページに最新記事の代わりに固定ページを表示させるようにした場合などがこれにあたります。前述の対策2を行えばよいでしょう。

おわりに

以上、WLWでデザインが崩れた際の対応策をまとめてみましたが、いかがだったでしょうか?このエントリがWLWの快適な利用に繋がれば幸いです。

 

しかし…WLWが表示の必要のない要素の扱いを削除からvisibility:hiddenの適用に改めてくれれば多分全て解決するはずなんですけれどねぇ…レイアウトが崩れるリスクを取ってまで要素を削除する理由ってなんなんでしょうかね。

AUG
30

今日は二十歳の誕生日。

Published:2008-08-30 22:31:41 UTC

ということでそれにぶつける形でサイトのデザインを変えてみた。十代の卒業制作って奴です。
(今考えた。)

ビバ・フルスクラッチ。今回はWordPress+Windows Live Writerの組み合わせで運用することを前提にフルスクラッチしてみた。念願のsyntaxhighlighterの組み込みも果たし、相当ソースコードを載せるのがやり易くなったのがありがたい。また、可変幅の2コラム構成だが、本文部分の最少幅を指定したことで、写真を貼り易くなったのも結構便利になると思う。

まだ追加しきれていない機能、調整しきれていないCSSの修正などが残っているので、ちょくちょく直していきたい。

AUG
29

慶應商学部を退学します

Published:2008-08-29 21:50:43 UTC

追記:現在はWindows Live Writerが使えるようになったようです。はてなはフットワークが軽くていいですね。

はてなインターンで実装されたというはてなダイアリーのAtom Pub APIを使って、Windows Live Writerからはてダに投稿できないか試してみました。
結論から先に言ってしまうと、登録出来ませんでした。残念…。 とりあえず、どこで失敗しているっぽいか調べた際のレポートを載せておきます。

imageどこで失敗するかというと、Windows Live Writerに新しいアカウントを追加する際。FiddlerでWLWの通信を覗いてみたところ、アカウントの追加画面でBlogのタイプをAtom Pub APIに設定し、エンドポイントURLを入力してやって次の画面に進もうとすると、WLWはそのエンドポイントURLに対してまず認証無しでGETリクエストを投げるようです。当然はてなのAtom Pub APIはこれを拒否し、401 Unauthorizedを返すのですが、imageこれに対してWLWは今度はちゃんとWSSE認証のためのヘッダを付けてGETリクエストを送るようです。 良い感じですね。ところがこれに対してはてなAtom Pubは403 Forbiddenを返してきます。なんで?

401 Unauthorizedを返してこないので、認証には成功したようなのですが、ちょっとこれは謎仕様。このためWLWは一つ目のSSのようなダイアログが出てこれ以上登録を進めることが出来なくなります。ん~何が悪いんでしょうかね…。

面白いGreasemonkeyスクリプト用ライブラリを見つけたので紹介。

Greasemonkeyスクリプトからニコニコ動画のFlashプレーヤーを操作するライブラリ(バージョンアップ) – We Ain’t Seen Nothin’ Yet.

Flash内部のActionScriptの変数は、SetVariable、GetVariableメソッドを使用することで、そのFlashを含むWebページのJavaScriptから読み書きできるのだけれど、その機能を使ってニコニコ動画のFlashで出来た動画プレーヤーを操作しようというもの。

ニコ動のプレーヤーを外部から操作するというのはニコニコ動画をHackするときに使えそうな変数まとめというエントリの頃から注目していたのだけれど、このようにライブラリの形に纏めた形で提供してもらえるというのは非常に有り難いことだ。

さて、早速このライブラリを使用して、今年のエイプリルフールに運営が悪ふざけでやった「コメント逆流事件」を再現してみる。このスクリプトをインストールすると、ニコ動のコメントが逆流するようになる。

// ==UserScript==
// @name           ReturnToAprilFoolsDay
// @namespace      http://www.sharplab.net/
// @include        http://www.nicovideo.jp/watch/*
// @require        http://svn.coderepos.org/share/lang/javascript/userscripts/GM_Libs/noriaki/NicoNicoPlayerWrapper/NNPW-20080824.1.js  
// ==/UserScript==
var player = new NicoNicoPlayer();
player.onReady(function(video_info) {
	this.val("isReverse","true");
});

ニコ動の動画プレーヤーはisReverseという変数を内部に持っているのだが、それにtrueをセットすることで流れるコメの向きを反対に出来ることを利用したスクリプト。エイプリルフールを過ぎたらこの変数もなくなるのかな、と思っていたのだけれども、「@逆」とかいうニコスクリプトのために残されたようだ。

ところでこれらニコ動の動画プレーヤーを操作するGreasemonkeyスクリプトだが、時折「Security Manager vetoed action」というエラーで実行に失敗することがある。どうもSetVariableメソッドによる内部の変数の操作がFirefoxのセキュリティ・ポリシーに反していて拒否される、ということのようなのだが、実行できる場合もあり、再現条件がはっきりしない。Firefox2の頃は全く問題がなかったので、Firefox3での変更だと思うのだが…。謎。

AUG
23

新デザイン制作日誌08/23

Published:2008-08-23 22:31:08 UTC

image

前記事・後記事へのリンクとかコメント欄とかトラックバックとかの部分がなんとなく形になってきた。ここら辺はwp.vicunaをちょっと参考に制作。

AUG
22

SyntaxHighlighter一部改修メモ

Published:2008-08-22 16:44:58 UTC

ソースコードをハイライト表示してくれるので非常に便利なSyntaxHighlighter。JZ5さんがSyntaxHighlighter for Windows Live WriterというプラグインでWLW上でスマートコンテントとして管理できるようにしてくれているので、WLW好きの自分としては是非このBlogにも組み込みたいと思い、作業していたのですが、その中でSyntaxHighlighterの表示の不具合にぶつかりました。今回のエントリではその対応策を記します。

SyntaxHighlighterの持つ問題

image SyntaxHighlighterは、通常、一行あたりの文字数が多くSyntaxHighlighterの表示部の横幅を超えるようなソースコードの場合、white-space:normal;の指定により、折り返し表示してくれるようになっています。ですが、半角文字列の折り返しは単語毎に行われるというブラウザの仕様のためか、場合によってはソースコードの折り返しが上手く行われず、横スクロールバーが表示されてしまうという問題があります。そうなると、スクロールした部分は背景の塗り分けが上手く行われず、SSのように違和感のある表示になってしまう、という問題があります。

対応策

上手く折り返し表示させる方法がよく分からなかったので、自分の場合、常に折り返し無しで表示することにしました。そして背景の塗り分け自体も廃し、常時横スクロールバーを表示。また、上のツールメニューもあわせて表示の仕方を変更しました。

長々と言葉で説明しても冗長になるだけなので、SyntaxHighlighterのCSSを上書きするのに使用したCSSファイルを示します。

.dp-highlighter{
	overflow-y:visible;
	overflow-x:scroll;
	background-color:#fcfcfc;
	width:100%;
}
.dp-highlighter ol li,.dp-highlighter ol li.alt{
	background-color:#fcfcfc;
	white-space:pre;
}
.dp-highlighter ol li, .dp-highlighter .columns div, .dp-highlighter .tools {
	border-left:3px solid #e26c6c;
}
.dp-highlighter .tools{
	font-size:120%;
	height:2em;
	padding:0px;
	background-color:#fcfcfc;
}
.dp-highlighter .tools a{
	font-size:100%;
	display:block;
	color:#888888;
	float:left;
	height:1.5em;
	margin:0px;
	padding-top:0.4em;
	padding-bottom:0.1em;
	padding-left:0.5em;
	padding-right:0.5em;
	background-image:url("images/shToolsBG.png");
}
.dp-highlighter .tools a:hover{
	background-image:none;
	background-color:#ffffff;
}
.dp-highlighter ol.dp-c{
	clear:both;
	background-color:#fcfcfc;
}

実際に適用するとこんな感じ。

image

スクロールさせても崩れてません。

image

今回は不具合修正をきっかけとして既製のライブラリのCSSの上書きに取り組みましたが、今回のツールメニューや左ボーダーの変更のように、単なるデザインの変更にも使えるので、結構ブラックボックス化しがちなライブラリのデザインを、サイトのデザインと調和させる目的でも色々弄ってみてはいかがでしょうか。

追記

このCSSは桁の表示には未対応です。まぁ全角文字が含まれているとどうせズレが生じるし、放置で良いかな・・・。

AUG
20

新デザイン制作日誌08/20

Published:2008-08-20 23:54:22 UTC

imageすすまない…。とりあえずフッタとか。 月末までに間に合うのだろうか…。

AUG
19

新デザイン制作日誌08/19

Published:2008-08-19 01:51:00 UTC

image

サイドバーの形が見えてきた。意外とここは順調。