本当にものすごく簡単ですが、「materialize」を使用してメモ帳をつくってみました。

Documentation – Materialize

materializeとは？

マテリアルデザインのサイトを作るためのフレームワークで、CSSだけでなくJSのパターンも多くあるので、CSSフレームワークというよりフロントエンドのフレームワークというのが適切なのかもしれません。

あのGoogleが提唱するマテリアルデザインを作るためのものですが、Googleと直接関係があるわけではないようです。
Googleの公式っぽいのはこちらですね。
Design – Material Design

こちらはなんか使いにくそうなので今回見送りました。

なぜそんなものを作ろうと思ったのか

普段、テキストやコードをメモ帳に残しておくことが多く（メモ帳に保存するまではないけど、1,2日必要な情報程度のレベルのもの）メモ帳を保存せずにそのまま使用していくことが多かったのですが、
たまに消えてしまうとことがあるし、いちいち保存するまでもないし面倒臭いと思っていたところ、
マテリアルデザインが流行っていて(だいぶ前からですが…)、試してみるかとということで、
マテリアルデザインを使ったメモ帳を作ろうと思いました。

概要・機能

本当に簡単な文字のスタイルをなにも変更できないメモ帳。
ただ、数は特に制限なく、新規作成、削除だけができるという一時保存メモみたいな。
一時保存用なので、特別保存は考えていなかったのですが、一応残るようlocalstorageに即保存されるように設定してます。

使用ツール
・vue.js
・Materializeフレームワーク

2つとも触り程度の活用しかしてません…

ただ、いかにもマテリアルデザインっぽいようなフローティングメニューを無理やり使用しました。

Floating Action Button – Materialize

作ったものは以下になります。
DEMO

Materializeフレームワーク部分について

今回はソースをダウンロードして使いました。
Getting Started – Materialize

設置準備

まずは、CSSとアイコンのためにWebフォントを読み込む。

bodyタグ直前くらいでjsを読み込む(materialize.jsでもmaterialize.min.jsどちらでも)

フローティングボタン

全体のレイアウトもフレームワークを使用していますが、
ボタン部分のところだけ載せます。

JS部分(materialize.jsも後に記述)※jquery使用なしバージョン

htmlにつけるclassによって、色や大きさを変えることができます。
js部分の設定で、ホバーかクリックで動作するか、メニューを上下左右どちらに表示するか設定することができます。

使用してみた感想

さすがフレームワークだけあって、マテリアルデザインっぽいものが簡単にできるという印象です。
js部分も豊富にあり、自分で作る必要はほぼないんじゃないかと思うほどです。

だた、やはりデザイン・レイアウトを作っていく上では、あらかじめレイアウト方法も知っておく必要があり、
少しこだわったレイアウトを使用すると、どうやってやるか迷う時はあるかと思います。
そんな時は自分でCSSいじったほうが早いなと思ってしまいますね…

CSSはもちろんJS部分でもオリジナリティをつけようとすると、上記のように自分で設定するほうが…となるので、やはりクライアントワークというより、自分でなにか作るときにこのフレームワークに則って作成するのが良いかもしれません。

デザインや動きにこだわりがなければ非常に素早くサイトが作れると思います。