恵比寿駅近辺のamuで行われた、
フロントもくもく会#11でLTさせていただきました!
社内勉強会での登壇経験はあるのですが、
社外は初だったので、とても緊張しました…
フロントもくもく会って?
参加させていただいているフロントもくもく会について、
軽く説明させていただきます!
上記コミュニティの方が、amuという施設を貸し切り状態にし、
土曜の10:00〜13:00に開催されている、もくもく会となります。
-未来を編む- amu(あむ) | 恵比寿 amuのメディアサイト
Wi-Fi環境を用意していただいてますし、 いい感じで太陽光が差し込んで、とても集中できる雰囲気でした!
また、機会あれば参加させていただここうかなと思います。
今回のスライド
今回発表したスライドは「OpenLayersで始める地図の操作」というものです。
概要
内容はざっくりと…
- OpenLayersとは地図表示用JSライブラリ
- GoogleMapsの料金体系変更について軽く触れる
- Google MapsとOpenLayersの対比
- 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の取得方法については、以下の記事が参考になります。
ぜひ試してみてください!
参考にさせていただいたスライド
今回は、Twitterで拡散されていた以下のスライドを参考に作らせていただきました。
2018/07/14(土)に行われた、 以下Rails系のイベントで発表されたみたいです。
Rails Developers Meetup 2018 Day 3 Extreme|IT勉強会ならTECH PLAY[テックプレイ]
Keynoteのテーマ「Azusa」をベースとし、
色や吹き出しの使い方などをわかりやすくシンプルに書かれていて、
これは・・・と思い、参考にさせていただきました。
(感謝しかありません、感謝感謝・・・)
自分と同じく、デザインに自身がないかたには、
必ず参考になるスライドと思いますので、
機会あれば一読してみてください!
感想と締め
結論、LTやってみてよかったです!
LTをきっかけに、もくもく会用のSlackチャンネルにて、
- OpenLayersって初めて知った!
- 既出かもだけど、トイレ用地図とかいいよね
- 軽く実装できるから、実案件でも使ったみたい
のような感想をいただいたり、議論があり、
自分が発表した内容を題材にアイディアを深堀できるのが、
アイディアソンっぽくて、非常に楽しめました!
発表のネタ考えたり、デモ環境作るのも大変だけど、
こういった話ができると新たなアイディアを思いついたり、
知見が広がるので、これからはもっと登壇やLTを増やしていきたい・・・
と思いました。
近々、社内で本スライドの再演+LTと、社外でのLTがあるので、
またスライド作ったら公開させていただきます!
それでは!