inflearn logo
知識共有
inflearn logo

コロナマップ開発者ず䞀緒に䜜る地図サヌビス 1

コロナマップの開発者が教える地図サヌビス䜜り講座です。

難易床 初玚

受講期間 無制限

Node.js
Node.js
Web Application
Web Application
Express
Express
VSCode
VSCode
Node.js
Node.js
Web Application
Web Application
Express
Express
VSCode
VSCode

孊習した受講者のレビュヌ

4.8

5.0

읎혞진

8% 受講埌に䜜成

講矩ごずに字幕が付いおいお芋やすくなりたした〜指導サヌビスの基本知識を孊ぶのに良かったです。

5.0

lgw9898

100% 受講埌に䜜成

こんにちは。コム公関連の孊生の性質䞊よく共有しおくれる人が倚いのですが、最初からじっくりず本圓にありがずうございたす。さらに説明は本圓にずおも良いので、本圓に最高です。他の受講生の方々のヒントを差し䞊げれば講矩だけ聞いお同じように完成した立堎で、倧小文字区分だけうたくいけば問題なく完成できたす。本圓に本圓にありがずうございたす。

5.0

신은겜

8% 受講埌に䜜成

声が倧奜きです。講矩に適したレッスンみたいです。わかりやすく説明しおくれお理解が倧倉です。い぀もコロナマップのサヌビス過皋が気になりたした 

受講埌に埗られるこず

  • Web開発のための基本的な初期環境構築

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

  • 基本的な地図サヌビスに必芁なマヌカヌ、情報りィンドり、情報ボックスの生成

  • Web開発に必芁なHTML、CSS、JSに関する知識

  • カカオAPIを通じた目的地怜玢機胜の実装

コロナマップ開発者ず䞀緒に孊ぶ、実際の地図サヌビス実装

<出兞 : KTV, EBS>

こんにちは、開発者のむ・ドンフンです。
私は今回、1400䞇人が利甚し、4400侇PVを超えたコロナマップず、
マスクのリアルタむム圚庫状況を衚瀺する マスクマップを䌁画・開発したした。

サヌビスを運営しながら最も倚くいただいた質問の䞀぀が、
「コロナマップのようなサヌビスを䜜っおみたいのですが、どこでどのように始めればいいのか分かりたせん」ずいうものでした。
そこで講矩の制䜜を考えるようになり、本圓に良い機䌚に恵たれお今回の講矩を䜜るこずになりたした。

初めおの講矩なので至らない点も倚いかず思いたすが、倚くの方々のお圹に立おれば幞いです。
改めたしお、本圓にありがずうございたすい぀でもフィヌドバックをお埅ちしおおりたす。

 

 

地図サヌビス開発、なぜ孊ぶず良いのでしょうか

<出兞朝鮮日報>

青瓊台の業務報告に出垭した際に聞いた蚀葉の䞭で、最も印象深かったのは

'コロナマップは、政府が情報を公開する方法においお新しい発想だ。政府の広報方匏に「発想の転換」をしなければならない。特に匷く芁請する」でした。コロナマップの基盀ずなる新しい発想ずしお認識される地図UIは、ナヌザヌに最も効率的か぀盎感的に情報を衚瀺する方法です。

サヌビスを䌁画したり開発したりする際、ナヌザヌに盎感的で玠早く簡単に情報を提䟛するこずがたすたす重芁になっおいる珟状においお、本講矩を通じお地図サヌビスを䜜るための基本蚭定から掻甚方法たでを皆様にお䌝えしたいず思いたす。

 

 

実際に地図サヌビスを䜜っおみおください。

以䞋は、本講矩で制䜜する地図サヌビスです。

 

 

本講矩では、地図サヌビスを䜜るための基瀎知識を孊ぶ予定です。

  1. NAVER地図APIによるりェブ地図の衚瀺
  2. 情報提䟛に必芁なバナヌずむンフォボックスの䜜成
  3. 耇数のマヌカヌを生成しお地図䞊に衚瀺し、クリックむベントを远加する
  4. 珟圚地を取埗し、アニメヌションが適甚されたマヌカヌを地図䞊に衚瀺する
  5. Kakao APIを通じた目的地怜玢機胜の実装

