cyic.co.uk 吉田鋳造総合研究所
鋳造所長雑文録
2019/05/12◆『鋳造ちゃんみお案件』と、その顛末
▲home ▲index

ホントは、こうらしい。

  • 「ぜんぜん違うじゃん!」
  • 『…………』
  • 「言ったよね!?すごいライブやるって…なのに、この結果は何!」
  • 『当然の結果です』
  • 「当然?ひどいよ、なんで…私がリーダーだったから?もういいよ、私、アイドルやめる!」
プロデューサーに向かって(?)このように叫ぶのは『デレマス』====ThisIsTheErrorMessege====の登場人物、本田未央(ほんだみお)。らしい。
で、これの派生で、毎週末に競馬をやっては惨敗して「競馬をやめる」宣言を繰り返す「ちゃんみお」というのがあるらしい。こんな風にだ。(すいません1つだけ引用します。いろいろ知りたい方はハッシュタグ「ちゃんみお競馬」で検索を。電車の中で声出して笑っちゃってもしらないよ(笑))。
  • 「ぜんぜん違うじゃん!」
  • 『…………』
  • 「言ったよね!?『メジャエンが府中マイルを逃げ切ることは絶対無理!』って!この結果は何!?」
  • 『桜花賞は騎乗ミス、実力通りなら当然の結果です』
  • 「もういいよ!私競馬やめる!」
