突発企画 - 目指せ脱初心者(?)！エクステンション自作講座その2

前回の続きです。

画像の場所を汎用的に指定

Portable Sleipnirなんかを使用していると、ドライブが変更されて使えない事にもなりかねないのでそこをクリアする。

ファイル先頭の定義部分に次のように追記してください。

// @type SleipnirScript

プログラム部分の先頭付近に次のように記述します。

var path = sleipnir.ScriptFullName.replace(sleipnir.ScriptName, '').replace(/\.js$/, '') + "blank\\hoge.png";

ファイル名は自分で使用する画像に合わせて変更してください。
これで変数pathに画像までのパスが代入されます。

imgタグのsrc属性を設定する部分を変更してください。

image.setAttribute("src", "file:///C:/Program%20Files/Fenrir%20%26%20Co/Sleipnir/plugins/seahorse/blank/mosaic.png");

↓

image.setAttribute("src", path);

プラグイン、他スクリプトへの影響を排除

このまま使用すると一部のプラグイン、スクリプトなどに影響が出るので対策を施します。
ちなみに、具体的にはHawkeyeの「HTMLの構造」やリンク解析スクリプトなどです。実行した後にページのプロパティを見てみるとabout:blankになっている(about:blankに書き出している)ためです。

プログラム部分を下のif文の中に移してください。

if(!document.body.hasChildNodes()) {

	←ここに移す

}

画像のドラッグ禁止

Sleipnir 2.5.13 以前では、ビュー内の画像をドラッグすると新しいウィンドウ（タブ）が開き、画像のキャッシュが表示されました。

タブブラウザ Sleipnir オンラインデータベース(Tips)より引用
現在のSleipnirでは無効になっているようですが、この機能を有効にしてあると誤ってキャッシュを開いてしまうことがあるので対策します。 *1

方法1：divの背景にする。

imageの部分を丸丸削る。
divのstyleに次のどちらかを追記をする。

division.style.backgroundImage = "url(" + path + ")";
または
division.style.backgroundImage = "url(file:///〜)";

前者は上述の「画像の場所を汎用的に指定」を利用している場合です。
後者は"〜"の部分が省略されているので、補ってください。

方法2：inputタグを使う。

imageの部分を丸丸削る。
formとinputタグを挿入する。

var form = document.createElement("form");
division.appendChild(form);

var input = document.createElement("input");
input.setAttribute("type", "image");
input.setAttribute("src", path);
input.setAttribute("disabled", "disabled");
input.style.width = "220px";
input.style.height = "300px";
form.appendChild(input);

上述の「画像の場所を汎用的に指定」を利用している前提で書いてあるので、利用していない場合はpathの部分を修正してください。

IE6での透過PNG利用

IE6の環境を動かすのが面倒なので、確認してないんですがCSSでfilterにAlphaImageLoaderを使えば多分できると思う・・・。

画像を複数表示

表示したい分だけdiv, imgを挿入する。

画像のランダム表示

ランダムメソッドを使って、分岐させる。
例えば、3つの画像(hoge.png, foo.png, bar.png)をランダムに表示させたい場合。

var path;
var rdm = Math.floor(Math.random() * 3);
if(rdm ==0 ) {
path = sleipnir.ScriptFullName.replace(sleipnir.ScriptName, '').replace(/\.js$/, '') + "blank\\hoge.png";
}else if(rdm == 1) {
path = sleipnir.ScriptFullName.replace(sleipnir.ScriptName, '').replace(/\.js$/, '') + "blank\\foo.png";
}else {
path = sleipnir.ScriptFullName.replace(sleipnir.ScriptName, '').replace(/\.js$/, '') + "blank\\bar.png";
}
(以下略)

これは画像サイズが同じ場合に限ります。
画像サイズ、背景色などが異なる場合はそれらもif文の中に入れ込みましょう。

個人的設定

以下は個人的にやってる他の事です。

スクロールバーの調整

スクロールバーの部分が目障りなので色を背景色と同じに変えています。

document.body.style.scrollbarBaseColor = "#000000";
document.body.style.scrollbarFaceColor = "#000000";
document.body.style.scrollbarArrowColor = "#000000";
document.body.style.scrollbarHighlightColor = "#000000";
document.body.style.scrollbar3dlightColor = "#000000";
document.body.style.scrollbarShadowColor = "#000000";
document.body.style.scrollbarDarkshadowColor = "#000000";
document.body.style.overflow = "hidden";

画像へのフィルター掛け

使用画像が明るすぎるのでフィルター掛けて調整しています。

input.style.filter = "alpha(opacity=75,finishopacity=50,style=2,startx=0,starty=0,finishx=110,finishy=150)";

ちなみにFenrir Inc.のグローバルページの画像を2倍に引き伸ばして使ってます。

*1:私の昔のから継ぎ足してきたSleipnirではuser.iniに記述が無くても開きます。また、Portable Sleipnir 2.9.1でuser.iniに記述しても何故か開かなかったです。