inflearn logo
知識共有
inflearn logo

コロナマップ開発者と一緒に作る地図サービス作り 2

コロナマップの開発者が教える地図サービス制作の応用講座です。

難易度 中級以上

受講期間 無制限

Node.js
Node.js
MongoDB
MongoDB
Express
Express
Web Application
Web Application
Mongoose
Mongoose
Node.js
Node.js
MongoDB
MongoDB
Express
Express
Web Application
Web Application
Mongoose
Mongoose

学習した受講者のレビュー

4.5

5.0

이호진

6% 受講後に作成

以前の講義と同様にわかりやすく説明してくれる講義でした~! 字幕があり、従うのが楽です。

5.0

유경식

100% 受講後に作成

ネイバー、カカオマップを使いやすく教えてくれて、学習に多くのお役に立ちました。サービスを作成するだけに、Javascript、jQuery、ajax、DBなどの基本概念は必要です。

5.0

로빈(Robin)

100% 受講後に作成

Maps APIを理解し活用するのに非常に役立ちました。

受講後に得られること

  • NAVER地図APIを通じたウェブベースの地図サービス構築

  • 基本的な地図サービスに必要なマーカー、情報ウィンドウの生成

  • カカオAPIを通じた座標アップロードページの構築

  • MongoDBとmongooseを連携させた地図サービスの構築

  • 地図サービス最適化のためのクラスタリング機能

  • 行政区域(道)の可視化およびイベントの追加

コロナマップの開発者と一緒に、地図サービスを攻略しよう 🧭

地図サービスの制作に関する数多くの悩み!

「地図サービスを作りたいのですが、どこから始めればいいのか分かりません。」
「場所に関する情報をDBに保存したいのですが、どうすればいいでしょうか?」
「地図上のデータが多くなってきたので最適化が必要なのですが、どうすればいいでしょうか?」

こんにちは、開発者のイ・ドンフンです。
私は1400万人が利用したコロナマップ、そしてマスクマップを企画・開発しました。

薬局のマスク在庫を地図上に視覚化したプロジェクト「マスクマップ」

確定申告者の動線を地図上に点と線で表示したプロジェクト「コロナマップ」

サービスを運営しながら最も多く受けた質問の一つが、
「コロナマップのようなサービスを作ってみたいのですが、どこからどう始めればいいか分かりません」でした。
そこで講義の制作を考えるようになり、昨年、地図サービス初心者のための講義を提供しました。

多くの方々の応援と関心のおかげで、初めての講義であるにもかかわらず、多くの良いフィードバックをいただきました。
講義に対するフィードバックの中で、より多様な機能を学びたいという意見が多く、新しい講義を計画することになり、本講義を制作いたしました。

Inflearn <コロナマップ開発者と一緒に作る地図サービス> 講義レビュー

今回の講義では、MongoDB、Mongoose、アップロード機能、マーカークラスター、行政区域の可視化など、より深まった内容を追加しており、コロナマップを現在まで運営しながら得た地図サービス制作のノウハウを盛り込みました。コロナマップで使用した機能、最適化の方法、ライブラリの活用方法などを、できるだけ分かりやすく講義に反映させました。

皆様の地図サービスの実力向上に、大いに役立つことを願っています。
ありがとうございます:)


なぜ地図サービスなのでしょうか?

出典:ゼンリー(Zenly)公式ホームページ

現在1000万ダウンロードのアプリ「Zenly(ゼンリー)- 親友同士で」をご存知ですか?

いわゆるZ世代が頻繁に利用するサービスで、地図上に友達の現在地、バッテリー残量、移動速度などを表示して共有し合うサービスです。これにより、Zenlyは新しいコミュニケーションスタイルとして急浮上し、人気を集めています。今日のZ世代は、自分の現在地や移動経路を他人と共有することに慣れていると言えるでしょう。

出典:Zenly公式ホームページ

これは現在のトレンドとして定착し、継続しています。
そのため、位置情報と移動経路を視覚化する地図サービスの重要性も大きく高まることが予想されます。
位置情報を視覚化するのに最適なUIは、まさに地図だからです。

現在は新型コロナウイルス(COVID-19)の影響で外出が制限されていますが、もし新型コロナを克服する時期が来れば、必然的にオフライン活動への需要も増加し、関連事業も成長すると考えています。
このようなオフライン活動をサポートするのが、まさに場所や座標を一目で可視化できる地図UIです。

