Materialize(CSSフレームワーク)って凄く便利だけど、どういう仕組みなの?

f:id:ryoutaku_jo:20181230022854p:plain

【結論】

・Materializeは、インターネット上に用意されているデザインのCSSファイル

 スタイルシートに指定することで、デザインに応じたクラス名をhtmlに記述するだけで、

 簡単に優れたデザインを利用できる

CSSファイルへのアクセスには、

 CDNというサーバーの負荷を軽減させる仕組みが利用されている

 

【本題】

先日ブログに投稿したアプリのデザインを作成する上で、

MaterializeというCSSフレームワークを使用したのですが、

これが便利過ぎて、凄く感動しました!

 

 

※Materializeとは

マテリアルデザインを簡単に作成するためのCSSフレームワーク

 

マテリアルデザインとは

Googleが発表したデザインのガイドライン

直感的かつルールが統一化されているので、非常に分かりやすい

 

CSSフレームワークとは

 よく使われるデザインやアイコンなどを予め用意していて、

それぞれのデザイン毎に定義されているclass名をhtmlに記述すれば、

そのデザインが記述したhtmlに反映されるというもの

 

 

要は、Googleっぽいデザインが簡単に作れるもの!

自身でデザインを考えるのが苦手な現状の私には、願っても無いようなものです。

 

 

ただ・・・「これどうやって動いてるんでしょう?」

 

 



私がプログラミングを通して、最近学んだことは、

 

自分が仕組みを理解していないものは使ってはいけない

(コピペ。ダメ。ゼッタイ。)」

ということです(トラブルが起きても自身で対処出来なくてなるから)

 

なので、こいつがどうやって動いているか調べることにしました。

 

  

まず、materializeを使用する際は、下記のコードをhtmlのheadタグ内に記述する必要があります。

 

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">

 

このURLのファイルをスタイルシートとして指定している訳ですね

そしてこのURLにアクセスしてみると…

f:id:ryoutaku_jo:20181230022959p:plain

 

大量の文字の羅列が出てきました。

 

 

次にデザインを反映させるためのクラス名の記述ですが・・・

 

f:id:ryoutaku_jo:20181230023109p:plain

こんなのを表示させたいのであれば、下記の様に記述します。

<div class="card-panel teal lighten-2">

 

スペースで区切られているので、card-panel’と’teal’と‘lighten-2

3つのクラスを持っています。

 

試しに、card-panelを先ほどの大量の文字の羅列から検索してみます。

f:id:ryoutaku_jo:20181230023133p:plain

ヒットしましたね。そして、単語の頭にクラス名の指定を表すピリオド( . と、

その後ろには{}が続いて、中にはスタイル宣言っぽいコードが記述されています。

 

f:id:ryoutaku_jo:20181230023200p:plain

テキストエディタで見やすく整えると、やっぱりCSSの記述になってますね。

 

ということは、最初に貼り付けたURLに必要とされるデザインのコードが

クラス名とセットで全て記述されていて、それをスタイルシートに指定しているから、

htmlにクラス名を記述するだけで、デザインを呼び出せるわけですね

 

 

 

でも、そんなやり方だと、このフレームワークが利用されればされるほど、

このURLへのアクセスが増えて、通信が遅くなったり、落ちたりしないんでしょうか?

 

 

 

・・・と素人が思うくらいなので、対策されているでしょう!

調べてみると、どうやらCDNという仕組みで対応している様です。

 

CDNとは

一箇所のサーバーで全ての処理を行うのではなく、様々な場所にサーバーを分散させ、

リクエストがあった場所から最も近くにあるサーバーに処理をさせることで、

オリジンサーバー(大元のサーバー)の負荷軽減のみならず、距離が離れる事での通信速度の低下を防ぐ

 

様々な場所に自前でサーバーを設置するとなるとコストが掛かり過ぎるため、

CDN事業者が各地に設置しているサーバーを利用するのが一般的。

 

 

先ほどのCSSファイルのURLを良く見ると、

https://cdnjs.cloudflare.com/」という様に頭に「cdn」という単語が付いていますね

 

以上、これで安心して使えそうです。

 

最後まで読んで頂いて、ありがとうございます!

では、また!!

《今日の学習進捗》

東京から帰省する関係で殆ど学習は進まず。

新幹線の中で、「プロを目指す人のためのRuby入門」を読み進める。

 

学習開始からの期間 :22日目
今日までの合計時間:198.0h
今日までに到達すべき目標時間:200.9h
目標との解離:-2.9h

 

「10,000時間」まで、

残り・・・「9802時間!」