コロナマップ開発者と一緒に、指導サービスを征服する🧭
マップサービスの制作 に関する多くの悩み! 「地図サービスを作りたいのですが、どこから始めるべきかわかりません。」 「場所に関する情報をDBに保存したいのですが、どうすればいいですか?」 「地図の上にデータが多くなると最適化が必要なのにどうすればいいですか?」
VIDEO
VIDEO
こんにちは、開発者イ・ドンフンです。 私は1400万人が利用したコロナマップ、そしてマスクマップを企画・開発しました。
薬局マスク在庫を地図上に可視化したプロジェクト「マスクマップ」
確定者銅線を地図上に点と線で表示したプロジェクト「コロナマップ」
サービス運営中に最もよく寄せられた質問の1つ「コロナマップのようなサービスを作ってみたいのですが、どこでどのように始めるのかわかりません」でした。 そこで講義制作を考えることになり、昨年、指導サービス入門者のための講義を提供しました。
多くの方々の応援と関心のおかげで初講義であるにもかかわらず、良いフィードバックをたくさん受けました。 講義へのフィードバックの中で、より多様な機能を学びたいという意見が多く、新しい講義を計画することになり、本講義を制作しました。
Inflearn <コロナマップ開発者との指導サービスを作成> 講義受講評
今回の講義では、MongoDB、Mongoose、アップロード機能、マーカークラスタリング、行政区域の可視化など、 より深化した内容を追加し、コロナマップを現在まで運営しながら得た指導サービス制作ノウハウ を盛り込んでいます。コロナマップで使用した機能、最適化方法、ライブラリの活用方法などをできるだけわかりやすく講義に解き明かしました。
皆さんの指導サービスの実力向上に多くのお役に立てば幸いです。 ありがとう:)
なぜ地図サービス なのか?
出典:ジェンリー公式ホームページ
現在1000万ダウンロードアプリ「Zenly(ジェンリー) - 親しい友達同士」 をご存知ですか?
いわゆるZ世代が頻繁に利用するサービスで、地図上に友達の位置、バッテリー、移動速度などを表示してお互いに共有するサービスです。これにより、ジェンリーは新たなコミュニケーション方式で急浮上して人気を得ています。今日、Z世代は自分の現在地と移動経路を他人と共有するのになじみがあると表現できます。
出典:ジェンリー公式ホームページ
これは現在のトレンドとして位置づけられ続けています。 そのため、位置情報や移動経路を可視化する地図サービスの重要性も 大幅に増加すると予想しています。 位置情報を視覚化するのに最適なUIはまさに地図だからです。
現在はコロナ19のため外部への出入りは自由ではありませんが、もしコロナ19を克服する時期が来れば必然的にオフライン活動に対する需要も増加し、関連事業も成長すると思います。このようなオフライン活動を支援するのが、場所、座標を一目で視覚化できる地図UIです。
コロナマップもマップUIを採用し、1400万人を超えるユーザーに多くの助けを与えました。このように、地図サービスはさまざまなサービスと組み合わせることができ、 爆発的な可能 性を持っています。
他人と差別化された自分だけの強みを育てたい方にこの講義をお勧めします。
何を学びますか?学習内容&講義の特徴
国内唯一! 指導サービス制作講義
MongoDB / Mongoose / Node.js / Express / Naver map API / Kakao map API
データに基づいてマーカーを作成し、 インフォウィンドウを表示する機能 指導サービスの運営に必要な機能を選別して講義 で提供します。その機能がなぜ、どのように書かれたのかを理解しやすくするための説明 を提供します。 字幕を提供 して講義により集中できる環境を提供します。 セクション別紹介 Section 0. 講義の紹介 プロジェクトと講義の紹介を通じて、今後作成するマップサービスで学ぶことができる機能について説明します。
Section 1. 初期環境の構築 プロジェクト制作に必要な初期環境を設置して設定する方法を紹介します。 Node.jsとVS Code、開発に必要な必須パッケージをインストールして実行してみます。
Section 2. マップサービスプロジェクトの構築 Expressを活用してサーバーを実行し、指導サービスを作成する準備をします。 Naver Maps APIを発行してそのプロジェクトに適用します。
Section 3. マーカーとインフォウィンドウの作成 マーカーを表示し、クリックイベントを追加してインフォウィンドウを表示する方法について説明します。複数のマーカーを表示したり、CSSを介してマーカーアイコンを変更したり、イベントを追加してユーザーの利便性を向上させることができます。また、インフォウィンドウを活用して情報を地図上に表示します。
Section 4. MongoDBとMongooseの活用 NoSQLの代表的なDBであるMongoDBを紹介し、ホスティングしてみる方法について紹介します。また、CompassというDB管理ツールをインストールして実行してみます。また、Node.jsとMongoDB用のODMパッケージであるMongoseを紹介してインストールし、スキーマを作成します。
Section 5. アップロード機能初期環境構築 カカオAPIを活用してキーワード検索機能を実装し、結果データに基づいて地図上に表示する機能を追加してアップロード機能のための初期環境を構築してみます。
Section 6. アップロード機能の仕上げ キーワード検索結果データをMongoDBに保存し、地図上に表示する方法を学びます。 Postmanと通信し、アップロードサーバーを構築します。
Section 7. マーカークラスタリング機能の実装 マップサービスの最適化方法の1つであるマーカークラスタリング機能を紹介して実装します。マップサービスで表示する必要があるデータが多い場合は、クラスタリング機能を介してそれらを収集して表示します。
Section 8. 行政区域(度)データレイヤー表示 行政区域別に区画を分けて視覚化する方法について紹介します。また、行政ゾーンごとに該当ゾーンをクリックしたとき、マウスが上がったとき、下がったときに応じたイベントを追加してツールチップとそのゾーンの色を変更する機能を実装してみます。
よくある質問 Q. 授業内容をどの程度レベルまで扱いますか?
本講義では、指導サービスを作成するための基礎的な内容から、より深化的な内容まで広いスペクトルを提供する予定です。 そのため初級~中級までの難易度を持っています。
Q. ネイバーAPIとカカオAPIの両方を書いた理由はありますか?
それぞれのメリットがあるので、これを最大限に活用したいからです。 Naver Map APIは、追加の機能と最適化がうまくいっていると考えており、カカオAPIの場合、キーワード検索機能のパフォーマンスが非常に良いので、2つをすべて採用して両方の利点を最大化しようとしています。
Q. 非専攻者も聞くことができますか?
当然可能です。ただし、地図サービスの特性上、JavaScriptを多く使用する必要があるため、基礎的な知識が求められる場合があります。そのため、関連知識が不足している場合は、その講義で提供するロードマップを通じてHTML、CSS、JS関連の基礎知識を習得後に受講することをお勧めします。
Q.以前の講義との違いは何ですか?
以前の講義「コロナマップ開発者と一緒に指導サービスを作る」の場合、指導サービス 制作入門のための講義でした~!単に地図を浮かべたり、マーカーを表示するなどの基本的な機能だけを学びたい場合は、以前の講義を受講することをおすすめします。 本講義には、サーバー通信、MongoDBとMongooseによるデータハンドリング、マーカークラスタリング、Ajax、データレイヤー表示など、初級から中級までの内容が盛り込まれています。そのため、より多くの機能を学習したい方におすすめです。
地図サービス制作、完全基礎 から始めたいのなら?
「ウェブ基盤からじっくりと、 地図サービスを作成する"ロードマップのショートカット
VIDEO