Kei_9 なげやりにっき このページをアンテナに追加 RSSフィード Twitter

2010-04-28

[] Proxomitronを使ってみましょ!


とっても便利なローカルプロクシなのにちょいとばかり敷居が高いからと使用を躊躇しているアナタ。


とりあえずサイトデザインの書き換えから始めて見ませんか。

外部プログラムとの連携も悪くないものです

今回このエントリーをしようと思ったのはですね、普段持ち歩いているネットブック上のWin7で使っているSleipnirでは最近ちょっとストレスを感じ始めたからなのです。

やはり非力なCPU、並びにメモリ容量のせいでマルチタスクで使っているとどうしてもSeahorseスクリプトなどでのデザイン書き換え時に描画がもたついて、すぐには書き換わってくれなかったりとか度々ありますし、ここはSleipnirの機能だけに頼ることなく快適な表示をさせたいと思ったから+α*1ということなんです。

Proxomitronを使ってページの構成を書き換えたとしてもブラウザ側の動作に変な影響が及ぶこともあまりないので*2Sleipnir test版でのマルチスレッド機能がONだろうがOFFだろうが関係ないということもあります。

それと、もともとSleipnirにはProxomitronの利用を暗に推奨しているようなファイルがあったりしますしね♪


突っ込んだ使い方は専用のWikiや解説を書かれているページが沢山あるのでここではしません、というかワタシにはできません(笑)

なので一歩進んだ使い方をしてみたい方は色々とググってみてください。

今回のエントリーでは、今までのページデザインの変更をいったん通常の描画が終了したのちに発動して書き換えを始めるSeahorseスクリプトを利用した前回エントリーでの方法やUser Style Sheet、およびStyle Editorを使った方法から抜け出して、ブラウザがサーバーにリクエストして返ってきたファイルをブラウザへ渡す前に横取りしてスタイルを書き換えてから改めて渡してやるということをしてみたいのです。


で、まぁ例によってTwitterの広告消しなどを一例に、Proxomitronの導入からどのようにスタイル設定をするのかまでを簡単に解説してみようとおもいます。

続きを読む

*1:某つぶやき処でのワタシのつぶやき見て試した方がうまく導入できなかったらしいとか言うのも少しありますw

*2:厳密にはありますが、まぁ普段使いでは無視出来るレベルのことです。

2010-04-18

[] test版でマルチスレッドONの時に広告消しをしたい

2chの本スレでいち早く新機能を試して見たいユーザーのために公開されているtest版では各々のタブを別スレッドで動作させるというマルチスレッド機能が利用出来るのですが、これを有効にすると既存のプラグインの一部が使えなくなってしまいます。

特にWebページの見た目を自分好みにいじれるStyle Editorが使えなくなってしまうのは痛い。

ただ、代替手段としてサイトがクラックされる前にSUECで配布されていたUser Style Sheetスクリプトを持っていればCSS解析など多少の手間はかかりますけど同様のことが出来ます。

しかし現状では手に入らないので、これからSleipnirを使い倒してやろうと思っているかたにはちと残念な状態。*1

そこで、これまたちょいと手はかかりますがSeahorseスクリプトを使って特定のサイトへCSSを適用させる方法などをエントリーしてみようかと。

ただし、Seahorseもtest版に対応したものを導入していないといけません。

Style Editorと連携

test版であってもマルチスレッドがOFFであればStyle Editorは利用可能です。そこで、見た目を弄りたいサイトをStyle Editorで編集して、デザインが確定したら左のペインからCSS形式でコピーしてテキストエディタへと貼り付けます。

以下の例ではTwitterの右上にある広告部分とユーザーの下にあるプロモーション、並びにトレンドを非表示にして、ついでに背景画像も変更しています。*2

div#side_ad_base {
display:none;
}

p.promotion.round {
display:none;
}

div#trends.collapsible.collapsed {
display:none;
}

body#home.timeline.ie.ie8.asian.ja{
background:#fff url("http://img.f.hatena.ne.jp/images/fotolife/K/Kei_9/20100411/20100411185839_original.png") fixed repeat;
}

さらにこれを一行へと整形し直します。bodyはidやclassを省略しています。

div#side_ad_base,p.promotion.round,div#trends.collapsible {display: none;}body{background:#fff url("http://img.f.hatena.ne.jp/images/fotolife/K/Kei_9/20100411/20100411185839_original.png") fixed repeat;}

ここまでできたらこれをSeahorseスクリプトの中へ組み込んでやります。*3

