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

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

Transcript

1. © Start Today Technologies Inc. ৽͘͠ͳͬͨ.BUFSJBM
   %FTJHO Λ৮ͬͯΈͨ (PPHMF
   *0
   ใࠂձ גࣜձࣾελʔττΡσΠςΫϊϩδʔζ ৽ࣄۀ૑଄෦ ݖक ݈࢚
2. © Start Today Technologies Inc. ൃදͷྲྀΕ • ࣗݾ঺հ • .BUFSJBM
   %FTJHOͷ։ൃʹ͍ͭͯ • ։ൃϑϩʔʢσβΠφʔฤʣ • ։ൃϑϩʔʢΤϯδχΞฤʣ • ·ͱΊ
3. © Start Today Technologies Inc. ࣗݾ঺հ • ݖक ݈࢚ʢ͝Μͷ͔Έ ͚Μ͡ʣ • גࣜձࣾελʔττΡσΠςΫϊϩδʔζ • ϑϩϯτΤϯυΤϯδχΞ • !"NBUTVLJ,V
4. © Start Today Technologies Inc. .BUFSJBM
   %FTJHOͷ։ൃʹ͍ͭͯ • .BUFSJBM
   5IFNF
   &EJUPS
   /FX • (BMMFSZ
   /FX • .BUFSJBM
   $PNQPOFOUT ඒ͍͠ϓϩμΫτΛΑΓ଎͘࡞ΔͨΊʹ(PPHMF͕ఏڙ͢Δπʔϧ܈ ͜ΕΒͷπʔϧΛར༻ͯ͠։ൃΛߦ͍ͬͯ͘
5. © Start Today Technologies Inc. ։ൃϑϩʔʢσβΠφʔฤʣ  4LFUDI্Ͱ.BUFSJBM
   5IFNF
   &EJUPSΛ࢖ͬͯ 5IFNFΛ࡞੒  4LFUDI্Ͱ࡞੒ͨ͠5IFNFΛར༻ͯ͠σβΠϯΛ ࡞੒  ࡞੒ͨ͠σβΠϯΛ(BMMFSZʹΞοϓϩʔυ
6. © Start Today Technologies Inc. .BUFSJBM
   5IFNF
   &EJUPSͷΠϝʔδ
7. © Start Today Technologies Inc. 5IFNFͷ࡞੒  $PMPSͷઃఆ  5ZQPHSBQIZͷઃఆ  4IBQFͱ$PSOFS
   4UZMFͷઃఆ
8. © Start Today Technologies Inc. 5IFNFͷ࡞੒ r $PMPSͷઃఆ
9. © Start Today Technologies Inc. 5IFNFͷ࡞੒ r 5ZQPHSBQIZͷઃఆ
10. © Start Today Technologies Inc. 5IFNFͷ࡞੒ r 4IBQFͱ$PSOFS
    4UZMFͷઃఆ
11. © Start Today Technologies Inc. 5IFNFΛར༻ͨ͠σβΠϯͷ࡞੒
12. © Start Today Technologies Inc. ։ൃϑϩʔʢΤϯδχΞฤʣ  (BMMFSZΛ༻͍ͯσβΠϯΛ֬ೝ  5IFNFΛద༻  $PNQPOFOUͷར༻
13. © Start Today Technologies Inc. (BMMFSZΛ༻͍ͯσβΠϯΛ֬ೝ
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;
15. © Start Today Technologies Inc. 5IFNFΛద༻  "OESPJE DPMPSTYNMͱTUZMFTYNMʹઃఆ <style name="Base.Theme.Shrine" parent="@style/Theme.AppCompat.Light.NoActionBar"> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> <item name="android:textColorPrimary">@color/textColorPrimary</item> <item name="toolbarStyle">@style/Widget.Shrine.Toolbar.Logo</item> </style> <resources> <color name="colorPrimary">#ffffff</color> <color name="colorPrimaryDark">#e0e0e0</color> <color name="colorAccent">#607d8b</color> <color name="textColorPrimary">#dd000000</color> <color name="textColorSecondary">#89000000</color> </resources>
16. © Start Today Technologies Inc. $PNQPOFOUͷར༻  8FC ΫϥεͰ$PNQPOFOUΛࢦఆ import {MDCTextField} from '@material/textfield'; const password = new MDCTextField(document.querySelector('.password')); <div class="mdc-text-field mdc-text-field--box password"> <input type="password" class="mdc-text-field__input" id="password-input" name="password"> <label class="mdc-floating-label" for="password-input">Password</label> <div class="mdc-line-ripple"></div> </div> @import "@material/textfield/mdc-text-field"; .password { display: block; width: 300px; margin: 20px auto; }
17. © Start Today Technologies Inc. $PNQPOFOUͷར༻  "OESPJE <android.support.design.widget.TextInputLayout 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.support.design.widget.TextInputEditText android:id="@+id/password_edit_text" android:layout_width="match_parent" android:layout_height="wrap_content" android:inputType="textPassword" /> </android.support.design.widget.TextInputLayout>
18. © Start Today Technologies Inc. ·ͱΊ • .BUFSJBM
    5IFNF
    &EJUPSΛ࢖͏͜ͱͰ.BUFSJBM
    %FTJHOͷσβΠϯΛ࡞੒͠΍͘͢ͳͬͨ • ݱঢ়ͱͯ͠5IFNFΛ൓ө࣮ͨ͠૷Λߦ͏ʹ͸Ұख ͔͔ؒΔ