A世界MAP－全体－のバックアップ(No.12) - 飛天オンライン-Wiki

[ ホーム | 一覧 | 単語検索 | 最終更新 | ヘルプ ] [ 新規 | 編集 | 差分 ]

＃html2 プラグインを用いた表示方法
Macromedia Flashを用いた表示方法
従来の表示様式
まとめ
- 制作意図（Flashとhtml2プラグイン利用の図）
- 頂いたご意見の集約
  - 全体表示MAPについてのご意見
  - 個別表示MAPについてのご意見
コメント・案など募集

■世界MAPの表示方法についての模索です■

いろいろやってみましたが、どうも#html2プラグインは管理者のみ編集設定じゃないと動かないみたいです。 Flashで作るかなぁ。他に方法とかあればのせてみてください。

＃html2 プラグインを用いた表示方法

対象リンクは設定していない。座標のみ

１青海　２北区　３玄火　４東海　５百草　６建木　７雲夢　８銅角９龍棲　10南区　11仏山　12崑崙　13長陽　14広霊　15ヴァルナ

上記内容は編集を容易にするためhtml内にどのエリア指定がどのMAPに該当するかをあらかじめ示した。（順番は適当。）

＃htmlプラグインも＃html2プラグインも管理者のみ編集可設定でないと効果を発揮しないためこの試みは無駄になった。

＜タグ説明＞　<AREA shape="形（polygon:多角・rect:四角）" coords="座標" href="リンク" alt="マウスオーバー時に表示">

#html2(){<img src="http://hitenonline.gamedb.info/wiki/?plugin=ref&page=%C0%A4%B3%A6MAP&src=%C1%B4%C2%CEMAP.png"
usemap="#MAP" width=600 height=480 border=0>
<MAP name="MAP">
 <AREA shape="polygon" coords="193,163,219,150,264,163,269,175,269,188,274,196,277,199,279,211,273,212,269,227,263,237,263,247,270,253,273,262,268,270,255,275,234,265,227,262,213,269,192,267,186,257,188,253,182,240,184,240,183,226,185,222,194,208,192,192,190,180,190,165" href="" alt="青海湖盆地">
 <AREA shape="polygon" coords="268,126,273,145,280,152,266,164,273,176,272,188,278,194,289,197,292,175,348,174,350,196,352,193,366,194,374,173,380,155,374,138,365,137,350,125,330,124,324,119,315,109,299,111,290,124,285,123,282,113,278,111,274,122,271,123" href="" alt="長陽北区">
 <AREA shape="polygon" coords="359,208,362,215,380,219,384,240,380,244,401,248,422,244,435,260,463,259,484,253,489,258,497,251,497,235,488,231,484,219,489,198,494,194,488,181,479,170,470,147,461,157,433,160,422,157,421,168,410,182,409,198,386,210,358,209" href="" alt="玄火山脈">
 <AREA shape="polygon" coords="483,170,495,190,491,204,486,219,489,231,499,236,498,252,516,257,524,250,545,249,564,226,562,211,577,191,580,189,559,175,541,178,528,164,516,164,512,167,494,165,483,170" href="" alt="東海平原">
 <AREA shape="polygon" coords="435,261,462,261,482,254,493,262,499,272,506,276,503,296,515,299,528,299,531,305,516,325,511,320,497,320,441,317,434,297,427,295,431,279,434,261" href="" alt="百草平地">
 <AREA shape="polygon" coords="380,291,379,296,372,304,375,316,381,317,389,334,372,353,373,361,385,364,395,383,409,390,415,396,441,383,442,319,433,298,409,296,381,293" href="" alt="建木の林">
 <AREA shape="polygon" coords="274,278,269,289,273,304,250,311,248,326,252,332,269,337,278,337,292,362,313,365,326,358,339,355,354,351,371,353,387,333,381,319,371,315,370,303,377,298,378,291,371,283,365,291,343,292,321,284,297,293,285,291,275,279" href="" alt="雲夢平原">
 <AREA shape="polygon" coords="198,269,178,286,177,302,168,314,179,347,198,349,227,350,229,356,238,360,263,339,252,335,246,319,251,309,270,303,267,287,274,276,269,271,256,275,230,264,221,268,199,269" href="" alt="銅角山">
 <AREA shape="polygon" coords="133,250,134,262,104,276,97,292,103,308,106,308,116,324,120,338,172,340,166,314,174,303,176,287,195,268,179,253,169,246,151,245,149,250,136,249" href="" alt="龍棲山">
 <AREA shape="polygon" coords="292,209,272,213,266,236,272,250,276,262,271,270,288,291,319,282,346,291,363,289,372,275,365,257,361,255,379,240,381,223,364,217,357,209,350,209,350,241,293,241,291,210" href="" alt="長陽南区">
 <AREA shape="polygon" coords="313,366,326,379,329,393,322,401,311,396,304,414,315,418,315,424,337,433,360,422,394,422,403,408,388,396,387,389,374,387,367,377,372,355,362,354,346,354,339,357,325,359,314,365" href="" alt="仏山">
 <AREA shape="polygon" coords="79,197,65,224,48,237,56,281,67,280,98,283,103,276,123,266,132,262,131,250,139,245,147,246,149,230,143,226,131,211,115,211,100,198,80,199" href="" alt="崑崙山">
 <AREA shape="rect" coords="294,178,346,238" href="" alt="長陽城">
 <AREA shape="rect" coords="443,322,496,383" href="" alt="広霊鎮">
 <AREA shape="rect" coords="173,353,226,413" href="" alt="ヴァルナの谷">
