Potome 0.42

• 1. 基礎編
  • 1.1 画像ファイルを指定する
    • 1.1.1 キーボードからファイル名を入力する方法
    • 1.1.2 ドラッグ＆ドロップ
  • 1.2 基準物の大きさを指定する
    • 1.2.1 Known Distance欄への入力
    • 1.2.2 Caliperツール
    • 1.2.3 Coinツール
    • 1.2.4 画像の幅がわかっている場合
  • 1.3 対象物の範囲をマウスで指定する
  • 1.4 オプション
  • 1.5 注意点
• 2. 応用編
  • 2.1 'Known Distance' プリセット値
  • 2.2 オプション
  • 2.3 比の測定
  • 2.4 角度の測定
  • 2.5 開張の測定
• 3. システム要件
  • 3.1 OS
  • 3.2 ブラウザ
• 4. インストール方法
  • 4.1 最新版をダウンロードする
  • 4.1-1 IEの場合
  • 4.2 解凍する
  • 4.3 ブックマークする
  • 4.4. JavaScriptを有効にする
• 5. ライセンス
• 6. 履歴

---

1. 基礎編

• (1) 画像ファイルを指定する
• (2) 基準物の大きさを入力する
• (3) 基準物の範囲をマウスで指定する
• (4) 測定対象物の範囲をマウスで指定する

図1 画面構成
1:ロゴ(help) / 2:画像ファイル名入力欄 / 3:ドロップボックス / 4:画像表示エリア / 5:基準物の大きさ / 6:選択解除 / 7:基準物入力ツール / 8:対象物入力ツール / 9:プログラム欄 / 10:オプションメニュー

1.1 画像ファイルを指定する

いったんブラウザで画像を表示し、そのアドレスをコピーし、 ファイル名入力欄にペーストする方法(1.1.1)が問題が少ないようです。

制限事項

インターネット上にあるPotomeを実行している場合 (アドレスが'http:'で始まる)、 ローカルマシン上の画像ファイルを指定することができません。 セキュリティ関係の制限のようです。 Potomeをダウンロードした場合 (アドレスが'file:'もしくは'C:'等で始まる)は、 ローカルファイルでもインターネット上のファイルでも 大丈夫みたいです。 IEの場合はもう少し複雑。 ダウンロード方法は後述します。

1.1.1 キーボードからファイル名を入力する方法

図1の2がファイル名入力欄です。 ここに手入力するなりペーストするなりしてください。 入力したらタブキーを押すかリターンキーを押して確定してください (ブラウザによってどちらかしか使えない場合があるようです)。

1.1.2 ドラッグ＆ドロップ

別のウインドに表示されている画像をドラッグ＆ドロップで 貼り込むことができる場合もありますが、癖が強いです。 2010年の夏にfix予定のhtml5では、ドラッグ＆ドロップ機能が標準化されるようなので、 そのときにちょっと見直してみたいと思います。 落とせる可能性がある場所は、図1の3のドロップボックス、 もしくは図1の4の画像表示エリアです。

1.2 基準物の大きさを指定する

1.2.1 Known Distance欄への入力

5a欄に 一緒に写し込んでおいた基準物(定規や10円玉等)の大きさを入力します。 数字は半角文字で入力してください。 5b欄でプリセット値(preset values)から選ぶこともできます。 プリセット値はカスタマイズできます。 詳細はカスタマイズ方法を参照してください。 以下では10mmで例を示していますが、 定規の場合は写っている範囲でなるべく大きな値にした方が精度が上がります。 図1の場合だと60mmとかにすると良いです。

1.2.2 Caliperツール

基準物の長さがわかっている場合、Caliperツールを使って、 基準物の開始位置と終了位置をマウスで指定します。 まず、7aのラジオボタンをクリックして、0番の赤いツールを選択します。 次に7cのメニューからCaliperを選択します。
次に画像表示エリアで定規の10mmの範囲をドラッグします。 半透明のプラスチック状のツールは、つかんで移動できます。 中央の三角形のマーク(2)をつかむと角度も変えられます。 他の部分(1)をつかんだ場合は、距離だけ変えられます。 ツール以外の場所をクリックすると、新たにドラッグを開始します。

1.2.3 Coinツール

基準物として丸い物体(10円玉とか)を使った場合、 全体が写り込んでいる場合はCaliperツールが使えますが、 一部分しか写っていない場合にはCoinツールが使えます。 7cのメニューからCoinツールを選択してください。 マウスでドラッグすると円の一部が表示されるので、これをコインに合わせます。 Known Distance(5a)へは、コインの直径を入力してください(10円玉の場合は23.5mm)。

1.2.4 画像の幅がわかっている場合

