Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

AmatsukiKu

May 29, 2018
Tweet

More Decks by AmatsukiKu

Other Decks in Technology

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