ナレッジ

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.55・62 高取山一の宮道経由で獅子ヶ池を…
  2. 学校林道へ神戸市境界石90号と93号を探しに行くが…2日連続…
  3. 神戸市境界石No.116・98・97・96・95・94・92…
  4. 神戸市境界石No.46 高取台中学校北側の高取高層配水場の脇…
  5. 獅子ヶ池から神戸市区境界を追う。苅藻川を経由してひよどりごえ…

ナレッジ記事

  1. 端折っていた写真も別の形で載せたい。Smart Slider…
  2. 城山展望公園の現在 ハンター谷を登り北野谷西尾根を下る。
  3. 神戸古今對照地圖で明治大正期の市郡界を把握する。
  4. イラストレーターとHTMLで摩耶_長峰山詳細登路図(仮)のク…
  5. 神戸市北区花山中尾台3丁目、阪神高速7号北神戸線下の「関係者…

ピックアップ記事

  1. 摩耶東谷弥生滝から溯行。行者滝手前の支流右俣を経て参詣道。
  2. 亀の滝第二砂防ダムの谷を登る。亀の滝もついでに見ておく。
  3. 廃道一ヶ谷道を歩いてみる。六甲ケーブル下駅から山上駅まで。
  4. 烏原貯水池放水路隧道を追う。ちりんちりんの滝から放水門まで。…
  5. 北野遊歩道から桜谷川を下って苧川谷下流。布引ハーブ園へ登り紅…
  1. 住吉・芦屋

    住吉川下流域遡行。ゴルジュ、滝、淵。住吉堰堤から小峰ヶ原砂防ダムまで。
  2. 摩耶

    東山崩落斜面がどうなっているのか確認。西谷川(狐西谷)支流を登り、東山尾根を下る…
  3. 菊水・鍋蓋・再度

    Tenseien-Path 天清園道(湊山谷)・菊水山・城ヶ越・神戸アルプス・甑…
  4. 須磨・長田・兵庫

    須磨と垂水の区界にある堺川を旗振山まで登り詰める。赤旗谷川を下るもゴルジュに阻ま…
  5. 摩耶

    摩耶東谷深谷第4堰堤手前から支尾根へ。旧道跡かも知れない水平道を辿る。
PAGE TOP