講矩で孊ぶ知識は、珟圚コロナマップで掻甚されおいる知識です。このように、本講矩を通じお受講生の皆様が今埌地図サヌビスを制䜜する際にお圹に立おるず考えおおりたす。

 

 

䜕を孊ぶのでしょうか

Section 1 - 講矩玹介

本講矩ずこれから制䜜するプロゞェクトに぀いおの玹介、そしおりェブ開発を始める際にコロナマップ・クロヌンプロゞェクトから埗られる基瀎的な知識に぀いお説明しおいたす。

 

Section 2 - 初期環境の構築

プロゞェクトを進行するための初期環境をむンストヌルし、蚭定する方法に぀いおの講座が含たれおいたす。本講矩では、VS Code、
node.js、expressをむンストヌルし、プロゞェクトを進行するための初期環境蚭定に぀いお説明しおいたす。

 

Section 3 - 地図APIの玹介および蚭定

地図サヌビスの栞心である地図APIを蚭定し、適甚する講矩を収録したした。

本講矩では、NAVER地図APIを䜿甚しおおり、アプリケヌションの䜜成およびAPIキヌの発行、そしおりェブ䞊でNAVER地図APIを衚瀺させる方法に぀いお説明しおいたす。

 

Section 4 - バナヌおよびむンフォボックスの䜜成

地図サヌビスで衚瀺されるバナヌ郚分ずむンフォボックスを生成する講矩を収録したした。

地図サヌビスおよびりェブサヌビスに必芁な䞊郚バナヌずむンフォボックスを生成し、CSSを通じおナヌザヌに衚瀺させる䜜業を説明する講矩です。本講矩を通じお、地図䞊に情報を衚瀺する方法であるバナヌずむンフォボックスの䜜成方法を孊ぶこずができたす。

 

Section 5 - マヌカヌの生成およびむベント蚭定

地図サヌビスでデヌタを衚瀺する方法の䞀぀である、マヌカヌに぀いお説明するセクションです。

耇数のマヌカヌを生成しお地図䞊に衚瀺し、クリックむベントを远加する方法を説明する講矩です。マヌカヌをクリックした際にむンフォりィンドりを衚瀺・非衚瀺にする機胜を実装し、地図にもクリックむベントを远加する方法を説明したす。

 

Section 6 - 珟圚地を地図䞊に衚瀺する

 

地図サヌビスで最も掻甚され、基本ずなる珟圚地を取埗し、それを地図䞊にマヌカヌで衚瀺する方法に぀いお説明するセクションです。

珟圚䜍眮を取埗するためのボタンを䜜成し、jQueryを䜿甚しおクリックむベントを付䞎し、珟圚䜍眮にマヌカヌを生成する方法を説明したす。たた、マヌカヌの呚囲に広がるアニメヌション効果を付䞎する方法に぀いおも扱っおいたす。

Section 7 - 珟圚地を地図䞊に衚瀺する

 

カカオAPIを掻甚しお目的地を怜玢し、それを地図䞊に衚瀺する方法に぀いお説明するセクションです。

カカオが提䟛するkeyword search apiを掻甚しお、ナヌザヌから目的地を入力しおもらい、地図䞊に衚瀺する機胜を実装したす。該圓する目的地の緯床ず経床を結果ずしお受け取った埌、それを凊理する方法に぀いお孊ぶこずができ、地図䞊に1぀のマヌカヌだけを衚瀺させる゚ラヌハンドリングに぀いおも扱っおいたす。

Section 0 - [付録] コロナマップ日誌

コロナマップをい぀、どのように䌁画したのかを開発日誌ずしおたずめたした。珟圚運営されおいるコロナマップがどのように誕生し、どのようなきっかけで䌁画・運営しおいるのかを簡単に玹介しおいたす。

 

 

この講座ならではの特城

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

そのため、地図サヌビスを初めお経隓する開発者も簡単にアプロヌチできるように制䜜されおおり、珟圚倚くの利甚者が䜿甚しおいる地図サヌビスをクロヌンするこずで、
単なるプロゞェクトではなく、䌁画・開発過皋で埗たノりハりはもちろん、コロナマップで実際に䜿甚されおいるコヌドたで確認するこずができたす。.

 

 

扱うツヌル

  • VS Code - 開発を行うためのIDE統合開発環境
  • express - りェブアプリケヌションフレヌムワヌク
  • naver map api - ネむバヌ地図を衚瀺するためのapi

 

 

 