そして次の週末になると、また競馬に手を出して「ぜんぜん違うじゃ(以下略。これの集大成同人誌が冬コミで売られているそうで。今年1月に貸してもらったけど、笑い殺す気か(笑)。

で、何が言いたいのかというと。


ある日。とある会場(ピッチ)へのアクセスを知りたくなった。PCは立ち上げてなかったか『だぞんのこし』で使えなかったかで、スマホ『ジャンヌダルク』で「鋳造総研」のピッチページを検索したところ……「あれ?地図のポインターが切れてる」。
上段の広域地図で、範囲内で観戦した他ピッチのガイドアイコンが地図エリアからはみ出していた。PCで視るとこんなことは起きない。間違いない。作った時は確認しているからだ。
なんでなんで?誰が悪いの?と調査開始。自宅にあるギアで見比べてみよう。旧スマホ『鹿目まどか』、タブレット『篠ノ乃箒』、そして旗艦PC『阿良々木火憐』。ギアにアニメキャラの名前がついているのは、そのギアを購入した際に当該アニメとタイアップしたパチ&スロに購入資金調達で大変お世話になったからです(笑)。

ジャンヌ
Xperia
XZ3
まどか
Xperia
XZ
ほうき
ZenPad
かれん
PC
鋳造が持ってるネット接続ギア5つのうち、4つを試して全部違う。重ねてみると、こんな感じ。同じサイトを視ているのに、これだ。
ちなみに、この症状はすべて『やっほーマップ』で起きている。『ぐるぐるマップ』では、同じURLの地図はどのギアでも同じ範囲が出る。これは「やっほー」に問い合わせなれば。すると、戻ってきたのはゼロ回答だった。回答ゼロではなく、ゼロ回答。

「有料サービス会員のみ、サポートいたします」。

  • 「ぜんぜん範囲が違うじゃん!」
  • 『…………』
  • 「同じURLを視てるんだよね!?それがヘンな表示するから質問してるってのに、この対応は何!」
  • 『やっほーはサービス提供業者なのだから、無料サービス会員を邪険にするのは当然の対応です』
  • 「もういいよ!私『やっほーマップ』やめる!」
と鋳造が「ちゃんみおモード」になっても、許されるでしょう。許されるよね?だって『ぐるぐるマップ』ではちゃんと同じエリアの地図が出るんだよ?地図のデザインは『やっほーマップ』の方が圧倒的にわかりやすいんだけど、ギアによって出て来る範囲が違うってんじゃあ、地図ページとしては使いモノにならない。
というわけで、鋳造総研の地図は全部『ぐるぐるマップ』化するという方向で設計の見直しを行っていたのです。そう、
『ぐるぐるマップ』がグレるまでは(笑)。


2019年3月22日の夜、予告はされていたという話もあるけど、突如『ぐるぐるマップ』がグレた。「自分の家の前に巨大な湖が出来た」「線路が海の上を渡り出した」などなどなど。どうやら、ゼンリンとの契約を解消して、画像解析やユーザのデータをもとに地図を作って表現するという遠大な社会実験に取り組み始めたみたい。うん、社会実験は社会実験でいいからさ、そういうのは実験室でやろうよ。どうして、『とても小さくて柔らかいさん』とか『ぐるぐるさん』とかはユーザにバグフィックスさせて平気な顔をしていられるのかしら。わけがわからないよ(キュゥべえ)。まあ、直接は『ぐるぐるさん』にはカネ払ってませんけどね。とにかく、『鋳造ちゃんみお案件』は行き詰ってしまったのでした。


ゆっくり整理してみよう。ぼくが『やっほーマップ』をちゃんみおしよう(笑)とした理由は、ギア次第で表示される範囲が変わるから。ということは、『やっほーマップ』で範囲が変わらないようにすればいいんじゃん。ぴかぁーんっ!アッタマいいっ!でも、どうやって?

これまでの鋳造総研では、こういう仕組みで地図やポインター画像を表示していた。ここでは「可変マップ」という言い方にする。

  1. 地図の中心・ズーム(倍率)の座標(緯度経度)を『やっほーマップ』コントロールに送って地図情報を引き出す。これは可変なのでドラッグで動かしたり倍率を変えたり出来るタイプ。
  2. その地図オブジェクトを指定のdivタグ・ゾーンに設定する。
  3. さらに、バス停等案内や範囲内他観戦ピッチ(ポインター)の座標、それらに表示する透過PNGファイルのアドレスを『やっほーマップ』コントロールに送る。
  4. 戻ってきたオブジェクトを、Javascriptを使って地図オブジェクトに設定する。
  5. 全部設定が終わったところで、ページの読み込みが終わってから実行(windows.onload)するようJavascriptを書く。地図面とポインターは同一画像として一緒に表示される。
  6. だから、範囲がコントロール出来ないと『ジャンヌ』で視た時に地図上部の【掛洞】アイコンの上の方が切れるというようなことが起こる。
しかし、実は鋳造総研のページでは実は「可変マップ」にする必要はない。地図中心やズームは変更出来なくてもいいのだ。そんな需要のために、『やっほーマップ』には「スタティックマップ」というサービスがある(ここでは「静止マップ」という言い方にする)。「ここを中心にこの倍率で地図を出しなさい」というオーダーを『やっほーマップ』コントロールに送るとオーダー結果を静止画に加工した表示用URLが帰ってくる。静止画なので地図の中心も倍率も表示後にユーザーがいじりようがない。
しかし、このやり方には大問題があって、「可変マップ」の『D』のように、バス停等案内や範囲内他観戦ピッチの座標や表示するPNGファイルのアドレスをコントロールに送って「静止マップ」に表示させる機能がない。座標は送れるのだけどユーザ作成PNGファイルを受け付けてくれないので、『やっほーマップ』側が用意する味気ないミナモの顔が上下逆になったようなポインターで表示するしか出来ない。そのポイントに付随する説明テキストの表示も実に味気なく、これでは使えない。さて。

そこで、またしてもぴかぁーんっ!と気づいたわけさ。「静止マップ」はイメージタグを使ってHTML内に書き込まれる。で、CSSの初歩の扱いにdivタグを使って画像の上に文字や別の画像を表示させるというのがある。これじゃん。

  1. まず、表示しようとする地図の中心・ズーム(倍率)から、表示範囲の四隅の緯度・経度を算出し、保管しておく。
  2. 地図の中心・ズーム(倍率)の座標(緯度経度)を『やっほーマップ』コントロールに送って静止地図情報を引き出し、relative設定したdivタグ・ゾーンにイメージ表示する(これは写真画像と同様の静止画像。倍率も中心移動も出来ない)。
  3. バス停等案内や範囲内他観戦ピッチ(ポインター)の座標と、『A』で用意した範囲境界の緯度経度をもとに割合を算出。ポインターが左上を0として下に何ピクセル、右に何ピクセル動かしたところに表示すればいいかを計算する。
  4. absolute設定したdivタグ・ゾーンをポインターの数だけ用意し、『C』で計算した箇所に配置する。
要するに、地図面は『やっほーマップ』にデータを送ってそれを写真を載せるように静止画として配置し、その地図(静止画)の上に表示箇所を計算して、HTML側でピンポイントでレイヤーのように重ねて表示していく(ポインターに関する情報は『やっほーマップ』には送らない、送っても受け取る窓口がないから)。

これで作ったページを、再び『ジャンヌ』『鹿目まどか』『篠ノ乃箒』『かれん』で視てみよう。上にも書いたけれど、地図画像は『やっほーマップ』に中心座標と倍率を送って帰ってきた静止画像、『掛洞』『長良川』など6つのポインター画像は、その画像の上にdivタグのtop、left指定で場所を精密に計算して表示させている透過PNG画像です。

ジャンヌ
Xperia
XZ3
まどか
Xperia
XZ
ほうき
ZenPad
かれん
PC
これで、ギアによる表示範囲の違いはなくなった。『やっほーマップ《解呪ノ儀》』、成功。ふう、長かったよ、ママ。
ちなみに、「静止マップ」の作り方の『A』で触れた「表示範囲の四隅の緯度・経度の出し方」は、『やっほーマップ』コントロールに中心座標と倍率を送って「可変マップ」を表示させると右上隅と左下隅の緯度・経度が拾える関数のようなものがあるので、それを使ってゲットする。手間は増えたけど、ちゃんとした地図が綺麗に出せるのなら手は抜かないさ。

ここでちょっとご注意を。現在、『総研』ピッチ地図を視ると、赤いヘンテコな枠が表示されるところがありますが、あれはその(赤く表示した)範囲を他のページがカバーしているという意味です。ただ、見苦しくなってしまっているページもあるので、それは今後逐次修正いていきます。しばらくお待ちください。

▲top