// ==UserScript==
// @name           Twitter Ad Killer and more...
// @description     Twitterの広告消しとか
// @include        http://twitter.com/*
// @include        https://twitter.com/*
// ==/UserScript==

    var css = 'div#side_ad_base,p.promotion.round,div#trends.collapsible {display: none;}body{background:#fff url("http://img.f.hatena.ne.jp/images/fotolife/K/Kei_9/20100411/20100411185839_original.png") fixed repeat;}';

    document.createStyleSheet().cssText = css;

こうして出来たスクリプトをSeahorseフォルダへ移動してスクリプトの再読込をしたのちにTwitterのページを開くとマルチスレッドがONであってもStyle Editorで編集したときと同様な表示になっていることが確認出来るとおもいます。

同じような手順でサイトごとのスクリプトを作成してやればUser Style Sheetのようにスマートではありませんが同様の効果が期待できますので一時凌ぎにでもどうぞ♪

  • スクリプト適用前


  • スクリプト適用後

*1:いずれSAHKにてSUECにあったものを代理公開する予定です。

*2:ちなみに背景変更はTwitterの設定からでも可能です。

*3:cssのなかにダブルクオートが存在する場合を考え、css全体はシングルクオートで括り、最後にセミコロンを付加することを忘れないように。

2010-04-17

[] Seahorseの読み込み順番に注意

Firefoxのgreasemonkey用として作られたUserScriptでも特に加工なしでSeahorseで利用出来るものが結構あるってことは周知の事実ですが、使えるからといって闇雲に追加していくと他のスクリプトとの相性問題が発生することがたまーにあったり。

Secure connections on sites

userscripts.orgに、訪れるサイトがhttpsのページを用意してある場合には自動で切り替えてくれるSecure connections on sitesというちょいとよさげなスクリプトがある*1ことを知ったので、軽い気持ちで導入してみたら…これは使える!

…んがしかし、なにげにTwitterを開いてみたところいつも動作しているSeahorseスクリプトたちが全然機能していなかったんです。

これはどういうことかというと、通常Twitterへアクセスするために利用しているリンクバーのアイコンにはhttp://twitter.com/を登録してあるので、これを押して開いたページではSecure connections on sitesが機能してhttps://twitter.com/に切り替わってくれるのですが、このスクリプトが発動するのが他のTwitter関連スクリプトが通常ページで動作したあとなので、ページが切り替わった時に他のスクリプトたちが破棄されてしまっていたというわけ。


せっかくいいもの見つけたと思ったのにこれじゃ困っちゃうなと思っていたら、ちょいと閃きました。

ファイル名を変えるか、それとも…

ようは他のTwitter関連スクリプトたちより先に発動させればいいので、ソートした際にファイル名をそれらスクリプトたちより上位にくるようにしてやればいいということなんですが、気の利いた名前で順番が上になるようにリネームするのはちと考えるのが大変。

で、そういやAutoPagerizeのスクリプトは優先して読み込ませるためにファイル名の先頭へ @(アットマーク)や !(エクスクラメーションマーク)を付加していたなぁということを思い出し、@SecureConnections.user.jsとしてみたところ大正解。

今度はちゃんとhttpsへ切り替わったあとにほかの関連スクリプトが読み込まれるようになって広告消しやらShortURLExpander等々が機能してくれるようになりました♪


ま、そういうワケで安易にスクリプトを追加すると思いがけないことがおきる場合があるよといったネタでした。

*1:対応外のサイトのアドレスは自分で追加する必要あり。

2010-04-15

[] Youtube Downloader for Seahorse が新UI対応

先日デザインがリニューアルされたYouTubeですが、それに伴ってYoutube Downloader for Seahorseが動作しなくなってしまいました。

とりあえずすぐに暫定対応していただけたのですが、今度は以前のボタンカラーが新しいデザインでは浮きまくりで何とかしたいなと思っていたところ、ほかの要望とともに新デザインのボタン画像も採用していただけました。

Youtube Downloader for SeaHorse (958lab)

新デザインのボタンが気に入らない方は以前の画像リソースをそのまま残しておいて、新しいスクリプトのみを上書きしてください。

  • 新しいスクリプトを導入すると、サイドバー上部へYoutube Downloader for Seahorseバーが追加されます。

  • クリックするとドロップダウンしてダウンローダーが現れますので普段は邪魔になりません。


旧UIの方が好みで元に戻しているという方は今回のスクリプトを上書きすると動作しなくなってしまいますので、以前のものをそのまま利用するか上書きする前にどちらかのスクリプトファイル名をリネームすると共存可能です。