Web開発を党く孊んだこずがない初心者なら 👀

 

こんな方に
おすすめです

孊習察象は
誰でしょう

  • コロナマップのような地図サヌビスを䜜っおみたい方ぞ

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

  • 自分だけのりェブサヌビスを䜜っおみたい方ぞ

前提知識、
必芁でしょうか

  • HTML

  • CSS

  • Javascript

こんにちは
donghuneeです。

1,352

受講生

120

受講レビュヌ

165

回答

4.8

講座評䟡

3

講座

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

4,400䞇回以䞊の閲芧数を蚘録した「コロナマップ」を最初に䌁画・開発し、その埌も「マスクマップ」や「コロナミ」を通じお、倚くのナヌザヌの䞍䟿を解消するサヌビスを運営しおいたす。

珟圚は小さなスタヌトアップを創業し、CTOずしお粟力的に開発に取り組んでいたす。

ありがずうございたす。

もっず芋る

カリキュラム

党䜓

25件 ∙ (1時間 57分)

講座掲茉日: 
最終曎新日: 

受講レビュヌ

党䜓

92ä»¶

4.8

92件の受講レビュヌ

  • ldh17665963님의 프로필 읎믞지
    ldh17665963

    受講レビュヌ 1

    ∙

    平均評䟡 5.0

    5

    8% 受講埌に䜜成

    声が倧奜きです。講矩に適したレッスンみたいです。わかりやすく説明しおくれお理解が倧倉です。い぀もコロナマップのサヌビス過皋が気になりたした 

    • donghunee
      知識共有者

      こんにちはりンギョン〜倚少足りない講矩にも良い評䟡をいただきありがずうございたす〜コロナマップを䌁画しお開発しながら埗たノりハりを今埌継続的に曎新する予定なので、倚くの関心をお願いいたしたす。

  • ehdgns17664658님의 프로필 읎믞지
    ehdgns17664658

    受講レビュヌ 2

    ∙

    平均評䟡 5.0

    5

    8% 受講埌に䜜成

    講矩ごずに字幕が付いおいお芋やすくなりたした〜指導サヌビスの基本知識を孊ぶのに良かったです。

    • donghunee
      知識共有者

      こんにちは、ホゞン様〜😆初の講矩でたくさん足りたせんでしたが、圹に立ったのは本圓にありがずうございたした。今埌も講矩を曎新する予定なので、倧倉お䞖話になりたす🀗🀗🀗

  • lgw98985062님의 프로필 읎믞지
    lgw98985062

    受講レビュヌ 1

    ∙

    平均評䟡 5.0

    5

    100% 受講埌に䜜成

    こんにちは。コム公関連の孊生の性質䞊よく共有しおくれる人が倚いのですが、最初からじっくりず本圓にありがずうございたす。さらに説明は本圓にずおも良いので、本圓に最高です。他の受講生の方々のヒントを差し䞊げれば講矩だけ聞いお同じように完成した立堎で、倧小文字区分だけうたくいけば問題なく完成できたす。本圓に本圓にありがずうございたす。

    • wkshwk0519님의 프로필 읎믞지
      wkshwk0519

      受講レビュヌ 4

      ∙

      平均評䟡 5.0

      5

      84% 受講埌に䜜成

      ドンフンずおもよく孊んでいたす䞖界が玠敵でファむティング

      • yongchanski6650님의 프로필 읎믞지
        yongchanski6650

        受講レビュヌ 3

        ∙

        平均評䟡 5.0

        5

        96% 受講埌に䜜成

        実践講矩を通じお党䜓的に指導サヌビスをどのように䜜り掻甚するかを孊べた講矩でした。 講垫様の芪切で詳しい説明で本圓にたくさん圹に立ちたした。 䞀番印象深かったのは、Q&Aぞの回答速床ず现かく芋おくださる芪切さでした。 今埌、DBなど様々なコンテンツを曎新しおいただきたすが、アップロヌドされたら是非確認しお远加で勉匷させおいただきたす。 こんなお埗な講矩を䜜っおくれおありがずう。

        donghuneeの他の講座

        知識共有者の他の講座を芋おみたしょう

        䌌おいる講座

        同じ分野の他の講座を芋おみたしょう

        新芏䌚員登録で25%OFF

        ï¿¥3,266

        25%

        ï¿¥4,356