지도 서비스에 대한 이해도와 실력을 보유하는 것은 트렌드에 맞춰 자신의 강점을 키우는 좋은 방법입니다.

コロナマップも地図UIを採用し、1400万人を超えるユーザーに多大な助けを与えました。このように地図サービスは多様なサービスと結合が可能であり、爆発的な潜在力を持っています。

他の方々と差別化された自分だけの強みを育てたい方に、この講義をおすすめします。


何を学びますか?
学習内容 & 講義の特徴

国内唯一!
地図サービス制作講座

MongoDB / Mongoose / Node.js / 
Express / Naver map API / Kakao map API

데이터를 바탕으로 마커를 생성하고
인포윈도우를 띄워주는 기능
카카오 api를 활용한 키워드 검색
MongoDB에 위치 데이터 저장
마커 클러스터링 기능
행정구역 데이터 레이어 기능
  • 地図サービス運営時に必要な機能を選別して講義として提供します。
  • その機能がなぜ、どのように使われたのかを簡単に理解できるように補足説明を提供します。
  • 字幕を提供し、講義により集中できる環境を提供します。

セクション別の紹介

Section 0. 講義紹介
プロジェクトおよび講義の紹介を通じて、これから制作する地図サービスで学ぶことができる機能について説明します。
Section 1. 初期環境の構築
プロジェクト制作に必要な初期環境のインストールと設定方法を紹介します。Node.jsおよびVS Code、開発に必要な必須パッケージをインストールして実行してみます。
Section 2. 地図サービスプロジェクトの構築
Expressを活用してサーバーを起動し、地図サービスを作るための準備をします。NAVER地図APIを発行し、該当プロジェクトに適用させます。
セクション 3. マーカーおよび情報ウィンドウの作成
マーカーを表示し、クリックイベントを追加して情報ウィンドウを表示する方法を説明します。複数のマーカーを表示したり、CSSを通じてマーカーアイコンを変更したりすることができ、イベントを追加してユーザーの利便性を高めることができます。また、情報ウィンドウを活用して情報を地図上に表示してみます。
Section 4. MongoDB와 Mongoose 활용
NoSQLの代表的なDBであるMongoDBを紹介し、ホスティングする方法について紹介します。また、CompassというDB管理ツールをインストールして実行してみます。さらに、Node.jsとMongoDBのためのODMパッケージであるMongooseを紹介・インストールし、schema(スキーマ)を作成してみます。
Section 5. アップロード機能の初期環境構築
カカオAPIを活用してキーワード検索機能を実装し、結果データをもとに地図上に表示する機能を追加して、アップロード機能のための初期環境を構築してみます。
Section 6. アップロード機能の仕上げ
キーワード検索結果のデータをMongoDBに保存し、それを地図上に表示する方法について学びます。Postmanで通信を行いながら、アップロードサーバーを構築します。
Section 7. マーカークラスタリング機能の実装
地図サービスの最適化手法の一つであるマーカークラスタリング機能を紹介し、実装してみます。地図サービスで表示すべきデータが多い場合、クラスタリング機能を通じてこれらをまとめて表示します。
セクション 8. 行政区域(道)データレイヤーの表示
行政区域ごとに区画を分けて視覚化する方法について紹介します。また、各行政区域をクリックした時、マウスが乗った時、外れた時のイベントを追加し、ツールチップの表示や該当区域の色を変更する機能を実装してみます。

よくある質問

Q. 授業内容はどの程度のレベルまで扱いますか?

本講義は、地図サービスを作るための基礎的な内容から、より高度な内容まで幅広いスペクトラムを提供する予定です。
そのため、初級〜中級程度の難易度となっています。

Q. ネイバーAPIとカカオAPIの両方を使った理由はありますか?

それぞれの長所があるため、それを最大限に活用したいからです。
ネイバー地図APIは付加機能や最適化が優れていると考えており、カカオAPIの場合はキーワード検索機能の性能が非常に良いため、両方を採用して二つの長所を最大化しようとしています。

Q. 非専門家でも受講できますか?

もちろん可能です。ただ、地図サービスの特性上、JavaScriptを多用するため、基礎的な知識が求められる場合があります。そのため、関連知識が不足している場合は、本講義で提供するロードマップを通じてHTML、CSS、JSに関する基礎知識を習得してから受講することをお勧めします。

Q. 前回の講義との違いは何ですか?

以前の講義 'コロナマップ開発者と一緒に作る地図サービス制作'の場合は、地図サービス制作入門のための講義でした~!! 単純に地図を表示したり、マーカーを表示したりするなどの基本的な機能だけを学びたい場合は、以前の講義を受講することをお勧めします。
本講義は、サーバー通信、MongoDBとMongooseを通じたデータハンドリング、マーカークラスター、Ajax、データレイヤー表示などのように、初級から中級までの内容を盛り込んでいます。そのため、より多くの機能を学習したい方に強くお勧めします。


地図サービス制作、
完全基礎から始めたいなら?


こんな方に
おすすめです

学習対象は
誰でしょう?

  • コロナマップのような地図サービスを作ってみたい方へ

  • 地図関連のAPIを使いたいけれど、どうすればいいか分からない方へ

  • DBと連動した地図サービスを作りたい方へ

  • 地図サービスの様々な機能を学んでみたい方へ

前提知識、
必要でしょうか?

  • HTML

  • CSS

  • Javascript

こんにちは
donghuneeです。

1,352

受講生

119

受講レビュー

165

回答

4.8

講座評価

3

講座

こんにちは、開発者のイ・ドンフンです。

4,400万回以上の閲覧数を記録した「コロナマップ」を最初に企画・開発し、その後も「マスクマップ」や「コロナミ」を通じて、多くのユーザーの不便を解消するサービスを運営しています。

現在は小さなスタートアップを創業し、CTOとして精力的に開発に取り組んでいます。

ありがとうございます。

もっと見る

カリキュラム

全体

33件 ∙ (3時間 14分)

講座掲載日: 
最終更新日: 

受講レビュー

全体

24件

4.5

24件の受講レビュー

  • yksshocking8306님의 프로필 이미지
    yksshocking8306

    受講レビュー 2

    平均評価 5.0

    5

    100% 受講後に作成

    ネイバー、カカオマップを使いやすく教えてくれて、学習に多くのお役に立ちました。サービスを作成するだけに、Javascript、jQuery、ajax、DBなどの基本概念は必要です。

    • ehdgns17664658님의 프로필 이미지
      ehdgns17664658

      受講レビュー 2

      平均評価 5.0

      5

      6% 受講後に作成

      以前の講義と同様にわかりやすく説明してくれる講義でした~! 字幕があり、従うのが楽です。

      • donghunee
        知識共有者

        ありがとうホジン:) 今後より良いコンテンツでお返しさせていただきます~!

    • develobing님의 프로필 이미지
      develobing

      受講レビュー 3

      平均評価 5.0

      5

      100% 受講後に作成

      Maps APIを理解し活用するのに非常に役立ちました。

      • nomad21coder님의 프로필 이미지
        nomad21coder

        受講レビュー 3

        平均評価 3.7

        2

        100% 受講後に作成

        率直な後期執筆が恐れるほどに…追いつく終わる講義… ㅠㅠ。他の受講者の選択のためにこの後期を残す。本当に.. お金と時間がもったいない.. 結局だからこそ、みんな聞くしかない。 (講師様、むしろ価格を下げてください。無料で切り替えていただきました。他の指導関連の講義を比較してみると…私がひどいとは思えません。 https://www.inflearn.com/course/%ED%8C%8C%EC%9D%B4%EC%8D%AC-%ED%8F%B4%EB%A6%AC%EC%9B%80- %EC%A7%80%EB%8F%84%EC%84%9C%EB%B9%84%EC%8A%A4#curriculum)

        • m3muse1857님의 프로필 이미지
          m3muse1857

          受講レビュー 22

          平均評価 4.5

          2

          100% 受講後に作成

          講義のコンセプトは本当によかったです〜 Map APIに関する詳細な講義内容がほとんどないので〜 コードに従うほどの講義になったようです。 不足している部分は個人的にMap公式文書に従います ある程度自分で補うことができる部分でしたが〜 公式文書にもJqueryが含まれていて… このレッスンに書かれたコードを完全に理解して使用するには ネイバー、カカオが提供するMAP API 自分で時間を投資して勉強しなければフォローできないようです。 そしてコロナマップだから〜 私はコロナ関連のDATAを地図に表示する講義になると思います わかりました。 単に地図を検索し、マーカーを作成して地図に表示する 基本的なMAP講義でした。 頑張ってみました〜 タイトルが^^コロナマップ開発者と一緒にする~~これでしたね。 コロナマップサービスの作成ではありません〜

          似ている講座

          同じ分野の他の講座を見てみましょう!

          新規会員登録で25%OFF

          ¥5,713

          25%

          ¥7,613