読者です 読者をやめる 読者になる 読者になる

ふんわりした生活

本を読んだり仕事でやってみたことなどの日常から、ふんわりと気づきなどを書いていきます

satoyama-editorをマテリアルデザインにしたけど素朴すぎる

これがマテリアルデザインか

最近、数年ぶりにGoogleフォームをつかってみたのだが、マテリアルデザインになっていた。そこで、どんなものかGoogle謹製のCSSフレームワークを利用してみた。すると、ものすごくandroidっぽすぎる状態になった。なるほど、これがandroidのUIにも使われているからああいうデザインなのか、とうなずいた。

androidアプリを学んでみて、デザインのことが気になっていたものがある。以前作っていたsatoyama-editorだ。牧歌的な洗練されていないものを目指してつくっていたこともあるが、かなりのものになっていることは心のどこかで気になっていたところではあった。そこで、マテリアルデザインをあててみてはどうか?ということを今朝唐突に思いついたのでやってみることにしたのだった。

マテリアルデザイン

フラットデザインのさらに先、というか物理法則にしたがったデザインらしい。わたしはデザイナーでもないので「へー、そうなんだー」としか感じられなかったわけだが、見た目にすっきりしそうなので採用!ということにした。

軽く調べてみたところ、Googleの提供しているMaterial Design LiteというフレームワークのほかにMaterialize.cssというのもあるようで、数種類が存在しているようだった。今回はどうせそういったものに依存するならこだわりなし、ということで公式サイトをパッとみた感じでMaterialize.cssを採用してみた。 かなり修正が必要かな、と思いつつもざっくり直しにかかったところ、30分程度であらかた修正が完了した。もともとが込み入った構造をしていないものだからというのもある。

なお、MaterializeはjQueryに依存している。でも今回はjs部分にjQueryの必要性を全く感じなかったので読み込むのみにしてある。しかもソースコード内に入れておく必要もないだろーと思いすべてCDNからの読み込みとしている。

ついでに

フッター、ほんとうに必要かな?と考えてフッターも削除してやった。コピーライトとか書いておいたけど、いらない。全然いらなかった。なくなったらすげーすっきりしたし、気にせずガンガン書いていけるようになった。

こんな感じになった。 f:id:m0t0k1m0t0k1:20170327102639j:plain まだElectronアプリにはしていない。コードが散らかっているのでガンガン不要なものを削除してからコンパイルするつもり。