</map>}

Macromedia Flashを用いた表示方法

いろいろ試しながらだったので、そして境界線などがあいまい。
地図上をワンクリックするとアクティブになります。
範囲をマウスオーバーで白字がオレンジ色になるようにしました。
従来のものと同じく該当箇所クリックで、拡大地図を表示。targetは_self。
Flash player9で表示調整。
表示方法はwiki内のFlashページを参考とし、「＆flash」を用いて行った。
編集用ファイル（.fla）は必要があればUPする。280KB。
swfのsize:603.9×479.95　File size:57.5KB
寝助でFlash中の文字が見えないと報告あり。
IE6.x以降、OPERA、Lunascape、火狐で動作確認。

従来の表示様式

※MAPクリックで拡大MAPを表示
　地域名クリックで各地域詳細ページへ

		青海湖盆地	← →	長陽北区
				↑↓
				長陽城
				↑↓
			← →	長陽南区	← →	玄火山脈			← →	東海平原
		↑↓		↑↓				↑↓
龍棲山	← →	銅角山	← →	雲夢平原				百草平地	← →	万寿山五荘観
								↑↓
					← →	建木の林	← →	広霊鎮
		↑↓
		ヴァルナの谷

まとめ

制作意図（Flashとhtml2プラグイン利用の図）

従来の表示様式のようにwiki内で定められた大きさの画像をテーブルを用いて行うと、以下の点で一見把握しづらい感がある。
- 北区・南区・長陽城・青海の位置関係
- 仏山実装の際に問題となる、雲夢、建木、広霊、仏山の位置関係

⇒小マップの大きさを変えてテーブルで表示させることは可能だと思います。100×100の設定を崩せばいいだけですけど。あとでやってみましょう

世界MAP コメントで「画像を背景指定して上に文字が書けるなら、全体マップから直接飛べるよう出来る」というコメントがあったため、挑戦してみた。

各マップの詳細を地域名リンクでで載せた表示、全体マップを小マップで表示させ、さらに公開済みの全体マップを掲載するのであれば
全体マップは載せる必要ではないのではないかと愚考した末。では位置関係を正確に把握できる全体マップを用いて詳細地図を参照させることはできるのかな？と思い立ったため。
Flashで作成したのは必要があってそうしたからで、動きがあるからどうっていうことではありません。見やすさというものよりもwikiで表示できる形式であるかというところを重視しております。

頂いたご意見の集約

全体表示MAPについてのご意見

小マップを並べて世界マップのように置く表示のほうがユーザが現在の位置をつかみやすい。
二つ作成して二つとも並べておけばいいと思う。

個別表示MAPについてのご意見

詳細地図画像に隣接するMAPのin/out表示をはっきりつけてほしい

コメント・案など募集

とりあえず以上の2つの案を提示。 -- g-ao- 2007-08-14 (火) 13:44:54
ご苦労様です。こちらの件については一任させていただきますので、よろしくお願いします。 -- 管理人S 2007-08-14 (火) 15:40:52
従来のものについても提示。各表示方法について、「ここをもうすこしこうすればどうなる？」とか、
利用者の主観で現時点でどれが見やすいか。などご意見いただければ幸いです。
即決じゃなく、ある程度の期間で意見がとれればいいかなぁと思ってます。-- g-ao- 2007-08-14 (火) 17:32:13
従来の形式を編集していた者です。フラッシュなどで見やすくするのはすごく良いと思うのですが、元々小マップを並べて世界マップのように置く表示は、小マップを見た際にどこに居るかわかりやすくするためだと自分は思っていたので、フラッシュ表示させるにしても小マップを繋げた画像を用いた方が良いかと…。g-ao-さまが作成なさった全体マップからのリンクだと、失礼ながら地域名を文字で並べた表示形式で事足りるように感じました； -- R 2007-08-14 (火) 23:59:32
二つ作成して二つとも並べておけばいいと思う。使用目的によってどっちを見るかは各自の自由で。ただ詳細地図の方にクリック拡大した時に各地図の隣接MAPのin/out地点（A地図の1出口がB地図の1入口、A地図2出口がB地図2入口）を明記してあったらいいかな。 -- 名無し? 2007-08-16 (木) 11:32:43
頂いた意見は集約して箇条書きにします。なお、私が作ったものについても制作意図を書いてないのでそれも今からかきます。-- g-ao- 2007-08-16 (木) 17:08:39
客観的に見ると、地域名を文字で並べた表示方法では全体的なMAPの構造把握ができませんので、自分がどこにいるのかとどこに行きたいのかがわからなくなると思います。
それと一緒と言われるとちょっと悲しくなってくるのですが、私個人としましては、場合によっては作ったフラッシュがお蔵入りになっても何ら困ることはありません。
肝心なのはご覧になられる方がどう使われるかですね。-- g-ao- 2007-08-16 (木) 19:26:39

お名前: