新しくなったMaterial Designを触ってみた / Tried Material Design 2018

https://dmmcj.connpass.com/event/84002/
の発表資料です。

Transcript

1. © Start Today Technologies Inc.
   ৽͘͠ͳͬͨ.BUFSJBM%FTJHO
   Λ৮ͬͯΈͨ
   (PPHMF*0ใࠂձ
   גࣜձࣾελʔττΡσΠςΫϊϩδʔζ
   ৽ࣄۀ૑଄෦ ݖक ݈࢚
   

   View Slide

2. © Start Today Technologies Inc.
   ൃදͷྲྀΕ
   • ࣗݾ঺հ
   • .BUFSJBM%FTJHOͷ։ൃʹ͍ͭͯ
   • ։ൃϑϩʔʢσβΠφʔฤʣ
   • ։ൃϑϩʔʢΤϯδχΞฤʣ
   • ·ͱΊ
   

   View Slide

3. © Start Today Technologies Inc.
   ࣗݾ঺հ
   • ݖक ݈࢚ʢ͝Μͷ͔Έ ͚Μ͡ʣ
   • גࣜձࣾελʔττΡσΠςΫϊϩδʔζ
   • ϑϩϯτΤϯυΤϯδχΞ
   • !"NBUTVLJ,V
   

   View Slide

4. © Start Today Technologies Inc.
   .BUFSJBM%FTJHOͷ։ൃʹ͍ͭͯ
   • .BUFSJBM5IFNF&EJUPS /FX
   
   • (BMMFSZ /FX
   
   • .BUFSJBM$PNQPOFOUT
   ඒ͍͠ϓϩμΫτΛΑΓ଎͘࡞ΔͨΊʹ(PPHMF͕ఏڙ͢Δπʔϧ܈
   ͜ΕΒͷπʔϧΛར༻ͯ͠։ൃΛߦ͍ͬͯ͘
   

   View Slide

5. © Start Today Technologies Inc.
   ։ൃϑϩʔʢσβΠφʔฤʣ
   4LFUDI্Ͱ.BUFSJBM5IFNF&EJUPSΛ࢖ͬͯ
   5IFNFΛ࡞੒
   4LFUDI্Ͱ࡞੒ͨ͠5IFNFΛར༻ͯ͠σβΠϯΛ
   ࡞੒
   ࡞੒ͨ͠σβΠϯΛ(BMMFSZʹΞοϓϩʔυ
   

   View Slide

6. © Start Today Technologies Inc.
   .BUFSJBM5IFNF&EJUPSͷΠϝʔδ
   

   View Slide

7. © Start Today Technologies Inc.
   5IFNFͷ࡞੒
   $PMPSͷઃఆ
   5ZQPHSBQIZͷઃఆ
   4IBQFͱ$PSOFS4UZMFͷઃఆ
   

   View Slide

8. © Start Today Technologies Inc.
   5IFNFͷ࡞੒ r $PMPSͷઃఆ
   

   View Slide

9. © Start Today Technologies Inc.
   5IFNFͷ࡞੒ r 5ZQPHSBQIZͷઃఆ
   

   View Slide

10. © Start Today Technologies Inc.
    5IFNFͷ࡞੒ r 4IBQFͱ$PSOFS4UZMFͷઃఆ
    

    View Slide

11. © Start Today Technologies Inc.
    5IFNFΛར༻ͨ͠σβΠϯͷ࡞੒
    

    View Slide

12. © Start Today Technologies Inc.
    ։ൃϑϩʔʢΤϯδχΞฤʣ
    (BMMFSZΛ༻͍ͯσβΠϯΛ֬ೝ
    5IFNFΛద༻
    $PNQPOFOUͷར༻
    

    View Slide

13. © Start Today Technologies Inc.
    (BMMFSZΛ༻͍ͯσβΠϯΛ֬ೝ
    

    View Slide

14. © Start Today Technologies Inc.
    5IFNFΛద༻ 8FC
    4$44ͷڞ௨෦෼Ͱ࠷ॳʹม਺Λઃఆ
    $mdc-theme-primary: #e0f7fa;
    $mdc-theme-on-primary: #000;
    $mdc-theme-secondary: #ffebee;
    $mdc-theme-on-secondary: #000;
    $mdc-theme-surface: #fff;
    $mdc-theme-on-surface: #000;
    $mdc-theme-background: #fff;
    $mdc-typography-font-family: Roboto;
    

    View Slide

15. © Start Today Technologies Inc.
    5IFNFΛద༻ "OESPJE
    DPMPSTYNMͱTUZMFTYNMʹઃఆ
    parent="@style/Theme.AppCompat.Light.NoActionBar">
    @color/colorPrimary
    @color/colorPrimaryDark
    @color/colorAccent
    @color/textColorPrimary
    @style/Widget.Shrine.Toolbar.Logo
    
    
    #ffffff
    #e0e0e0
    #607d8b
    #dd000000
    #89000000
    
    

    View Slide

16. © Start Today Technologies Inc.
    $PNQPOFOUͷར༻ 8FC
    ΫϥεͰ$PNQPOFOUΛࢦఆ
    import {MDCTextField} from '@material/textfield';
    const password = new MDCTextField(document.querySelector('.password'));
    
    name="password">
    Password
    
    
    @import "@material/textfield/mdc-text-field";
    .password { display: block; width: 300px; margin: 20px auto; }
    

    View Slide

17. © Start Today Technologies Inc.
    $PNQPOFOUͷར༻ "OESPJE
    android:id="@+id/password_text_input”
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="@string/shr_hint_password”
    app:errorEnabled="true">
    android:id="@+id/password_edit_text"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:inputType="textPassword" />
    
    

    View Slide

18. © Start Today Technologies Inc.
    ·ͱΊ
    • .BUFSJBM5IFNF&EJUPSΛ࢖͏͜ͱͰ.BUFSJBM
    %FTJHOͷσβΠϯΛ࡞੒͠΍͘͢ͳͬͨ
    • ݱঢ়ͱͯ͠5IFNFΛ൓ө࣮ͨ͠૷Λߦ͏ʹ͸Ұख
    ͔͔ؒΔ
    

    View Slide