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
united airlines ™®️ USA Contact Numbers: Complete 2025 Support Guide
flyunitedhelp
1
470
AI Ready API ─ AI時代に求められるAPI設計とは?/ AI-Ready API - Designing MCP and APIs in the AI Era
yokawasa
8
2.1k
How Do I Contact Jetblue Airlines® Reservation Number: Fast Support Guide
thejetblueairhelpsupport
0
150
アクセスピークを制するオートスケール再設計: 障害を乗り越えKEDAで実現したリソース管理の最適化
myamashii
1
670
Maintainer Meetupで「生の声」を聞く ~講演だけじゃないKubeCon
logica0419
0
110
モニタリング統一への道のり - 分散モニタリングツール統合のためのオブザーバビリティプロジェクト
niftycorp
PRO
1
520
Deep Security Conference 2025:生成AI時代のセキュリティ監視 /dsc2025-genai-secmon
mizutani
4
2.9k
〜『世界中の家族のこころのインフラ』を目指して”次の10年”へ〜 SREが導いたグローバルサービスの信頼性向上戦略とその舞台裏 / Towards the Next Decade: Enhancing Global Service Reliability
kohbis
3
1.5k
名刺メーカーDevグループ 紹介資料
sansan33
PRO
0
820
Amplify Gen2から知るAWS CDK Toolkit Libraryの使い方/How to use the AWS CDK Toolkit Library as known from Amplify Gen2
fossamagna
1
350
Autify Company Deck
autifyhq
2
44k
Amazon SNSサブスクリプションの誤解除を防ぐ
y_sakata
3
190
Featured
See All Featured
Building Adaptive Systems
keathley
43
2.7k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
340
Thoughts on Productivity
jonyablonski
69
4.7k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Docker and Python
trallard
45
3.5k
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 ͘Μ͕·ΔϙέαʔνΛ ͬͯϋΫϦϡΛݟ͚͍ͭͯͨΐ!
ه ▸ Θ͠ؼΓʹ·ΔϙέαʔνΛͬͯϛχ ϦϡΛั·͑ͨΐ!
使ってみてねὑ