Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Riot.js で Atomic Design しながら AMESTAGE 作った話

Avatar for yuuki79 yuuki79
July 27, 2016
Technology
7.7k
7

Riot.js で Atomic Design しながら AMESTAGE 作った話

Riot.js + Web Components + Atomic Design は優勝！
#Riot.js #AtomicDesign #WebComponents #AMESTAGE

Avatar for yuuki79

yuuki79

July 27, 2016

More Decks by yuuki79

See All by yuuki79
暗号屋の稼業 @ AWS Blockchain Webinar
Avatar for yuuki79 79yuuki
0
130
暗号屋の稼業
Avatar for yuuki79 79yuuki
0
550
NFTビジネス活用の可能性
Avatar for yuuki79 79yuuki
1
520
サルでもわかるブロックチェーン講座
Avatar for yuuki79 79yuuki
0
490
仮想通貨これからどうなる？
Avatar for yuuki79 79yuuki
1
400
ビットコインに対する所有権は認められるのか
Avatar for yuuki79 79yuuki
0
5.7k
Blockchain x Startup
Avatar for yuuki79 79yuuki
0
5.8k
Ripple で学ぶ DEX の世界
Avatar for yuuki79 79yuuki
0
6.5k
日本と海外の放送禁止文化の違い
Avatar for yuuki79 79yuuki
0
820

Other Decks in Technology

See All in Technology
会社説明資料_最新版
Avatar for 株式会社出前館 demaecan
0
32k
Kiro Crew 入門 (手を離しても進む仕事) | 目指せ Kiro マスター 11
Avatar for Riku INADA inariku
PRO
4
680
Kiro を使うコツ (頼み方、覚えさせ方、任せ方) | 目指せ Kiro マスター 09
Avatar for Riku INADA inariku
PRO
3
140
PostgreSQL オプティマイザ統計の秘密
Avatar for Noriyoshi Shinoda nori_shinoda
1
460
Metadata - Section 3 : Dublin Core Standard · DC
Avatar for mohab soliman mohab1
0
120
狙われているAPIの脆弱性！今こそ手をつけるべき根本的な対策とは？
Avatar for 草薙昭彦 nagix
0
110
【dbts2026】AIエージェントの 判断と探索を変える、 データベース エンジニアリング― 既存DBの処理と依存関係から作る、オペレーショナルオントロジー ―
Avatar for KoheiOgawa shisyu_gaku
0
280
セキュリティ専任チームなしで攻撃を先回りするSREが実践したSIEM on Amazon OpenSearch Service
Avatar for サイバーセキュリティクラウド cscengineer
PRO
1
750
長い仕事を任せる (Workflows、クラウドセッション、Kiro Web) | 目指せ Kiro マスター 10
Avatar for Riku INADA inariku
PRO
3
170
AI時代に求められる優秀なTechLeadの振る舞い
Avatar for pospome pospome
11
16k
Ebitengine製iOSアプリ公開ボタンを押す会
Avatar for eiei114 eiei114
0
120
Kiro 入門 (1 つのエージェントを、どの画面からでも) | 目指せ Kiro マスター 01
Avatar for Riku INADA inariku
PRO
6
1.5k

Featured

See All Featured
Code Reviewing Like a Champion
Avatar for maltzj maltzj
529
40k
Highjacked: Video Game Concept Design
Avatar for Ryan Kendrick rkendrick25
PRO
2
560
My Coaching Mixtape
Avatar for mlcsv mlcsv
0
380
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
96
6.9k
Ten Tips & Tricks for a 🌱 transition
Avatar for Manu Carrasco Molina stuffmc
1
280
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
220k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
699
190k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
254
23k
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
9
1.3k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
7.1k
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
Avatar for Aleyda Solis aleyda
2
12k
The innovator’s Mindset - 
Leading Through an Era of Exponential Change - McGill University 2025
Avatar for Jean-Marc De Jonghe jdejongh
PRO
1
400

