BathyScaphe

BathyScapheWiki

プレビュー表示の設定を変更する方法

このページでは、BathyScaphe 1.1 以降のオプションとして提供されているプラグイン、Bardiche(バルディッシュ)についてのカスタマイズ情報を記載しています。

Bardiche の最新バージョンは 1.0.5 で、2014-01-15 にリリースされました。Bardiche 1.0.5 を利用するには BathyScaphe 2.4 以降が必要です。
参考
BathyScaphe 1.1 以前では、PreviewSource.html によるプレビュー機能は BathyScaphe 本体の一部でした。しかし、1.1.2 以降では、本体から分離され、プラグイン Bardiche として分割されました。

このページでは Bardiche のインストール方法などについては解説していません。それは Bardiche に付属するドキュメントを参照してください。


Bardiche では、PreviewSource.html や付随する他のファイルをカスタマイズすることで、Web ブラウザに表示されるプレビュー画面の動作、表示等を変更することができます。

目次

準備

カスタマイズをするにはまず、Finder で Bardiche の ImagePreviewer.plugin に対して「パッケージを表示」し、

ImagePreviewer.plugin/Contents/Resources/Japanese.lproj

にある Preview フォルダ を、フォルダごと

~/Library/Application Support/BathyScaphe/Resources

内にコピーすることから始めてください。最終的に PreviewSource.html の場所は、

~/Library/Application Support/BathyScaphe/Resources/Preview/PreviewSource.html

となります。

Preview フォルダの中には、以下のファイルがあります。

PreviewSource.html
プレビュー表示の素となるファイル。
script.js
動的なプレビュー画面生成について記述したJavaScriptファイル。主にこのファイルをカスタマイズします。
style.css
レイアウトを記述したStyleSheetファイル。
favicon.tiff
ブラウザのアドレスバーに表示されるアイコン画像。
background.svg
背景として使用されているSVG形式の画像。
stripes.svg
style.cssで利用しているストライプパターン画像。

編集

script.js

script.js ファイルをテキストエディタで開いて、settings 欄を見てください。

// ----------------------------------------------------------------------------
// settings
// ----------------------------------------------------------------------------

// デフォルトの画像幅
const DEFAULT_WIDTH = 250;

// デフォルトの表示サイズ  { 0:小 1:中 2:大 3:最大 }
const DEFAULT_SIZE_LEVEL = 1;

// 表示サイズの段階名
const SIZE_LABELS = ['小', '中', '大', '最大'];

// リンク先が画像でない時の動作  { 0:何もしない 1:飛ぶかどうか確認する 2:確認なしで飛ぶ }
var jump_confirm = 2;

//リンク先URLに CONDITION_KEYWORDS の要素が含まれていた場合に jump_confirm に代わる動作
const JUMP_CONFIRM_CONDITIONAL = 1;

const CONDITION_KEYWORDS = ['/img', '/upload'];

// ぼかしフィルターの強度 { 0:無効 }   (webkit系ブラウザでのみ有効)
const BLUR = 0;

これらが、ユーザがカスタマイズできる設定値です。順に説明します。

DEFAULT_WIDTH

DEFAULT_SIZE_LEVEL が示すサイズの横幅をピクセル単位で設定します。デフォルトでは、「中」サイズの横幅を「250ピクセル」で表示するように設定されています。

DEFAULT_SIZE_LEVEL

SIZE_LABELSに記したサイズの選択肢のうち、最初にどの大きさで表示するかを設定します。デフォルトでは 1 ですから、「中」サイズで表示します。labels配列は 0ベースです。
{ 0: 小, 1: 中, 2: 大, 3: 最大 }

SIZE_LABELS

表示サイズの選択肢を設定します。例えば ('極小', '小', '中', '大', '特大') とすると、さらに小さいサイズ、さらに大きいサイズの表示を追加することができます。最低でも1つは選択肢を記述してください。

jump_confirm

