七つの海のときどき航海日誌
七海生産者商会の会長が徒然と書き留めてみた大航海時代の由無しごと。
このまえの週末から、イベントと海域調査を兼ねて、太平洋を右往左往してました。
イベントといっても「世界周航レース」ではなく「世界周航イベント」の方ですけどね
るるるスタートからすでに2か月が過ぎてますが、
やっとようやくイベントに手を出す気になったのでした。

イベントの中身は、いろんなところから聞こえてきた評判からうちが勝手に想像したのとはちょっと違って、案外シリアス。
マゼランの航海を追体験できるような中々奥深い作りになっててマル○。
少し前に新紀元社TruthInFantasyシリーズの「大航海時代」を読んだうちにとっては、
ますますいろんなお話が思い起こされて、より印象的です。

マゼラン海峡を越えて太平洋へ出ると、雄大な音楽と広大な海が出迎えてくれます。
海や街の音楽はちょっぴり大航海時代IIIを彷彿させるもの。
どれかの曲のリメイクかな~?とか思ったですけど、どうもそうじゃないみたい。
海域調査も兼ねてたので、マゼラン海峡から太平洋を北へ南へ蛇行しながらワンガヌイへ。
極彩色
極彩色の街にしばらくぼお~っとみとれます
季節が変わるのを待ってもう一度ワンガヌイから太平洋を東へ往復。
それから最後の新大陸・オーストラリアを反時計回りにぐるりとまわり、
もう一度季節が変わるのを待って、今度は時計回りにぐるりと半周。
久々に相当長い距離を航海できました
退屈じゃないかって?いやいやそんなことありません。
気持ちは半分かそぞろくらいの意気込みにしておいて、
ぼお~んやりと眺めているとこれほど心地よいものはないですから
陽の光波の音心地よい音色夜空の星々
どれをとっても「心地よい」が一番当てはまる言葉だと思うのですよね。

一通りの調査が終わったので、イベントは途中でほっぽってその足でカリブへ。
商会のみんなで集まって、カリブツアー&いろいろ生産をしてみました。
(写真忘れちゃったのでまたあとで)
うちはボラの民のチュニカを作ってもらって大喜び
これ密かにずーっと着たいな~って思ってた服だったので、喜びもひとしおなのです
ふぃーしゃんとそにやんと3人で並んでみると‥‥
弥生人?
「弥生人?!」
なんか久々にみんなで集まれたのもちょっと嬉しかったのでした♪

集まると言えば‥
太平洋を渡っていて、絶好の遠足ポイントを見つけちゃいました。
またみんなで行けるといいなあ~‥なんて思ったのでした

えーっといきなりのマイナーバージョンアップです
世界周航図をv3.1にアップデートしました~。
変わったところ。

「超軽くなった?!」

見た目はほとんどかわってませんけど、中身はぱわああーっぷ!

うち自身の使い方は、DOLをウィンドウ表示して裏っ側にこの地図をおいといて、
必要になったらその場で使う~といった感じなのですが。
これまでのバージョンだと、地図の上でマウスをぐるぐる動かすだけで、
アラ不思議!DOLの画面がカクカクに!
なんてことになってたのでした‥
それもそのはず、地図の上でマウスを動かすだけで、CPUの使用率が100%まで跳ね上がってたんですから‥

これをなんとかしたいなーと色々試してみてたんですけど、これがなかなか難しくて‥
地図は出来上がってたので、高速化は後回しにしてリリースしちゃった次第なのでした。
それから4日。ちょっと手間暇かかっちゃいましたが、
なんとか出来上がったので間髪入れずリリースしちゃいまーす

結構(そうとう?)軽くなったと思うので、是非一度おためしくらさーい

世界周航図は七海のトップページからどーぞ♪

ここからは技術めも
こっからは自分φ(,_, )メモも含めてちょっと技術的なお話
やったこと
Javascriptでのイベントのリスナの置き方を変えてみました。

これまでは、地図上の全部のイベントをその場で拾って、
イベントを拾うごとに、都市の上かどうかの判断を、
都市のデータが入った配列をぐるぐる回しながら行ってました。
そう。マウスが1px動くたびにです!
Javascriptは単一スレッドでしか動作しない言語なので、
まうすをぐーるぐるなんて動かすとそれこそもう大変。
ジョブは全部キューにたまっていって、これをこなすだけでCPUはおおわらわ
そりゃあCPU占有しちゃいますよ‥と。

そこでちょっと古い手?ですけど、イメージマップを使って、
必要な箇所にだけイベントリスナを配置することにしました。
ただし、わざわざべた書きのイメージマップは使いたくないです
そりゃべた書きだと楽ですけど、後々のメンテナンスがたーいへん!
いちばん初期の頃の地図は、べた書きのイメージマップを使ってたんですけどねぇ。
そこで、イメージマップの中身をJavascript内で動的に生成しちゃおうかなーと。

DOMを使うと、Javascript上からHTML内の全てのオブジェクトを操作できるんです。
これを使って、HTMLに書いた次のタグの隙間にエリア指定のタグを挟み込んでいきます。
<map name="navigator_map" id="event_listener_map">ココ</map>
もちろん、最初はなーんにも書いてないんですよ?

