Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ひらがなだけのちず つくってみました
Search
One compath
November 08, 2020
1
3.4k
ひらがなだけのちず つくってみました
FOSS4G Japan 2020 Online コアデイの発表資料です
One compath
November 08, 2020
Tweet
Share
More Decks by One compath
See All by One compath
社内の制度を使って新規事業を⽴ち上げてみた話 OCEM#3
mapion
0
94
新規事業のアプリ、Flutterで作ってます〜U-ROUTEのポイ活対応編〜 OCEM#3
mapion
0
94
ウォーキングアプリ「aruku&」ってどうやって作ってるの? OCEM#3
mapion
0
110
ONE COMPATH/ワンコンパス Company Deck For Engineer(会社紹介資料)
mapion
0
4.3k
ONE COMPATHの地図の開発技術~入門編~ OCEM #2
mapion
0
170
脱レガシー! Aurora PostgreSQLに移行してみた OCEM #2
mapion
1
610
エンジニアなので「技術」で仕事を効率化してみた ~Slack連携でチームの生産性が向上~ OCEM#2
mapion
0
150
20221112_FOSS4G2022Online.pdf
mapion
0
1.3k
ONE COMPATH/ワンコンパス Company Deck(会社資料)
mapion
0
280
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Imperfection Machines: The Place of Print at Facebook
scottboms
265
13k
Code Review Best Practice
trishagee
64
17k
The World Runs on Bad Software
bkeepers
PRO
65
11k
4 Signs Your Business is Dying
shpigford
180
21k
Become a Pro
speakerdeck
PRO
25
5k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
665
120k
Docker and Python
trallard
40
3.1k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.8k
Unsuck your backbone
ammeep
668
57k
How STYLIGHT went responsive
nonsquared
95
5.2k
Transcript
株式会社ONE COMPATH(ワンコンパス) 株式会社 ONE COMPATH 鹿野 健人 清水珠里 ひらがなだけのちず つくってみました
1
©ONE COMPATH CO., LTD. All rights reserved. 清水珠里(しみずじゅり)
大学では建築を学び、新卒で不動産企業に入社。営業を担当。 キャリアチェンジを考え、前職であるSIerにエンジニアとして入社 企業の売上や契約を管理するシステムの開発に携わる。 2014年株式会社マピオン(現株式会社ONE COMPATH)に入社。 地図関連サービスで使われている地図基盤の運用、および開発に従事。 OSGeo日本支部 理事 食べること旅に出ることが好き 部活 → リアル脱出ゲーム部/ボードゲーム部/カメラ部 2 自己紹介
2019年4月1日 株式会社マピオンは 株式会社ONE COMPATH になりました 3
©ONE COMPATH CO., LTD. All rights reserved. ONE COMPATH はタイポではありません。
COM → 「共に」 PATH → 「道をつくる」という意味が込められ た造語です 地図検索サービスMapionに加え、もともと凸版印刷が 運営していたShufoo!などのサービスを事業承継し、社名を変更し ました 4 ONE COMPATH とは?
©ONE COMPATH CO., LTD. All rights reserved. 【社名】株式会社ONE COMPATH(ワン・コンパス) 【ミッション】暮らしに新しい文化を創る
【本社所在地】 東京都港区芝浦3-19-26 トッパン芝浦ビル 【設立年月日】 1997年 1月 20日 【代表者】代表取締役社長CEO 早川 礼 【資本金】 6億円 【従業員数】 130名(2020年4月時点/他社からの出向者含む) 【業種】 情報通信業(インターネットサービス) 【OSGeo日本支部 団体会員 】 5 会社概要
サービス紹介 6
©ONE COMPATH CO., LTD. All rights reserved. “迷わない地図”と“見て楽しめる地図”を両立した日本最大級の地図 検索サービスMapion(マピオン)。周辺スポット検索やルート検
索、乗換案内に天気予報など、おでかけに便利な情報も掲載。 月間UU 1200万人 日本で最初のインターネット地図 7 地図検索サービス Mapion
©ONE COMPATH CO., LTD. All rights reserved. マピオンの法人向けサービス提供中!
プロモーションにもマーケティングにも。 様々なビジネスシーンで活用できる地図API、 ASP、コンテンツを提供 取り扱い店舗検索サービスや店舗検索サービ スに加え、地図/検索API利用も可能 店舗データとGoogleマイビジネスの連携を 行うオプションあり 8 法人向け地図サービス えらべる地図デザイン
©ONE COMPATH CO., LTD. All rights reserved. いつでも無料でチラシが見られる日本最大級の電子チラシサービス。 大手スーパーはもちろん、ドラッグストアや家電量販店など、毎日
のお買い物に便利なお店のチラシをたくさん掲載。 月間UU 1600万人 月間PV 4.5億回 掲載店舗 12万店舗 9 日本最大級 電子チラシサービス Shufoo! シュフースー パー/小石川店 シュフードスー パー/芝浦店 春の新生活 大放出! 生鮮特価市!鮮度自 慢の 食材がとにかく安 い!!
©ONE COMPATH CO., LTD. All rights reserved. スマホを持って歩くだけで日本全国、地域の名産品が無料で当たる、 一歩先行くウォーキングアプリ。
90万人以上が利用 10 地域名産品が当たるウォーキングアプリ あるくと 賞品が 当たる キャラを コレクション ランキングで 競える 様々な ミッション
©ONE COMPATH CO., LTD. All rights reserved. 2020月8月本格リリース!
家事代行・ハウスクリーニングの比 較検討ならカジドレ!料金や条件、 口コミ・評価から徹底比較! 11 家事代行サービスの比較検討サイト カジドレ !!new!!
もうマピオンって 地図には力いれてないのかな? 12
そんなことはありません! 13
地図マピオンアプリ(iOS版) 近日大幅リニューアル! 14
©ONE COMPATH CO., LTD. All rights reserved. 15 地図マピオンアプリリニューアル ベクタータイル改善!
検索機能も使いやすく進化! 詳細は後日!待て続報!
そして今日の主役 「えきのなまえマップ」追加 16
17
突然ですが! 18
この駅名 読めますか? 19
20 特牛駅 (JR 山陰本線) 驫木駅 (JR 五能線) 男衾駅 (東武東上線)
読めない! 21
でも、 22 えきのなまえマップ で確認すれば・・・
23 こっとい (特牛駅/JR 山陰本線) とどろき (驫木駅/JR 五能線) おぶすま (男衾駅/東武東上線)
ずばり! 24
©ONE COMPATH CO., LTD. All rights reserved. 25 Q.えきのなまえマップとは? A.
駅名と自治体名をすべてひらがなで表現した地図です
©ONE COMPATH CO., LTD. All rights reserved. 26 自己紹介 26
26 名前:鹿野健人(かのけんと) マーケティング部マピオンBiz企画G ☑大学時代は地理学を学び、卒論では地形学に取り組む →一応Google scholarで検索すると学会発表要旨が出てくる・・・ ☑マピオン好きが講じてONE COMPATHへ入社 ☑現在は法人向け地図商材の企画担当。現在2年目。 ☑狭い道が好き。漁村が好き。船が好き。離島が好き。 @伊豆大島の波浮港 今年の6月に引退した東海汽船の2代目さるびあ丸@三宅島 @京都府舞鶴市の吉原入江
©ONE COMPATH CO., LTD. All rights reserved. 27 地理学科生と地図 27
地図とのおつきあい データダウンロードは 国土数値情報!基盤地図情報!e-stat! データ形式は Shape File!csv! 使うツールはとりあえず QGIS! ArcGIS! 測量業界の砂防業務では役立ちましたが、 Web地図の世界では歯が立たず・・・ ほぼ0からのスタート
©ONE COMPATH CO., LTD. All rights reserved. 28 えきのなまえマップはどういう経緯で誕生したの? メンターの清水さん
28 Mapboxのベクターマップの技術を応用して 「オリジナル地図」を作ってもらいたい! データはオープンデータか社内資産使ってね! 2019年8月 地図開発部門でのOJT研修にて・・・ 研修中の鹿野 会社の中にあるデータやオープンデータを活用して 地図を作らないといけないのか・・・ 「地図」を通してどんな課題が 解決できるのだろう?
©ONE COMPATH CO., LTD. All rights reserved. 29 「地図」で解決したことはあったかな? 29
子どものときに地図を見ても「漢字」が読めなかった だからうまく理解ができなかったな・・・ そういえば父が東海道線の駅をひらがなで書いてれて それを一生懸命覚えていたな・・・ ひらがな表記で地図を作成すれば、子どもも地図が読める? 考えている鹿野 ひらがな表記の地図なら、外国人にもわかりやすいのでは? ひらがな表記の地図をってみよう!
©ONE COMPATH CO., LTD. All rights reserved. 30 30 ひらがなで地図を作ってみたいです!
メンターの清水さん ひらがなデータは地図データにないですね・・・ 電話帳のデータの中にはひらがなデータが あるので、そのDBを使えばいけると思いますよ! え、電話帳のデータってなんですか? ひらめいた鹿野 動揺する鹿野
©ONE COMPATH CO., LTD. All rights reserved. 31 31 マピオンの地図
マピオンの電話帳 使っているデータが異なります
©ONE COMPATH CO., LTD. All rights reserved. 32 ひらがな情報を電話帳データから取り出して地図化 32
地図DB (PostGIS) 電話帳(検索)DB (Solr) ジオメトリ 文字(漢字) 文字(漢字) 文字(ひらがな) 位置情報 えきのなまえマップ ジオメトリ 文字(ひらがな) 位置情報 今まであまりやったことの ないアプローチで 作っていく必要があります 従来の地図 えきのなまえマップ
©ONE COMPATH CO., LTD. All rights reserved. 33 現行の地図生成 &
配信システム 33 地図DB (PostGIS) 地図タイル生成 サーバ Mapbox ベクタータイル生 成の設定ファイル S3バケット スタイルファイル (json) スプライトファイル (png,json) フォントファイル(pbf) MVT MVT MVT 地図配信 サーバ フロント
©ONE COMPATH CO., LTD. All rights reserved. 34 えきのなまえマップを作成するには? 34
地図DB (PostGIS) 地図タイル生成 サーバ Mapbox ベクタータイル生 成の設定ファイル S3バケット スタイルファイル (json) スプライトファイル (png,json) フォントファイル(pbf) MVT MVT MVT 地図配信 サーバ 地図のデータベースにはひ らがなのデータがないので 電話帳データから持ってく る必要あり えきのなまえマップ用の設 定ファイルが必要! えきのなまえマップ用のス タイルファイルが必要! フロント
©ONE COMPATH CO., LTD. All rights reserved. 35 えきのなまえマップを作成!!!! 35
地図DB (PostGIS) 地図タイル生成 サーバ Mapbox ベクタータイル生 成の設定ファイル S3バケット スタイルファイル (json) スプライトファイル (png,json) フォントファイル(pbf) MVT MVT MVT 地図配信 サーバ 電話帳(検索)DB (Solr) えきのなまえマップ用の 設定ファイルを作成 どのレベルのタイルにどのデー タを入れるべきかを決定 MVTStylerで 地図デザイン 検索のDBから ひらがなのデータを 地図DBに投入 フロント えきのなまえマップ 配信!!!
©ONE COMPATH CO., LTD. All rights reserved. 36 MVT-Stylerの編集画面 36
各レイヤーに対して どういうフォントをどうするか、 色をどうするかなどを 指定していきます
©ONE COMPATH CO., LTD. All rights reserved. 37 MVT-Stylerの編集画面 37
こういう感じで 色の変更を行えたりします 何を見せたいのか? という視点で地図デザインの 設定を行っていきました。
©ONE COMPATH CO., LTD. All rights reserved. 38 こだわりポイント! 地形陰影図と線路を表示
⇒鉄道は地形に大きく影響される ことを伝える 自治体をマピオンデザインでカラフルに ⇒見ていて楽しくなるような地図デザインに 陰影図を180度回転させても尾根谷が逆転しない! ⇒ラスターだと尾根谷が逆転して見えてしまう・・・
©ONE COMPATH CO., LTD. All rights reserved. 39 「人口密集地域」と鉄道の表示 ⇒人が多く住むのは鉄道沿線沿いで
あることを伝える 駅名をクリックすると漢字がでてくる ⇒マピオン電話帳の詳細ページに遷移 ↑マピオン電話帳のページ こだわりポイント!
これで終わり・・・ と思ったのもつかの間・・・ 40
©ONE COMPATH CO., LTD. All rights reserved. 41 メンターの清水さん 驚愕する鹿野
え!!本当ですか!! いいですね!ぜひやりましょう!鹿野さん! このアイデアめっちゃいいから、ラボサイト に載せてニュースリリース出そうよ! メンター先の部長さん
©ONE COMPATH CO., LTD. All rights reserved. 42 今年の1月にニュースリリースを公開! https://onecompath.com/news/r
elease/5129/
©ONE COMPATH CO., LTD. All rights reserved. メディアで大きく取り上げられ・・・ https://www.itmedia.co.jp/news /articles/2001/31/news129.html
https://nlab.itmedia.co.jp/nl/arti cles/2002/04/news014.html メディアの掲載数 57 独自で記事化いただいた 主なメディア IT media News おたくま経済新聞 ねとらぼ MdN DESIGN INTERACTIVE
©ONE COMPATH CO., LTD. All rights reserved. 44 SNSでも大きな反響が!! 44
©ONE COMPATH CO., LTD. All rights reserved. 45 ネット社会に顔公開した鹿野 え!!本当ですか!!
地図アプリ企画担当者 どうせなら、今度アップデートする地図アプリに これ載せちゃおうよ!カノちゃん! そうこうしているうちに・・・
©ONE COMPATH CO., LTD. All rights reserved. 46 なんと!地図マピオンアプリにも載っちゃいます! 46
鋭意開発中! 地図マピオンアプリ(iOS版) 近日大幅リニューアル!
©ONE COMPATH CO., LTD. All rights reserved. 47 えきのなまえマップを通してわかったこと 47
☑DBからデータを取得する方法。 ☑DBからデータを検索して必要な情報を取得する方法。 ☑ベクタータイルを生成して配信する方法。 ☑フロント側で地図を表示する方法。 ☑地図デザインを行う方法。 etc. 公開するにあたり、 ユーザーが具体的にどのようなシーンで使用するのか? を考えながら最終チューニングを行ったので、 この一連の流れを理解できる貴重な体験だった! ユーザーの課題解決するとは何か? について考える非常に良い機会だった →現在の業務にもとても役立っていると思います!!
©ONE COMPATH CO., LTD. All rights reserved. 48 (個人的に)今後頑張ってみたいこと 48
「鉄道駅」だけではなく、 「全部ひらがなのマピオン」を 作ってみたい!! 子どもたちの地図リテラシー向上に寄与したい! インバウンドの方にもわかりやすい地図を作りたい!
©ONE COMPATH CO., LTD. All rights reserved. 49 番外:ひらがなにするとおもしろい駅 桜田門駅
(東京メトロ有楽町線) 後免駅 (土佐くろしお鉄道ごめん・なはり線/JR土讃線) 小前田駅 (秩父鉄道)
50 ご清聴ありがとうございました えきのなまえマップ