撮影倍率がなんらかの方法でわかっている場合、 画像の幅が何mmに相当するかがわかります。 例えば、撮像素子の大きさがAPS-Cサイズのカメラで等倍撮影すると、 画像の全体の幅は23.4mmに相当します。 (正確には一度計測しておいた方が良いです)。 この場合、Known Distance(5a)に23.4mmを入力し Measured Distance(7c)のメニューで、'full width'を指定してください (マウスでドラッグする作業が省略できます)。

1.3 対象物の範囲をマウスで指定する

図1の8のラジオボタンをクリックして、1番の黄色いツールを選択します (2番以降でもかまいません)。 次に画像表示エリアで、測定対象の開始位置から終了位置までドラッグします。 図の例では10円玉の直径を測っているところです。
ラジオボタンの右側に測定値が表示されます。

1.5 注意点

まぁ、わかると思いますが、誤差を少なくするために多少の注意が必要になります。
• 被写体と定規の位置が違っている
• 前後に斜めになっている
• レンズの歪み

2. 応用編

2.1 'Known Distance' プリセット値

あなたがいつも使っているものを登録しておくと、作業が楽になります。 JavaScriptのソースプログラムを書き換えるので、 ダウンロードする必要があります。 potome.html と同じディレクトリに、 potoconf.js というファイルがあります。 これをテキストエディタ等で適当に書き換えてください。 エンコーディングはutf-8です。　 '',:等の記号は半角文字です。 プリセット値は、conf.kdistという配列にしまわれています。 内容は値の配列ですが、 文字列中に':'があれる場合は、 ':'以降が値として処理されます。

// 'Known Distance' preset values
conf.kdist = [
  '10mm',
  '20mm',
  '50mm',
  '1円玉: 20.0mm',
  '10円玉: 23.5mm',
  'credit card (W): 86mm',
  'credit card (H): 54mm',
  '人差し指の爪の幅: 11.0mm',
];

2.2 オプション

いくつか表示上のオプションを 画面の一番下に表示されているメニューから変更できます。

n gl	Caliperツールの中心線上にn分割したグリッドを表示します。 網戸の目を数えたりするときに役に立ちます。
n bl	Caliperツールの長さ。
n ts	Caliperツールの大きさ。
n op	ツール全体の不透明度。
n bo	Caliperツール本体の不透明度。
n fs	文字サイズ。変更して体裁が崩れた場合は、リサイズしてみてください。
n cons	デバッグコンソールを表示。普通は使いません。

2.3 比の測定

関数電卓機能が入ってるんですが、使いそうな機能だけ説明しておきます。 式は、図2の3のところに書きます。 p(i,j)は比を測定するための関数です。 D[i]をi番目のツールで測った長さとすると D[i]/D[j]*100を出力します(%)。

2.4 角度の測定

a(i,j)は、角度を求める組み込み関数です。 i番目のツールの始点から終点に向かうベクトルと j番目のツールの始点から終点に向かうベクトルとの角度(小さい方)を求め、 度単位で表示します(ベクトルの内角?)。 Caliperツールの三角形のマークの中に白い点がある方が始点です (図は古い版なので表示されてません)。 方向によって異なる結果になるので注意してください。

2.5 開張の測定

蛾の図鑑で示される大きさは「開張」が使われる場合が多いようです。 開張というのは展翅された標本の横幅で、生態写真から求めるのは若干面倒です。 2つぐらい方法があると思いますが、 一つは、似たような翅形の標本写真からf=<開張>/<前翅長>を求めておき、 f*<測定対象の前翅長>で求める方法。 もう一つは、翅の幅と胴体の幅に分けて測定し和を求める方法。 ここでは後者の方法をPotomeを使ってやってみます。 ws(2,3) = 2*D[2]+D[3]は開張測定用の組み込み関数で、 2番目のツールで片方の翅の幅を測定し、 3番目のツールで胴体の幅を測ると、 結果として開張が求められます。 翅の幅は展翅された時の幅で、展翅の仕方は人により変わるようですが、 後縁が水平になるようにするのが標準的なようです。 グリッドをだして(4)、バーの長さ(5)を長めにした方がやりやすいと思います。 写真の左側にあるグレーの物体の幅は10mmです。 測定された開張は31.4mmになりました (カメラがワイド系コンデジなので誤差は大きいと思います)。 蛾はキマエアオシャクで、某サイトによれば開張は23-32mmとなっており、 いちおう範囲内に収まりました。

図2. 開張の測定

3. システム要件

3.1 OS

JavaScriptで書かれているために、基本的にOSには依存しません。 動作確認したOSは、Windows 2000、Windows XP、 Mac OS 10.5.6です。

3.2 ブラウザ

標準的な4つのブラウザについては動作確認しています。 JavaScriptを有効にしておいてください。

IE

バージョン6、7、8で動作します(IETesterにて確認)。 ただしセキュリティ上のリスクが高いと思われるので、 他のブラウザを使うことをお勧めします。
• バージョン5.5以前では動作しません。
• ネイティブ対応していない機能(canvas)を使っているため若干遅いかもしれません。 canvas機能はhtml5で標準化されるのでそのうち対応すると思いますが。
• インターネットオプションで必要な設定は、 「バイナリビヘイビアとスクリプトビヘイビア」を有効にする、 「アクティブスクリプト」を有効にする、 の2つです。両方ともデフォルトで有効になってます。

