ナレッジ

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に、それぞれ小窓でリンク。 尾根・谷筋は山行記録(ヤマレコ含む)にリンクしています。
リンクする写真についてはしっかりキレイなものを撮り直したいところ。

ちなみに通常のフレーム内に表示させると下のこんな感じ。スクロールで移動というのがなんだか狭苦しい。却下かな。
< src="https://muscleturtle.jp/wp-content/uploads/2017/12/171218_maya_nagamine2000-2500-5-01.html" width="100%" height="650" frameborder="0" marginwidth="0" marginheight="0" scrolling="yes">


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


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

コメント

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

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

CAPTCHA


AND 絞り込み検索

  • カテゴリー

  • タグ

  • キーワード

神戸市境界石

  1. 神戸市境界石No.79 蛇ヶ谷右岸にて。錨山散歩のついでに。…
  2. 神戸市境界石No.46 高取台中学校北側の高取高層配水場の脇…
  3. 神戸市境界石No.57 林田区境界を歩く。高取山から獅子ヶ池…
  4. 神戸市境界石No.88 天狗道から掬星台へ。
  5. 神戸市境界石No.50・56 平和台自動車学院西の尾根から高…

ナレッジ記事

  1. イラストレーターとHTMLで摩耶_長峰山詳細登路図(仮)のク…
  2. 神戸市灘区の西郷川から青谷川そして老婆谷。その起点と終点につ…
  3. 次はどこへ行こうかな。「六甲摩耶再度山路圖」を見て計画をねり…
  4. 六甲山不法投棄とゴミ。神戸市環境局と六甲山美化協力会に問い合…
  5. 城山展望公園の現在 ハンター谷を登り北野谷西尾根を下る。

ピックアップ記事

  1. 石井ダムこもれび広場を探索。ドングリの森谷筋を登り、新鈴蘭台…
  2. 日本の秘境100選No.064 瀞川渓谷をゆく。兵庫県美方郡…
  3. 寒天山道東の崩落斜面を見に行く。
  4. 追谷川遡行。追谷墓園奥から市章山の脇を抜ける。浅間ヶ丘道を経…
  5. 社家郷山キレットルートから外れ峰南尾根。小天狗山を経て宝殿橋…
  1. 摩耶

    法徳寺北尾根(仮称)から崩落現場の上へ。老婆谷を下って摩耶山史跡公園まで。
  2. 裏六甲

    猪ノ鼻滝上流右支、岩谷を登る。風呂ノ谷を下って有馬口まで。
  3. 長峰

    焼小場谷(ナバ谷)を登って、最終右俣から長峰山頂天狗塚へ至る。
  4. 摩耶

    布引谷の集落跡と地蔵谷の遺構再探訪。地蔵大滝上流左岸の無名支流を登って555P。…
  5. 摩耶

    楽生公園から上野道経由で掬星台。桜谷を下り、徳川道を経て摩耶別山へ登り返す。
PAGE TOP