post Image
ちからわざで日本地図を描いてみた(swift)

はじめに

objective-cでつくったはいいけど使っていないクラスをswiftに書き換えてgithubにあげてみたので、そのクラスについて紹介したいと思います。自分はまだ使う場面がない(今のところ思いつかない)ので、あわよくばだれかに使ってもらえたらいいなと思います。(第五弾)

第一弾(時計)

第二弾(スピードメーター)

第三弾(めくるカレンダー)

第四弾(グラフ)

GitHub

今回はこちらのクラスについて紹介します。

AMJpnMapView

見た目

AMJpnMapView

map1.gif
map2.gif
map.png

AMJpnMapDetailView

map_detail.png

機能

日本地図を表示するView

AMJpnMapView

  • 各地方ごとに色が設定できる
  • 各地方の選択ができる
  • 各地方ごとに拡大表示ができる

AMJpnMapDetailView

  • 都道府県ごとに色を設定できる

使い方

AMJpnMapView

  1. xibにカスタムクラスを設定

    custom_class1.png

  2. 初期表示

    色を設定する(全地方共通)
    IBInspectable1.png

  3. デリゲートを設定する

    @IBOutlet weak var jpnMapView: AMJpnMapView!
    jpnMapView.delegate = self
    

    各地方をタップすると下記のデリゲートが呼ばれる

    protocol AMJpnMapViewDelegate: class {
    
    /// 地方選択時に呼ばれる
    func jpnMapView(jpnMapView: AMJpnMapView, didSelectAtRegion region: AMJMRegion)
    
    /// 地方選択解除時に呼ばれる
    func jpnMapView(jpnMapView: AMJpnMapView, didDeselectAtRegion region: AMJMRegion)
    }
    

    引数のregionは下記の種類がある

    enum AMJMRegion: Int {
    case none = -1
    case hokkaido = 0
    case tohoku = 1
    case kanto = 2
    case chubu = 3
    case kinki = 4
    case chugoku = 5
    case shikoku = 6
    case kyushu = 7
    }
    
  4. 地方ごとに色を設定する

    下記メソッドで色を設定する

    /// 塗りつぶしの色を設定
    func setFillColor(color: UIColor, region: AMJMRegion)
    
    /// 枠線の色を設定
    func setStrokeColor(color: UIColor, region: AMJMRegion)
    

    viewDidLoadではまだ地図を描画していないので色を設定するならviewDidAppearでおこなう必要がある

  5. 拡大表示する

    下記メソッドでスケールを設定する

    func setScale(scale: CGFloat, region: AMJMRegion) 
    

選択時のデリゲートで下記のように呼べばデモのような動きができる

/// 地方選択時に呼ばれる
func jpnMapView(jpnMapView: AMJpnMapView, didSelectAtRegion region: AMJMRegion) {

        /// 枠線を黒色にする
        jpnMapView.setStrokeColor(color: UIColor.black, region: region)
        /// 拡大する
        jpnMapView.setScale(scale: 3.0, region: region)    
 }

/// 地方選択解除時に呼ばれる
func jpnMapView(jpnMapView: AMJpnMapView, didDeselectAtRegion region: AMJMRegion) {

        /// 枠線を緑色にする
        jpnMapView.setStrokeColor(color: UIColor.green, region: region)
        /// 元の大きさにする
        jpnMapView.setScale(scale: 1.0, region: region)
 }

AMJpnMapDetailView

  1. xibにカスタムクラスを設定

    custom_class2.png

  2. 初期表示

    色を設定する(全都道府県共通)
    IBInspectable2.png

  3. 都道府県ごとに色を設定する

    /// 枠線の色を設定 
    func setStrokeColor(color: UIColor, prefecture: AMJMPrefecture)
    
     /// 塗りつぶしの色を設定      
    func setFillColor(color: UIColor, prefecture: AMJMPrefecture)
    

    viewDidLoadではまだ地図を描画していないので色を設定するなviewDidAppearでおこなう必要がある

つくったきっかけ

ある日、UIBezierPathの勉強をしているときにふと「これ使って部位ごとにレイヤー分ければ、部位ごとに色変更したり、アニメーションつけれるやん!」と思った。その時何を思ったか、とりあえず日本地図を描こうと思いつくった。最初は地方ごとのやつをつくったが、どうせなら都道府県もと思い都道府県のやつもつくった。

使わなかった理由

  1. 細部の描画が雑

    実際に利用するとなると割と形が雑なので、各都道府県の人に怒られそうである。利用するならもう少しクオリティを上げたい。

つくり方

日本地図の描画方法について少し書いておきます。

  1. 正方形の日本地図の画像を用意する
  2. xibに正方形のViewを置く
  3. 上記のView上にImageViewを置き、日本地図の画像を表示する
  4. さらにその上に小さなViewを置く
  5. 日本地図の頂点に小さなViewの左上を合わせる
  6. 小さなViewのframe.originをメモする
  7. 5,6を日本地図の各頂点で繰り返す
  8. 日本地図を描画したいViewに上記メモの座標で描画していく
    ex.2で用意したViewのサイズがx:500,y:500で、日本地図を描画したいViewのサイズがx:300,y:300とする。

    下記の計算でメモした座標を描画したいViewのサイズに合わせる

    /// pointX、pointYはメモした座標
    CGPoint(x: 300 * (pointX/500.0), y: 300 * (pointY/500.0))
    

    この座標を元にUIBezierPathを作成する

5.6.の作業はこんな感じ
map_memo.png
白いViewが2.のView、赤いViewが4.の小さなViewに当たる。
この例では北海道のえりも岬あたりの座標がx:399,y:130であることがわかる。

簡単である。

アホだと思うが、当時は数時間この作業を嬉々としておこなっていた。無駄な作業のようであるが、充実した日々であったように思う…

当時は、日本地図が描けると思いこんな方法をとったが、複雑なパスを作成する際は、画像編集ソフトとかで作成して、そのファイルを読み込んだ方が断然いいように思う。私は知らないが、きっとそういう方法があるはずである。

さいごに

以上の理由から今のところは使用していませんが、もしかしたら今後使う場面があるかもしれません。都道府県を選択するときは、tableViewを利用しているが、日本地図で選択した方がおもしろいんじゃないかと思った。もう少しクオリティをあげれば使ってもらえるかもしれない…

私はほぼObjective-Cしか使ったことがないペーペーのプログラマーなので記事内容やgithubのコードにおかしなところがあればご指摘いただければ幸いです。


『 Swift 』Article List
Category List

Eye Catch Image
Read More

Androidに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

AWSに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Bitcoinに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

CentOSに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

dockerに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

GitHubに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Goに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Javaに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

JavaScriptに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Laravelに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Pythonに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Rubyに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Scalaに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Swiftに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Unityに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Vue.jsに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Wordpressに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

機械学習に関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。