【結論】
・Materializeは、インターネット上に用意されているデザインのCSSファイルを
スタイルシートに指定することで、デザインに応じたクラス名をhtmlに記述するだけで、
簡単に優れたデザインを利用できる
・CSSファイルへのアクセスには、
CDNというサーバーの負荷を軽減させる仕組みが利用されている
【本題】
先日ブログに投稿したアプリのデザインを作成する上で、
MaterializeというCSSフレームワークを使用したのですが、
これが便利過ぎて、凄く感動しました！
※Materializeとは
マテリアルデザインを簡単に作成するための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にアクセスしてみると…
大量の文字の羅列が出てきました。
次にデザインを反映させるためのクラス名の記述ですが・・・
こんなのを表示させたいのであれば、下記の様に記述します。
<div class="card-panel teal lighten-2">
スペースで区切られているので、’card-panel’と’teal’と‘lighten-2’の
３つのクラスを持っています。
試しに、’card-panel’を先ほどの大量の文字の羅列から検索してみます。
ヒットしましたね。そして、単語の頭にクラス名の指定を表すピリオド（ . ）と、
その後ろには{}が続いて、中にはスタイル宣言っぽいコードが記述されています。
テキストエディタで見やすく整えると、やっぱりCSSの記述になってますね。
ということは、最初に貼り付けたURLに必要とされるデザインのコードが
クラス名とセットで全て記述されていて、それをスタイルシートに指定しているから、
htmlにクラス名を記述するだけで、デザインを呼び出せるわけですね
でも、そんなやり方だと、このフレームワークが利用されればされるほど、
このURLへのアクセスが増えて、通信が遅くなったり、落ちたりしないんでしょうか？
・・・と素人が思うくらいなので、対策されているでしょう！
調べてみると、どうやら「CDN」という仕組みで対応している様です。
※CDNとは
一箇所のサーバーで全ての処理を行うのではなく、様々な場所にサーバーを分散させ、
リクエストがあった場所から最も近くにあるサーバーに処理をさせることで、
オリジンサーバー（大元のサーバー）の負荷軽減のみならず、距離が離れる事での通信速度の低下を防ぐ。
様々な場所に自前でサーバーを設置するとなるとコストが掛かり過ぎるため、
CDN事業者が各地に設置しているサーバーを利用するのが一般的。
先ほどのCSSファイルのURLを良く見ると、
「https://cdnjs.cloudflare.com/…」という様に頭に「cdn」という単語が付いていますね
以上、これで安心して使えそうです。
最後まで読んで頂いて、ありがとうございます！
では、また！！
《今日の学習進捗》
東京から帰省する関係で殆ど学習は進まず。
新幹線の中で、「プロを目指す人のためのRuby入門」を読み進める。
学習開始からの期間 ：22日目
今日までの合計時間：198.0h
今日までに到達すべき目標時間：200.9h
目標との解離：-2.9h
「10,000時間」まで、
残り・・・「９８０２時間！」