ナレッジ

, コメント: 0

イラストレーターとHTMLで摩耶_長峰山詳細登路図(仮)のクリッカブルマップを作ってみる。

まだ試作段階で改良の余地はあるものの、例えばこんな地図はいかがでしょうかということで作ってみました。「摩耶_長峰山詳細登路図」。(なるべく忠実に再現したつもりですが単にMuscleの歩いた場所を個人的にまとめたものなので、各々詳細は保証できません。ご了承ください。「記録の付け方」の1つとして読んでくだされば幸いです。

下準備

    1. 手持ちのアドビイラストレーターCS6を使ってチマチマとベースとなるマップを作る。
    2. WEB用に展開できるように“記入した文字や作ったパーツを選択し、属性からイメージマップのURLを与えて”おく。
    3. イラストレーターのアートボードサイズはPCで大きく表示させるため2000ピクセル×2500ピクセルにしてみる。※1920ピクセルでも良いかと思う。

※文字については水平・垂直で配置する方が良いことがわかったのでそのようにしています。1.のベースを作るのがある意味アナログなので少々手間だけど、できてしまえば、新たに歩いたところ、または間違いがあったところを更新しデータを差し替えていくだけで作業時間はさほど掛からない。

印刷を想定したPDFバージョン

基本的に印刷も想定した地図なので、JPGは不向き。というわけで、作成したイラストレーターデータをPDFで一旦保存する。別途サムネイル用にJPGデータ(後述)を使う。JPGをクリックするとPDFデータが開くように設定する。できたのがこれ。※等高線を入れると一気にデータが重くなるのが難点。しかし等高線を省くとそれはそれで微妙か…。※ルート、名称など初期段階から追加・変更しています。


※イラストレーター上でなくともAcrobatを使ってこのPDFデータの各文字、あるいはパーツにリンクを貼ることも可能。がしかし、少なからずルートが増えていくため、元のイラストレーター地図を更新すると、PDF上では別途リンクを“一から”作り直さなければならない。それはあまりにもアホらしいので却下(イラストレーター上では上書きされていくので問題ない)。

WEB用に展開する

ここからがある意味本番。作ったデータをWEB用に展開する。手順としては…

  1. イラストレーターのデータをJPGで書き出す。「各アートボードごと」「JPG形式」「カラーモードRGB解像度72」「イメージマップ-クライアント側」とする。※解像度は上げたいところだけど、72dpi以外だと座標が崩れる
  2. データを書き出すと任意の場所に.jpgデータと.htmlデータが保存される。※htmlが指定しているイメージソースはそのjpgなのでサーバーにアップする際はアップされた画像のURLに変えておく必要がある。
  3. ここから別途.htmlデータを編集する。基本的には何もしなくても良いんだけど、任意のリンクを「小窓」で開けるようしたい。生データの「href=”#”」の部分を「a href=”#” onclick=”window.open(‘#’のように変更する。※数が多いのでなるべく一括変換を活用する

アップしたJPGデータはPDFのサムネイル表示用に別途流用。htmlデータについてはボタン式にしてもいいし、トップメーニューなどに貼っておくのも良いかも知れない。お好きなように。例えばボタンなら下のような感じ。

WEB用の地図はコチラから

岩などのオレンジ色の文字・滝などの紺色の文字は写真に、文字の先頭の印はでパノラマビューに、印はYouTubeに、それぞれ小窓でリンク。 尾根・谷筋は山行記録(ヤマレコ含む)にリンクしています。
リンクする写真についてはしっかりキレイなものを撮り直したいところ。

ちなみに通常のフレーム内に表示させると下のこんな感じ。スクロールで移動というのがなんだか狭苦しい。却下かな。


上のように好みによって気が向けばカラーリングなど装飾を楽しんでも良いかも知れない。Muscle的にはシンプルなのが好きだけど。データを足すごとに容量が重くなるので要検討。
しかし改めて見るとまだ歩いていない空白地帯があるなぁ。まだまだ行けそうなところは多い。がんばろ。


そのうち再度谷あたりまでは作ろうかなぁと思って、踏査済分の線だけ引いてみている。しかし思い出してみると、生田川の西側はそこまで絵になるような道はないなぁ。まぁ気長にいこう。

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


アーカイブ

マイナーレコ

  1. 日柳川左岸の山小屋跡を見に行く。山小屋跡から支流を登る。
  2. 日柳川右岸支流の三又谷を登る。
  3. 法徳寺北尾根(仮称)から崩落現場の上へ。老婆谷を下って摩耶山…
  4. 廃道一ヶ谷道を歩いてみる。六甲ケーブル下駅から山上駅まで。
  5. 奥山精道線カーブNo.10から破線道の谷を行く。ゴロゴロ岳か…
  6. 岩ヶ谷右俣を最奥まで詰めてみる。ジェンガフォールとはこれいか…
  7. 生瀬から大多田川右岸支流の不動谷溯行。宝塚最高峰岩原山を経て…
  8. 社家郷山キレットルートから外れ峰南尾根。小天狗山を経て宝殿橋…
  9. 塩屋周回。旗振山西尾根から須磨浦山上遊園。句碑の細道を南に下…
  10. 須磨と垂水の区界にある堺川を旗振山まで登り詰める。赤旗谷川を…

謎が出てくる回

  1. 長峰山東面 六甲川右岸の谷を登り下り。連続小滝手前で見落とし…
  2. 西滝ヶ谷右俣から西お多福山。周遊歩道を西へ下って水晶谷から極…
  3. Black Rock Ridge 黒岩尾根由来の「黒岩」はど…
  4. 市ヶ原の茶屋、井戸、ゴルフ場跡を確認しながら世継山へ登る。
  5. 摩耶ケーブル東の尾根から摩耶東谷を経て摩耶ロープウェー下の尾…
  6. 仏谷を登って仏谷南尾根を下るという寄り道を経て、シラケ谷を登…
  7. 谷上駅から南西の丸山を登り、かがやきの径を経て森林植物園に至…
  8. 太子の森から錨山・市章山。森林植物園で柿ノ木塚を確認し狼谷を…
  9. 摩耶東谷深谷第4堰堤手前から支尾根へ。旧道跡かも知れない水平…
  10. 三社権現跡から八十八ヵ所窟尾根コース。赤松公の碑から老婆谷中…

ナレッジ記事

  1. 昭和13年の水害で流れた表六甲ドライブウェイ旧道を経て、六甲…
  2. 摩耶山周辺の杉の固有名称、天上寺の千年杉などについて。
  3. 忘れ去られた谷と岩場。六甲学院 山岳部誌「たきび」を紐解いて…
  4. イラストレーターとHTMLで摩耶_長峰山詳細登路図(仮)のク…
  5. 六甲堰堤と山田堰堤間のイノシシの死骸についての続報と対策につ…
  6. 遡行図記号をイラストレーターで作成し、遡行図を作ってみる。
  7. 山行記録のまとめ方改。Google マイマップで一覧を作成し…
  8. OSPREYバリアント37がリコール対象になる。2日後には新…
  9. 裏滝道を歩いて布引の滝へ。旧生田川両岸の道路を歩いてみる。
  10. 神戸市灘区の西郷川から青谷川そして老婆谷。その起点と終点につ…

シリーズ山行

  1. 神戸市境界石No.72-77 平野谷西尾根から極楽谷経由で再…
  2. 獅子ヶ池から神戸市区境界を追う。苅藻川を経由してひよどりごえ…
  3. Jizo Valley 天狗峡旧道を経て地蔵谷を登る。道中に…
  4. Tenseien-Path 天清園道・菊水山・城ヶ越・神戸ア…
  5. 神戸市境界石No.57 林田区境界を歩く。高取山から獅子ヶ池…
  6. 神戸市境界石No.75-76 大師道から鍋蓋山へ。七三峠から…
  7. 神戸市境界石No.116-87 県立美術館を起点に青谷道、東…
  8. 神戸市境界石No.80 石柱の番号を確認しに高雄山へ。再度山…
  9. 神戸市境界石No.82-98 黒岩尾根から神戸市中央区と灘区…
  1. 住吉・芦屋

    奥山精道線カーブNo.10から破線道の谷を行く。ゴロゴロ岳から六麓荘を経て苦楽園…
  2. ナレッジ

    モンベル六甲店でクライミングスクールSTEP1と2。
  3. 西宮・宝塚

    社家郷山キレットルートから外れ峰南尾根。小天狗山を経て宝殿橋まで。小笠峠東川で滝…
  4. 須磨・長田

    横尾から須磨アルプス。展望ピークから下って天井川。栂尾山へ登り返して文太郎道。
  5. 布引・北野

    布引谷ルンゼの先で昭和初期の念仏碑に出会う。
PAGE TOP