Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
まるポケサーチを作った。あるいは幾何・地図系JavaScriptライブラリの紹介
Search
北䑓如法
October 02, 2016
Technology
0
1.5k
まるポケサーチを作った。あるいは幾何・地図系JavaScriptライブラリの紹介
如法会 2 において、「まるポケサーチを作った」 (あるいは幾何・地図系JavaScriptライブラリの紹介) を発表しました。2016年10月2日(日)
北䑓如法
October 02, 2016
Tweet
Share
More Decks by 北䑓如法
See All by 北䑓如法
ビジュアライゼーションと数学 〜 すうがくむかしばなし 負の数・複素数編 〜 / Visualization-and-mathematics-OSH2022
nyoho
0
540
初心者、電子工作に入門。 Python Charity Talks 2021.09 / A beginner started electronic handicraft - Python Charity Talks 2021.09
nyoho
0
13k
Next.js + Heroku + Dockerでも玉ねぎの汁で涙が出んように 〜PyCon mini Hiroshima サイト構築の一コマ〜 / Avoiding onion essence with Next.js + Heroku + Docker -- development of the site of PyCon mini Hiroshima
nyoho
0
350
SageMathで数学の力を上げます PyCon mini Hiroshima 2019 / Enlarge your ability of mathematics with SageMath
nyoho
1
650
Python初心者がPyTorchをいじって機械学習の計算してみた PyCon mini Hiroshima 2018 / Python-newbies machine learning learning with PyTorch
nyoho
2
1.1k
RubyKaigi 2017 の告知 / A notification of RubyKaigi 2017 at WTM100
nyoho
0
2k
数式の書けるMastodonその名もMathtodon を作った (#OSO2017 懇親会LT) / Introduction to Mathtodon
nyoho
2
1.5k
秋深しポッドキャストをやっていき / Yatteiking Podcast 2016 Autumn OSC 2016 Hiroshima
nyoho
0
640
ぽまいらははてブを甘う見すぎちょるっ
nyoho
0
490
Other Decks in Technology
See All in Technology
CDK Toolkit Libraryにおけるテストの考え方
smt7174
1
530
How to Quickly Call American Airlines®️ U.S. Customer Care : Full Guide
flyaahelpguide
0
240
AIでテストプロセス自動化に挑戦する
sakatakazunori
1
420
Amazon SNSサブスクリプションの誤解除を防ぐ
y_sakata
3
180
Digitization部 紹介資料
sansan33
PRO
1
4.5k
SRE不在の開発チームが障害対応と 向き合った100日間 / 100 days dealing with issues without SREs
shin1988
2
1.9k
LIXIL基幹システム刷新に立ち向かう技術的アプローチについて
tsukuha
1
250
“日本一のM&A企業”を支える、少人数SREの効率化戦略 / SRE NEXT 2025
genda
1
240
セキュアな社内Dify運用と外部連携の両立 ~AIによるAPIリスク評価~
zozotech
PRO
0
120
SREの次のキャリアの道しるべ 〜SREがマネジメントレイヤーに挑戦して、 気づいたこととTips〜
coconala_engineer
1
4.1k
サイバーエージェントグループのSRE10年の歩みとAI時代の生存戦略
shotatsuge
4
980
AWS CDK 入門ガイド これだけは知っておきたいヒント集
anank
5
720
Featured
See All Featured
Building an army of robots
kneath
306
45k
Designing for humans not robots
tammielis
253
25k
How GitHub (no longer) Works
holman
314
140k
Raft: Consensus for Rubyists
vanstee
140
7k
Practical Orchestrator
shlominoach
189
11k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
700
Building Adaptive Systems
keathley
43
2.7k
The Cost Of JavaScript in 2023
addyosmani
51
8.6k
Being A Developer After 40
akosma
90
590k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Transcript
Λ࡞ͬͨ ͋Δ͍زԿ/ਤܥJavaScriptϥΠϒϥϦͷհ Nyoho 201610݄2() ๏ձ 2 (⊃ LTۦಈ։ൃ 26)
ࣗݾհ
None
KITADAI, Yukinori 㝳๏ ▸ ͖͍ͨͩΏ͖ͷΓ ▸ ๏ΛԻಡΈ(༗৬ಡΈ)ͯ͠ʹΐ΄͏ ▸ Twitter: @NeXTSTEP2OSX
▸ ๏ձओ࠻
J1BEౡห ݕࡧ ৄ͘͠
Nyoho’s New Single! Now Online! ࠷ۙՎΛϦϦʔε͠·ͨ͠ʙ! ▸ “Theme of MaruPokeSearch”
▸ https://soundcloud.com/zej32lwarsuy/ theme-of-marupokesearch
None
None
None
·Δϙέαʔνͱ ▸ ਓؾҐஔήʔ Pokémon GO Ͱɺ ▸ ܘ 200 m
ͷԁΛͨ͘͞Μඳ͖ɺ ▸ ଘࡏ෦ͷڞ௨෦ͱআ֎෦ͷू߹ͷ ࠩू߹Λදࣔ͢Δ!
ςΩετ ֶతʹ Λදࣔ͢ΔΣϒΞϓϦ
PVͰ͍ํઆ໌ https://www.youtube.com/ watch?v=PUprUK6InvQ
ศརͩͳ
Using pure HTML, pure CSS & pure JavaScript ▸ ͳΜͱͳ͘ؾసʹɺٱʑʹੜͷHTML,
CSS, JavaScriptͰ࡞ͬͯΈͨɻ ▸ ҎԼɺಛʹJavaScriptͰษڧʹͳͬͨ͜ͱ
JavaScript: ࠓճ ษڧʹͳͬͨ͜ͱ
CookieΛอଘ͢Δ ▸ https://github.com/js-cookie/js-cookie ▸ ͏ͷ؆୯ɻ Cookies.set('key', value); Cookies.get(‘key'); var areasInCookies
= Cookies.getJSON('areas'); ▸ ศརɻ
JSTS ▸ https://bjornharrtell.github.io/jsts/ ▸ زԿϥΠϒϥϦɻ ▸ ฏ໘ͷྖҬͷڞ௨෦ɺू߹ɺࠩू߹ͳͲΛܭࢉ ͯ͘͠ΕΔɻ var factory
= new jsts.geom.GeometryFactory(); factory.createPolygon(factory.createLinearRing(path2JTS(circl ePath(area.object)))); area2.intersection(area1); area2.difference(area1);
Leaflet ▸ http://leafletjs.com ▸ an open-source JavaScript library for mobile-friendly
interactive maps ▸ ਤͷGoogle MapsͷMarkerͳͲ͚ͩͰ ͳ͘ɺখؾຯ͍͍ػೳΓͩ͘͞Μɻ ▸ νϡʔτϦΞϧ͕ͱ͍͍ͯΑɻݟͯΈͯɻ
Polyfill ▸ http://polyfill.io ▸ <script src=“https://cdn.polyfill.io/v2/polyfill.min.js? features=fetch,requestAnimationFrame,Element.prototype.classLis t,URL"></script> ▸ ͱHTMLʹॻ͍͓ͯ͘ͱ
fetch ͕͑ͳ͍ϒϥ βͰ fetch Ͱ͖ΔΑ͏ʹͳΔ ͳͲ ▸ ͬ͘͞ͱϞμϯϥΠϒϥϦ͔͍͍ͭͨͱ͖ʹศར ͩͳɻ(ࠓճleafletΛ͍͔ͨͬͨ)
͋ͱJavaScriptͷجຊΛษڧͨ͠ ▸ ArrayΛؔܕͬΆ͘ .map ͍ͨ͠ → Ͱ͖Δ // ྫ jstsܗࣜͷύεΛGoogle
Mapsͷܗࣜʹม͢Δ var coords = jstsPath.getCoordinates().map(function(a) { return {lat: a.x, lng: a.y}; }); ▸ ArrayΛؔܕͬΆ͘ .reduce ͍ͨ͠ → Ͱ͖Δ ▸ ArrayΛؔܕͬΆ͘ .filter ͍ͨ͠ → Ͱ͖Δ ▸ ੲͷBASICͳfor-loopճ͠͠ͳͯ͘Α͘ؾ͍͍࣋ͪ!
ςʔϚۂʹͭ ͍ͯ
ςʔϚۂ ▸ GarageBandͰ࡞ۂ ▸ Drummer͕ͱͯศར (Demo) ▸ ϝϩσΟଉࢠ(5)τϥοΫ͋Γ ▸ ίʔϥεجຊ3ԻͰࠨӈʹ
▸ ʮαʔνʯ͕3τϥοΫɻ්Ͱ6ਓ
࠷ޙʹ
ςΩετ Ґஔήʔͷޣຯ from an old WILLCOMer ▸ ୳ָ͢͠͞ ▸ +
Βͳ͍ͱ͜Ζʹߦָ͘͠͞ ▸ + ͍ͬͯΔͣͷॴͷ࠶ൃݟͷָ͠͞ ▸ ☑NianticͷαʔόͷAPIΛୟ͍ͯϙέϞϯͷҐஔΛΔ πʔϧͰɺ͜ͷָ͠͞ಘΒΕͳ͍ɻ୳͢ ▸ ☑πʔϧΛָͬͯ͠ΈຯΘ͑Δɻͦ͏ɺ·Δϙέ αʔνͳΒͶɻ(ਤΛยखʹ୳͍ͯ͠Δঢ়ଶ)
ه ▸ ؼΓʹ @mu2in ͘Μ͕·ΔϙέαʔνΛ ͬͯϋΫϦϡΛݟ͚͍ͭͯͨΐ!
ه ▸ Θ͠ؼΓʹ·ΔϙέαʔνΛͬͯϛχ ϦϡΛั·͑ͨΐ!
使ってみてねὑ