Safari

Windows版(3.1)、Mac版(3.2.1)で動作確認済みです。

FireFox

Windows版(3.0.7)、 Mac版(3.0.6)で動作確認しています。 と思ったら、Windows XP のSP2をあてたら表示がおかしくなって、 使い物にならなくなりました。 以前は出てなかった症状だし、Operaも同様なので、 ディスプレイドライバ関係のバグのような気がします。 一部の環境だけかもしれません(SONY VAIO-U50)。

Opera

Windows版(9.64)、Mac版(9.64)で動作確認しています。
• (1) Operaの「ズーム」機能は使えません (表示がおかしくなります)。
• (2) Operaの「ウインド幅に合わせる」は使えません (表示がおかしくなる)。
• (3) ドラッグするときに、 ある程度マウスを動かさないと反応しないので(遊びがある)、使いにくいです。
• (4) 文字サイズを変更したりすると、表示が乱れることがありますが、 ウインドウをリサイズしてみてください。
• (5) その他、ときどきおかしくなります(Operaはバギー)。
• (6) Firefoxと同じく、Windows XPのSP2をあてたら、 表示がおかしくなって使い物にならなくなりました。

Chrome

どこかのバージョンで一度動かしてみましたが、 いちおう動いてました。 エンジンがSafariと同じらしいです。

4. インストール方法

インターネット上にある potome.html でも使える場合がありますが、 ローカルファイルが指定できないとか、いろいろあるので、 以下の手順でインストールして使ってください。
• (1)最新版をダウンロードする
• (1-1)IEの場合いったんリムーバブルメディアにコピーして戻す
• (2)解凍する
• (3)potome.htmlを開く
• (4)ブックマークする

4.1 最新版をダウンロードする

Download ← ここから、最新版(もしくは旧版)をダウンロードしてください。
ファイルに保存するか実行するか聞いてくると思いますが、 いったんファイルに落とした方が良いかもしれません。 どこのディレクトリに落としたかは覚えておいてください。 ファイル名は、 potome-0.42.zip です。

4.1-1 IEの場合

IEの場合はいったんリムーバブルメディアにコピーして戻します。 インターネットからダウンロードしたことを覚えているようで、 この操作をしないとローカルファイルが見れません。 ※どこに情報が保存されているのかわからない。リムーバブルだからかFATだからか。 要確認。

4.2 解凍する

ダウンロードしたファイルは、zip圧縮されているのでこれを解凍します。
解凍するとpotome-0.42 というディレクトリが作られて、 その下に以下のようなファイルが作成されます。

potome-0.42/
potome.html	potome本体
potome.js	プログラム本体
potoconf.js	カスタマイズファイル
excanvas.js	google製IE用canvasエミュレータRev3
sample.jpg	サンプル画像
index.html	本ドキュメントです。
*	その他ドキュメントで使用しているスタイルシートとか画像

4.3 ブックマークする

potome-0.42/potome.htmlをブラウザで開いて、ブックマークしてください。

4.4. JavaScriptを有効にする

デフォルトで有効になっていると思いますが、 なっていないようならばブラウザの設定でJavaScriptを有効にしてください。
IEの場合、通常インターネットオプションのセキュリティのところで設定しますが、 JavaScriptでなくアクティブスクリプトという名前になってます。 ゾーンがマイコンピューターの場合(4.1-1の操作を行うと)は、 設定が別になりますが、たぶんそのままで動くと思います。 ただ、Windows XP の SP2以降から以下のダイアログが出るようになって、 起動するたびに確認を求められます。
セキュリティ保護のため、 コンピュータにアクセスできるアクティブ コンテンツは表示されないよう、 Internet Explorer で制限されています。 オプションを表示するには、ここをクリックしてください
出さないように設定できますが、セキュリティ上のリスクが高くなるので、 お勧めできません。

5. ライセンス

excanvas.js

IEが対応していないcanvas機能のエミュレータです。 Google社が著作権を有しており、 Apache Licence Version 2.0 で配布されています。 詳細は、 googleのサイトを 見てください。

他

excanvas.js以外は私Hepotaが書きました。 良くわかりませんが一応GPL2としておきました。 ただ、書いた本人が良くわからないようなプログラムなので、 利用するのは難しいと思います。

6. 履歴

• 0.42: 2010-4-24 ドキュメントをちょっといじった
• 0.41: 2010-4-23 リリース

7. 連絡先

しばらくサポート用に掲示板を立ち上げておきますが、そのうち閉じるかもしれません。 とりわけ恥ずかしい英語とかを指摘していただけるとありがたいです。
ぽとめ専用掲示板

---

(C) 2010 Hepota