また、flvファイルはなぜかダウンロード時に拡張子が付加されなくなってしまったようなので、保存時に手動で拡張子を追加してあげてください。

mp4ファイルは問題ないようです。

もっとも、いまさらflvで保存する方も少ないかとおもいますけどね♪

2010-04-11

[] iTunesのフォントはやっぱダメだ

以前もちらっとだけ取り上げましたけど、WebKitをITMSの表示に利用するようになってからのiTunesはフォントがとっても見づらいというか汚いというか・・・

Mac OSX版でならキレイなんですけどWindows版ではどうにもよろしくない。文字のジャギーが目立ってとてもApple製のアプリとは思えないですよね。

で、WebKitでの描画なら当然スタイルを指定しているファイルが必要なわけですが、iTunesのインストール先にあるiTunes.Resourcesフォルダ内にiTunes.cssというファイルがあって、これを編集することである程度はフォントを変更出来ることまでつかめていました。

しかし、アスタリスクで全適用させてみても変化してくれないところがかなりあったので、これはやはり個別にidやclassが指定されているに違いないなと。

では、それを指定しているファイルはどこにあるのかとPC内を探ってみましたがどこにも見あたらず、ネットワークチェッカーでiTunesの通信先をチェックしてみたら…リソースが多すぎて追い切れませんでした(笑)

そこで次に目をつけたのが、AppDataに格納されていたデータベースファイル。

Win7(Vistaでも同様)だとユーザーフォルダ/AppData/Local/Apple Computer/iTunesの中にあるCache.dbというヤツですが、これをデータベース内を参照できるアプリ、tashizaurusを使って覗いてみたところそれっぽいのを見つけることができまして、そのアドレスにSleipnirでアクセスしてみたらファイルとして落っこちてきてくれました♪

CSSファイルへのリンク

しかしこのcsszという拡張子のファイルは秀丸で開いたらどうやっても正確なエンコードで表示してくれません。

しょうがないのでChromeへアドレス渡したらちゃんと読めましたのでそれを全選択してエディタへとコピー。

これでゆっくりとCSSの解析が出来るってなモンです♪

CSS自体は圧縮されて一行になっているので目的のフォント周りを指定している部分を見つけるのが困難でしたが、これ見てわかったのは日本のITMSでは専用のclassがつかわれているらしいということ。*1

つまり、

body,button,input{font-family:"Helvetica","Arial";font-smooth:always;}body.jpn,body.jpn button,body.jpn input{font-family:"HiraKakuProN-W3","HiraKakuProN-W6","MS PGothic","Helvetica","Arial";}

に対して各要素の属性を指定すればいいらしいということがわかったわけです。

で、通常のWindowsを利用していればこの中で使われるフォントはMS PGothicが優先*2されますので、例のきちゃない表示になっちゃうんですね。

ここは当然メイリオなどの日本語でもクリアタイプが有効になるフォントを指定すべき*3、ってことで早速iTunesインストールフォルダ/iTunes.Resources/iTunes.cssをエディタで開いて先頭部分へ以下を追記して保存。

body,li,p,div,td,button,input{
	font-family:Meiryo !important;
	font-smooth:always;
}
body.jpn,
body.jpn button,
body.jpn input,
body.jpn h1,
body.jpn h2,
body.jpn h3,
body.jpn h4,
body.jpn h5,
body.jpn h6,
body.jpn dl,
body.jpn dt,
body.jpn dd,
body.jpn pre,
body.jpn code,
body.jpn form,
body.jpn fieldset,
body.jpn legend,
body.jpn li,
body.jpn textarea,
body.jpn p,
body.jpn blockquote,
body.jpn table,
body.jpn thead,
body.jpn th,
body.jpn tbody,
body.jpn td,
body.jpn em,
body.jpn div {
	font-family:Meiryo !important ;
	font-smooth:always;}

あとはiTunesを立ち上げ直すと・・・


↓ノーマル↓CSS適用後♪ ↓ちなみにMac OSX版iTunesはこんな感じ


まぁ思いつくままの要素に対してフォントをメイリオ*4で表示するように指定してみたのですが、極小フォント部分に対してはビットマップが使われちゃうようです。

これが気になる向きはビットマップ抜きフォントを作成するなりネットから拾ってくるなりして指定すればよろしいかと。*5

あと見出し部分にWebKitのみで利用可能なEffectが適用されていますが、Windowsではなんかイマイチな感じがしますね。このEffect切れば普通に表示されそうですけど今回はそこまで手をつけていません。


