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
アップルップルの新しいオープンソースの紹介
Search
Hori Godai
May 20, 2018
Technology
0
480
アップルップルの新しいオープンソースの紹介
a-blog cms Training Camp 2018 Springで発表した内容です
Hori Godai
May 20, 2018
Tweet
Share
More Decks by Hori Godai
See All by Hori Godai
TypeScript Compiler APIを使って 型のユニットテストをブラウザーで動かす
steelydylan
3
170
エディター付きのReact開発環境を ブラウザーだけで実装した話
steelydylan
9
1.8k
HonoでReact・TypeScriptの実行環境をブラウザー上に作る
steelydylan
1
2.1k
複数ピンをまとめて表示するYahoo!地図用のJavaScriptライブラリをつくりま作りました
steelydylan
1
1k
Nuxtでのサーバー、クライアント間データ共有について
steelydylan
0
870
next.jsを使ったuniversal React 入門
steelydylan
1
280
a-blog cmsの静的書き出し機能を使って、 自分のブログを100%静的にした話
steelydylan
0
310
MySQLの GEOMETRY 型とJavaScriptの Geolocation API の活用事例
steelydylan
1
420
a-blog cms をよくするために 取り組んだ3つのこと
steelydylan
0
550
Other Decks in Technology
See All in Technology
CNAPPから考えるAWSガバナンスの実践と最適化
yuobayashi
5
680
Amazon Aurora バージョンアップについて、改めて理解する ~バージョンアップ手法と文字コードへの影響~
smt7174
1
240
インシデントキーメトリクスによるインシデント対応の改善 / Improving Incident Response using Incident Key Metrics
nari_ex
0
4.1k
レイクハウスとはなんだったのか?
akuwano
15
2k
地方企業がクラウドを活用するヒント
miu_crescent
PRO
1
110
企業テックブログにおける執筆ネタの考え方・見つけ方・広げ方 / How to Think of, Find, and Expand Writing Topics for Corporate Tech Blogs
honyanya
0
810
ObservabilityCON on the Road Tokyoの見どころ
hamadakoji
0
210
Agentic AI時代のプロダクトマネジメントことはじめ〜仮説検証編〜
masakazu178
3
390
アーキテクチャわからん、の話
shirayanagiryuji
0
150
顧客の声を集めて活かすリクルートPdMのVoC活用事例を徹底解剖!〜プロデザ!〜
recruitengineers
PRO
0
200
Postman Vaultを使った秘密情報の安全な管理
nagix
3
130
現実的なCompose化戦略 ~既存リスト画面の置き換え~
sansantech
PRO
0
160
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
327
24k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Building Your Own Lightsaber
phodgson
104
6.2k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
39
1.9k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
RailsConf 2023
tenderlove
29
980
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
11
900
Statistics for Hackers
jakevdp
797
220k
Designing Experiences People Love
moore
139
23k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
600
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
113
50k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Transcript
Ξοϓϧοϓϧͷ ৽͍͠Φʔϓϯιʔεͷհ Ξ οϓϧ οϓϧ ງ ޛ େ
ງ ޛେ • @steelydylan • ϑϩϯτΤϯυΤϯδχΞ • Nagoya.jsओ࠵
ࠓ ͓ ͢͠ Δ ͜ ͱ • ެ։͍ͯ͠ΔJavaScript
OSSͷհ • OSSΛެ։͢ΔϝϦοτ • ࠓޙͷඪ
ΞοϓϧοϓϧͷOSSΛͬͨ͜ͱ͋Γ·͔͢ʁ
Ϩ ϙ δ τ Ϧ 3 3 ε λ
ʔ 9 5 5 https://github.com/appleple
JavaScript ϥϯΩϯά Nagoya Japan 2 / 80 Ґ 29 /
7662 Ґ http://git-awards.com/users/search?login=appleple
લ ʑ ճ հ ͠ ͨ O S S
• SmartPhoto • hiraku • modal-video • a-table.js
ࠓ ճ հ ͢ Δ O S S •
FormStorage • PrettyScroll • Hiraku2 • ScrollHint
FormStorage.js https://github.com/appleple/form-storage
FormStorage.js • Ұೖྗͨ͠༰Λอଘͯ͠࠶ͼϑΥʔϜΛ๚Εͨஈ ֊Ͱ෮ݩͰ͖Δ • ೖྗͨ͠༰ΛผͷϑΥʔϜͰར༻Մೳ
PrettyScroll https://github.com/appleple/pretty-scroll
PrettyScroll • εΫϩʔϧݻఆ͢Δཁૉ͕windowͷߴ͞ΑΓ͍ ߹Ͱ͔Β·ͰදࣔͰ͖Δ • εΫϩʔϧݻఆ͢ΔྖҬΛηϨΫλʔͰࢦఆͰ͖Δ • CSSෆཁ • ϒϨΠΫϙΠϯτ͕ઃఆՄೳ
Hiraku2 https://appleple.github.io/hiraku2/
Hiraku2 • ΦϑΩϟϯόεͷ։ด࣌ͷΞχϝʔγϣϯʹtransform Λ༻ • ΦϑΩϟϯόεΛεϜʔζʹεΫϩʔϧͰ͖ΔΑ͏ʹ վྑ • ϖʔδϦϯΫʹରԠ
ScrollHint https://github.com/appleple/scroll-hint
ScrollHint • ཁૉΛΈग़͍ͯ͠Δίϯςϯπ͕͍Δ߹ʹεΫ ϩʔϧ͢Δ͜ͱΛଅ͢ΞΠίϯΛදࣔͯ͘͠ΕΔ • ΞΠίϯͱςΩετࣗ༝ʹมߋՄೳ
appleple open source project https://appleple.github.io
Ξ οϓϧ οϓϧ ͷ O S S Λ ར ༻
͢ Δ ར • ։ൃ͕׆ൃ • @steelydylanʹཁόάใࠂΛग़ͤଈ࠲ʹରԠ • ͍ํ͕Θ͔Βͳͯ͘@steelydylanʹฉ͚Δʂ • ຊޠυΩϡϝϯτͷॆ࣮ • a-blog cms ͷ։ൃʹߩݙͰ͖Δ
ࣗ ʹ ͱ ͬͯͷ ར • ւ֎ͷ͍ΖΜͳਓ͔ΒissueϓϧϦΫ͕ඈΜͰָ͖͍ͯ͠ •
TwitterͰόζΔͷΛݟΔͷָ͕͍͠ • CMSʹΈࠐΈ͍ͨ࣌WebpackͰόϯυϧ͢Δ͚ͩͳ ͷͰָ • ελʔͰΔؾ্ • Ҋ݅Ͱ͑Δ
ඪ • ΞϓϦͷΑ͏ͳUIΛεϚϗͰఏڙ͍ͨ͠ • ΞοϓϧοϓϧͷOSSΛ͑Web੍࡞ʹࠔΒͳ͍ͱ ݴΘΕΔΑ͏ʹͳΓ͍ͨ • ͱΓ͋͑ͣ Nagoya
Ͱελʔ 1ҐΛࢦ͍ͨ͠
ࠓ ޙ Γ ͨ ͍ ͜ ͱ • ͔͍͍ͬ͜ςʔϚ։ൃ͍͖͍ͯͨ͠
• PWAʹରԠͨ͠ςʔϚͱ͔ • Node.jsΛͬͨίϚϯυϥΠϯܥͷOSS࡞Γ͍ͨ
࠷ ۙ P H P ॻ ͖ ·
͢ ʂ
֦ ு Ξ ϓ Ϧ O S S ͱ
ͯ͠ ͯ͠ ͍ · ͢ https://developer.a-blogcms.jp/app/
͜ Ε ͔ Β օ ͞ Μ ͷ W
E B ੍ ࡞ Λ ศརʹ͢ΔπʔϧΛ։ൃ͍͖ͯ͠·͢ɻ
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ @steelydylan