プレビューすべき画像がすでに削除されていたり、画像ではない URL に対してプレビュー機能を呼び出したりした場合に、どのような動作をするかを設定します。設定値は 02 です。

{ 0: 何もしない, 1: 飛ぶかどうか確認する, 2: 確認なしで飛ぶ }

デフォルトでは 2 ですから、すぐさま自動的にリンク先を表示する設定になっています。1 にした場合は、リンク先を表示するかどうかのダイアログが出て、ユーザの判断を仰ぎます。0 にした場合、何の動作もしません。リンク先を見たい場合は、画像(の表示されるべき場所)をクリックしてください。

JUMP_CONFIRM_CONDITIONAL

画像の URL に、CONDITION_KEYWORDS で示される文字列が1つでも含まれていた場合に、どのような動作をするのかを設定します。設定するべき値は jump_confirm と同じです。

この設定は、画像アップローダ等で画像が削除された場合に飛ばされる 404 のページを見たくない等、サイトによって違う動作をさせたい場合に有効です。この機能が不要な場合は、jump_confirm と同じ値を設定してください。

CONDITION_KEYWORDS

JUMP_CONFIRM_CONDITIONAL の項目を参照してください。デフォルトでは、画像ファイルのURL文字列に "/img" または "/upload" が含まれる場合、飛ぶかどうかのダイアログを出して確認する設定になっています。もし設定したい値が1つもない時は、次のようにしてください。

const CONDITION_KEYWORDS = [];

BLUR

ここに正の数値を設定すると画像がぼかされた状態で表示され、画像をマウスオーバーしたときのみぼかしが取れるようになります。ぼかしフィルターを無効するには0を設定します。この機能はWebKit系ブラウザ(SafariやGoogle Chrome, Operaなど)でのみ有効です。

style.css

フォントやカラーリングなどのデザインに関する設定は style.css 内に記述されています。

style.css の冒頭ににある

/* title bar color */
header { background-color: hsl(228,40%,50%) }

の値を変更すると、プレビューページのタイトルバーの色をカスタマイズすることができます。

HTML, JavaScript を知りつくしているあなたへ

何も言うことはありません。該当ファイルを該当フォルダにコピーし、その想いの丈をぶつけてください。ただし、最低でも次のコードは必要となるでしょう。

<img src="%%%ClickedLink%%%" width="xx">

Bardiche はプレビュー機能が呼び出されると、PreviewSource.html の中の

%%%ClickedLink%%%

という文字列を、あなたがクリックした URL 文字列に置き換えて、Preview.html を生成します。

また、height を記述せず width のみを記述した場合(あるいは逆の場合でも)、たいていの Web ブラウザでは、画像の縦横比が正しく縮小されて(もしくは拡大されて)表示されます。

Bardiche での重要な変更点

以前は、Preview.html は PreviewSource.html と同じ位置に生成されていましたが、Bardiche では Preview.html が別の場所(テンポラリフォルダ以下の、ランダムな名前のフォルダ内)に生成されるようになりました。このことに注意が必要です。

つまり、もしあなたが独自に PreviewSource.html の補助となる 外部 css ファイルや js ファイル、画像ファイルなどのリソースを利用したい場合、Preview フォルダにそれらを配置して、例えば

<img src="./externalfile.jpg">

などと相対指定すれば以前は OK でした。しかし、今後は Preview.html が別の場所に作成されるため、この相対パスでの指定では正しく Preview フォルダにたどり着けないのです

確実に Preview フォルダへの絶対パスを得るために、PreviewSource.html の head 要素内冒頭に

<base href="%%%PreviewDirectory%%%/"/>

のように記述してください。Bardiche は、

%%%PreviewDirectory%%%

という文字列を、あなたの Preview フォルダへの絶対パスに置き換えて、Preview.html を生成します。これにより以降の相対リンクの起点が Preview フォルダになります。

カテゴリ: カスタマイズ

Last Modified: