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

コロナマップ開発者と一緒に学ぶ、実際の地図サービス実装！

_{<出典 : KTV, EBS>}

こんにちは、開発者のイ・ドンフンです。
私は今回、1400万人が利用し、4400万PVを超えたコロナマップと、
マスクのリアルタイム在庫状況を表示する マスクマップを企画・開発しました。

サービスを運営しながら最も多くいただいた質問の一つが、
「コロナマップのようなサービスを作ってみたいのですが、どこでどのように始めればいいのか分かりません」というものでした。
そこで講義の制作を考えるようになり、本当に良い機会に恵まれて今回の講義を作ることになりました。

初めての講義なので至らない点も多いかと思いますが、多くの方々のお役に立てれば幸いです。
改めまして、本当にありがとうございます！！いつでもフィードバックをお待ちしております。

 

 

地図サービス開発、なぜ学ぶと良いのでしょうか？

_{<出典：朝鮮日報>}

青瓦台の業務報告に出席した際に聞いた言葉の中で、最も印象深かったのは

'コロナマップは、政府が情報を公開する方法において新しい発想だ。政府の広報方式に「発想の転換」をしなければならない。特に強く要請する」でした。コロナマップの基盤となる新しい発想として認識される地図UIは、ユーザーに最も効率的かつ直感的に情報を表示する方法です。

サービスを企画したり開発したりする際、ユーザーに直感的で素早く簡単に情報を提供することがますます重要になっている現状において、本講義を通じて地図サービスを作るための基本設定から活用方法までを皆様にお伝えしたいと思います。

 

 

実際に地図サービスを作ってみてください。

以下は、本講義で制作する地図サービスです。

 

 

本講義では、地図サービスを作るための基礎知識を学ぶ予定です。

1. NAVER地図APIによるウェブ地図の表示
2. 情報提供に必要なバナーとインフォボックスの作成
3. 複数のマーカーを生成して地図上に表示し、クリックイベントを追加する
4. 現在地を取得し、アニメーションが適用されたマーカーを地図上に表示する
5. Kakao APIを通じた目的地検索機能の実装

講義で学ぶ知識は、現在コロナマップで活用されている知識です。このように、本講義を通じて受講生の皆様が今後地図サービスを制作する際にお役に立てると考えております。

 

 

何を学ぶのでしょうか？

本講義とこれから制作するプロジェクトについての紹介、そしてウェブ開発を始める際にコロナマップ・クローンプロジェクトから得られる基礎的な知識について説明しています。

 

プロジェクトを進行するための初期環境をインストールし、設定する方法についての講座が含まれています。本講義では、VS Code、
node.js、expressをインストールし、プロジェクトを進行するための初期環境設定について説明しています。

 

地図サービスの核心である地図APIを設定し、適用する講義を収録しました。

本講義では、NAVER地図APIを使用しており、アプリケーションの作成およびAPIキーの発行、そしてウェブ上でNAVER地図APIを表示させる方法について説明しています。

 

地図サービスで表示されるバナー部分とインフォボックスを生成する講義を収録しました。

地図サービスおよびウェブサービスに必要な上部バナーとインフォボックスを生成し、CSSを通じてユーザーに表示させる作業を説明する講義です。本講義を通じて、地図上に情報を表示する方法であるバナーとインフォボックスの作成方法を学ぶことができます。

 

地図サービスでデータを表示する方法の一つである、マーカーについて説明するセクションです。

複数のマーカーを生成して地図上に表示し、クリックイベントを追加する方法を説明する講義です。マーカーをクリックした際にインフォウィンドウを表示・非表示にする機能を実装し、地図にもクリックイベントを追加する方法を説明します。

 

Section 6 - 現在地を地図上に表示する

 

地図サービスで最も活用され、基本となる現在地を取得し、それを地図上にマーカーで表示する方法について説明するセクションです。

現在位置を取得するためのボタンを作成し、jQueryを使用してクリックイベントを付与し、現在位置にマーカーを生成する方法を説明します。また、マーカーの周囲に広がるアニメーション効果を付与する方法についても扱っています。

Section 7 - 現在地を地図上に表示する

 

カカオAPIを活用して目的地を検索し、それを地図上に表示する方法について説明するセクションです。

カカオが提供するkeyword search apiを活用して、ユーザーから目的地を入力してもらい、地図上に表示する機能を実装します。該当する目的地の緯度と経度を結果として受け取った後、それを処理する方法について学ぶことができ、地図上に1つのマーカーだけを表示させるエラーハンドリングについても扱っています。

コロナマップをいつ、どのように企画したのかを開発日誌としてまとめました。現在運営されているコロナマップがどのように誕生し、どのようなきっかけで企画・運営しているのかを簡単に紹介しています。

 

 

この講座ならではの特徴

コロナマップの開発者が、初期環境の設定から地図サービスの実装までを直接教える講座です。

そのため、地図サービスを初めて経験する開発者も簡単にアプローチできるように制作されており、現在多くの利用者が使用している地図サービスをクローンすることで、
単なるプロジェクトではなく、企画・開発過程で得たノウハウはもちろん、コロナマップで実際に使用されているコードまで確認することができます。.

 

 

扱うツール

• VS Code - 開発を行うためのIDE（統合開発環境）
• express - ウェブアプリケーションフレームワーク
• naver map api - ネイバー地図を表示するためのapi

 

 

 

Web開発を全く学んだことがない初心者なら？ 👀

"ウェブの基礎から一歩ずつ、
地図サービス制作まで" ロードマップへ