1. ホーム
  2. 【売れ筋】 【0024】東屋 / BAR カルバドス 【楽天カード分割】

商品スペック

材質ガラス
寸法Φ54×口径45×H118mm / 65g
生産Made in Japan
備考※商品名の数字は個体識別用です。

購入前に確認ください



(取寄)マウンテンハードウェア チョックストーン ハイク パンツ - ウィメンズ Mountain Hardwear Chockstone Hike Pant - Women's Light Army
  • 新潟精機 Sライン 偏心度測定システム ROG-307S (010216) (大径測定タイプ)
  • EU49071 油取りマット用マットベース150 MTB-150
  • GILL(ギル)レースウォッチ
  • 中古 Cランク (フレックスR) テーラーメイド RBZ 10.5° USA RBZ MATRIX XCON-5 R 男性用 右利き ドライバー DR
  • フライングダイアモンド Cj Nelson 10.5" CLASSIC PIVOT VOLAN FIN White ロングボード ボランクロス
  • フォーサイトFW ワークテック飛匠シャフト仕様 #1 #2 #3 #4 #5 ゴルフクラブ フェアウェイウッド WORKS GOLF ワークスゴルフ
  • マキタ チェーンソー 充電式 250mm MUC250DZ (本体のみ)
  • G400/G30/FW/共通_スリーブ付シャフト/US純正/SPARKLING_VRSST/Type3/スパークリングヴァスト/PING/ピン/OVDオリジナル/代引きNG【05P18Jun16】
  • カシオ CASIO Baby-G Pink Bouquet Series ピンクブーケシリーズ ピンク BA-110-4A1 【あす楽】【送料無料】
  • 防水カメラ WG50BK デジタルカメラ カメラ 写真 防水 リコー ブラック・オレンジ
  • DIW-7TJ123-2 prince(プリンス) 硬式テニスラケット ツアー 95(ホワイト×ブラック・サイズ:2・ガット未張り上げ) TOUR Series TOUR 95
  • [サロモン] SALOMON トレッキングシューズ XA PRO 3D ゴアテックス 防水 登山靴 B073S7B7DX 27.0 cm ブラック/ レッド
  • ファナティクス Fanatics メンズ トップス 【NHL New York Islanders Brock Nelson #29 Breakaway Home Replica Jersey】
  • ◆◆○ <ユニックス> Unix リバウンドネット グラウンド用品 野球 (BX86-74) BX8674
  • 杉藤楽弓社 / MXF マイスターシリーズ Meister series フレンチタイプ 4/4 コントラバス弓【smtb-tk】
  • 【訳あり特価品】NEC 純正品 PR-L6600-12トナーカートリッジ
  • 【送料無料】TRIWA トリワ FAST101-CL010214 ROSE FALKEN 海外モデル レディース 腕時計 ウォッチ 革ベルト レザー クオーツ アナログ 白 ホワイト 金 ピンクゴールド 誕生日プレゼント 女性 卒業祝い 入学祝い ギフト
  • 【2点以上送料無料】【即納】【中古】【美品】クリーブランド RTX ZIPCORE ツアーサテン ウェッジ 58.12 FULL 2020 D/G SW
  • トレーニング ビブス 10着セット ヒュンメル hummel 2~11番号入り サッカー フットサル ゲームベスト 試合 練習 サッカー 用品 バスケットボール 収納バッグ付 /HAK6006Z【取寄せ】
  • TRUSCO ベルトスリング JIS3等級 両端アイ形 75mmX10.0m【G75-100】
  • ELLESSE(エレッセ) ES58250 レディース スマート美セパレーツ フィットネス水着
  • <エバニュー> ベンチプレス台 ボディケア ボディケア フィットネス ベンチプレススーパー2 ETB697
  • (業務用200セット) 三菱鉛筆 ボールペン シグノ UM153.24 太字 黒

    【売れ筋】 【0024】東屋 / BAR カルバドス 【楽天カード分割】

  • コロンビア Columbia シンプソンサンクチュアリー ウィメンズ レインスーツ PL0125 レディス 合羽 カッパ 防雨 防水 バイク 自転車通勤
  • ≪'18年3月新商品!≫ アブガルシア アブ クラシックス トラウト ABU Classics CSNS-522L 〔仕舞寸法 81.5cm〕 【保証書付】
  • 最大10%OFFクーポン【 お買い物マラソン限定 】 【中古】 マルマン VANQUISH by MAJESTY マジェスティ (2016) ドライバー 10.5 R HV310 メンズ MARUMAN
  • 米軍 防水布使用4WAYシーサックレプリカ ブラック 送料無料!
  • Auto Cult/オートカルト グラスパーG2 1949 アイボリー 【1点】 kokus『FS』_okrjs
  • ダンロップ 【左用】 srixon(スリクソン) NEW SRIXON Z85 シリーズ Z 585 アイアン6本セット(#5~9,PW) N.S.PRO 980GH DST スチールシャフト (日本正規品)《カスタムオーダー》 【受注生産】
  • YONEX ヨネックス テニスガット ポリツアープロ125 240M PTP1252
  • mokelab blog

    【売れ筋】 【0024】東屋 / BAR カルバドス 【楽天カード分割】

    前回 はビルドプロセスで sass(scss)を扱えるようにしました。今回は material design components の導入方法について説明します。

    【売れ筋】 【0024】東屋 / BAR カルバドス 【楽天カード分割】

    material design components とは、マテリアルデザインに沿ったデザインを実現するのに役立つライブラリです。マテリアルデザインでは「ここは高さ 48dp にしましょう」といったガイドラインが提示されていますが、その実装は各プラットフォームで「がんばる」という状況でした。この「がんばる」部分を助けてくれるのがこの material design components です。各プラットフォーム向けのライブラリが用意されており、もちろん web 用もあります。web 用のライブラリは mdc web と呼びます。

    mdc をアプリに追加する

    公式ドキュメントはこちらにあります。mdc web ではコンポーネント毎に npm パッケージが用意されています。全部まとめて追加する場合は、次のように material-components-web を追加します。

    $ npm install material-components-web
    (中略)
    + [email protected]
    added 47 packages from 1 contributor and audited 1789050 packages in 18.25s

    必要なものだけをインストールする場合は、次のように @material/コンポーネント名 を追加します。どの npm パッケージを追加すればよいかは各コンポーネントの解説ページに書かれています。

    $ npm install @material/button
    (中略)
    + @material/[email protected]
    added 13 packages and audited 1787946 packages in 9.839s

    コンポーネントの使い方

    早速ライブラリを使ってみましょう。各コンポーネントの解説ページは次のような構成になっています。

    スタイル部分は scss の import で導入することになっています。前回の記事で scss を扱えるようにしたのはこのためです。

    toppage のボタンを mdc のボタンにしてみる

    練習として、第7回で toppage に追加したボタンを mdc のボタンにしてみましょう。ボタンの説明はこちら にあります。

    ボタンを導入するには、 @material/button パッケージを追加します。

    $ npm install @material/button

    次に、html structure にしたがってボタン部分を置き換えます。toppage のテンプレートは index.html に書いていました。

    <script id="toptemplate" type="text/plain">
     <h1>top page</h1>
     <button class="mdc-button" on-click="tosecond">
     <span class="mdc-button__label">次の画面へ</span>
     </button>
    </script>

    scss で何を import すればよいかは、説明ページの styles に書かれています。mystyle.scss に追加しましょう。

    @import "@material/button/mdc-button";
    body {
     background-color: antiquewhite;
    }

    ここまででも見た目はマテリアルデザインになるのですが、ボタンをタップしたときのリップルエフェクトがまだ実現できていません。これは javascript(typescript)側で追加します。ここまで作ってきた web アプリは表示を ractive.js に任せているので、toppage が表示された後に実行されるようにします。

    import ractive from "ractive";
    import page from "page";
    import { mdcripple } from "@material/ripple" ;
    export class toppage implements ipage {
     private ractive!: ractive;
     oncreate(): void {
     this.ractive = new ractive({
     el: "#container",
     template: "#toptemplate",
     on: {
     // 表示されたあとに実行される
     complete: () => {
     const buttonripple = new mdcripple(
     document.queryselector(".mdc-button")!
     );
     },
     tosecond: () => {
     // /second に遷移する
     page("/second");
     },
     },
     });
     }
    }

    実際に確認してみましょう。今回は何も指定をしていないので、フラットなボタンとして表示されました。

    まとめ

    mdc web をアプリに追加する方法を説明しました。前回までの準備ができていれば、導入自体はそこまで難しくはないでしょう。

    本サイトではサービス向上のため、google analyticsを導入しています。分析にはcookieを利用しています。