Bitmap Viewer(Netscape Ver.4のみ動作可)

フラットベッド・スキャナーを安く買ったので、その利用方法を考えました。
ほとんど読まないけれども捨てるのにはためらわれる雑誌をスキャナーでとって、保存したらどうだろう。そのイメージファイルの参照をできるプログラムがあったらいいな。ファイルの大きさを考えると、JPEGファイルが圧縮率が高くていいだろう。NetscapeなどJPEGのViewerとしての機能があるからこれを簡単に使えないか。と

　そこで、JavaかJavaScriptを使ってみようと思いました。出来上がりの目標とするプログラムのイメージはAcrobat Readerですが、低機能すぎてちょっと比べられないですね。

サンプル

著作権などで問題が起きないように、ビットマップの解像度は読めないくらいに落としてあります（タイトルくらいならいいんじゃないでしょうか）。まあ、インターネット上で見るにはファイルが大きいと無理なのでちょうど良いのではないでしょうか。

特徴

表示したイメージをマウスでドラッグ&ドロップすると、移動できる。(これがNetscape Ver4でないと動かないでしょう。Acrobatに近い機能にできたと思います。)

ドラッグ＆ドロップに加え、画面の任意の位置でダブルクリックすると移動してその位置から下を表示する様にしました。縦のみの移動です。上方向にしか移動しません。"R"キーとダブルクリックの組み合わせで、上下に移動しながら読むと使いやすいのではないでしょうか。(98/1/25機能追加)

"R"のキーを押すと上下の位置を元に戻します。ズームしている場合には、その大きさで上をウィンドウに合わせて表示します。ただし、この機能はイメージ上を少なくとも一回はクリックした後でないと使用できません。上記のダブルクリックと組み合わせて使用します。(98/1/25機能追加)

イメージのズーム・イン、ズーム・アウトの機能

ページをめくる機能

"N","P","T","E"のキーを押すとページ替えを行う。(もちろんマウスで選択してもOKです。)

リモートから見ることはあまり考えていません。（ビットマップはJPEGでも150Kバイト程度になるので）

サポートするビットマップ形式はNetscapeが表示できるものであれば大丈夫だと思います。圧縮率が高いのでJPEGを使っています。

注意

キーでページ替えを行う場合は、フレームのうちどちらかを選択してからでないと動作しません。

マウスのドラッグ・ドロップで画像が移動する機能はNetscape WindowのResizeなどを行うと、一時的に動作しなくなります。その場合は、Resetボタンを押すとまた動くようになります。

Returnボタンを押すとindex.htmにジャンプします。適当なディレクトリーを作成してその中にindex.htmを作成すると、そのページに戻るようになります。

エラー処理はほどんど書いていないので、ビットマップがなかったりしても、表示されないだけになるはずです。

ビットマップの指定が正しい場合でも、たまに正しく表示できなくなる時があります。その場合はNetscapeを再起動すれば、正しい動作に戻ります。今のところ原因は不明です。

苦労した点

元のHTMLから呼び先のHTMLへパラメータをどうやって渡すかを悩みましたが、Cookieを使用することで解決できました。

HTMLのIMGタグでイメージを読み込むと、実際に読むまではイメージの大きさ(width , length)がわからなかったので、最初に読むときはscreen0.htm、二回目からscreen.htmを読むようにしました。もし、読まなくてもできるやり方を知っている人がいたら教えてください。

IMGタグのwidth,heightを変えてhrefタグによってReloadするので、JavaScriptの変数も初期化されてしまうため、フレームの親フレームに変数をおいて(グローバル変数の感覚ですね)、扱うようにしました。

ファイル構成

• ImgFrame.htm
  • フレームの外枠です。上部：arrow、下部：screen。それぞれのフレームで使用する変数をここに定義しています。

• arrow2.htm
  • ページ替え、ズーム制御などを行うフレームです。文字列でジャンプしていたものをボタンに変更し、arrow2になりました。ページ替え・ズーム制御を行うJavaScriptもここに記述しました。

• screen0.htm
  • イメージファイルを最初に読み込むためのフレーム。これは、読んでみないとイメージのサイズがわからない（と思われる）為にこうしました。

• screen.htm
  • screen0.htmで得られたイメージファイルのサイズをもとにズームする時に使用するフレーム。

• mousedrag.js
  • マウスのドラッグ＆ドロップを行うJavaScript

• setjump.js
  • イメージのディレクトリとファイル名を渡して、ImgFrameを呼び出すためのJavaScript

• cookies.js
  • イメージのディレクトリとファイル名を渡して、ImgFrameを呼び出すためのJavaScript

使用方法

具体的な使用方法は、呼び出す側のHTMLで以下の様に指定するだけです。前準備は一回のみで、それ以降はHREFのTAGを必要なだけ記述してください。ホームページビルダーV3やNetscape composerなどでは、"javascript:xxxx()"の両脇をダブルクォーテーションで自動的に囲んでしまうので、パラメータはシングルクォーテーションで囲む方が良いのではないでしょうか。

Returnボタンを押すとindex.htmにジャンプします。適当なディレクトリーを作成してその中にファイルを置くとよいのではないでしょうか。

• 前準備
  • <SCRIPT src="setjump.js"></SCRIPT>

下のsetjump関数を呼び出す前に"setjump.js"を読み込みます。

• パラメータの渡し方
  • <A href="javascript:setjump('PCW9502/','124.jpg','125.jpg','126.jpg','127.jpg')">サンプル</A>

最初のパラメータはビットマップの入ったディレクトリーで、それ以降はビットマップのファイル名です。ファイル名は最大15個まで指定することができます。これを増やすことはコードの変更により可能です。