ざきの学習帳(旧 zackey推し )

日々の学びを書きます

【登壇・LT】フロントもくもく会#11 で「OpenLayersで始める地図の操作」をLTさせていただきました(2018/07/21)

恵比寿駅近辺のamuで行われた、
フロントもくもく会#11でLTさせていただきました!

html5ebisu.connpass.com

社内勉強会での登壇経験はあるのですが、
社外は初だったので、とても緊張しました…

フロントもくもく会って?

参加させていただいているフロントもくもく会について、
軽く説明させていただきます!

html5ebisu.connpass.com

上記コミュニティの方が、amuという施設を貸し切り状態にし、
土曜の10:00〜13:00に開催されている、もくもく会となります。

-未来を編む- amu(あむ) | 恵比寿 amuのメディアサイト

Wi-Fi環境を用意していただいてますし、 いい感じで太陽光が差し込んで、とても集中できる雰囲気でした!

また、機会あれば参加させていただここうかなと思います。

今回のスライド

今回発表したスライドは「OpenLayersで始める地図の操作」というものです。

speakerdeck.com

概要

内容はざっくりと…

  • OpenLayersとは地図表示用JSライブラリ
  • GoogleMapsの料金体系変更について軽く触れる
  • Google MapsOpenLayersの対比
  • codepenを用いた簡単なデモ

な感じです。

デモについて

最後の方のデモについてはスライドにURL貼り付けてありますが、
こちらからもアクセスできるようにしておきます!

See the Pen OpenLayers5-20180721LT-Demo by zucky (@zucky_zakizaki) on CodePen.

ただし、GoogleMapsを表示させるには、
ご自分が発行されたAPIKeyを指定する必要があります。
(以下の部分)

    <!-- {YOURKEY}へ自分のGoogleMapApiKeyを設定してください -->
    <script src="https://maps.googleapis.com/maps/api/js?key={YOURKEY}"></script>

APIKeyの取得方法については、以下の記事が参考になります。
ぜひ試してみてください!

nendeb.com

参考にさせていただいたスライド

今回は、Twitterで拡散されていた以下のスライドを参考に作らせていただきました。

speakerdeck.com

2018/07/14(土)に行われた、 以下Rails系のイベントで発表されたみたいです。

Rails Developers Meetup 2018 Day 3 Extreme|IT勉強会ならTECH PLAY[テックプレイ]

Keynoteのテーマ「Azusa」をベースとし、 色や吹き出しの使い方などをわかりやすくシンプルに書かれていて、
これは・・・と思い、参考にさせていただきました。
(感謝しかありません、感謝感謝・・・)

自分と同じく、デザインに自身がないかたには、
必ず参考になるスライドと思いますので、
機会あれば一読してみてください!

感想と締め

結論、LTやってみてよかったです!

LTをきっかけに、もくもく会用のSlackチャンネルにて、

  • OpenLayersって初めて知った!
  • 既出かもだけど、トイレ用地図とかいいよね
  • 軽く実装できるから、実案件でも使ったみたい

のような感想をいただいたり、議論があり、
自分が発表した内容を題材にアイディアを深堀できるのが、
アイディアソンっぽくて、非常に楽しめました!

発表のネタ考えたり、デモ環境作るのも大変だけど、
こういった話ができると新たなアイディアを思いついたり、
知見が広がるので、これからはもっと登壇やLTを増やしていきたい・・・
と思いました。

近々、社内で本スライドの再演+LTと、社外でのLTがあるので、
またスライド作ったら公開させていただきます!
それでは!