Transcript

  1. 3JPUKTͰ"UPNJDEFTJHO͠ͳ͕Β ɹɹɹɹɹɹɹɹɹ࡞ͬͨ࿩ αΠόʔΤʔδΣϯτࢵ஛༎ٍ

  2. ࣗݾ঺հ αΠόʔΤʔδΣϯτ৽ଔೖࣾ ܳೳਓϒϩάɺ"OESPJEΞϓϦϚʔέοτɺεϚϗҭ ੒ήʔϜɺιγϟήϓϩσϡʔαʔɺιγϟήΤϯδ χΞ ݩ+"7" 1.ڬΜͰ/PEFKTɺࠓαʔόʔͱϑϩϯ τΤϯυ ݸਓͰσβΠϯͷ࢓ࣄɺ#B1"ҰظੜɺTDIPPͰ /PEFKTͷઌੜɺஶॻʹʮ8FC੍࡞ऀͷͨΊͷ

    (JU)VCͷڭՊॻʯɻ झຯΞχϝɺΞχιϯ%+

  3. ࠓ೔ͷ࿩ 1PXFSFECZ

  4. 8FC J04 "OESPJE൛͕͋Γ·͢ 8FC ࢹௌͷΈ ഑৴։ൃ༧ఆ εϚϗ ഑৴ɾࢹௌ

  5. ίʔφʔػೳ %&.0 ग़དྷͳ͍ͷͰΞΫηεͯ͠ΈͯͶʂ https://amestage.com

  6. "UPNJD%FTJHO Ͳ͏΍ͬͯ࡞͍ͬͯΔ͔

  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  13. None
  14. None
  15. None
  16. None

  17. *OTUBHSBNͩͱ͜Μͳײ͡

  18. ϝϦοτ w ෼ྨ͢Δ͜ͱͰɺίϯϙʔωϯτ࠶ར༻ͷྑ͍໨҆ ʹͳΔɻ w σβΠϯมߋʹڧ͘ɺ࠶ར༻ੑ͕ߴ·Δɻ

  19. ࠶ར༻ʁ w 8FCDPNQPOFOUTͷ໨ࢦ͍ͯ͠Δͱ͜Ζ w #PPUTUSBQఔ౓Ͱ͸ελΠϧͷ࠶ར༻ʹཹ·Δɻ w ڍಈ·Ͱ࠶ར༻͠ɺػೳ෇͖ͷίϯϙʔωϯτΛ࢖͍ճ͢ɻ ʠςϯϓϨʔτ͸ɺ໰୊Ͱ͸ͳ͘ɺٕज़Λ෼͚Δ͚ͩͩɻʡ

  20. ࠶ར༻Մೳͳίϯϙʔωϯτͷ࡞੒Λγϯϓϧͳମݧʹɻ

  21. 3JPUKTͰ"UPNJD%FTJHO

  22. 4UZMF(VJEFͰͷʠ࠶ར༻ʡ <style-guide-item> (<yield> ̎ͭ࢖ͬͯഎܠ෇͖Ͱ֬ೝͰ͖Δ) ʜ <toledo-badge-exam> <toledo-badge> <toledo-badge-exam> <toledo-badge> <toledo-badge>

    <toledo-badge>

  23. 4UZMF(VJEFͰͷʠ࠶ར༻ʡ 4UZMF(VJEFͰ࢖ΘΕ͍ͯΔίϯϙʔωϯτ͕
 ຊ൪Ͱ΋ͦͷ··࢖ΘΕ͍ͯΔɻ

  24. 4UZMF(VJEFͷ࣮૷ྫ components/atoms/toledo-button/toledo-button.tag (࣮૷͞Εͨίϯϙʔωϯτຊମ) components/atoms/toledo-button/example.tag (ίϯϙʔωϯτຊମΛstyleguideͰදࣔ͢Δ) style guide result

  25. w 3JPUKT 8FC$PNQPOFOUT "UPNJD%FTJHO͸༏উʂ w มߋʹڧ͍ɺ͚ͲಠࡋతɻσβΠφʔʹσβΠϯσʔλͷ໊લͱ͔ଗ ͑ͯ΋ΒͬͨΓɺ֬ೝͯ͠΋ΒͬͨΓͱ͍͏ϑϩʔ΋ؚΊͯ׬੒ɻϚʔ ΫΞοϓΨϦΨϦͰ͖ΔਓͳΒΑΓ˕ w ʮƂŦŢɺ+4ŧŔŪũƄŝſʯΈ͍ͨͳਓʹ਌࿨ੑ͕ߴ͍ɻͱʹ͔͘௚ײతɻγ

    ϯϓϧɻ w śƀśƀ 'MVY΋8FC$PNQPOFOUTͱ૬ੑྑ͍ɻSJPUPCTFSWBCMF  ͕௒ศརɻ3JPU SFEVYͱ͔΋࣍ͳΜ͔Ͱ࢖͏࣌΍ͬͯΈ͍ͨɻ ΍ͬͯΈͨײ૝

  26. 3JPUKTΦεεϝϙΠϯτ w ͜Ε͔ΒϑϩϯτΤϯυ։ൃ͢ΔͳΒ8FCDPNQPOFOUT ͷߟ͑ʹऩଋ͍ͯ͘͠΂͖ɻ w 8FCDPNQPOFOUT͕ඪ४ίϯϙʔωϯτΛଗ͑ͯ͘Δͷ ͸·ͩઌɻ1PMZNFS͸ະདྷ͗͢Δ͠ɺ3FBDU͸օ 8FC੍࡞ ʹؔΘΔશͯͷਓ ͕࢖͏ʹ͸ͱ͖ͬͭʹ͍͘ɻ

    w ίϯϙʔωϯτΛ࡞ΔͳΒ3JPUKT͕Ұ൪γϯϓϧɻίϯϙʔ ωϯτΛ࡞Δࢦඪͱͯ͠"UPNJD%FTJHO͸૬ੑ͕ྑ͍ɻ

  27. ίϯϙʔωϯτͷ࡞Γํ͕ຊ౰ʹ௚ײతɻ ͔͠΋࢖͍·Θ͠΍͍͢ɻ ͜Ε͘Β͍ͷαʔϏεͰ΋ಈ͘ɺૣ͍ɺ؆୯ɻ

  28. BNFTUBHFDPN