個人的なアレなので確実かは分からない。
はじめに
号やらlbやらgやらなんやらを把握するための内容。鵜呑みにするかどうかは自己責任。
尚、知識をしっかり入れてもメーカーによって表記と実際が異なってる場合があるらしい。その辺はザルというか、各々の許容する誤差の違いというか、そういうもんなんでしょう。複数メーカーでブレンドすると噛み合わないところがあったりするんで、実用的なことをいえば統一するか決め打ちするか受け入れるかで落とし所を作るのがいい。
で、表は色んなところが公開してるけどいちいち見に行くのがめんどいというか、1ページに全部収めてしまったほうが個人的に便利だなって思ったりして。多分どっかにそういうのはあるんだろうけど、ねえ。
オモリ関係
号数とグラム
1号あたり3.75g。
なので、号数*3.75で対応するグラム数が出るし、グラム数/3.75で号数が出せる。
一覧を作る場合
画像で作れば使うときは引っ張ってくるだけで便利だけど、その作るのがダルい。illustratorとかphotoshopで作るのは向いてない。officeもめんどい。Excelだけが計算式を使えるのでまだ楽かなって感じはするけど装飾の調整がダルい。
じゃあ環境はHTMLにして、中身はphpかjsで出力させるのが楽なんじゃない？って思った。あながちズレてないと思う。で、phpだとローカル環境でプレビューできないのでjsで作るのが楽だよねっていう。SEO目当てならphpで組んだほうがいいと思うけどね。
Excelでconcatとかを使ってhtmlを作るのも手なんだけど、一括で作るときにはそれなりに強いんだけど、後から改修したい時の柔軟性に欠ける。数値は変わらないけど、レイアウトを変えたい時があるかもしれない。
まずtableを用意する。
<table id="omori">
<thead><tr><th>号</th><th>グラム</th><th>号</th><th>グラム</th><th>号</th><th>グラム</th><th>号</th><th>グラム</th></tr></thead>
<tbody></tbody>
</table>theadで見出しを作って構成を決める。2行または2列で延々伸ばしていくのは見るのがだるすぎるんで、1～10号、11～20号って具合に列を分ける。今回は40号まで。
tbodyはjQueryでappendするための枠なので中身は入れない。まあ.append()の仕様上、単に氷を作るだけならtheadとtbodyで分けなくてもいいんだけど、念のため。tfootを後で入れたくなったときに困るしね。
$(function(){
for (var i=1; i<=10; i++){
let go_1 = i;
let go_2 = go_1 + 10;
let go_3 = go_1 + 20;
let go_4 = go_1 + 30;
let gram_1 = 3.75 * go_1;
let gram_2 = 3.75 * go_2;
let gram_3 = 3.75 * go_3;
let gram_4 = 3.75 * go_4;
$('table#omori tbody').append('<tr><td>'+go_1+'</td><td>'+gram_1+'</td><td>'+go_2+'</td><td>'+gram_2+'</td><td>'+go_3+'</td><td>'+gram_3+'</td><td>'+go_4+'</td><td>'+gram_4+'</td></tr>')
}
})こんな感じになる。ちょっと作るくらいならこんな程度でいいんじゃないですかね。頑張ればもっとシンプルになる。それは後述の表で出てくる。
装飾に関してはお好きにどうぞで、:nth-child()を使えば足りるんじゃないのみたいな。装飾とか列数の追加とかででかい表になった場合、スマホからだと見づらいんで要素内でスクロールできるプラグインを入れるのもあり。cssだけでも完結できるけど使い勝手はこっちの方がいいと思う。
画像作るのも作ったのをスクショしたら楽じゃないですかね？
計算できるようにする場合
あんまりないと思うけど、指定した号数でグラムを出したいとか、指定したグラムで号数を出したいとか。そういうのがあれば便利だってことは無いこともない。で、フォームタグを使えばその辺は解決する。
号数指定とグラム数指定それぞれ作ることにする。
動作イメージとしては、selectで選んだものに対応するものを出力する。選択じゃなくて入力でもいいかなと思ったりもしたけど、詳細は出せるようになるけど、実用性的に微妙じゃない？って思ったり。
<table id="omori_form">
<thead><tr><th>号</th><th>グラム</th></tr></thead>
<tbody>
<tr><td><select name="select_go"></select></td><td><input type="text" name="output_gram"></td></tr>
<tr><td><input type="text" name="output_go"></select></td><td><select name="select_gram"></select></td></tr>
</tbody>
</table>selectを採用したので発火トリガーは.change()を使う。入力だったら「計算する」ボタンを作ってclickとかで発火するのがいいかも。
$(function(){
//option生成
for (var i=0; i<=100; i++){
$('table#omori_form select[name="select_go"]').append('<option value="'+i+'">'+i+'号</option>');
let gram = 3.75 * i;
$('table#omori_form select[name="select_gram"]').append('<option value="'+gram+'">'+gram+'g</option>');
}
//計算
$('table#omori_form select[name="select_go"]').change(function(){
let answer = $(this).val() * 3.75;
$('table#omori_form input[name="output_gram"]').val(answer+'g');
})
$('table#omori_form select[name="select_gram"]').change(function(){
let answer = $(this).val() / 3.75;
$('table#omori_form input[name="output_go"]').val(answer+'号');
})
})せっかくjQueryを使うんだから、<select>の中身もそっちでやってしまうことにする。<option>の数はforで指定できるからいくらでも増やせる。すごい。計算は単純に算数をして出力するだけ。凝ったことは必要ない。
ガン玉関係
GやらBやらある。ぱっと見、Gは一つ上がる毎に+1/3っぽい。
段打ちとかするからベタ打ちでそっちを作るのがいいかもしれない。
強度関係
ポンド（lb）、kg、オンス（oz）
糸とかでしばしばポンドが出てくる。日常で馴染みがないからkgで言ってくれと思ったりする。ルアーとかになるとオンスが出てきて何なんですかって感じがしたりする。生活圏によって全く関わらない単位なんで、めっちゃ混乱する。
まず知っておくべきは「16oz = 1lb」、つまり16進数。
グラムとポンドは食い合わせが悪いのできっちりした数字同士で見比べられない。一般的に見る換算表は四捨五入されてるやつ、ということになる。なので厳密なところを求めたいならむしろそっちの単位に慣れろという感じになる。
1lbは0.45359237kg、だから1kgは2.204622621848776lb。
ということにする。なんかめっちゃある。今回採用したのは「国際ポンド」というもの。小数第5位までは同じなので誤差といえば誤差だけど、数値がデカくなれば無視できない。だるい。
表
1lbまでの表
ozを使うのは1lbまで。なのでその部分だけ。
まずは1ozまで。ルアー系は1/16ozとかある。kgだとかなり小さくなるのでgで表示。
<table id="list_02">
<thead><tr><th>oz</th><th>lb</th><th>g</th></tr></thead>
<tbody></tbody>
</table>$(function(){
for (var i=1; i<=16; i++){
let oz = i / 16;
let lb = oz / 16;
let g = Math.round(lb * 0.45359237 * 100000000) / 100000;
$('table#list_02 tbody').append('<tr><td>'+i+'/16</td><td>'+lb+'</td><td>'+g+'</td></tr>')
}
})1oz～1lbまで
<table id="list_03">
<thead><tr><th>oz</th><th>lb</th><th>kg</th></tr></thead>
<tbody></tbody>
</table>$(function(){
for (var i=1; i<=16; i++){
let lb = i / 16;
let kg = Math.round(lb * 0.45359237 * 100000) / 100000;
$('table#list_03 tbody').append('<tr><td>'+i+'</td><td>'+lb+'</td><td>'+kg+'</td></tr>')
}
})g、kgともに長すぎるので小数第5位で四捨五入。四捨五入（round）は小数点以下を切るっぽいので残したい桁を掛けて、割って戻す。kgがベースになってるのでgを出すところは桁を変えてある。
表を作って思ったんだけども、ここにlbは多分、そもそも要らない。多分わざわざ書くとしても数値よりも分数で出した方がいい気がする。
1lb以降
1lb以降はozを外す。多分いらないから。lbとkgのやつは結構ピンキリで確認することがあるので大変。
<table id="list_04">
<thead><tr><th>lb</th><th>kg</th><th>lb</th><th>kg</th><th>lb</th><th>kg</th><th>lb</th><th>kg</th><th>lb</th><th>kg</th></tr></thead>
<tbody></tbody>
</table> for (var i=1; i<=10; i++){
let lb_1 = i;
let lb_2 = i + 10;
let lb_3 = i + 20;
let lb_4 = i + 30;
let lb_5 = i + 40;
let kg_1 = Math.round(lb_1 * 0.45359237 * 100000) / 100000;
let kg_2 = Math.round(lb_2 * 0.45359237 * 100000) / 100000;
let kg_3 = Math.round(lb_3 * 0.45359237 * 100000) / 100000;
let kg_4 = Math.round(lb_4 * 0.45359237 * 100000) / 100000;
let kg_5 = Math.round(lb_5 * 0.45359237 * 100000) / 100000;
$('table#list_04 tbody').append('<tr><td>'+lb_1+'</td><td>'+kg_1+'</td><td>'+lb_2+'</td><td>'+kg_2+'</td><td>'+lb_3+'</td><td>'+kg_3+'</td><td>'+lb_4+'</td><td>'+kg_4+'</td><td>'+lb_5+'</td><td>'+kg_5+'</td></tr>')
}ここに来てjsに限界というか非効率っぽいのが見え始める。パターンに入ってるのにチクチク書くのはダルい。非効率じゃん？ってなる。
なのでこうなる。
function lbkgMath (e){
return Math.round(e * 0.45359237 * 100000) / 100000;
}
for (var i=1; i<=10; i++){
let outputTable = '';
for (var i2=1; i2<=5; i2++){
let lb = i+(i2-1)*10;
let kg = lbkgMath(lb);
outputTable = outputTable + '<td>'+lb+'</td><td>'+kg+'</td>';
}
$('table#list_04 tbody').append('<tr>'+outputTable+'</tr>')
}かなりスッキリした。
各セル毎に変数を作るのをやめた形。lbとkgのセットをひたすら回す。
10行作ることにしてるから大枠を10回分のforにして、各行を作って.append()する。
各行の中にはlbとkgのセットを5個作る（1～、11～、21～、31～、41～）ので、それもforで生成。だから数値出力用の変数は2つになる（lb、kg）。連番（i2）を活用してlbの中身を作って、kgはそのlbを使って計算。計算式は直接書いてもいいけどせっかくだから関数（lbkgMath）にしてある。forから抜けた後に.append()に突っ込むために、それ用の変数を作成（outputTable）。
変数の宣言が3つになったので楽。
出力する内訳を変更したければここをいじる。
for (var i2=1; i2<=5; i2++){終了が「5」になってるので「50lbまで」出力。「10」にすれば「100lbまで」になる。
同じ感じで、例えば開始を「21lbから」にしたければ「1」のところを「3」にする。
列数を変えるなら<thead>も対応させなきゃいけないので注意。アレだったら<thead>もjsで書き出しちゃっていいんじゃないかな。開始と終了の差で回して出力すればいい。
ということで以下、lbとkgの表の完成形。
<table id="list_04">
<thead></thead>
<tbody></tbody>
</table> function lbkgMath (e){
return Math.round(e * 0.45359237 * 100000) / 100000;
}
let rowFirst = 1;
let rowLast = 10;
for (var i=1; i<=10; i++){
let outputTable = '';
for (var i2=rowFirst; i2<=rowLast; i2++){
let lb = i+(i2-1)*10;
let kg = lbkgMath(lb);
outputTable = outputTable + '<td>'+lb+'</td><td>'+kg+'</td>';
}
$('table#list_04 tbody').append('<tr>'+outputTable+'</tr>')
}
let thead = '';
for (var i3=0; i3<=rowLast-rowFirst; i3++){
thead = thead + '<th>lb</th><th>kg</th>';
}計算
やることは難しくないんだけど面倒がすごい。表と同じく分ける。まとめると非常にめんどくさい。
まずは1ozまで。
<table id="form_02">
<thead><tr><th>oz</th><th>lb</th><th>kg</th></tr></thead>
<tbody><tr><td><select name="select_oz"></select></td><td><input type="text" name="output_lb"></td><td><input type="text" name="output_kg"></td></tr></tbody>
</table> for (var i=0; i<=16; i++){
$('table#form_02 select[name="select_oz"]').append('<option value="'+i+'">'+i+'/16</option>');
}
$('table#form_02 select[name="select_oz"]').change(function(){
let answer_lb = $(this).val() / Math.pow(16,2);
let answer_g = Math.round(answer_lb * 0.45359237 * 100000000) / 100000;
$('table#form_02 input[name="output_lb"]').val(answer_lb+'lb');
$('table#form_02 input[name="output_g"]').val(answer_g+'g');
})「/ Math.pow(16,2)」は16の2乗で割るという意味。「/ 16 / 16」よりもかっこいい。
1oz～1lbまではこう。
<table id="form_03">
<thead><tr><th>oz</th><th>lb</th><th>kg</th></tr></thead>
<tbody><tr><td><select name="select_oz"></select></td><td><input type="text" name="output_lb"></td><td><input type="text" name="output_kg"></td></tr></tbody>
</table> for (var i=0; i<=16; i++){
$('table#form_03 select[name="select_oz"]').append('<option value="'+i+'">'+i+'</option>');
}
$('table#form_03 select[name="select_oz"]').change(function(){
let answer_lb = $(this).val() / 16;
let answer_kg = Math.round(answer_lb * 0.45359237 * 100000) / 100000;
$('table#form_03 input[name="output_lb"]').val(answer_lb+'lb');
$('table#form_03 input[name="output_kg"]').val(answer_kg+'kg');
})1lb以降はこんな感じで。selectじゃなくてinputでやってみた。
<table id="form_04">
<thead><tr><th>lb</th><th>kg</th><th></th></tr></thead>
<tbody>
<tr><td><input type="text" name="input_lb"></td><td><input type="text" name="output_kg" readonly></td><td><button name="calckg">計算</button></td></tr>
<tr><td><input type="text" name="output_lb" readonly></td><td><input type="text" name="input_kg"></td><td><button name="calclb">計算</button></td></tr>
</tbody>
</table> $('table#form_04 button[name="calckg"]').on('click',function(){
let answer_kg = Math.round($('table#form_04 input[name="input_lb"]').val() * 0.45359237 * 100000) / 100000;
$('table#form_04 input[name="output_kg"]').val(answer_kg+'kg');
})
$('table#form_04 button[name="calclb"]').on('click',function(){
let answer_lb = Math.round($('table#form_04 input[name="input_kg"]').val() * 2.204622621848776 * 100000) / 100000;
$('table#form_04 input[name="output_lb"]').val(answer_lb+'lb');
})どっちで計算するかで掛ける数が変わる。両方とも桁が多いので四捨五入。
ナイロン・フロロカーボン強度
糸において、ナイロン・フロロは同一規格で計算されてる便利ですね。
号数はよくlbに置き換えられるのだけど、よくわかんない。というのも、「号数*4=lb」っていう感じだけどこれは目安で、実際には誤差がある。号数が上がるほど誤差はデカくなって無視できなくなる。でもって、強度はメーカーとかでまちまちなのでやっぱりアテにならない。10号までは許容範囲らしいけど、表を作ってもしょうがない気がする。どうなんですかね。
表
<table id="list_05">
<thead><tr><th>号</th><th>lb</th><th>kg</th></tr></thead>
<tbody></tbody>
</table> for (var i=1; i<=10; i++){
let go = i;
let lb = go * 4;
let kg = Math.round(lb * 0.45359237 * 100000) / 100000;
$('table#list_05 tbody').append('<tr><td>'+go+'</td><td>'+lb+'</td><td>'+kg+'</td></tr>')
}計算はいらない気がしてる
PE
PEは「号数*20=lb」だとか。ナイロンとかと比べると5倍強い。
<table id="list_06">
<thead><tr><th>号</th><th>lb</th><th>kg</th></tr></thead>
<tbody></tbody>
</table> function list06_lb(e){ return e * 20; }
function list06_kg(e){ return Math.round(e * 0.45359237 * 100000) / 100000; }
for (var i=1; i<=10; i++){
let go = i / 10;
let lb = list06_lb(go);
let kg = list06_kg(lb);
$('table#list_06 tbody').append('<tr><td>'+go+'</td><td>'+lb+'</td><td>'+kg+'</td></tr>')
}
for (var i=1; i<=10; i++){
let go = i;
let lb = list06_lb(go);
let kg = list06_kg(lb);
$('table#list_06 tbody').append('<tr><td>'+go+'</td><td>'+lb+'</td><td>'+kg+'</td></tr>')
}PEは1号未満もあるので、最初にそれを記述。
ちなみに0.1を計算で出すときは「 / 10」にすべきで、「 * 0.1」はやらない方がいい。変になる時がある。
3 * 0.1
//0.300000000000000042進数を10進数で処理してるからっていう、jsの都合が絡むらしい。普段こういうことをやらないので今はじめて気がついた。
覚えてないうちはナイロンとPEを表で比較したいことがあるんで、別々に作るよりはまとめた方が見やすいかも知れない。まあでもそうすると、何を基準にするかって話になってそれもめんどい。
糸の太さ
ナイロンとかの太さは号数によって決まりがあるらしい。個人的にそんなのどうでもいいって感じなので気にしてない。で、太さは日本釣用品工業会が定めてる。対応してるかどうかは会に組みしてるかってのがあるし、やっぱり誤差はあるし、一般ユーザーは気にするところじゃないと思う。
一応、1号の倍の太さが4号、3.5号の倍が14号、4号の倍が16号ってことで、係数が分かれば組めるんだけど、まあ、規格として出されるとそのまま倣うのがいいんでないかなと思ったり。
同じようにPEにもなんかそういう規格があるっぽい。
まとめ
いい感じのデザインが思いつかなかったんで組み方だけまとめたんだけど、振り返ってみるとjsの入門にいいんじゃない？って感じのポイントが多かった。やることが地味に増えていったり新しいことを取り入れたりで、ゲームのステージ難易度を上げる感じみたいになってる。
作らなくて良さそうな点とか組み合わせたらもっと良さげな気がする点とかも見えたんで、いきなり組み上げなくて良かったなーって思った。
20230111追記：組んでみた
スマホで見ることを前提にしてやってみた。
使い勝手的にどうするのがいいか、まだイメージが具体的になってない。
とりあえずのとこで、計算はあんまり使わない気がする。
フカセだと糸の号数は小数以下で刻む（.5、.75とか）ので対応すべきか。とはいえ刻むのは一部なんで、作るときにベタ打ちはダルいけど見ることを考えたらそうした方が早いのかも（コピペで済むし）。
並べるよりもタブとかポップアップとかページ単位で切り分けた方がいいのか。
仕掛けをパターン化できる程度に慣れるとこういうのはなくても平気になってくるもんで、必要性が薄くなってウケの良さがよく分かんなくなってるような感じがある。
コメント