1. ホーム
  2. 豪華 milestone(マイルストーン) MS-B1+ Cloud 工場直送

商品名milestone(マイルストーン) MS-B1+ Cloud
JAN4955458900142
品番cnbnb01m4nwh4s
重量
商品仕様●使用光源:ナチュラル ウォーム カラーLED●高輝度赤色LED×2(レッド LED)、高輝度白色LED×2(クールホワイト LED)●明るさ:約250ルーメン●使用電池:リチウムイオン電池1200mA内蔵●充電時間:充電時間:約3.5時●電池寿命:約45時間(最小時)/ 約6時間(エコノミー)/ 約4時間(最大時)●防水機能:IPX5(防噴流型)●照射距離:約80m●本体サイズ:本体サイズ/約 幅60×高さ45×奥行38mm●本体質量:約74g(電池内蔵)/約96g(ベルト込)●付属品:USBケーブル●特徴:充電式モデル、エコノミーモード、ワイド照射(120°)
商品説明●マイルストーン・シリーズで最も人気のある『MS-B1』のアップグレードモデル。●充電式になったことで、環境に優しく電池を持参する必要はない。●“エコノミー・モード”搭載(最大値250ルーメンの40%に設定): エコノミ・モードとは、山道などを歩く際に必要な明るさ“100ルーメン”で常に照射。●MS-B1の基本性能『シンプルさ』を継承しつつ、ディミング(明るさ調整)で瞬時に最大値の250ルーメンに達する事が可能。●サブLEDには上部2灯が赤色LED下部2灯が白色LED。


※ご注文タイミングやご注文内容によっては、購入履歴からのご注文キャンセル、修正を受け付けることができない場合がございます。※大型商品や一部の商品につきましてはメーカー取り寄せとなる場合がございます。



















mokelab blog

豪華 milestone(マイルストーン) MS-B1+ Cloud 工場直送

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

豪華 milestone(マイルストーン) MS-B1+ Cloud 工場直送

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を利用しています。