で、タグを挟み込むだけなら楽チンなんですけど、
ただ埋め込むだけだとホントの「文字列」としてしか認識してくれないのです。
やりたいのは、埋め込んだタグに「onmousuover」や「onmousedown」などの
イベントを仕込んでしまうこと。
じつはこの辺は、街や郊外の地図のポップアップですでに実装してあるんですが。
オブジェクトのイベントに関数をバインドしているっていうイメージになるのかな?
こんな書き方。
tagObj.onclick= function() { originalFunction(value1,value2); };
サンプルはこちら。test1.html
(追記:この手法を「クロージャー」というみたいです。 すなわち、
「関数内で宣言した無名関数とローカル変数をカプセル化して利用する技術」ですって)

ただ、この関数の中のvalueがforループの中での変数のばあいは、
このままバインドしても上手く出来ません。
実際にイベントが発生し、関数を評価するときに変数の値を取得しようとするからです。
もちろんそのときはforループが終わったあとなので、変数の中身は思い通りにならず‥
サンプルはこちら。test2.html
要はオブジェクトのスコープが非常にあいまいなんですねえ。
(無いと言っても過言じゃないかも)

Javascript1.7以降ではlet文というのが追加されてるそうですが、
現行のIE6と7はJavascript1.3までしか対応してません。
(参考:JavaScriptのバージョンについて調査)
そこで色々調べてみると‥‥
「with」文と「オブジェクトリテラル」を使った書き方があることが判明
(参考:JavaScriptでブロックスコープを実現する)
forループの中でこれを使ってスコープを限定して記述しなおしたサンプルがこれ。
test3.html
ちゃんと思惑通りに動いちゃいましたあ~

で、要はこれを使って、面倒なエリア指定タグを動的に書いちゃいましたよというお話。
イメージマップを使うことで、必要な箇所以外ではイベントをハンドルしなくなって、
もうそれはそれは、250%(当社比(?))くらい軽くなってるます。
スッキリスッキリ


▲閉じちゃう▲

先日からこつこつと作っていた世界周航図を今日リリースしましたー。
基本的なつくりはあまり変わってませんが、
元々現実のメルカトル図法そのままの地形だったのを
こえたん地図に極力近づくようにせっせとこねまげて。
よりぐぐっと見やすいものになったんじゃないかなぁ~と思います
そのほかにも、足りなかった陸上地図について、
D.K.K.の管理人、ハリさんのご好意を受けて、
D.K.K.さまの陸上地図をお借りできることになりました~。
これでより充実した情報が得られるようになったんじゃないかなあ~
地図は七海の商会HPからどーぞですよ。

まだまだ穴ぼこだらけ、不足している情報は一杯ありますけど、
ゆっくり順番に追加していく予定です~。
これからも末永く生暖かく見守っていただけると幸いです

近頃は裏で地図職人なときです。
新天地航海図が La Frontera 対応のままでほったかしだったので、
時間がちょっぴり出来たのをいいことに、こそこそ地図職人をしています。
とはいえ世界周航もまだ済ませてなかったり‥
土曜からは世界周航レースも始まっちゃいますしねえ。
この機会に遠出でもしてみようかなあ

ええと、地図加工をしていていまさらながらに
初めて気がついたことが出てきました。
うちにすれば2年半以上知らなかったことなので‥
ちょっとメモメモ。

まーなんというか
座標のうらっかわは全部16進数だった

16進数でした。0~Fであらわすアレです。
ちょうど海域の変わり目の座標、あれが全部16の倍数になってるんです。これホント。
まあなんというかねえ‥正しいと言えば正しいのかもしれないけれど
設計をした人はきっと昔からの癖が出ちゃってるんでしょうねえ
某どらくえとかでも「65535」なんて数字がありましたから。
うち的には内部の数字が目に見えちゃうと、
どうにも気持ちが悪くって仕方がないんですけどね

で、どんなふうに16の倍数かというと。
ティレニア海からバレアレス諸島沖へ進むと、海域の境目辺りで、
測量座標が0から16384に変わる瞬間が見られます。
その先ずーっと東へ向かうと、
ジブラルタル沖に入るころに16128、
リスボン沖に入るあたりが15872、
マディラ沖に入るあたりで15616。

海域の境目は前後に誤差があるみたいで、ぴったりとはいかないですけど、
見事に256‥16進数でちょうどFFで区切られてます。
試しに16384を256で割ってみると、むむむ。64‥
出来すぎと言えば出来すぎです
そのほかの海域の境目もよくよく調べてみると、
ぜーんぶ256で割り切れるところにあったりします。

で、この256の倍数に海域の境界線をぴったり合わせるためなんでしょうねえ。
地図をひん曲げたところがいくつも見受けられるわけで
でっぷりふくれたイタリアブーツしかり、
なんだか奥深いメキシコ湾しかり、
妙に張り出した地峡地帯しかり、
とんでもなくいびつなマレー半島しかり、
随分とプレート移動したオーストラリアしかり‥
デザイナさんも苦労しただろうな

白地図
肝心の地図の方は、白地図ベースではほぼ出来上がり状態。
あとは各種情報を盛り込んで行こうと思ってます。
これまでは実際の地図とほぼ同じ形だったのを
歪んだこえたん地図に極力合わせるように書き直したので‥
各種情報も全部書き直しです
めげずにちょっとずつ頑張っていこうとおもってますよー。
この分だと、今月の中頃くらいにはお披露目できるかな~?

そんなにメジャーじゃない個人用あーんど趣味の域を出ない地図ですけど
みなさまにご愛顧いただけると嬉しく思います~


▲閉じちゃう▲