現在ポートフォリオサイトを制作中
今日は、ウェブ制作に関わる事を雑に考えていく。
やる予定のタスク
- メインビューのスライダー構築
今、気になっている事
- サーバーサイドシステムの導入
- DBの導入
- Smarty絡み
- pugについて
- sass・scss絡み
- css→scss変換
- jQuery絡み
サーバーサイドシステムの導入
サーバーサイドシステムには、PHP・JAVA・node.js・Pythonなど様々な物が存在する。
今回は、一番手慣れているPHPを導入する予定。
わからない物を導入しても、覚える手間が掛かるので…
他の新規サービスを立ち上げる際に、PHP以外のシステムを導入してみたいとは思っている。
DBの導入
作品をDBに登録しページ表示を制御したいのでmySQLを導入する予定
DBの構造や表示する仕組み(PHP)については、ポートフォリオサイトのモックが完成してから考える。
Smartyについて
仕事とSmarty使っていて便利だった記憶がある。
Smartyでテンプレート作ったりしてたけれど、色々ど忘れしているので復習する。
Smartyとは
Smartyは、PHPを使ったテンプレートエンジンである。
テンプレートエンジンとは？
テンプレートエンジンとは、「機能を記述する内容（PHP）」と「画面の表示内容（HTML＆CSSなど）」を分けて管理できるツールです。
PHPとHTMLが混在したファイルは、2つのルールが一緒に書かれているので読み取りにくいのが難点でした。
テンプレートエンジンは、そんな状況を回避し 処理内容と表示内容を分けて作成できるので、PC・スマートフォンのサイトで異なるデザインの反映が実現できます。
処理内容をまとめられるので、使いまわしがきくのも大きなメリットと言えます。
PHPのテンプレートエンジンには「Twig」や「Blade」などが存在します。
Smartyを使うと何ができる？
Smartyを使うことで、「HTMLに記述したPHPの分離」が可能になります。
テンプレートが分離されているので、プログラマーとデザイン担当（コーダー）の仕事が進めやすくなります。
修正が発生した場合は両者が作業を進めにくくなる可能性もあります。しかし、Smartyを採用すると別ファイルでそれぞれの開発を行えるのです。
上記はSmartyを含む「テンプレートエンジンそのものの特徴」であって、Smarty特有のものではありません。
テンプレートエンジンの中でもSmartyは人気の高さに定評がありますが、その人気の理由はどこにあるのでしょうか。
便利な使い方
複数のページにメニューなどがある場合、メニューに項目を増やしたり減らしたりする時は全てのページのメニューを改修しなければならないがメニューをテンプレート化してしまえば一つのファイルを修正するだけで全ページのメニューの改修が完了するので作業時間が大幅に減らせる。
Smartyの特徴って？
処理スピードが速い
動作速度の面で優れているのが、Smartyの大きな特徴です。その理由は、テンプレートのコンパイルが大きく関係しています。
このコンパイルは最初にリクエストが来た際に一度だけ行われるので、毎回テンプレートの解析処理を行う必要はありません。テンプレートに変更が加えられた場合のみ、コンパイルを再実行するので効率化を図れます。
機能拡張が容易
Smartyは、値をはめ込むのはもちろん、if文による条件分岐や関数、ループ処理なども入れ込み可能です。PHP初心者の方ですべての機能を把握していない場合は、HTMLとシンプルな変数のみで作成できます。変数の修飾子やテンプレートで使用可能なカスタム関数が用意されているのも特徴の一つです。
プラグインが豊富に揃っている
テンプレート関数プラグインや修飾子プラグイン、ブロック関数プラグインなど、Smartyのプラグインは種類が豊富です。標準搭載されているプラグインはSMARTY_DIR直下の「plugins/」というディレクトリにあります。自分の好きなタイミングで、プラグインを動かすことも可能です。
Smartyの導入(インストール)
PHPを導入してしまうと毎回ファイルをサーバーにアップロードするか、ローカルサーバーを起動する手間が増えるので、Smartyの導入はポートフォリオサイトのモックがある程度 完成してから行う予定
Smartyまとめ
Smartyについては、テンプレートと基本的な制御(if文for文等)以外はあまり良くわかっていないので一度ソースや構造をじっくりみて理解を深めたい。
PUGについて
pugは、node.jsを使ったHTML用のテンプレートエンジン
Smartyはエディタさえ有れば誰でも作る事が出来るけれど、PUGは全員がPUG環境(node.js)を構築しないと使えない？
良くわからない。
そのうち調べます。
SASS・SCSSについて
sass・scssは仕事で使っていたが、わざわざ導入する程のメリットを感じなかった。
確かに便利ではある物の無くても問題ないと言えばない。
Sassとは、
「Sass（サス、サース）」とは、CSSを拡張して、書きやすく、見やすくしたスタイルシートのことです。Syntactically Awesome StyleSheetの略で、直訳すると「文法的に素晴らしいスタイルシート」です。従来のCSSにデザイナーやプログラマーが抱いていた不満を解消するスタイルシートといえます。
SassはCSSのメタ言語です。メタ言語とは、ある言語に別のルールを定義するために使われる言語のことです。拡張言語と呼ばれることもあります。
Sassを導入するメリット
- 入れ子の使用が可能
- 変数を利用できる
- 四則演算が可能
- 関数を使用できる
- ミックスイン・継承による効率化
入れ子の使用が可能
ネストと呼ばれる入れ子の構造で記述します。
CSSでは、それぞれのセレクタが独立して記述されていますが、Sassはネストを使い、子要素を波括弧{}で囲うことで、まとめてスタイルを設定することが可能です。親と子の関係性がわかりやすいので、可読性が高まります。
変数を利用できる
Sassでは、変数を利用できます。
通常、CSSで変数を使うことはできません。しかし、Sassはローカル変数とグローバル変数を利用することが可能です。例えば、グローバル変数の場合、スタイルシートに横幅のサイズを宣言し、その後セレクタの宣言の中でプロパティに代入することができます。
同じ値をさまざまなプロパティで複数使う場合などで、非常に便利です。また値を変更したい場合も、グローバル変数の数値だけを変更すれば、すべてのプロパティに適応されるため、メンテナンス性も向上します。
四則演算が可能
Sassでは、四則演算の利用が可能です。つまり、値を足したり掛けたり、割ったりすることができます。変数と組み合わせることで、便利に利用することができるでしょう。
関数を使用できる
関数を利用できる点もSassのメリットです。引数に値を入れることができ、そして処理後の値を返してくれます。
ミックスイン・継承による効率化
ミックスインや継承を利用できる点もメリットです。
ミックスインとは、スタイルに引数を持たせることです。つまり、抽象的なスタイルを記述できるので、値を変更しつつ複数の場面で使う設定がある場合には、ミックスインを使うと便利です。
関数と似ていますが、関数は値だけを返します。ミックスインはスタイル自体を返すという点が特徴です。
継承は、引数を持たず使いまわしができるスタイルのことです。同じスタイルを何回も書かなくて済むため、効率的に実装することができるでしょう。
Sassのデメリットとは
- 学習コストがかかる
- 環境に依存する
学習コストがかかる
Sass はCSSのメタ言語であるため、CSSと似た使用感となっています。そのため、プログラミング言語をはじめから学ぶよりは学習コストがかからないでしょう。
ただし、スタイルシートに触れたことがない人の場合、習得にある程度の時間を要すると考えられます。
環境に依存する
2つ目は、環境に依存するという点です。SassはCSSに変換しなければならないため、環境によってRubyやコンパイラをインストールするなど、Sassのための開発環境を整える必要があります。
ここまでで一旦考察
メリット面
入れ子構造
うん、まぁ便利ではあるよね。無くても問題ないけどね…
変数を利用できる
あー、確かに複数の箇所に同一のwidth値を設定する時とか使えたらいいなと思っていた。
css単体だとwidthだけ別classにして重ね掛けするって手法で一応 実装は出来るけど、それだとHTMLの方に無駄なclass名が増えちゃうんだよね。
付け外しは楽だけど…
確かに変数使えるのは良い！
四則演算が可能
cssの calc(100% – (50px + 286px)); みたいな感じで実装出来るからそこまで恩恵は感じられない？
いや、違う！
calc()を使った場合は、ユーザーのブラウザ側で計算処理する事になる反面、
SASS側で処理してしまえば、ユーザー側の負担が減る。
とは言え…
calc(100% – (50px + 286px));みたいな場合だと、100%の部分は可変値なので
calc(100% – (50px + 286px)); → calc(100% – 336px); に変わるだけ…
とは言え！
cssで四則演算を複数個所で乱用している場合は、ユーザー側の処理が軽くなるというメリットは多少ある。
だったら、Sass導入せずに四則演算の箇所を前もって計算してcssに記して置けば良くない？
わざわざ計算する手間が増えるよね。
Sassを導入すれば、計算する手間が省けるよ。
関数を使用できる
cssで関数使うか？
keyframeアニメーションとか作る時とかで使えるのかな？
jsで関数使えるしcssで関数使うメリットがあまりわからないが、jsが必要な場面でcssだけで完結する事が出来るという事なのだろうか？
ミックスイン・継承による効率化
うん、まぁ使えたら便利よね。
まぁ使えなくても、そこまで問題は無いけどね…
デメリット面
学習コストがかかる
プログラミングもCSSもわかるから、そこまでデメリットでは無い。
環境に依存する
SassはCSSに変換しなければならない。
コンパイルする手間が増える。
ブラウザの画面を見ながらちょこちょこ修正する時に、一々SassからCSSに変換する手間が発生するのよ…。
まぁ、スクリプトをワンクリックすれば変換できるんだけどさ…
忙しい時って、そういう手間もまどろっこしく感じるのよね…
Sassを導入するか、どうかするかのネックがこのまどろっこしさで…
Sassを導入するメリットが、このまどろっこさを上回らなければ導入するメリットが無いんだよね…
単に手間が増えるだけっていうね…
メリット・デメリット比較
- 変数使えるよ
- ユーザー側の処理が多少軽くなるよ。
- 四則演算する手間が省ける。
- 入れ子に出来たり、ミックスイン・継承が出来るからcssの入力量が減るよ。
- コンパイルする手間が増えるよ。
- コンパイルしないとcssに反映されないから、ブラウザをちょいちょい確認しながら作業する時めんどくさいよ。
ファイル保存(更新)されたら、SASSを自動的にcssに変換してくれるような常駐監視マクロを用意すれば良くない？
常駐監視マクロがあれば、デメリット面が大幅に軽減できる。
windows起動後に毎回起動しなければいけないけれど…
windows起動時に自動的に実行されるようにしておけば、その手間も省ける。
そういえば仕事でSASSやってた時、コンパイラーと常駐監視マクロの２つを貰った覚えあるな。
その当時は、SASSの有用性をあまり理解してなかったから持って帰ってきてないけれど…
常駐監視マクロの方はディレクトリーだか何かを設定しないとちゃんと動かないとかで、複数のプロジェクトに関わってて色々忙しかったから常駐監視マクロは使わず、手動でコンパイラーをクリックしててめんどくさぁ！ってなってたっけ…
まぁ、常駐監視マクロがあるなら入れても良いし入れなくても良いかなぁってところかな。
導入の手間があるから、自分一人でやる分にはあまりメリットを感じないけれど
複数人でやるなら、わかっている人が導入を手伝えば導入コストが抑えられるけれど…
わかっている人が導入を手伝う分のコストが発生するようになるんだよね…
一長一短…
勉強がてら、ポートフォリオサイトに導入してみるかな。
Sassの書き方「SASS」「SCSS」とは？
Sassには「SASS」「SCSS」という2種類の書き方があります。
SASS記法について
SASS記法の大きな特徴は、セミコロンや波括弧を使用しないことです。そのため、コードが簡略化され、書く際の負担が少ないというメリットがあります。
SASS記法で書かれたSassファイルの拡張子は「.sass」です。
SCSS記法について
SCSS記法の特徴は、書き方がCSSに似ていることです。CSSのようにネストを使用するため、CSSに触れたことのある人なら直感的に書くことができます。そのため、SCSSのほうが一般的に普及しています。
ファイルの拡張子は「.scss」になります。
SASSの導入(インストール)
SASSの記事を読み進めていくと、どんどん深くなってくるので
SASSの導入は、また別の記事で…
jQueryについて
仕事で頻繁に乱用していたjQuery
今回は、jQueryを導入するか、しないかについての検討
jQueryは、JavaScriptの「ライブラリ」です。
「jQueryを使えば、あんなことやこんな事が簡単に実装できます！」
「素晴らしいね！」
「じゃぁ、今すぐ入れるべきだよ！」
って、そんな単純な話ではない。
jQueryを導入しても、jQueryの機能を全く利用しなければjQueryを入れる意味が皆無であり、無駄に通信コストが発生してページが重くなるだけになってしまう。
ある程度の事は、jQueryが無くてもjs単体で実装出来るというか…
jQuery自体がjsで出来ているので、jQueryに出来てjsに出来ない事は無い。
現状ネイティブjsである程度実装出来ているので、そこにわざわざjQueryを入れるメリットがあるのか？って話
んまぁ…、私個人のポートフォリオサイトだし、
んまぁ…、入れても良いんだけどね…
出来れば、あんま要らない物入れたくないじゃん？
入れても良いし、入れなくても良い。
勉強がてら使えそうな気もするし、そんなことで悩んでる時間が勿体ない。
なので、入れちゃう！
まっ、導入は簡単だしね。
とりあえず入れといて、要らなければ後で消せば良いだけだしね。
まぁ、何故今jQueryの導入で悩んでたかっていうとメインビューのスライダーを[ネイティブjsで書くか]、[jQueryを使って作るか]、で悩んでた。
まぁ、どちらでも作れるちゃ作れる。
ただ、jQueryのメリット分を有用活用しなければjQueryの導入する意味ないが無い。(通信コストが増えるだけ)
一度、jQueryの中身も１～１０までちゃんと見てみようかな。
今日、これからの作業
- jQueryの導入
- sassの導入
- スライダーの作成
- サーバーサイト・DB・Smartyは、モックが完成してから！
とりま、こんな感じ、
アディオス！