そんなこんなで今までどうにもストレスの元だったiTunesの表示をちょっとだけでも改良できたのでよかったです♪ サイドバーとかもWebKitでの表示だったらいいんだけどその辺はまだ未確認。

*1:あとからStyleneat - CSS Organizer http://styleneat.com/ でCSSを整形し直してちゃんと確認しましたけどね♪

*2:Mac OSXならヒラギノが使われるのでキレイ♪

*3:WebKit上でクリアタイプが有効になるのかは疑問でしたが結果オーライ!?

*4:メイリオでは間延びしていてイヤだというヒトはダブルクオートで括って"Meiryo UI"にするといいかも。

*5:自分も一応ビットマップ抜きメイリオを作って適用してみましたが、なんだか全体的にぼけぼけな感じになっちゃうので元に戻しました。

2010-04-01

[] HLRの概要ページからChromeFrameで表示

ある方のTwitterでのつぶやき

HLRの概要ページから開きたいな〜と呟いてみるテスト 

これを受けてやってみました。

前回のエントリーで書いたChromeFrameのgcfプロトコルを有効にする操作をしていることが前提ですけど。

  • 今回は専用の画像を用意しないで安直にボタン表示をさせてみました。

利用しているSkinフォルダにheadlinereaderフォルダがあればその中のdescription.htmlを、無い場合はdefaultスキンフォルダ内のheadlinereaderフォルダにあるdescription.htmlをエディタで開いて編集します。

description.htmlはいろんな種類があって、初期のプレーンなものや画像データをbase64エンコードしてスタイルへ記述してあるものなどがありますが、今回弄る部分はそれほど変わっていないのですぐ見つかるとおもいます。

<title>$HTML_TITLE$</title>
</head>
<body>
<div id="main">
	<div id="gradation_back">
		<div id="gradation_top">
			<h1 class="title">
				$ANCHOR_ITEM_TITLE$<!--//<a href="http://b.hatena.ne.jp/append?$ITEM_LINK$" target="_blank">
				<img src="$PNIR_DESCRIPTION_PATH$append.gif" width="16" height="12" style="border: none;"
				 alt="このエントリーをはてなブックマークに追加" title="このエントリーをはてなブックマークに追加" /></a>				
				<a href="http://b.hatena.ne.jp/entry/$ITEM_LINK$" target="_blank">
				<img src="http://b.hatena.ne.jp/entry/image/$ITEM_LINK$">
				//-->
				</a>
			</h1>
		</div>
	</div>

このへんの<h1 class="title">以降へ下のタグを追加してやります。

<input type="button" value="CromeFrameで表示" onclick = "location.href = 'gcf:' + ' $ITEM_LINK$'">

追加する位置は任意ですが、 h1の中に納めた方がスマートかも。

<title>$HTML_TITLE$</title>
</head>
<body>
<div id="main">
	<div id="gradation_back">
		<div id="gradation_top">
			<h1 class="title">
				$ANCHOR_ITEM_TITLE$<!--//<a href="http://b.hatena.ne.jp/append?$ITEM_LINK$" target="_blank">
				<img src="$PNIR_DESCRIPTION_PATH$append.gif" width="16" height="12" style="border: none;"
				 alt="このエントリーをはてなブックマークに追加" title="このエントリーをはてなブックマークに追加" /></a>				
				<a href="http://b.hatena.ne.jp/entry/$ITEM_LINK$" target="_blank">
				<img src="http://b.hatena.ne.jp/entry/image/$ITEM_LINK$">
				//-->
				</a>
				<input type="button" value="CromeFrameで表示" onclick = "location.href = 'gcf:' + ' $ITEM_LINK$'">
			</h1>
		</div>
	</div>

location.hrefなので概要ページの上書きになりますけど特に問題は無いかなと。試してないけど別タブで開くならスクリプトを関数として定義しておいてアンカータグで利用すれば良さそう。*1


追記

新規タブで開く方法は無いかなと少し弄っていましたが、アンカータグでの利用ではタブは開いてもビューをクリックしないと表示されてくれないという例の症状が・・・

まぁその手間を惜しまなければ一応使えます(笑)

  • 以下試して見たコード。
<a href="javascript:location.href = 'gcf:' + ' $ITEM_LINK$'" target="_blank">新規タブ</a>

*1:window.openだと機能しなかった。





月別アーカイブ

2006 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2007 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2008 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2009 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2010 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2011 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2012 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |

フォト蔵

本コンテンツをご覧になるには、Flash Playerプラグインが必要です。FlashのWebサイトよりインストールしてください。

Banners